Navigation bar status management

Question

I'm trying to use state management to modify my application and make it more versatile. Basically my app is a ReactWeb app with a tableau dashboard embedded and I need to populate a specific route (containing a specific dashboard) in the app by reading a json from the backend specifying the items we want. I need it in two ways: UI project switching allows me to switch between projects via the JWT received from the login attempt via the frontend (once successful) I think the only state that needs to be managed is the navigation bar and its data, which will be rendered relevant path so that only by project/use

P粉334721359 · Answer

Use React Context to control the status of the navigation bar:

§ To define the context and its initial state, create a file called NavbarContext.js.

import React, { createContext, useState } from "react";

export const NavbarContext = createContext();

export const NavbarProvider = ({ children }) => {
  const [navbarData, setNavbarData] = useState([]);

  return (
    
      {children}
    
  );
};

§ Use the NavbarProvider component to surround your application or a target area within your application, this should be done in your main file (i.e. App.js).

import { NavbarProvider } from "./NavbarContext";

function App() {
  return (
    
      {/* Your app components */}
    
  );
}

export default App;

§ Using context to manipulate state, you can modify the navigation bar component accordingly.

import React, { useContext, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { IconContext } from "react-icons";
import { NavbarContext } from "./NavbarContext";
import "./Navbar.css";

function Navbar() {
  const { navbarData, setNavbarData } = useContext(NavbarContext);
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState("Operational Overview");
  const location = useLocation();

  const getPageTitleByUrl = (path) => {
    navbarData.forEach((navItem) => {
      if (navItem.path === path) {
        setPageName(navItem.title);
      }
    });
  };

  useEffect(() => {
    if (location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location, navbarData]);

  return (
    <>
      
        {/* Rest of your code */}
      
    
  );
}

export default Navbar;

§ When receiving JSON data for the navbar (usually after logging in), you can update the navbarData state using the setNavbarData function in the context.

import { useContext, useEffect } from "react";
import { NavbarContext } from "./NavbarContext";

function YourComponent() {
  const { setNavbarData } = useContext(NavbarContext);

  useEffect(() => {
    // Fetch your JSON data from the backend
    const fetchData = async () => {
      try {
        const response = await fetch("/api/navbarData");
        const data = await response.json();
        setNavbarData(data); // Update the navbarData state with the fetched data
      } catch (error) {
        console.log("Error fetching data:", error);
      }
    };

    fetchData();
  }, [setNavbarData]);

  return Your component content;
}

export default YourComponent;

Updating the navbarData state using setNavbarData now causes the navbar component to re-render, ultimately causing the updated data to be displayed in the navbar.

React Router requires the correct setup, and the correct dependencies must be imported into your code. Make a note to verify that these steps have been completed.