import NoteItem from "@/app/[language]/note/components/NoteItem"; import useGetNote from "@/app/[language]/note/query/useGetNote"; import { NoteLoading } from "@/components/Loading"; import { useNoteStore } from "@/store/Stores"; import { observer } from "mobx-react-lite"; import { useLayoutEffect, useState } from "react"; import { Col, ListGroup, Row } from "reactstrap"; import { useWindowArea } from "taehui-ts/fe-utilities"; export default observer(() => { const { wantAvatar, viewUnit } = useNoteStore(); const { data: { notes }, isFetched: isNoteLoaded, } = useGetNote(); const { windowLength } = useWindowArea(); const [table, setTable] = useState(1); useLayoutEffect(() => { setTable(windowLength < 992 ? 1 : 2); }, [windowLength]); return ( <Row className="g-0"> {[...Array(table).keys()].map((i) => { if (isNoteLoaded) { return ( <Col className="m-1" key={i}> <ListGroup> {notes .slice((viewUnit / table) * i, (viewUnit / table) * (i + 1)) .map( ({ noteID, artist, title, genre, levelText, level, highestCount, totalCount, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} highestCount={highestCount} totalCount={totalCount} wantAvatarName={wantAvatar} /> ), )} </ListGroup> </Col> ); } return ( <Col className="m-1" key={i}> <ListGroup> <NoteLoading loadingCount={viewUnit / table} /> </ListGroup> </Col> ); })} </Row> ); });