안읽은메세지 표시

Slack 클론 코딩[실시간 채팅 with React]

안 읽은 메시지 개수 표시하기

작성

427

안녕하세요 제로초님

mutate(0)으로 했는데도 콘솔찍어보니까 다시 1로 변합니다

channel부분만 이러네요

스크린샷 2023-05-16 오후 8.29.28.png

react 웹팩 typescript socket.io babel 클론코딩

답변 2

제로초(조현영)

지식공유자

이게 결국 지금까지 내용을 종합적으로 봐야합니다. 네트워크탭에서 0으로 찍혔는데 왜 콘솔에서는 0이 나왔다가 19가 다시 나오는지를 봐야하는 거라서요.

제로초(조현영)

지식공유자

저 data가 뭔데요? 두 번 질문하지 않게 해주세요. ㅠ 제발 질문 올릴 때의 공지사항도 읽어주세요.

장산

질문자

  const { data: count, mutate } = useSWR<number>( // 채팅 갯수 가져오는 api , count:n개
    userData ? `/api/workspaces/${workspace}/channels/${channel.name}/unreads?after=${date}` : null,
    fetcher,
  );

아 죄송합니다 제로초님 이 count입니다

import { IChannel, IUser } from '@typings/db';
import fetcher from '@utils/fetcher';
import React, { useEffect, VFC } from 'react';
import { useParams } from 'react-router';
import { NavLink, useLocation } from 'react-router-dom';
import useSWR from 'swr';

interface Props {
  channel: IChannel;
}
const EachChannel: VFC<Props> = ({ channel }) => {
  const { workspace } = useParams<{ workspace?: string }>();
  const location = useLocation();
  console.log('location', location.pathname);
  const { data: userData } = useSWR<IUser>('/api/users', fetcher, {
    dedupingInterval: 2000, // 2초
  });
  const date = localStorage.getItem(`${workspace}-${channel.name}`) || 0;
  const { data: count, mutate } = useSWR<number>( // 채팅 갯수 가져오는 api , count:n개
    userData ? `/api/workspaces/${workspace}/channels/${channel.name}/unreads?after=${date}` : null,
    fetcher,
  );
  console.log('count', count);

  useEffect(() => {
    //location.pathname이 `/workspace/${workspace}/channel/${channel.name}`이랑 같으면 mutate가 0으로 재캐싱된다
    if (location.pathname === `/workspace/${workspace}/channel/${channel.name}`) {
      mutate(0);
    }
  }, [mutate, location.pathname, workspace, channel]);

  return (
    <NavLink key={channel.name} activeClassName="selected" to={`/workspace/${workspace}/channel/${channel.name}`}>
      <span className={count !== undefined && count > 0 ? 'bold' : undefined}># {channel.name}</span>
      {count !== undefined && count > 0 && <span className="count">{count}</span>}
    </NavLink>
  );
};

export default EachChannel;

스크린샷 2023-05-16 오후 11.33.42.png