Comment, Comments (2)

들어가기
(1)에서 server에서 seeFeed로 Photo를 return받을떄,
Photo에 comments, commentNumber도 같이 return 받을 수 있게,
server에서 설정하고 Home.js에서 seeFeed가 실행될 때,
comments, commentNumber를 받아와 Photo.js에 props로 넘겨 주는것 까지 완료함.

---

comment component는 전체 댓글을 보여주는 comments component와 댓글 하나를 표현하는 comment component 2개로 나눔
.

1. Photo.js

Home.js에서 받은 comments, commentNumber props를
Comments component에 넘겨줌// * 별표만 확인할 것

const Photo = ({
  id,
  user,
  file,
  isLiked,
  likes,
  caption,
  commentNumber,*****************
  comments,*************
}) => {
  const updateToggleLike = (cache, result) => {
    const {
      data: {
        toggleLike: { ok },
      },
    } = result
    if (ok) {
      const fragmentId = `Photo:${id}`
      const fragment = gql`
        fragment BSName on Photo {
          isLiked
          likes
        }
      `
      const result = cache.readFragment({
        id: fragmentId,
        fragment,
      })
      if ('isLiked' in result && 'likes' in result) {
        const { isLiked: cacheIsLiked, likes: cacheLikes } = result
        cache.writeFragment({
          id: fragmentId,
          fragment,
          data: {
            isLiked: !cacheIsLiked,
            likes: cacheIsLiked ? cacheLikes - 1 : cacheLikes + 1,
          },
        })
      }
    }
  }

  const [toggleLike, { loading }] = useMutation(TOGGLE_LIKE_MUTATION, {
    variables: {
      id,
    },
    update: updateToggleLike,
    // refetchQueries: [{ query: FEED_QUERY }],
  })
  return (
    <div>
      <PhotoContainer key={id}>
        <PhotoHeader>
          <Avatar lg url={user.avatar} />
          <Username>{user.username}</Username>
        </PhotoHeader>
        <PhotoFile src={file} />
        <PhotoData>
          <PhotoActions>
            <div>
              <PhotoAction onClick={toggleLike}>
                <FontAwesomeIcon
                  style={{ color: isLiked ? 'tomato' : 'inherit' }}
                  size={'2x'}
                  icon={isLiked ? SolidHeart : faHeart}
                />
              </PhotoAction>
              <PhotoAction>
                <FontAwesomeIcon size={'2x'} icon={faComment} />
              </PhotoAction>
              <PhotoAction>
                <FontAwesomeIcon size={'2x'} icon={faPaperPlane} />
              </PhotoAction>
            </div>
            <div style={{ marginRight: '15px' }}>
              <FontAwesomeIcon size={'2x'} icon={faBookmark} />
            </div>
          </PhotoActions>
          <Likes>{likes === 1 ? '1 likes' : `${likes} likes`}</Likes>
		******************************************
          <Comments
            author={user.username}
            caption={caption}
            commentNumber={commentNumber}
            comments={comments}
          />
          ****************************************************
        </PhotoData>
      </PhotoContainer>
    </div>
  )
}
export default Photo

2. src/components/feed/Comments.js

Photo.js 에서 comments, commentNumber, author, caption을 props로 받았음.

import styled from "styled-components";
import Comment from "./Comment";

const CommentsContainer = styled.div`
  margin-top: 20px;
`;
const CommentCount = styled.span`
  opacity: 0.7;
  margin: 10px 0px;
  display: block;
  font-weight: 600;
  font-size: 15px;
`;

function Comments({ author, caption, commentNumber, comments }) {
  return (
    <CommentsContainer>
      <Comment author={author} payload={caption} />
      ///사진주인과 사진설명을 나타내는 부분임.
      ///댓글과 햇갈리지 말것.
      
      <CommentCount>
        {commentNumber === 1 ? "1 comment" : `${commentNumber} comments`}
      </CommentCount>
      {comments?.map((comment) => (
        <Comment
          key={comment.id}
          author={comment.user.username}
          payload={comment.payload}
        />
        ///comment component에 각각 commnet의 username과
        ///댓글내용(payload)을 보내줌,
        ///댓글들은 많기 떄문에  map으로 뿌려줌.
        
      ))}
    </CommentsContainer>
  );
}

export default Comments;~~~~

3. src/components/feed/Comment.js

comment부분은 설명할 게 좀 있음.
집중.
1. payload로 받은 부분을 hastag(#orange)로 만들어진
부분이 클릭이 되게 하여서, hastag된 사진들만 모와서
볼 수 있게 만들어준(Link를 걸어줌)

2. 그렇게 하기 위해서는 hashtag된 부분을 분리시켜주어서
   "#"들어간 부분과 "#"이 안들어간 부분을 true, false로 구분되게
   만들어 주어야 함.

3. React.Fragment는 <> </> 이렇게만 하면 map에서 key={index}를
   넣을 수가 없기 떄문에 key를 넣을려면, <React.Fragment>로 열고
   </React.Fragment>로 닫아 주어야 함.
   React.Fragment를 사용할려면 import React from 'react'를 해줘야 함.

import styled from 'styled-components'
import { FatText } from '../shared'
import sanitizeHtml from 'sanitize-html'
import React from 'react'
import { Link } from 'react-router-dom'

const CommentContainer = styled.div``
const CommentCaption = styled.span`
  margin-left: 10px;
  a {
    background-color: inherit;
    color: ${(props) => props.theme.accent};
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
    ///1. hashtag되는 부분은 a{ }로 디자인 해줌.
    ///hover가 쓰이는 문법 확인할 것.
    
  }
`
///Comments component에서 author와 payload를 props로 받음.
function Comment({ author, payload }) {
  // const cleanedPayload = sanitizeHtml(
  //   payload.replace(/#[\w]+/g, '<mark>$&</mark>'),
  //   {
  //     allowedTags: ['a'],
  //   }
  // )
------------->sanitizeHtml 사용 예시, 여기서는 사용하지않음.
------------->payload에 html을 입히는 방법
------------->allowedTags는 허용되는 tag만 기입함.
  return (
    <CommentContainer>
      <FatText>{author}</FatText>
      {/* <CommentCaption
        dangerouslySetInnerHTML={{
          __html: cleanedPayload,
        }}
      /> */}
      <CommentCaption>
        {payload.split(" ").map((word, index) =>
          /#[\w]+/.test(word) ? (
            <React.Fragment key={index}>
              <Link to={`/hashtags/${word}`}>{word}</Link>{" "}
            </React.Fragment>
          ) : (
            <React.Fragment key={index}>{word} </React.Fragment>
          )
        )}
      </CommentCaption>
      ///payload(captios, 댓글)을 받아와서, hashtag로 만들어서
      /// hashtag면 Link를 걸어서 `/hashtags/${word}`로
      ///page를 이동시켜 줌.
      ///각각의 단어에 index를 해 주기 위해서 React.Fragment를
      ///사용함.
      
    </CommentContainer>
  )
}

export default Comment