What problems i solved when did big app of a short period of time

#javascript #react #redux

We have a task do Halloween app in no more a week and we did it!

Shork about app: Instagram for the Halloween.

I wanna talk about solved Frontend problems in the app.

I choice Typescript with React and Redux because I have a good experience for this.

App consists of a three layout nodes: #root (for a app), #navbar (bottom navigation bar) and #modal (for a modals and popups).

Problem 1. File structure

Each components have a directory with self styles in components directory in the root app.

For a components of a component I created directory in the component.

In the component I created index.ts file for import and [ComponentName].tsx for a component code for a easy search file in the tab of code editor.

For example:

For a views and hoc I created separate directory too.

Common styles such as Button.module.css or Field.mobule.css in the root directory _styles usage in the project all over. It's so convenient!

Problem 2. Content placeholder

I have a react-content-loader package for this problem and it looks greate! I love it!

Content placeholder is flexible. After avatar and user name loaded placeholder lost for a image only. It image have error load you will see rect-button for a reload try image.

Probler 3. Load content by scroll

Here I think that I solved problem no nicely :( but it work

How do you solve it?

I used useEffect with limit, offset and lock variables

useEffect(() => {
    let limit = 5;
    let offset = 0;
    let lock = true;

    const promise = props.getPublications({limit, offset});

    promise.then(() => {
      offset++;

      lock = false;
    });

    document.addEventListener('scroll', () => {
      if (!lock) {
        if (document.documentElement.offsetHeight < document.documentElement.scrollTop + Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) + 500) {
          lock = true;

          const promise = props.pushPublications({limit, offset});

          promise.then(() => {
            offset++;

            lock = false;
          });
        }
      }
    });
}, []);