Merge pull request #91 from capstone-maru/feat/chat-api

feat: merge to dev
capstone-maru · May 21, 2024 · b4f7186 · b4f7186
2 parents 203d8bc + c7617b1
commit b4f7186
Show file tree

Hide file tree

Showing 16 changed files with 211 additions and 73 deletions.
diff --git a/public/House with garden.svg b/public/House with garden.svg
diff --git a/src/app/pages/mobile/mobile-profile-page.tsx b/src/app/pages/mobile/mobile-profile-page.tsx
@@ -1,15 +1,16 @@
 'use client';
 
+import axios from 'axios';
 import Link from 'next/link';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import { Bookmark } from '@/components';
 import { useAuthValue, useUserData } from '@/features/auth';
 import {
+  type GetFollowingListDTO,
   useCertification,
   useFollowUser,
-  useFollowingListData,
   useGetCode,
   useUnfollowUser,
   useUserProfile,
@@ -312,10 +313,30 @@ function UserInfo({
 }: UserProfileInfoProps) {
   const [isChecked, setIsChecked] = useState(false);
 
-  const followList = useFollowingListData();
-  const [isMarked, setIsMarked] = useState(
-    followList.data?.data.followingList[memberId] != null,
-  );
+  const [followList, setFollowList] = useState<Record<string, string[]>>();
+  const [isMarked, setIsMarked] = useState(false);
+
+  useEffect(() => {
+    if (followList?.[memberId] != null) {
+      setIsMarked(true);
+    } else setIsMarked(false);
+  }, [followList]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await axios.get<GetFollowingListDTO>(
+          '/maru-api/profile/follow',
+        );
+        const followListData = res.data.data.followingList;
+        setFollowList(followListData);
+        return true;
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    })();
+  }, [setIsMarked]);
 
   const toggleSwitch = () => {
     setIsChecked(!isChecked);

diff --git a/src/app/pages/profile-page.tsx b/src/app/pages/profile-page.tsx
@@ -1,15 +1,16 @@
 'use client';
 
+import axios from 'axios';
 import Link from 'next/link';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import { Bookmark } from '@/components';
 import { useAuthValue, useUserData } from '@/features/auth';
 import {
+  type GetFollowingListDTO,
   useCertification,
   useFollowUser,
-  useFollowingListData,
   useGetCode,
   useUnfollowUser,
   useUserProfile,
@@ -443,10 +444,30 @@ function UserInfo({
 }: UserProfileInfoProps) {
   const [isChecked, setIsChecked] = useState(false);
 
-  const followList = useFollowingListData();
-  const [isMarked, setIsMarked] = useState(
-    followList.data?.data.followingList[memberId] != null,
-  );
+  const [followList, setFollowList] = useState<Record<string, string[]>>();
+  const [isMarked, setIsMarked] = useState(false);
+
+  useEffect(() => {
+    if (followList?.[memberId] != null) {
+      setIsMarked(true);
+    } else setIsMarked(false);
+  }, [followList]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await axios.get<GetFollowingListDTO>(
+          '/maru-api/profile/follow',
+        );
+        const followListData = res.data.data.followingList;
+        setFollowList(followListData);
+        return true;
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    })();
+  }, [setIsMarked]);
 
   const toggleSwitch = () => {
     setIsChecked(!isChecked);

diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx
@@ -2,12 +2,13 @@
 
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
 import { Bookmark, CircularProfileImage } from '@/components';
 import { CardToggleButton, ImageGrid } from '@/components/shared-post-page';
-import { useAuthValue, useUserData } from '@/features/auth';
-import { useCreateChatRoom } from '@/features/chat';
+import { useAuthValue } from '@/features/auth';
+import { chatOpenState, useCreateChatRoom } from '@/features/chat';
 import { fromAddrToCoord } from '@/features/geocoding';
 import { useFollowUser, useUnfollowUser } from '@/features/profile';
 import {
@@ -496,15 +497,6 @@ export function SharedPostPage({
       enabled: type === 'dormitory' && auth?.accessToken != null,
     });
 
-  const { data: userData } = useUserData(auth?.accessToken != null);
-  const [userId, setUserId] = useState<string>('');
-
-  useEffect(() => {
-    if (userData != null) {
-      setUserId(userData.memberId);
-    }
-  }, [userData]);
-
   useEffect(() => {
     if (sharedPost?.data.address.roadAddress != null) {
       fromAddrToCoord({ query: sharedPost?.data.address.roadAddress }).then(
@@ -526,10 +518,13 @@ export function SharedPostPage({
   }, [sharedPost]);
 
   const [roomName, setRoomName] = useState<string>('');
+  const [userId, setUserId] = useState<string>('');
+  const [, setIsChatOpen] = useRecoilState(chatOpenState);
 
   useEffect(() => {
     if (sharedPost !== undefined) {
       setRoomName(sharedPost.data.publisherAccount.nickname);
+      setUserId(sharedPost.data.publisherAccount.memberId);
     }
   }, [sharedPost]);
 
@@ -755,6 +750,9 @@ export function SharedPostPage({
               <styles.chattingButton
                 onClick={() => {
                   chattingMutate();
+                  setTimeout(() => {
+                    setIsChatOpen(true);
+                  }, 200);
                 }}
               >
                 채팅하기

diff --git a/src/components/FloatingChatting.tsx b/src/components/FloatingChatting.tsx
@@ -4,13 +4,14 @@ import { Client } from '@stomp/stompjs';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
 import { ChattingList } from './chat/ChattingList';
 import { ChattingRoom } from './chat/ChattingRoom';
 
 import { useAuthValue, useUserData } from '@/features/auth';
-import { type GetChatRoomDTO } from '@/features/chat';
+import { chatOpenState, type GetChatRoomDTO } from '@/features/chat';
 import { useIsMobile } from '@/shared/mobile';
 
 const styles = {
@@ -246,7 +247,7 @@ function FloatingChattingBox() {
   }, [message, isChatRoomOpen]);
 
   // const roomName = 'test2';
-  // const members = ['naver_htT4VdDRPKqGqKpnncpa71HCA4CVg5LdRC1cWZhCnF8'];
+  // const members = ['naver_hW_CDCYdU3NNTQWq_TV_MkpldnMZI6fOD1mnPo-V1NE'];
   // const { mutate: chattingCreate } = useCreateChatRoom(roomName, members);
 
   return (
@@ -269,12 +270,12 @@ function FloatingChattingBox() {
 
         <styles.chattingSection>
           {/* <button
-          onClick={() => {
-            chattingCreate();
-          }}
-        >
-          생성
-        </button> */}
+            onClick={() => {
+              chattingCreate();
+            }}
+          >
+            생성
+          </button> */}
           {chatRooms.map((room, index) => (
             <ChattingList
               key={index}
@@ -306,7 +307,7 @@ function FloatingChattingBox() {
 }
 
 export function FloatingChatting() {
-  const [isChatOpen, setIsChatOpen] = useState<boolean>(false);
+  const [isChatOpen, setIsChatOpen] = useRecoilState(chatOpenState);
   const router = useRouter();
 
   const toggleChat = () => {
@@ -315,7 +316,6 @@ export function FloatingChatting() {
 
   const isMobile = useIsMobile();
   useEffect(() => {
-    if (!isMobile) router.replace('/');
     if (isChatOpen && isMobile) {
       router.replace('/chat');
     }
@@ -324,6 +324,12 @@ export function FloatingChatting() {
     }
   }, [isChatOpen, isMobile]);
 
+  useEffect(() => {
+    if (!isMobile && window.location.pathname === '/chat') {
+      router.replace('/');
+    }
+  }, [isMobile]);
+
   const auth = useAuthValue();
   if (auth == null) return <></>;
 

diff --git a/src/components/card/VitalSection.tsx b/src/components/card/VitalSection.tsx
@@ -348,7 +348,7 @@ export function VitalSection({
 
       setFeatures(data);
     }
-  }, []);
+  }, [vitalFeatures]);
 
   const handleEssentialFeatureChange = useCallback(
     (key: 'smoking' | 'roomSharingOption' | 'mateAge', value: string) => {

diff --git a/src/components/chat/ChatMenu.tsx b/src/components/chat/ChatMenu.tsx
@@ -4,8 +4,8 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-// import { useFollowingListData } from '@/features/profile';
-import { useChatRoomUser } from '@/features/chat';
+import { useChatRoomUser, useInviteUsers } from '@/features/chat';
+import { useSearchUser } from '@/features/profile';
 
 const styles = {
   menuContainer: styled.div`
@@ -169,7 +169,6 @@ const styles = {
   followingUserContainer: styled.div`
     display: flex;
     padding: 0.625rem;
-    justify-content: center;
     align-items: center;
     gap: 0.625rem;
     align-self: stretch;
@@ -203,7 +202,6 @@ export function ChatMenu({
   const [isInviteClick, setIsInviteClick] = useState<boolean>(false);
   const users = useChatRoomUser(roomId);
   const [userList, setUserList] = useState<User[]>([]);
-  // const folloingUsers = useFollowingListData();
 
   useEffect(() => {
     if (users.data !== undefined) {
@@ -217,9 +215,26 @@ export function ChatMenu({
     onMenuClicked(isCloseClick);
   };
 
-  // const { mutate: inviteUser } = useInviteUsers(roomId, [
-  //   'naver_htT4VdDRPKqGqKpnncpa71HCA4CVg5LdRC1cWZhCnF8',
-  // ]);
+  const [email, setEmail] = useState<string>('');
+  const { mutate: mutateSearchUser, data: searchData } = useSearchUser(email);
+
+  const [searchUser, setSearchUser] = useState<User>();
+
+  useEffect(() => {
+    if (searchData?.data != null) {
+      setSearchUser(searchData.data);
+    }
+  }, [searchData]);
+
+  const { mutate: inviteUser } = useInviteUsers(roomId, [
+    searchUser?.memberId ?? '',
+  ]);
+
+  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.keyCode === 13) {
+      mutateSearchUser();
+    }
+  }
 
   return (
     <styles.menuContainer>
@@ -243,7 +258,6 @@ export function ChatMenu({
         <styles.menuList>
           <styles.inviteButton
             onClick={() => {
-              // inviteUser();
               setIsInviteClick(prev => !prev);
             }}
           >
@@ -253,30 +267,31 @@ export function ChatMenu({
             <styles.dropDownContainer>
               <styles.followingListContainer>
                 <styles.searchBox>
-                  <styles.searchInput style={{ width: '100%' }} />
+                  <styles.searchInput
+                    style={{ width: '100%' }}
+                    onChange={e => {
+                      setEmail(e.target.value);
+                    }}
+                    onKeyUp={handleKeyUp}
+                  />
                   <styles.searchButton src="/icon-search.svg" />
                 </styles.searchBox>
                 <styles.followingUserContainer>
-                  {/* {Object.values(
-                    folloingUsers.data?.data.followingList as Record<
-                      string,
-                      string[]
-                    >,
-                  ).map((user, index) => (
+                  {searchUser != null ? (
                     <styles.userList
-                      key={index}
-                      style={{ flexDirection: 'column' }}
+                      onClick={() => {
+                        inviteUser();
+                      }}
                     >
-                      <styles.userImg src={user[1]} />
-                      {user[0]}
+                      <styles.userImg src={searchUser?.profileImageUrl} />
+                      {searchUser?.nickname}
                     </styles.userList>
-                  ))} */}
+                  ) : null}
                 </styles.followingUserContainer>
               </styles.followingListContainer>
             </styles.dropDownContainer>
           )}
         </styles.menuList>
-        <styles.menuList>마이 마루</styles.menuList>
         <styles.menuList>채팅방 나가기</styles.menuList>
       </styles.menuListContainer>
       <styles.footer>

diff --git a/src/components/chat/ChattingList.tsx b/src/components/chat/ChattingList.tsx
@@ -33,7 +33,7 @@ const styles = {
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
-    background: url('__avatar_url.png') lightgray 50% / cover no-repeat;
+    background: url('/House with garden.svg') lightgray 50% / cover no-repeat;
   `,
   roomName: styled.p`
     color: #000;