掲示板ページ名の適用

もともと1ページしか見られなかった掲示板

ページ名で投稿ページ全体を表示できます。

また、現在のページでは、対応するページ番号の色が変更されます。

ページリストの両側の矢印をクリックすると、10ページに戻ることができます。

最後のページをめくると最後のページしか見えません。

💻 container

USStateを使用して、最初のページと現在のページの最後のページの値を受信します。

最後のページには10の投稿が含まれているので、fetchBoardsCountで投稿総数を受信した後、投稿を10に分けてアップロードすると、最後のページ番号がわかります。 const [startPage, setStartPage] = useState(1); const [current, setCurrent] = useState(1); const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);

「ページ」(Page)をクリックし、 useQueryを使用してデータに格納します。

const { data, refetch } = useQuery(FETCH_BOARDS, { variables: { page: startPage }, }); const { data: dataBoardsCount } = useQuery(FETCH_BOARDS_COUNT); ページ番号をクリックすると、最初の10ページを作成し、後の10ページで関数をクリックします。 function onClickPrevPage() { if (startPage === 1) return; setStartPage((prev) => prev - 10); setCurrent(current - 10); } function onClickNextPage() { if (startPage + 10 > lastPage) return; setStartPage((prev) => prev + 10); setCurrent(current + 10); } function onClickPage(event) { refetch({ page: Number(event.target.id), }); // setIsAct(true); setCurrent(Number(event.target.id)) }

💻 presenter

ページ番号は一々数字を書くのではなく、Array,map,indexで10個の数字を生成します。 id現在のページを文字列として指定します。 対応するクリック関数を追加します。 <PageNumber> <ArrowPhoto onClick={props.onClickPrevPage}> <img src="/images/listleft.png" /> </ArrowPhoto> {new Array(10).fill(1).map( (_, index) => props.startPage + index <= props.lastPage && ( <Page key={props.startPage + index} onClick={props.onClickPage} id={String(props.startPage + index)} // isAct={props.isAct} current={props.startPage + index===props.current}> {props.startPage + index} </Page> ) )} <ArrowPhoto onClick={props.onClickNextPage}> <img src="/images/listright.png" /> </ArrowPhoto> </PageNumber> 現在のページに対応するページ番号のみが赤であることを条件付きレンダリングで指定します。

💻 styles

export const Page = styled.div`
  margin-right: 10px;
  margin-left: 10px;
  cursor: pointer;
  color:${(props)=> (props.current === true ? "red" : "black")}
`;