Merge pull request #25 from MOVIEJOJO7/Feature/#17

Feat : 유저/채팅방 검색 기능 추가 pr

Components/Search/SearchOpenChat.tsx

@@ -3,10 +3,21 @@
 import React, { useState, useCallback } from 'react';
 import { AllOpenChat } from '@/app/search/search.type';
 import ShowAllOpenChat from './ShowAllOpenChat';
+import { User } from '@/types';
+import { FriendProfile } from '../Users/FriendProfiles';
 
-const SearchOpenChat = ({ allOpenChat }: { allOpenChat: AllOpenChat }) => {
+const SearchOpenChat = ({
+	allOpenChat,
+	allUsersExceptMe,
+}: {
+	allOpenChat: AllOpenChat;
+	allUsersExceptMe?: User[];
+}) => {
 	const [userInput, setUserInput] = useState('');
 	const [searched, setSearched] = useState<AllOpenChat>(allOpenChat);
+	const [searchedUsers, setSearchedUsers] = useState<User[] | undefined>(
+		allUsersExceptMe,
+	);
 
 	const getUserInput = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setUserInput(e.target.value.toLowerCase().replace(/(\s*)/g, ''));
@@ -22,16 +33,26 @@ const SearchOpenChat = ({ allOpenChat }: { allOpenChat: AllOpenChat }) => {
 		const result = allOpenChat.filter((item) =>
 			item.name.toLowerCase().replace(/(\s*)/g, '').includes(userInput),
 		);
+		const resultUser = allUsersExceptMe?.filter((item) =>
+			item.name.toLowerCase().replace(/(\s*)/g, '').includes(userInput),
+		);
+
 		setSearched(result);
-	}, [userInput, allOpenChat]);
+		setSearchedUsers(resultUser);
+	}, [userInput, allOpenChat, allUsersExceptMe]);
 
 	return (
 		<>
 			<input onChange={getUserInput} onKeyPress={handleKeyPress} />
-			{searched.length ? (
-				searched.map((item) => (
-					<ShowAllOpenChat key={item.id} openChat={item} />
-				))
+			{searched.length || searchedUsers?.length ? (
+				<>
+					{searched.map((item) => (
+						<ShowAllOpenChat key={item.id} openChat={item} />
+					))}
+					{searchedUsers?.map((user) => (
+						<FriendProfile key={user.id} user={user} />
+					))}
+				</>
 			) : (
 				<h1>검색 결과가 없습니다.</h1>
 			)}

Components/Users/FriendProfiles.tsx

@@ -48,7 +48,7 @@ const FriendProfiles = ({ allUsers }: { allUsers: User[] }) => {
 	);
 };
 
-const FriendProfile = ({ user }: { user: User }) => {
+export const FriendProfile = ({ user }: { user: User }) => {
 	const picture = user.picture || '/icon_cat.svg';
 
 	return (

app/searchmychat/page.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+// import { fetchAllOpenChat } from './search.utils';
+import SearchOpenChat from '../../Components/Search/SearchOpenChat';
+import { User } from '@/types';
+import { fetchAllUsers, fetchMyChats, fetchMyUser } from './searchmychat.utils';
+
+const Search = async () => {
+	const accessToken = process.env.NEXT_PUBLIC_ACCESSTOKEN as string;
+	const allUsers: User[] = await fetchAllUsers(accessToken);
+	const myUser: User = await fetchMyUser(accessToken);
+	const allUsersExceptMe: User[] | [] = allUsers.filter(
+		(user) => user.id !== myUser.id,
+	);
+	const myChats = await fetchMyChats(accessToken);
+
+	return (
+		<>
+			<SearchOpenChat
+				allUsersExceptMe={allUsersExceptMe}
+				allOpenChat={myChats}
+			/>
+		</>
+	);
+};
+
+export default Search;

app/searchmychat/searchmychat.utils.ts

@@ -0,0 +1,38 @@
+export const fetchAllUsers = async (token: string) => {
+	const res = await fetch('https://fastcampus-chat.net/users', {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`,
+			serverId: process.env.NEXT_PUBLIC_SERVER_ID as string,
+		},
+	});
+	const data = await res.json();
+	return data;
+};
+
+export const fetchMyUser = async (token: string) => {
+	const res = await fetch('https://fastcampus-chat.net/auth/me', {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`,
+			serverId: process.env.NEXT_PUBLIC_SERVER_ID as string,
+		},
+	});
+	const data = await res.json();
+	return data.user;
+};
+
+export const fetchMyChats = async (token: string) => {
+	const res = await fetch('https://fastcampus-chat.net/chat', {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`,
+			serverId: process.env.NEXT_PUBLIC_SERVER_ID as string,
+		},
+	});
+	const data = await res.json();
+	return data.chats;
+};