[TIL] 2022-03-26

今日TIL

Self Study

掲示板へのコメント機能の追加
:コメントの生成、閲覧、修正、削除(+アスタリスク)

今日は一日中CRUDのコメントを実現しました.
まずコメントは掲示板に属するので、いちいち閲覧するのではなく、掲示板のIDをリスト形式で活用するのが掲示板とは違います.
リスト内のリストクエリ,Detailでの詳細クエリ,書き込みでの生成/修正と,各画面に1,2つの機能があるのに対し,メッセージ中のCRUDはBOARD DETAIL画面ですべて実現されるため,コンポーネントをどこから入れるかを考える必要がある.

export default function BoardsDetailPage() {
  const router = useRouter();
  const boardId = String(router.query.boardId);
  return (
    <>
      <BoardDetail />
      <CommentWrite />
      <Comments />
    </>
  );
}

まず各機能に従ってコンポーネントを作成し、BoardDetailのreturn文にすべてのコメントのコンポーネントを入力し、画面が表示されます.とても良くて不思議で、
画面をつなげて、既存の掲示板に似たような作品を作りました.
でも思ったより採点が難しい!!
まず、コメントを生成する際にアスタリスクでアスタリスクのidを設定することができ、ステータス値もクリックされるかどうかで、クリックされたアスタリスクの色を異なる色に表すことができるので簡単です.

/*CommentWrite*/
//Presenter
  const onClickStar = (e: MouseEvent<HTMLButtonElement>) => {
    if (e.target instanceof Element) {
      setRating(Number(e.target.id));
    }
  };


//Presenter
<S.CStar id="1" isStar={props.rating >= 1} onClick={props.onClickStar}>/S.CStar>
            ...
<S.CStar id="5" isStar={props.rating >= 5} onClick={props.onClickStar}>/S.CStar>


//Emotion
export const CStar = styled.button`
  background-image: ${(props: any) =>
    props.isStar
      ? "url('/boards/detail/comment/CYellowStar.png')"
      : "url('/boards/detail/comment/CGrayStar.png')"};
`;

検索するときはどう表現すればいいのか….困ったなあ.
ちょうど3項の演算子を使うことを始めて、条件は多すぎて、if文を使って、switch文をも使って、1つは採点のコードが40~50行を超えることを表示して、、、、for文あるいは地図の中でsetStateを使うならば、間違いが現れて、ほほほ、申し訳ありません、macbookは苦労しました
このように変えて、やっとpresenterが格付け値で条件文を与える方法を考え出して、とても汚いコードを全部削除しました.一人で4時間もかかりませんか.もっと.長い間悩んでいたようで、いつもそのような方法を思い出して、本当に面白かったです.

	👇🏻 처음에 시도한 노가다의 흔적..ㅎㅎㅎㅎㅎ

採点に成功して自信たっぷりに修正しましたが、修正するには当初コメントを見せてくれたときに修正(FetchComments)か詳細ビューかを区別する必要があります.したがって,コメントリストにはlistItemが削除され,リストには配布リストのmapのみが置かれ,各コメントはリストリストリストに修正するか閲覧するかを区別して配布される.

export default function CommentsUI(props: ICommentsUIProps) {
  return (
    <>
      <S.CListWrapper>
        {props.data?.fetchBoardComments.map((el: any) => (
          <CommentsItemUI
            key={el._id}
            el={el}
            data={props.data}
            onClickDelete={props.onClickDelete}
          />
        ))}
      </S.CListWrapper>
    </>
  );
}

修正をクリックすると既存の入力値と修正が表示され、修正画面を詳細画面に変えるだけで、完璧なコメントが完成します!楽しかった!いい~~!