soh308

<p>메시지 부분은 chat 을 말씀하시는걸까요? ㅠ</p><p>data.createdAt을 주석처리했더니 에러가 바뀌긴 했어요 </p><p>근데 에러가 어디서 나는지 알기가 어렵네요..</p><pre class="hljs"><code>import React, { memo, useMemo, VFC } from 'react';
import { ChatWrapper } from './styles';
import gravatar from 'gravatar';
import regexifyString from 'regexify-string';
import { Link, useParams } from 'react-router-dom';

interface Props {
  data: any;
}

// a?.b optional chaining
// a??b nullish coalescing

const Chat: VFC<Props> = ({ data }) => {
  const user = data.Sender;
  const { workspace } = useParams<{ workspace: string; channel: string }>();

  const result = useMemo(
    () =>
      regexifyString({
        input: data.content,
        pattern: /@\[(.+?)]$(\d+?)$|\n/g,
        decorator(match, index) {
          const arr: string[] | null = match.match(/@\[(.+?)]$(\d+?)$/)!;
          if (arr) {
            return (
              <Link key={match + index} to={`/workspace/${workspace}/dm/${arr[2]}`}>
                @{arr[1]}
              </Link>
            );
          }
          return <br key={index} />;
        },
      }),
    [data.content],
  );

  return (
    <ChatWrapper>
      <div className="chat-img">
        <img src={gravatar.url(user.email, { s: '36px', d: 'retro' })} alt={user.nickname} />
      </div>
      <div className="chat-text">
        <div className="chat-user">
          <b>{user.nickname}</b>
          {/* <span>{data.createdAt}</span> */}
        </div>
        <p>{result}</p>
      </div>
    </ChatWrapper>
  );
};

export default memo(Chat);
</code></pre><p><img src="https://cdn.inflearn.com/public/files/posts/7a535cae-e385-4280-81f8-3778a888a734/image.png"></p><pre class="hljs"><code>import Chat from '@components/chat';
import { ChatZone, Section, StickyHeader } from '@components/chatList/styles';
import { IChat, IDM } from '@typings/db';
import React, { useCallback, forwardRef, ForwardedRef, RefObject, VFC } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';

interface Props {
  chatSections: { [key: string]: IDM[] };
  setSize: (f: (size: number) => number) => Promise<(IDM | IChat)[][] | undefined>;
  isReachingEnd: boolean;
  scrollRef: RefObject<Scrollbars>;
}
const ChatList: VFC<Props> = ({ chatSections, setSize, scrollRef, isReachingEnd }) => {
  const onScroll = useCallback(
    (values: any) => {
      if (values.scrollTop === 0 && !isReachingEnd) {
        console.log('가장 위');
        setSize((prevSize) => prevSize + 1).then(() => {
          // 스크롤 위치 유지
          if (scrollRef?.current) {
            scrollRef.current?.scrollTop(scrollRef.current?.getScrollHeight() - values.scrollHeight);
          }
        });
      }
    },
    [scrollRef, isReachingEnd, setSize],
  );

  return (
    <ChatZone>
      <Scrollbars autoHide ref={scrollRef} onScrollFrame={onScroll}>
        {Object.entries(chatSections).map(([date, chats]) => {
          return (
            <Section className={`section-${date}`} key={date}>
              <StickyHeader>
                <button>{date}</button>
              </StickyHeader>
              {chats.map((chat) => (
                <Chat key={chat.id} data={chat} />
              ))}
            </Section>
          );
        })}
      </Scrollbars>
    </ChatZone>
  );
};

export default ChatList;
</code></pre><p>&nbsp;</p><p>&nbsp;</p><pre class="hljs"><code>import ChatBox from '@components/chatBox';
import ChatList from '@components/chatList';
import useInput from '@hooks/useInput';
import useSocket from '@hooks/useSocket';
import { Container, DragOver, Header } from '@pages/directMessage/styles';
import { IDM } from '@typings/db';
import fetcher from '@utils/fetcher';
import makeSection from '@utils/makeSection';
import axios from 'axios';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import gravatar from 'gravatar';
import Scrollbars from 'react-custom-scrollbars';
import { useParams } from 'react-router-dom';
import useSWR from 'swr';
import useSWRInfinite from 'swr/infinite';
import Workspace from '@layouts/workspace';

const DirectMessage = () => {
  const { workspace, id } = useParams<{ workspace: string; id: string }>();
  console.log(id, 'id');
  const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher);
  const { data: myData } = useSWR('/api/users', fetcher);
  const [chat, onChangeChat, setChat] = useInput('');
  const {
    data: chatData,
    mutate: mutateChat,
    setSize,
  } = useSWRInfinite<IDM[]>(
    (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`,
    fetcher,
  );
  const [socket] = useSocket(workspace);
  const isEmpty = chatData?.[0]?.length === 0;
  const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < 20) || false;
  const scrollbarRef = useRef<Scrollbars>(null);
  const [dragOver, setDragOver] = useState(false);

  const onSubmitForm = useCallback(
    (e: any) => {
      e.preventDefault();
      console.log(chat);
      if (chat?.trim() && chatData) {
        const savedChat = chat;
        mutateChat((prevChatData) => {
          prevChatData?.[0].unshift({
            id: (chatData[0][0]?.id || 0) + 1,
            content: savedChat,
            SenderId: myData.id,
            Sender: myData,
            ReceiverId: userData.id,
            Receiver: userData,
            createdAt: new Date(),
          });
          return prevChatData;
        }, false).then(() => {
          setChat('');
          scrollbarRef.current?.scrollToBottom();
        });

        axios
          .post(`/api/workspaces/${workspace}/dms/${id}/chats`, {
            content: chat,
          })
          .then(() => {
            mutateChat();
          })
          .catch(console.error);
      }
    },
    [chat, chatData, myData, userData, workspace, id],
  );

  const onMessage = useCallback((data: IDM) => {
    // id는 상대방 아이디
    if (data.SenderId === Number(id) && myData.id !== Number(id)) {
      mutateChat((chatData) => {
        chatData?.[0].unshift(data);
        return chatData;
      }, false).then(() => {
        if (scrollbarRef.current) {
          if (
            scrollbarRef.current.getScrollHeight() <
            scrollbarRef.current.getClientHeight() + scrollbarRef.current.getScrollTop() + 150
          ) {
            console.log('scrollToBottom!', scrollbarRef.current?.getValues());
            setTimeout(() => {
              scrollbarRef.current?.scrollToBottom();
            }, 50);
          }
        }
      });
    }
  }, []);

  useEffect(() => {
    socket?.on('dm', onMessage);
    return () => {
      socket?.off('dm', onMessage);
    };
  }, [socket, onMessage]);

  // 로딩 시 스크롤바 제일 아래로
  useEffect(() => {
    if (chatData?.length === 1) {
      setTimeout(() => {
        scrollbarRef.current?.scrollToBottom();
      }, 100);
    }
  }, [chatData]);

  const onDrop = useCallback(
    (e: any) => {
      e.preventDefault();
      console.log(e);
      const formData = new FormData();
      if (e.dataTransfer.items) {
        // Use DataTransferItemList interface to access the file(s)
        for (let i = 0; i < e.dataTransfer.items.length; i++) {
          // If dropped items aren't files, reject them
          if (e.dataTransfer.items[i].kind === 'file') {
            const file = e.dataTransfer.items[i].getAsFile();
            console.log('... file[' + i + '].name = ' + file.name);
            formData.append('image', file);
          }
        }
      } else {
        // Use DataTransfer interface to access the file(s)
        for (let i = 0; i < e.dataTransfer.files.length; i++) {
          console.log('... file[' + i + '].name = ' + e.dataTransfer.files[i].name);
          formData.append('image', e.dataTransfer.files[i]);
        }
      }
      axios.post(`/api/workspaces/${workspace}/dms/${id}/images`, formData).then(() => {
        setDragOver(false);
        mutateChat();
      });
    },
    [mutateChat, workspace, id],
  );

  const onDragOver = useCallback((e: any) => {
    e.preventDefault();
    console.log(e);
    setDragOver(true);
  }, []);

  if (!userData || !myData) {
    return null;
  }

  const chatSections = makeSection(chatData ? chatData.flat().reverse() : []);

  return (
    <Workspace>
      <Container onDrop={onDrop} onDragOver={onDragOver}>
        <Header>
          <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} />
          <span>{userData.nickname}</span>
        </Header>
        <ChatList
          chatSections={chatSections}
          scrollRef={scrollbarRef}
          setSize={setSize}
          isReachingEnd={isReachingEnd}
        />
        <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} />
        {dragOver && <DragOver>업로드!</DragOver>}
      </Container>
    </Workspace>
  );
};

export default DirectMessage;
</code></pre><p>&nbsp;</p>

optimistic UI 중 mutateChat 에서 Objects are not valid as a React child (found: Tue Nov 08 2022 17:24:47 GMT+0900 (한국 표준시)). If you meant to render a collection of children, use an array instead.

<p>우선 then 안에서 <a target="_blank" rel="noopener noreferrer nofollow" href="http://res.data">res.data</a> 잘 들어오는거 확인했고,</p><p> mutate(<a target="_blank" rel="noopener noreferrer nofollow" href="http://res.data">res.data</a>,false)로 </p><p>swr이 전역관리하는거로 이해했는데</p><pre class="hljs"><code>const onCreateChannel = useCallback(
    (e) => {
      e.preventDefault();
      axios
        .post(
          `/api/workspaces/${workspace}/channels`,
          {
            name: newChannel,
          },
          { withCredentials: true },
        )
        .then((res) => {
          setShowCreateChannelModal(false);
          mutate(res.data, false);
          console.log(res.data, 'res.data');
          setNewChannel('');
        })
        .catch((err) => {
          console.dir(err);
          toast.error(err.response?.data, { position: 'bottom-center' });
        });
    },
    [newChannel],
  );</code></pre><p>&nbsp;</p><p><img src="https://cdn.inflearn.com/public/files/posts/99c22ed3-3c7d-41ac-8f29-1c78e14e7279/캡처.PNG" alt="캡처.PNG" title="캡처.PNG"></p><p>이렇게 찍어보면 </p><p><img src="https://cdn.inflearn.com/public/files/posts/7fe158cb-01b4-43bd-bd34-05bc6514214b/캡처1.PNG" alt="캡처1.PNG" title="캡처1.PNG"></p><p>배열이 풀리면서? 에러나는 것 같습니다..</p><p><img src="https://cdn.inflearn.com/public/files/posts/b7757f34-40f8-4e75-9a85-b43748bfa008/캡처3.PNG" alt="캡처3.PNG" title="캡처3.PNG"></p><p>이런식으로 처리해줘야 하나 해봤는데 아닌것같고...</p><p>고민 계속 해보겠습니다..</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

채널 생성시 channelData.map is not a function

<p>ㅇㅇlogin에서 onSubmit 안쪽과 바깥쪽에 ,</p><p>fetcher에 콘솔을 추가하여 실행해봤습니다.</p><pre class="hljs"><code>import axios from 'axios';

const fetcher = (url: string) => {
  axios
    .get(url, {
      withCredentials: true,
      //   withCredentials: true, proxy를 안써서 백엔드, 프론트 포트가 다르면 쿠키를 전달할 수 없음. 로그인이 됐는지 확인불가. 그래서 이거로 해결.
    })
    .then((response) => console.log(response.data, '응답'));
};

export default fetcher;

</code></pre><p>&nbsp;</p><pre class="hljs"><code>import useInput from '@hooks/useInput';
import React, { useCallback, useState } from 'react';
import { Header, Button, Error, Form, Input, Label, LinkContainer, Success } from '@pages/signup/styles';
import { Link, Navigate } from 'react-router-dom';
import axios from 'axios';
import useSWR from 'swr';
import fetcher from '@utils/fetcher';

const LogIn = () => {
  const { data, error, mutate } = useSWR('/api/users', fetcher);

  const [logInError, setLogInError] = useState(false);
  const [email, onChangeEmail] = useInput('');
  const [password, onChangePassword] = useInput('');

  const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      setLogInError(false);
      axios
        .post(
          '/api/users/login',
          { email, password },
          {
            withCredentials: true,
          }, //get일때와 post일때 withCredentials 위치가 다르다.
        )
        .then((response) => {
          console.log(response.data, 'onSubmit안에서');
          mutate(response.data);
        })
        .catch((error) => {
          setLogInError(error.response?.data?.statusCode === 401);
        });
    },
    [email, password],
  );
  console.log(data, 'login컴포에서');
  if (data) {
    return <Navigate to="/workspace/channel" />;
  }

  return (
    <div id="container">
      <Header>Sleact</Header>
      <Form onSubmit={onSubmit}>
        <Label id="email-label">
          <span>이메일 주소</span>
          <div>
            <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} />
          </div>
        </Label>
        <Label id="password-label">
          <span>비밀번호</span>
          <div>
            <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
          </div>
          {logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>}
        </Label>
        <Button type="submit">로그인</Button>
      </Form>
      <LinkContainer>
        아직 회원이 아니신가요?&nbsp;
        <Link to="/signup">회원가입 하러가기</Link>
      </LinkContainer>
    </div>
  );
};

export default LogIn;
</code></pre><p>&nbsp;</p><pre class="hljs"><code>import fetcher from '@utils/fetcher';
import axios from 'axios';
import React, { FC, useCallback } from 'react';
import { Navigate } from 'react-router-dom';
import useSWR from 'swr';

const Workspace: FC = ({ children }) => {
  const { data, error, mutate } = useSWR('/api/users', fetcher);

  const onLogout = useCallback(() => {
    axios
      .post('/api/users/logout', null, {
        withCredentials: true,
      })
      .then((res) => {
        mutate(res.data);
      });
  }, []);

  if (!data) {
    return <Navigate to="/login" />;
  }

  return (
    <div>
      <button onClick={onLogout}>로그아웃</button>
      {children}
    </div>
  );
};

export default Workspace;
</code></pre><p>&nbsp;</p><p><img src="https://cdn.inflearn.com/public/files/posts/9dbf7ecc-dab3-4ed6-aaca-488f997fced3/스크린샷 2022-10-19 오후 7.31.27.png" alt="스크린샷 2022-10-19 오후 7.31.27.png" title="스크린샷 2022-10-19 오후 7.31.27.png"><img src="https://cdn.inflearn.com/public/files/posts/3cae63bd-eac5-4e59-a70c-83cbbb2f762c/스크린샷 2022-10-19 오후 7.34.30.png" alt="스크린샷 2022-10-19 오후 7.34.30.png" title="스크린샷 2022-10-19 오후 7.34.30.png"></p><p>새로고침 하면 fetcher가 작동되면서는 데이터가 찍히는데</p><p>로그인 컴포넌트에서 useSWR의 data가 계속 초기화가 되는 것 같은데..</p><p>계속 고민해보겠습니다.. ㅠ뭘까요..</p><p>&nbsp;</p><p>다른 댓글 보니까 조건을 data===false 로 해보라고 하신거 보고 해보니</p><p><img src="https://cdn.inflearn.com/public/files/posts/5193f8ae-93c1-43ac-a403-ec0fa8798b3e/스크린샷 2022-10-19 오후 7.51.07.png" alt="스크린샷 2022-10-19 오후 7.51.07.png" title="스크린샷 2022-10-19 오후 7.51.07.png"></p><p>이런 타입에러가 뜨네요...ㅠㅠ</p><p>&nbsp;</p>

로그인 -> workspace로 이동하지 않는 이슈

<p><img src="https://cdn.inflearn.com/public/files/posts/e4279c88-03bb-4c1c-90f2-202140c1f3a5/스크린샷 2022-10-12 오후 8.37.58.png" alt="스크린샷 2022-10-12 오후 8.37.58.png" title="스크린샷 2022-10-12 오후 8.37.58.png"></p><p>npm run dev로 열었고</p><p>이렇게 열려있는게 켜진상태 맞지않나요?</p>

proxy 504 에러

<p>findOneBy({id}) 같네요.. fineOne이 아니라..</p>

soh308

投稿