Gestion de l'état de la barre de navigation

Question

J'essaie d'utiliser la gestion des états pour modifier mon application et la rendre plus polyvalente. Fondamentalement, mon application est une application Web React avec un tableau de bord intégré et je dois remplir un itinéraire spécifique (contenant un tableau de bord spécifique) dans l'application en lisant un json depuis le backend spécifiant les éléments souhaités.

J'en ai besoin de deux manières :

Le changement de projet UI me permet de basculer entre les projets JWT reçu lors d'une tentative de connexion via le frontend (après succès) Je pense que le seul état qui doit être géré est la barre de navigation et ses données, qui restitueront les chemins pertinents et permettront ainsi des tableaux de bord pertinents uniquement par projet/utilisateur.

Voici le code de ma barre de navigation :

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import "./Icons/p_logo_color.png";
import Persona from "./Icons/Persona.svg";
import Logout from "./Icons/Logout.svg";
//someting





//Navbar function
function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState('Operational Overview');
  const location = useLocation();
  

  

  const getPageTitleByUrl = (path) => {
    NavbarData.filter((navItem) => {
    
      if(navItem.path === path) {
        setPageName(navItem.title);
      }
     return true; 
    } )
    


  };

  const userConfigPageTitle = (path) => {
    setPageName("User Information");

  }

  

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

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="hamburger" onClick={showSidebar} />
          </Link>

          <div className="criminal-records">Elecciones Guatemala |</div> 
          <div className="pageTitle"><h1>{pageName}</h1></div>

          <>
          <div><img className="userIcon" src={Persona} alt="persona" /> </div>
          <div className="userButton">User123#</div>
          </>

          <Link to='/' className="logout-button">
          <div><img className="logoutIcon" src={Logout} alt="persona" /> </div>
          <div className="logoutButton">Logout</div> 
          </Link>
          
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            <li className="navbar-toggle">
          
            </li>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
        
                  <span className="navbutton-icon">{item.icon}</span><span className="navbutton-text" >{item.title}</span>
                    
                    
                  </Link>
                  
                </li>
                
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

Voici NavbarData :

import React from 'react'



import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import bars from './Icons/bars.svg';
import simulation from './Icons/simulation.svg';
import fraud from './Icons/fraud.svg';
import deployForNow from './Icons/Profiles.svg';
import Planning from './Icons/plan.svg';
import deployment from './Icons/layer1.svg';
import barswithperson from './Icons/barswithperson.svg'





export const NavbarData = [
    {
        title: 'Simulación',
        path: '/monitoringoverview',
        icon: <img  src={simulation} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Empadronados",
        path: "/performancequality",
        icon: <img src={barswithperson} alt="" />,
        cName: 'nav-text'
    }


]

Donc, fondamentalement, ce dont j'ai besoin est de connecter le sélecteur déroulant pour modifier les données structurées json à l'intérieur de NavbarData et de définir chacune de ces modifications comme un état. Donc, puisqu'il s'agit d'une tâche de gestion d'état très simple, je souhaite la résoudre en utilisant React Context, comment puis-je faire cela ?

Merci d'avance !

Answer 1

Utilisez React Context pour contrôler l'état de la barre de navigation :

§ Pour définir le contexte et son état initial, créez un fichier appelé NavbarContext.js.

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

export const NavbarContext = createContext();

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

  return (
    <NavbarContext.Provider value={{ navbarData, setNavbarData }}>
      {children}
    </NavbarContext.Provider>
  );
};

§ Utilisez le composant NavbarProvider pour entourer votre application ou une zone cible au sein de votre application, cela doit être fait dans votre fichier principal (c'est-à-dire App.js).

import { NavbarProvider } from "./NavbarContext";

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

export default App;

§ En utilisant le contexte pour manipuler l'état, vous pouvez modifier le composant de la barre de navigation en conséquence.

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 (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        {/* Rest of your code */}
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

§ Lors de la réception de données JSON pour la barre de navigation (généralement après la connexion), vous pouvez mettre à jour l'état de navbarData à l'aide de la fonction setNavbarData dans le contexte.

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 <div>Your component content</div>;
}

export default YourComponent;

La mise à jour de l'état de navbarData à l'aide de setNavbarData entraîne désormais le nouveau rendu du composant navbar, provoquant finalement l'affichage des données mises à jour dans la barre de navigation.

React Router nécessite la configuration correcte et les dépendances correctes doivent être importées dans votre code. Prenez note pour vérifier que ces étapes ont été effectuées.