React.js: Customize sidebar menu based on API response - reactjs

Question

I'm trying to customize the sidebar navigation menu of my app based on a JSON response
The concept I'm trying to pattern my code to is using React Context and React Hooks
From my Header.js (which is my top navigation)
import {
useUserDispatch,
customizeSidebar
} from "../../context/UserContext";
var userDispatch = useUserDispatch();
useEffect(() => {
if( selectedProduct.trim() == "remittance" ){
setIsRemLabelHidden(true)
} else if( selectedProduct == "inward" ){
customizeSidebar(userDispatch, "91454020-C1AC-446C-A1CA-C68F6FDBB053", props.history)
setIsRemLabelHidden(false)
}
}, [selectedProduct]);
I trigger customizeSidebar function which is found in my UserContext.js
export {
UserProvider,
useUserState,
useUserDispatch,
customizeSidebar,
};
function customizeSidebar(dispatch, profileId, history){
ProfileMaintenanceService.retrieveProfileDetails(profileId)
.then((response) => {
console.log("customizeSidebar response.data ", response.data)
}).catch((err) => {
// check first if api is down
console.log("customizeSidebar - catch err.response.data >>> ", err.response.data)
})
}
As seen above, I can now get the JSON response in the then statement.
My question would be, how do I pass the JSON response, for instance I saved it in a state. How do I pass it to other component?
Specifically in my Sidebar.js
import React, { useState, useEffect } from "react";
import { Drawer, IconButton, List } from "#material-ui/core";
import {
SwapHoriz as SwapHorizIcon,
Inbox as InboxIcon,
PresentToAll as PresentToAllIcon,
Help as HelpIcon,
ListAlt as ListAltIcon,
Language as LanguageIcon,
Description as DescriptionIcon,
List as ListIcon,
Money as MoneyIcon,
Face as FaceIcon,
TransferWithinAStation as TransferWithinAStationIcon,
AttachMoney as AttachMoneyIcon,
PersonPinCircle as PersonPinCircleIcon,
Home as HomeIcon,
ArrowBack as ArrowBackIcon,
Edit as EditIcon
} from "#material-ui/icons";
import { useTheme } from "#material-ui/styles";
import { withRouter } from "react-router-dom";
import classNames from "classnames";
import useStyles from "./styles";
import SidebarLink from "./components/SidebarLink/SidebarLink";
import {
useLayoutState,
useLayoutDispatch,
toggleSidebar
} from "../../context/LayoutContext";
import Dot from "./components/Dot";
function Sidebar({ location }) {
var classes = useStyles();
var theme = useTheme();
var { isSidebarOpened } = useLayoutState();
var layoutDispatch = useLayoutDispatch();
var [isPermanent, setPermanent] = useState(true);
var structure = [
{ id: 0,
label: "Dashboard",
link: "/app/dashboard",
icon: <HomeIcon /> },
{
id: 1,
label: "Inward",
link: "/app/inward",
icon: <InboxIcon />,
children: [
{ label: "PESONet", link: "/app/inward/pesonet", icon: <Dot size="small" color="primary" /> },
{ label: "PESONet Inquiry", link: "/app/inward/pesonetinquiry", icon: <Dot size="small" color="primary" /> },
{ label: "PDDTS", link: "/app/inward/pddts", icon: <Dot size="small" color="primary" /> },
// { label: "PDDTS Inquiry", link: "/app/inward/pddtsinquiry" },
{ label: "SWIFT", link: "/app/inward/swift", icon: <Dot size="small" color="primary" /> },
// { label: "SWIFT Inquiry", link: "/app/inward/swiftinquiry" },
{ label: "Philpass", link: "/app/inward/philpass", icon: <Dot size="small" color="primary" /> },
],
},
// {
// id: 2,
// label: "Outward",
// link: "/app/outward",
// icon: <PresentToAllIcon />,
// children: [
// { label: "Inward", link: "/app/transfers/inward", icon: <InboxIcon /> },
// { label: "Outward", link: "/app/transfers/outward", icon: <PresentToAllIcon /> },
// ],
// },
{ id: 3, type: "divider" },
{
id: 4,
label: "Proof List",
link: "/app/prooflist",
icon: <ListAltIcon />,
children: [
{ label: "Proof Web", link: "/app/prooflist/web", icon: <LanguageIcon /> },
{ label: "Proof Others", link: "/app/prooflist/others", icon: <ListIcon /> },
],
},
{ id: 5, label: "Miscellaneous", link: "/app/misc", icon: <DescriptionIcon /> },
{
id: 6,
label: "RPS",
link: "/app/rps",
icon: <MoneyIcon />,
children: [
{ label: "Client Maintenance", link: "/app/rps/clientmaintenance", icon: <FaceIcon /> },
{ label: "Process SFTP", link: "/app/rps/sftp", icon: <TransferWithinAStationIcon /> },
{ label: "Process PESONet", link: "/app/rps/pesonet", icon: <AttachMoneyIcon /> },
{ label: "Override Enrollment", link: "/app/rps/overrideenrollment", icon: <PersonPinCircleIcon /> },
],
},
{ id: 7, label: "Message Converter", link: "/app/message", icon: <EditIcon /> },
];
useEffect(function() {
window.addEventListener("resize", handleWindowWidthChange);
handleWindowWidthChange();
return function cleanup() {
window.removeEventListener("resize", handleWindowWidthChange);
};
});
return (
<Drawer
variant={isPermanent ? "permanent" : "temporary"}
className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
})}
classes={{
paper: classNames({
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
}),
}}
open={isSidebarOpened}
>
<div className={classes.toolbar} />
<div className={classes.mobileBackButton}>
<IconButton onClick={() => toggleSidebar(layoutDispatch)}>
<ArrowBackIcon
classes={{
root: classNames(classes.headerIcon, classes.headerIconCollapse),
}}
/>
</IconButton>
</div>
<List className={classes.sidebarList}>
{structure.map(link => (
<SidebarLink
key={link.id}
location={location}
isSidebarOpened={isSidebarOpened}
{...link}
/>
))}
</List>
</Drawer>
);
function handleWindowWidthChange() {
var windowWidth = window.innerWidth;
var breakpointWidth = theme.breakpoints.values.md;
var isSmallScreen = windowWidth < breakpointWidth;
if (isSmallScreen && isPermanent) {
setPermanent(false);
} else if (!isSmallScreen && !isPermanent) {
setPermanent(true);
}
}
}
export default withRouter(Sidebar);
Also, should I save the json data on the state? Or on the context. If on the context, how?
Thanks in advance for those who would help.

Answer 1

Try this
use state. Make the customizeSidebar return the response, and call this kind of code in your SideBar component :
const [sideBar, setSideBar] = useState({})
useEffect(() => {
const sidebar = customizeSidebar()
setSideBar(sidebar)
}, [])
then below the code call your sidebar using the sideBar state, the sideBar will re-render with the new sidebar responded.
also maybe you want to put a loading animation while waiting for the sidebar result. I don't get the idea why you need to put it in context but the solution should works IMO.