[TIL+DevLog]多種の機能2021と12/12を実現

今日作った

ArtListフィルタリングの実施

作品リストにフィルタエレメントを作成し、作品リストでフィルタハンドルをpropsに下げ、フィルタの交換を要求します.

ArtList賛の実施

最初はアートリストコンポーネントに作品カタログを直接送るようにしていましたが、これではHeartの状態を単独で管理することはできないので、それぞれの作品をコンポーネントとして出していました.

ArtDetail賛の実施

この部分は作者の詳細ページの賛と同じように体現されている.useEffectは、この作品のlike配列にlocalStorageのuserInfoのIDが含まれているかどうかに基づいて、賛状態をboolean値に変更し、このボタンをクリックしてaioxからdbの値の変更を要求し、賛状態を変更して再アップロードさせる.

  useEffect(() => {
    // axios 요청
    const userInfo = localStorage.getItem('lumiereUserInfo');
    instance
      .get<ArtistDetailType>(
        `/artists/${window.location.href.split('artistdetail/')[1]}`,
      )
      .then((res) => {
        setArtistInfo([res.data].flat());
        setIsLiked(
          !![res.data][0].artistDetail.likes.find(
            (el) => el === JSON.parse(userInfo || '{}')._id,
          ),
        );
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

すべてのページ名

「react-js-pagation」ライブラリを使用してページングを実現しました.サーバにaxiosリクエストを発行します.

このようにして、現在のページとページ全体を受信し、以下のコンポーネントとして簡単に体現する.やっぱりライブラリは便利

import Pagination from 'react-js-pagination';
import { PaginatorWrap } from './styled';

interface GreetingProps {
  curPage: number;
  totalPages: number;
  pageChangeHandler: (page: number) => void;
}
const PageNation = ({
  curPage,
  totalPages,
  pageChangeHandler,
}: GreetingProps) => {
  return (
    <PaginatorWrap>
      <Pagination
        activePage={curPage}
        itemsCountPerPage={1}
        pageRangeDisplayed={5}
        totalItemsCount={totalPages}
        prevPageText="<"
        nextPageText=">"
        onChange={pageChangeHandler}
      />
    </PaginatorWrap>
  );
};
export default PageNation;

今日の気持ち

サーバが変化するたびにタイプを変更するので、タイプスクリプトは本当に難しいようです.しかし使いやすい部分が多く、以降は絶対にバニラJavaScriptでコードを書くことはありません.