"use client"; import AvatarItem from "@/app/[language]/hall/components/AvatarItem"; import useGetAbility5KHall from "@/app/[language]/hall/query/useGetAbility5KHall"; import useGetAbility7KHall from "@/app/[language]/hall/query/useGetAbility7KHall"; import useGetAbility9KHall from "@/app/[language]/hall/query/useGetAbility9KHall"; import useGetAtBandHall from "@/app/[language]/hall/query/useGetAtBandHall"; import useGetAtHighestHall from "@/app/[language]/hall/query/useGetAtHighestHall"; import useGetAtStandHall from "@/app/[language]/hall/query/useGetAtStandHall"; import useGetAtTotalHall from "@/app/[language]/hall/query/useGetAtTotalHall"; import useGetLevelHall from "@/app/[language]/hall/query/useGetLevelHall"; import useGetTotalBandHall from "@/app/[language]/hall/query/useGetTotalBandHall"; import useGetTotalHighestHall from "@/app/[language]/hall/query/useGetTotalHighestHall"; import useGetTotalStandHall from "@/app/[language]/hall/query/useGetTotalStandHall"; import useGetTotalTotalHall from "@/app/[language]/hall/query/useGetTotalTotalHall"; import { Hall } from "@/app/[language]/hall/type"; import { useHallStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; const getAvatarItems = (isLoaded: boolean, halls: Hall[]) => { return isLoaded ? halls.map(({ avatarID, avatarName, text }) => ( <AvatarItem key={avatarID} avatarID={avatarID} avatarName={avatarName} text={text} /> )) : [...Array(50).keys()].map((i) => ( <AvatarItem key={i} avatarID="" avatarName="Loading…" text="" /> )); }; export default observer(() => { const { tabPosition, totalTabPosition, atTabPosition, abilityTabPosition, setTabPosition, setTotalTabPosition, setAtTabPosition, setAbilityTabPosition, } = useHallStore(); const t = useTranslations(); const { data: totalTotalHall, isFetched: isTotalTotalHallLoaded } = useGetTotalTotalHall(); const { data: totalHighestHall, isFetched: isTotalHighestHallLoaded } = useGetTotalHighestHall(); const { data: totalStandHall, isFetched: isTotalStandHallLoaded } = useGetTotalStandHall(); const { data: totalBandHall, isFetched: isTotalBandHallLoaded } = useGetTotalBandHall(); const { data: atTotalHall, isFetched: isAtTotalHallLoaded } = useGetAtTotalHall(); const { data: atHighestHall, isFetched: isAtHighestHallLoaded } = useGetAtHighestHall(); const { data: atStandHall, isFetched: isAtStandHallLoaded } = useGetAtStandHall(); const { data: atBandHall, isFetched: isAtBandHallLoaded } = useGetAtBandHall(); const { data: ability5KHall, isFetched: isAbility5KHallLoaded } = useGetAbility5KHall(); const { data: ability7KHall, isFetched: isAbility7KHallLoaded } = useGetAbility7KHall(); const { data: ability9KHall, isFetched: isAbility9KHallLoaded } = useGetAbility9KHall(); const { data: levelHall, isFetched: isLevelHallLoaded } = useGetLevelHall(); const getProperties = (i: number) => ({ className: tabPosition === i ? "active route" : "route", onClick: () => { setTabPosition(i); }, }); const getTotalProperties = (i: number) => ({ className: totalTabPosition === i ? "active route" : "route", onClick: () => { setTotalTabPosition(i); }, }); const getAtProperties = (i: number) => ({ className: atTabPosition === i ? "active route" : "route", onClick: () => { setAtTabPosition(i); }, }); const getAbilityProperties = (i: number) => ({ className: abilityTabPosition === i ? "active route" : "route", onClick: () => { setAbilityTabPosition(i); }, }); return ( <> <Nav tabs> <NavItem> <NavLink {...getProperties(0)}>{t("hallTotalText")}</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(1)}>{t("hallAtText")}</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(2)}>{t("hallAbilityText")}</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(3)}>{t("hallLevelText")}</NavLink> </NavItem> </Nav> <TabContent activeTab={tabPosition}> <TabPane tabId={0}> <Nav tabs> <NavItem> <NavLink {...getTotalProperties(0)}>{t("hallTotal")}</NavLink> </NavItem> <NavItem> <NavLink {...getTotalProperties(1)}>{t("hallHighest")}</NavLink> </NavItem> <NavItem> <NavLink {...getTotalProperties(2)}>{t("hallStand")}</NavLink> </NavItem> <NavItem> <NavLink {...getTotalProperties(3)}>{t("hallBand")}</NavLink> </NavItem> </Nav> <TabContent activeTab={totalTabPosition}> <TabPane tabId={0}> <ListGroup> {getAvatarItems(isTotalTotalHallLoaded, totalTotalHall)} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {getAvatarItems(isTotalHighestHallLoaded, totalHighestHall)} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {getAvatarItems(isTotalStandHallLoaded, totalStandHall)} </ListGroup> </TabPane> <TabPane tabId={3}> <ListGroup> {getAvatarItems(isTotalBandHallLoaded, totalBandHall)} </ListGroup> </TabPane> </TabContent> </TabPane> <TabPane tabId={1}> <Nav tabs> <NavItem> <NavLink {...getAtProperties(0)}>{t("hallTotal")}</NavLink> </NavItem> <NavItem> <NavLink {...getAtProperties(1)}>{t("hallHighest")}</NavLink> </NavItem> <NavItem> <NavLink {...getAtProperties(2)}>{t("hallStand")}</NavLink> </NavItem> <NavItem> <NavLink {...getAtProperties(3)}>{t("hallBand")}</NavLink> </NavItem> </Nav> <TabContent activeTab={atTabPosition}> <TabPane tabId={0}> <ListGroup> {getAvatarItems(isAtTotalHallLoaded, atTotalHall)} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {getAvatarItems(isAtHighestHallLoaded, atHighestHall)} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {getAvatarItems(isAtStandHallLoaded, atStandHall)} </ListGroup> </TabPane> <TabPane tabId={3}> <ListGroup> {getAvatarItems(isAtBandHallLoaded, atBandHall)} </ListGroup> </TabPane> </TabContent> </TabPane> <TabPane tabId={2}> <Nav tabs> <NavItem> <NavLink {...getAbilityProperties(0)}>⑤K</NavLink> </NavItem> <NavItem> <NavLink {...getAbilityProperties(1)}>⑦K</NavLink> </NavItem> <NavItem> <NavLink {...getAbilityProperties(2)}>9K</NavLink> </NavItem> </Nav> <TabContent activeTab={abilityTabPosition}> <TabPane tabId={0}> <ListGroup> {getAvatarItems(isAbility5KHallLoaded, ability5KHall)} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {getAvatarItems(isAbility7KHallLoaded, ability7KHall)} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {getAvatarItems(isAbility9KHallLoaded, ability9KHall)} </ListGroup> </TabPane> </TabContent> </TabPane> <TabPane tabId={3}> <ListGroup>{getAvatarItems(isLevelHallLoaded, levelHall)}</ListGroup> </TabPane> </TabContent> </> ); });