Use React Context to manage ‘global’ state

Here’s the React document
Here’s the code for AuthContext.js.

User Provider and Consumer of Context

_app.js wraps children with AuthProvider

Use Effect hook to ensure a proper fetching happens

What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.
The effect hook lets you perform side effects in function components:

A loading spinner to make the loading process clear and nice

I used the npm package react-loading to render a loading animation.

The component will have a state to decide whether to show the loading animation. When a blocking process is started or stopped, the state gets toggled.
Have a look at TopBar.js and you’ll get what I mean.

Here’s the handler of Log Out button.

1
2
3
4
5
onClick={async () => {
               this.setState(() => ({ loggingOut: true }));
               await logoutHandler();
               this.setState(() => ({ loggingOut: false }));
             }}

Here’s how this.state.loggingOut decides whether to show the loading animation:

1
2
3
4
5
6
7
8
<>
        {this.state.loggingOut && (
          <PageLoading message='TripTime is logging you out. See you soon:)' />
        )}
        <AuthContext.Consumer>
              {/*the function to render the component*/}
        </AuthContext.Consumer>
</>

this.state.loggingOut has to be checked outside the consumer part as it needs this to be the TopBar instance.