When the try to store is the tableListWinner array into the getWinnerSubTab state using the setGetWinnerSubTab method then i got the error of infinite loop when call the seState. How can i solve this issue. please provide me the solution. i want to store this array into the getWinnerSubTab state here.
Code
import { Box, Grid, makeStyles } from "@material-ui/core";
import React, { useState, useCallback, useEffect } from "react";
import LeaderboardMenu from "./leaderboardMenu";
import LeaderboardSubMenus from "./leaderboardSubMenus";
import LeaderboardWinnersStage from "./leaderboardWinnersStage";
import LeaderboardWinnersTable from "./leaderboardWinnersTable";
import { EVENTS } from "../common/utils/constant";
import { useDispatch, useSelector } from "react-redux";
import {
selectLeaderboardDetails,
selectLeaderboardRanks,
} from "./slices/leaderboardSlice";
const useStyles = makeStyles((theme: any) => ({
rootContainer: {
width: "100%",
backgroundColor: "",
},
screnContainer: {
...theme.common.screenContainer,
padding: "2rem 1rem 1rem 1rem",
[theme.breakpoints.down("sm")]: {
backgroundColor: "#0E0E0E",
padding: "0rem 0rem 0rem",
},
},
}));
function Leaderboard() {
const classes = useStyles();
const dispatch = useDispatch();
const leaderboardDetails = useSelector(selectLeaderboardDetails);
const [getWinnerSubTab, setGetWinnerSubTab] = useState([]);
const [activeView, setActiveView] = useState("table_with_stage"); // table_with_stage || table
const [activeTab, setActiveTab] = useState(0);
const [activeSubTab, setActiveSubTab] = useState(0);
console.log("leaderboardDetails-----------", leaderboardDetails);
useEffect(() => {
dispatch({ type: EVENTS.GET_LEADERBOARD, payload: {} });
}, []);
useEffect(() => {
console.log(leaderboardDetails, 5655444444);
let tabs = getTabList();
console.log(tabs, 214155785623354);
if (tabs.length) {
setActiveTab(tabs[0]?.id);
}
}, [leaderboardDetails]);
useEffect(() => {
console.log(activeTab, 562144452, "[DIAGNOSE_ACTIVE_TAB_ID] activeTab useEffect",activeTab);
let tabs = getSubTabList();
console.log("DIAGNOSE_ACTIVE_TAB_ID tabs", tabs);
console.log(tabs, 214155785623354);
if (tabs.length) {
console.log("DIAGNOSE_ACTIVE_TAB_ID tabslength", "YES");
setActiveSubTab(tabs[0]?.id);
}
}, [activeTab]);
useEffect(() => {
console.log("[activeSubTab]", activeSubTab);
if (activeSubTab) {
dispatch({
type: EVENTS.GET_LEADERBOARD_RANK,
payload: { leader_board_id: activeSubTab },
});
// dispatch({
// type: EVENTS.GET_LEADERBOARD_WINNER,
// payload: { leader_board_id: activeSubTab },
// });
}
}, [activeSubTab]);
const renderView = useCallback(() => {
if (activeView === "table_with_stage") {
return (
<Grid
container
style={{ border: "0.5px solid rgb(214 208 208", borderRadius: "4px" ,marginTop:'2%'}}
>
<Grid
item
md={6}
sm={12}
style={{
// padding: "2rem",
border: "0.5px solid rgb(214 208 208",
}}
>
<LeaderboardWinnersStage />
</Grid>
<Grid item md={6} sm={12}>
<LeaderboardWinnersTable />
{/* <p style={{color:'red'}}>LeaderboardWinnersTable</p> */}
</Grid>
</Grid>
);
}
return (
<Box>
<LeaderboardWinnersTable />
<p style={{ color: "blue" }}>LeaderboardWinnersTable</p>
</Box>
);
}, [activeView]);
const getTabList = () => {
const leaderboardList = leaderboardDetails?.leaderboards;
let tabList = [];
let tableListWinner = [];
if (leaderboardList?.length) {
leaderboardList.map((item) => {
console.log('item-WINNER_DATA',item)
if (
!tabList.includes(item?.leaderboard_type) &&
item?.leaderboard_type !== ""
) {
tabList.push(item?.leaderboard_type);
tableListWinner.push({
id: item.leaderboard_type,
appId: item.leaderboard_type,
label: item.leaderboard_type,
l_id:item.leaderboard_id
})
}
});
}
setGetWinnerSubTab(tableListWinner);
console.log("DIGNOSE_TABS: tableListWinner", tableListWinner);
let tabListMenus = tabList.map((item) => {
let icon = "";
let selectedIcon = "";
if (item === "Hourly") {
icon = "hour.svg";
selectedIcon = "selectedhour.svg";
} else if (item === "Daily") {
icon = "daily.svg";
selectedIcon = "selecteddaily.svg";
} else if (item === "Weekly") {
icon = "daily.svg";
selectedIcon = "selecteddaily.svg";
} else if (item === "Monthly") {
icon = "monthly.svg";
selectedIcon = "selectedmonthly.svg";
}
return {
id: item,
appId: item,
label: item,
icon: icon,
selectedIcon: selectedIcon,
};
});
console.log("tabListMenus-1-1-1-1-1-1", tabListMenus);
// Add the new object to the tabListMenus
if (tabListMenus.length > 0) {
tabListMenus.push({
id: "Winner",
appId: "Winner",
label: "Winner",
icon: "winner.svg",
selectedIcon: "selectedwinner.svg",
});
}
console.log("tabListMenus2-2-2-2-2", tabListMenus);
return tabListMenus;
};
const getSubTabList = () => {
const leaderboardList = leaderboardDetails?.leaderboards;
console.log(
"getSubTabList-leaderboardList:",
JSON.stringify(leaderboardList)
);
let tabList = [];
let tabListMenus: any = [];
if (leaderboardList?.length) {
leaderboardList.map((item: any) => {
if (
!tabList.includes(item?.leaderboard_title) &&
item?.leaderboard_title !== "" &&
item?.leaderboard_type === activeTab
) {
console.log("item?.leaderboard_title tabList", !tabList);
console.log("item?.leaderboard_title IN IF", item?.leaderboard_title);
console.log("item?.leaderboard_title IN IF activeTab", activeTab);
tabList.push(item.leaderboard_title);
tabListMenus.push({
id: item.leaderboard_id,
appId: item.leaderboard_title,
label: item.leaderboard_title,
});
}
});
}
console.log(tabList, tabListMenus, 268542511);
// if (tabList.length) setActiveSubTab(tabList[0]);
// tabList.map((item: any) => {
// tabListMenus.push({
// id: item,
// appId: item,
// label: item,
// });
// });
return tabListMenus;
};
console.log("...getSubTabList()", [...getTabList()]);
return (
<div className={classes.rootContainer}>
<div className={classes.screnContainer}>
<LeaderboardMenu
menus={[...getTabList()]}
menu={activeTab}
handleMenuChange={(active) => {
console.log("DIAGNOSE_ACTIVE_TAB_ID handleMenuChange:", active);
setActiveTab(active);
}}
>
<LeaderboardSubMenus
menus={[...getSubTabList()]}
menu={activeSubTab}
handleMenuChange={(active) => {
console.log(active, 69666663355);
setActiveSubTab(active);
}}
>
{renderView()}
</LeaderboardSubMenus>
</LeaderboardMenu>
</div>
</div>
);
}
export default Leaderboard;
