DEV Community: Hisashi Ishihara

React | Monitor multiple loading status on the same page

Hisashi Ishihara — Thu, 22 Aug 2024 06:26:56 +0000

Introduction

When developing a data-driven app, we often need to create a dashboard page composed of multiple data sources. For instance, in a finance app, charts displaying monthly sales trends, expenses, and cash balances are called as separate components on the same page.

In such cases, you might want to display a "Loading" UI for the entire page until all the data has been fully loaded...just like this;

There could be several approaches to achieve this, but I'd like to introduce a method that leverages the Context API.

Thinking process

If specific components are only used on specific pages, the issue can seemingly be solved simply by managing state alongside those pages.
However, in this case, the components containing the fetch functions are reused across multiple screens. Therefore, it’s preferable to have a mechanism where each page autonomously detects and monitors the fetch progress according to the number of components present.

Solution

Concept

Leverage the Context API. Establish a state that detects the number of loading processes and monitors them until completion, wrapping the entire app with this state.
The general structure is as follows: The LAYOUT layer defines the UI according to the loading status, while each COMPONENT layer reports its loading status via the Context API. The overall app then monitors these statuses. Nothing specific is assigned to the PAGE layer, meaning that there is no page-specific management like "Page X has Y number of fetch functions."

<APP>
   <LAYOUT>
       <PAGE>
          <COMPONENT>

After setting up the Context API (following steps #1-3 below), all you need to do is execute startLoading and stopLoading within the fetch functions, with no additional setup required, allowing the app to scale while being easy to maintain. I believe this is a highly scalable and simple approach for maintenance.

Step

#1. Set up context API

Call the context variable and states to count loadings;

// Create the context
const LoadingContext = createContext();

// Create a provider component
export const LoadingProvider = ({ children }) => {
  const [loading, setLoading] = useState(true);
  const [loadingCount, setLoadingCount] = useState(0)
  ...}

Then, make some simple functions to watch the progress of loadings

...
  const startLoading = useCallback(() => {
    setLoadingCount((count) => count + 1);
  }, []);

  const stopLoading = useCallback(() => {
    setLoadingCount((count) => count - 1);
  }, []);

  useEffect(() => {
    setLoading(loadingCount > 0); // if all the loadings is completed (loadingCount=0), 'loading' gets false.
  }, [loadingCount]);
  ...

Return the provider and pass the states and functions

...
 const value = useMemo(
    () => ({loading, startLoading, stopLoading,}),
    [loading, startLoading, stopLoading]);

  return (
    <LoadingContext.Provider value={value}>{children}</LoadingContext.Provider>
  );};

// Custom hook to use the LoadingContext
export const useLoading = () => useContext(LoadingContext);

#2. At the App.jsx, wrap the entire application or specific page

const App = ()=>{
    return (
    <LoadingProvider>
        <Layout>
            <Main/> // example
            <Sub/> // example
        </Layout>
    </LoadingProvider>
    )
}

const Main = ()=>{
    return(
    <>
        <ChartComponent type="A">
        <ChartComponent type="B">
        <ChartComponent type="C">
    </>
    )
}

const Sub =()=>{
return(
    <>
        <ChartComponent type="A">
        <ChartComponent type="C">
    </>
    )
}

#3. Set UI effect at the Layout.jsx

import { useLoading } from "YOUR FILE PATH";

const Layout = ({children}) => {
    const { loading } = useLoading();
    const [showLoadingScreen, setShowLoadingScreen] = useState(true);
  const handleCloseLoadingScreen = () => {
    setShowLoadingScreen(false);
  };
    return (
        <>
             {loading && showLoadingScreen && (
        <LoadingScreen onClose={handleCloseLoadingScreen} />)}
        </>
    )
}

const LoadingScreen = ({onClose})=>{
   {/* FOR ESC KEYDOWN */}
      useEffect(() => {
    const handleEsc = (event) => {
      if (event.key === "Escape") {
        onClose();
    }};
    window.addEventListener("keydown", handleEsc);
    return () => {
      window.removeEventListener("keydown", handleEsc);
    };}, [onClose]);

  return(
      <>
      {/* ADD LOADING DISPLAY */} 
      </>
  )
}

#4. At the component where HTTP GET request occurs

...
import { useLoading } from "YOUR FILE PATH";

const ChartComponent =({type})=>{
     const { startLoading, stopLoading } = useLoading();

     useEffect(() => {
    startLoading();
  //...
    //YOUR FETCH FUNCTION
    //...
        stopLoading();
    }
    ,[startLoading, stopLoading])

This article is based on React 18 and it is announced in React 19 that context.provider will be deprecated in the future version.

Quick Guide | MERN Stack Application Development

Hisashi Ishihara — Tue, 04 Jun 2024 20:29:17 +0000

Developing a full-stack application offers a comprehensive understanding of application architecture. In this article, we will explore the development process of a full-stack application using the MERN stack, one of the most popular tech stacks today. This article will provide a hands-on guide for the steps to build a MERN stack application from scratch.
This article will aim to be as concise as possible to focus on providing an overview. So, let's get started!!🚀

Introduction

This tutorial will begin with setting up the server using Node.js and Express.js (Step 1), connecting to MongoDB (Step 2), and creating APIs (Steps 3 and 4). Next, we will work on the frontend with React.js to retrieve data through the server and render it in the browser (Steps 5 and 6)

File structure

frontend (folder)
backend (folder)
config.env
.gitignore (*to ignore .env and node_modules)

Step1 : Set up server with Node.js

Go to backend folder

$ cd backend

Create json file to set up server

$ npm init

Install packages

$ npm install express cors

Create index.js in backend folder and configure server

import express from "express";
const app = express();
const PORT = 5500;

app.use(cors());
app.use(express.json());
app.listen(PORT, () => {
  console.log(`APP is listning to port :${PORT}`);
});

Make sure package.json file contains below;
I recommend using nodemon.

 "type": "module",
 "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },

Then, run the npm

$ npm run start

$ npm run dev

Finally, you will get

Step2 : Connect mongoDB

Firstly, go to mongoDB website and create a cluster.

Install dependencies.
*'dotenv' is used to retrieve environment variables from an env file. This helps to hide passwords and API keys (such as the MongoDB password) when you push this project to a public repository on GitHub. Any information in the env file is ignored by Git in this case.

$ npm install mongoose dotenv

Write mongoDB password on config.env

PASSWORD=************

In index.js,

import mongoose from "mongoose";
import dotenv from "dotenv";
dotenv.config({ path: "../config.env" });
.....
mongoose
  .connect( `mongodb+srv://<YOUR USER NAME>:${process.env.PASSWORD}@cluster0.jwm7sal.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`,
    {}
  )
  .then(() => {
    console.log("connected with DB successfully!");
  })
  .catch((error) => {
    console.log(error);
  });

If you're connected with mongoDB, you will see the console message 'connected with DB successfully!!'. Congratulation🎉

Step3 : Define Data model and create API

In this step, you will write code to interact with DB. In this tutorial, folders are divided into the following three;

model : to define schema
route : to define endpoint
controller : to define function (action) based on particular HTTP request Then, the folder structure looks like;

model

Under the model folder, create testModel.js;

import mongoose from "mongoose";
//   Shcema
const Schema = mongoose.Schema;
const testSchema = new Schema({
  name: String,
  age: Number,
});
export const Testmodel = mongoose.model("Testmodel", testSchema);

route

Under the route folder, create testRoute.js;

import express from "express";
import * as testController from "../controller/testController.js";
// Define route to execute it
const router = express.Router();
router.get("/", testController.readTests);
router.post("/", testController.createTest);
export default router;

controller

Under the controller folder, create testController.js. All the handlings related to the test collection are here.

import { Testmodel } from "../model/testModel.js";

export const createTest = async (req, res) => {
  try {
    const newTest = await Testmodel.create(req.body);
    res.status(201).json({
      status: "success",
      data: {
        newTest,
      },
    });
  } catch (err) {
    res.status(400).json({
      status: "fail",
      message: err,
    });
  }
};

export const readTests = async (req, res) => {
  try {
    const docs = await Testmodel.find({});
    res.status(201).json({
      status: "success",
      data: {
        docs,
      },
    });
  } catch (err) {
    res.status(400).json({
      status: "fail",
      message: err,
    });
  }
};

Then, give an endpoint which is corresponding to this collection at index.js

import testRoute from "./route/testRoute.js";
.....
app.use("/test", testRoute);

Step 4 : Examine if the API is working

To examine it, this tutorial uses Postman as an API platform.

test 1 : Create a document

Send HTTP post request like below picture and document is now successfully created.

The new document can also be seen on Mongo Atlas;

test 2 : Read documents

Likewise, the documents are read.

Now that we've done the simplest setting up for server & DB. Next, let's build frontend.

Step 5 : Set up React.js

At your root file, create and start react by the command below

$ npx create-react-app frontend
$ cd frontend
$ npm start

(clean up default code on App.js, for the sake of simplicity)

Step 6 : Interact with server

Once react is activated, let's try to connect with the server. Firstly, install axios.

$ npm i axios

Then, at your App.js, import axios and react Hooks;

import React, {useState, useEffect} from "react";
import axios from "axios";

Tap the API we created in Step3 by using useEffect. The retrieved data is stored in the state.

const [testArr, setTestArr] = useState("");

useEffect(() => {
    axios
      .get(`http://localhost:5500/test`)
      .then((res) => {
        setTestArr(res.data.data.docs);
      })
      .catch(console.log("failed"));
  }, []);

Then, try to render it.

  return (
    <>
      <p>{testArr[0].name}</p>
      <p>{testArr[0].age}</p>
    </>
  );

Now the frontend is connected with the server we created and the data is successfully rendered.

This tutorial ends here, but the possibilities for creating your own applications are endless, thanks to i.e. the versatile React Hooks and the flexibility of MongoDB. I hope this provides a clear and comprehensive overview of building an app with the MERN stack.