Merge pull request #96 from boostcampwm-2021/dev

NogariHouse Release v0.2

client/src/api/index.ts

@@ -21,7 +21,7 @@ export const getRoomInfo = async (roomDocumentId: string) => {
 export const getUserInfo = async (userDocumentId: string) => {
   try {
     let response = await fetch(
-      `${process.env.REACT_APP_API_URL}/api/user/${userDocumentId}`,
+      `${process.env.REACT_APP_API_URL}/api/user/${userDocumentId}?type=documentId`,
       {
         method: 'get',
         headers: {
@@ -30,7 +30,10 @@ export const getUserInfo = async (userDocumentId: string) => {
       },
     );
     response = await response.json();
-    return response;
+    return response as unknown as {
+      ok: boolean,
+      userInfo: { profileUrl: string, userName: string, userId: string }
+     };
   } catch (error) {
     console.error(error);
   }
@@ -180,7 +183,7 @@ export const getChatRooms = async (userDocumentId: string) => {
 export const getFollowingsList = async (userDocumentId: string) => {
   try {
     let response = await fetch(
-      `${process.env.REACT_APP_API_URL}/api/user/followings/${userDocumentId}`,
+      `${process.env.REACT_APP_API_URL}/api/user/my-followings/${userDocumentId}`,
       {
         method: 'get',
         headers: {

client/src/components/chat/chat-list-header.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable max-len */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-return-assign */
+import styled from 'styled-components';
+import { FiMoreHorizontal } from 'react-icons/fi';
+import { BiMessageSquareAdd } from 'react-icons/bi';
+
+import { ChatHeaderStyle } from '@components/chat/style';
+import { makeIconToLink } from '@utils/index';
+
+const ChatHeaderBtnDiv = styled.div`
+  position: absolute;
+  top: 25px;
+  right: 5%;
+
+  svg{
+    margin: 0px 10px 0px 10px;
+    &:hover {
+      filter: invert(88%) sepia(1%) saturate(121%) hue-rotate(12deg) brightness(62%) contrast(79%);
+    }
+  }
+`;
+
+const chatRoomHeaderBtns = [
+  {
+    Component: BiMessageSquareAdd, link: '/chat-rooms/new', key: 'newChat', size: 32,
+  },
+  {
+    Component: FiMoreHorizontal, link: '/chat-rooms/new', key: 'selector', size: 32,
+  },
+];
+
+export default function ChatRoomListHeader() {
+  return (
+    <ChatHeaderStyle>
+      <p>BACK CHANNEL</p>
+      <ChatHeaderBtnDiv>
+        {chatRoomHeaderBtns.map(makeIconToLink)}
+      </ChatHeaderBtnDiv>
+    </ChatHeaderStyle>
+  );
+}

client/src/components/chat/chat-new-header.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable max-len */
+import styled, { css } from 'styled-components';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { useHistory } from 'react-router-dom';
+
+import { ChatHeaderStyle } from '@components/chat/style';
+import { postChatRoom } from '@api/index';
+import selectedUserType from '@atoms/chat-selected-users';
+import userType from '@atoms/user';
+
+const BtnStyle = css`
+  position: absolute;
+  transform: translateY(30px);
+
+  font-size: 20px;
+
+  background-color: transparent;
+  border: none;
+
+  &:hover {
+    filter: invert(88%) sepia(1%) saturate(4121%) hue-rotate(12deg) brightness(62%) contrast(79%);
+  }
+`;
+
+const CanCelBtnStyle = styled.button`
+  left: 5%;
+  color: #58964F;
+  ${BtnStyle};
+`;
+
+const DoneBtnStyle = styled.button`
+  right: 5%;
+  color: #58964F;
+  ${BtnStyle};
+`;
+
+const DoneBtn = () => {
+  const [selectedUserList, setSelectedUserList] = useRecoilState(selectedUserType);
+  const user = useRecoilValue(userType);
+  const history = useHistory();
+
+  const makeChatRoom = () => {
+    if (selectedUserList.length === 0) return;
+    postChatRoom([...selectedUserList.map((selectedUser: any) => selectedUser.userDocumentId), user.userDocumentId])
+      .then((res: any) => {
+        history.push({
+          pathname: `/chat-rooms/${res.chatRoomId}`,
+          state: { participantsInfo: selectedUserList },
+        });
+        setSelectedUserList([]);
+      });
+  };
+
+  return (
+    <DoneBtnStyle onClick={makeChatRoom}>Done</DoneBtnStyle>
+  );
+};
+
+const CancelBtn = () => {
+  const [selectedUserList, setSelectedUserList] = useRecoilState(selectedUserType);
+  const history = useHistory();
+
+  const cancelEvent = () => {
+    setSelectedUserList([]);
+    history.push({ pathname: '/chat-rooms' });
+  };
+
+  return (<CanCelBtnStyle onClick={cancelEvent}>Cancel</CanCelBtnStyle>);
+};
+
+export default function NewChatRoomHeader() {
+  return (
+    <ChatHeaderStyle>
+      <CancelBtn />
+      <p>NEW MESSAGE</p>
+      <DoneBtn />
+    </ChatHeaderStyle>
+  );
+}

client/src/components/chat/chat-room-header.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable max-len */
+import styled from 'styled-components';
+import { MdOutlineArrowBackIos } from 'react-icons/md';
+
+import { ChatHeaderStyle } from '@components/chat/style';
+import { makeIconToLink } from '@utils/index';
+
+const BackBtn = styled.div`
+  position: absolute;
+
+  top: 50%;
+  transform: translateY(-50%);
+  left: 5%;
+`;
+
+const ParticipantsDiv = styled.div`
+  position: relative;
+  width: 50%;
+  height: 100%;
+
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: flex;
+  flex-direction: column;
+`;
+
+const ParticipantsProfileDiv = styled.div`
+  position: absolute;
+
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
+  height: 23px;
+
+  margin-top: 10px;
+`;
+
+const ParticipantsProfile = styled.img`
+  width: 30px;
+  height: 30px;
+
+  margin: 5px;
+  border-radius: 20px;
+
+  background-color: black;
+`;
+
+const ParticipantsName = styled.div`
+  position: absolute;
+  bottom: 10px;
+
+  width: 100%;
+  height: 20px;
+
+  text-align: center;
+`;
+
+export default ({ participantsInfo }: any) => {
+  const userNames = participantsInfo.map((user:any) => user.userName).join(', ');
+
+  return (
+    <ChatHeaderStyle>
+      <BackBtn>
+        {makeIconToLink({
+          Component: MdOutlineArrowBackIos, link: '/chat-rooms', key: 'back', size: 32,
+        })}
+      </BackBtn>
+      <ParticipantsDiv>
+        <ParticipantsProfileDiv>
+          {participantsInfo.map((user: any) => (<ParticipantsProfile key={user.userDocumentId} src={user.profileUrl} />))}
+        </ParticipantsProfileDiv>
+        <ParticipantsName>{userNames}</ParticipantsName>
+      </ParticipantsDiv>
+    </ChatHeaderStyle>
+  );
+};

client/src/components/chat/chat-user-card.tsx

@@ -11,6 +11,7 @@ interface Participants{
 interface chatUserCardProps {
   participantsInfo: Array<Participants>,
   lastMsg: string,
+  clickEvent(): void,
 }
 
 type ProfileProps = { profileUrl: string, length: number };
@@ -88,10 +89,10 @@ const LastChatMsg = styled.p`
   font-size: 20px;
 `;
 
-const ChatUserCard = ({ participantsInfo, lastMsg } : chatUserCardProps) => {
+const ChatUserCard = ({ participantsInfo, lastMsg, clickEvent } : chatUserCardProps) => {
   const userNames = participantsInfo.map((participant) => participant.userName).join(', ');
   return (
-    <ChatUserCardLayout>
+    <ChatUserCardLayout onClick={clickEvent}>
       <ChatUserCardProfileDiv>
         <ChatUserCardFirstProfile profileUrl={participantsInfo[0].profileUrl} length={participantsInfo.length} />
         {participantsInfo.length > 1 && <ChatUserCardSecondProfile profileUrl={participantsInfo[1].profileUrl} length={participantsInfo.length} /> }