"use client"; import AvatarItem from "@/hall/AvatarItem"; import { Hall } from "@/hall/Hall"; import useGetAbility5KHall from "@/hall/useGetAbility5KHall"; import useGetAbility7KHall from "@/hall/useGetAbility7KHall"; import useGetAbility9KHall from "@/hall/useGetAbility9KHall"; import useGetAtBandHall from "@/hall/useGetAtBandHall"; import useGetAtHighestHall from "@/hall/useGetAtHighestHall"; import useGetAtStandHall from "@/hall/useGetAtStandHall"; import useGetAtTotalHall from "@/hall/useGetAtTotalHall"; import useGetLevelHall from "@/hall/useGetLevelHall"; import useGetTotalBandHall from "@/hall/useGetTotalBandHall"; import useGetTotalHighestHall from "@/hall/useGetTotalHighestHall"; import useGetTotalStandHall from "@/hall/useGetTotalStandHall"; import useGetTotalTotalHall from "@/hall/useGetTotalTotalHall"; import { AvatarLoading } from "@/Loading"; import { useHallStore } from "@/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; const getAvatarItems = (halls: Hall[]) => { return halls.map(({ avatarID, avatarName, text }) => ( <AvatarItem key={avatarID} avatarID={avatarID} avatarName={avatarName} text={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> {isTotalTotalHallLoaded ? ( getAvatarItems(totalTotalHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {isTotalHighestHallLoaded ? ( getAvatarItems(totalHighestHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {isTotalStandHallLoaded ? ( getAvatarItems(totalStandHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={3}> <ListGroup> {isTotalBandHallLoaded ? ( getAvatarItems(totalBandHall) ) : ( <AvatarLoading loadingCount={50} /> )} </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> {isAtTotalHallLoaded ? ( getAvatarItems(atTotalHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {isAtHighestHallLoaded ? ( getAvatarItems(atHighestHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {isAtStandHallLoaded ? ( getAvatarItems(atStandHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={3}> <ListGroup> {isAtBandHallLoaded ? ( getAvatarItems(atBandHall) ) : ( <AvatarLoading loadingCount={50} /> )} </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> {isAbility5KHallLoaded ? ( getAvatarItems(ability5KHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {isAbility7KHallLoaded ? ( getAvatarItems(ability7KHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {isAbility9KHallLoaded ? ( getAvatarItems(ability9KHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> </TabContent> </TabPane> <TabPane tabId={3}> <ListGroup> {isLevelHallLoaded ? ( getAvatarItems(levelHall) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> </TabContent> </> ); });