Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(chat): 채팅 생성창에서 친구목록을 가져올 수 있도록 구현
Browse files Browse the repository at this point in the history
개요

- 채팅 생성창에서 친구목록을 가져올 수 있도록 한다.

수정 사항

- `FriendList.jsx`
  - default value 삭제
- api.js
  - 현재 멤버의 커넥트 가져오는 함수 구현
- `ChatRoomPage.jsx`
  - 현재의 멤버Id와 커넥트를 가져오는 부분 `useEffect`에 구현
- `FriendListPage.jsx`
  - `filterAcceptedConnects`: 성사된 커넥트만 보여줌
  - `getOtherMemberFromConnect`: 커넥트에서 상대방의 정보를 가져옴
  - 정보를 바탕으로 친구목록을 보여줌
- `secureStoreUtils.js`
  - 본인 ID를 secure store에서 가져오는 과정이 계속 반복되어, 유틸
함수로 추출
seungholee-dev committed Jul 8, 2024
1 parent 043c3c2 commit f12011d
Showing 5 changed files with 55 additions and 28 deletions.
2 changes: 1 addition & 1 deletion src/components/chat/FriendList.jsx
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import IconChatProfile from "@components/chat/IconChatProfile";
import IconSend from "@components/common/IconSend";
import IconMenu from "@components/chat/IconMenu";

const FriendList = ({ name = "name" }) => {
const FriendList = ({ name }) => {
return (
<>
<TouchableOpacity style={styles.rectangle}>
4 changes: 4 additions & 0 deletions src/config/api.js
Original file line number Diff line number Diff line change
@@ -47,6 +47,10 @@ export const changePassword = (email) => {
});
};

export const getMyConnects = () => {
return api.get("/connects");
};

export const getProfile = () => {
return api.get("/members/profile");
};
10 changes: 5 additions & 5 deletions src/pages/chat/ChatRoomPage.jsx
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ import IconChatSetting from "@components/chat/IconChatSetting";
import ChatBubble from "./ChatBubble/ChatBubble";
import { useWebSocket } from "context/WebSocketContext";
import formatKoreanTime from "util/formatTime";
import * as SecureStore from "expo-secure-store";
import { getMyMemberId } from "util/secureStoreUtils";

const ChatRoomPage = ({ route }) => {
const navigation = useNavigation();
@@ -40,11 +40,11 @@ const ChatRoomPage = ({ route }) => {
const flatListRef = useRef(null);

useEffect(() => {
const getMemberId = async () => {
const id = await SecureStore.getItemAsync("memberId");
setMemberId(parseInt(id));
const fetchMyMemberId = async () => {
const myMemberId = await getMyMemberId();
setMemberId(myMemberId);
};
getMemberId();
fetchMyMemberId();
}, []);

useEffect(() => {
56 changes: 34 additions & 22 deletions src/pages/chat/FriendListPage.jsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,56 @@
import React from "react";
import React, { useState, useEffect } from "react";
import { Text, View, SafeAreaView, FlatList } from "react-native";

import FriendListStyles from "@pages/chat/FriendListStyles";

import TopBar from "@components/common/TopBar";
import IconFriendNumber from "@components/chat/IconFriendNumber";
import FriendList from "@components/chat/FriendList";
import { getMyConnects } from "config/api";
import { getMyMemberId } from "util/secureStoreUtils";

const FriendListPage = () => {
const FriendData = [
{
id: "1",
name: "Dann",
},
{
id: "2",
name: "Amy",
},
{
id: "3",
name: "Haedam",
},
{
id: "4",
name: "Jenny",
},
];
const [connects, setConnects] = useState([]);
const [myMemberId, setMyMemberId] = useState(null);

const filterAcceptedConnects = (connects) => {
return connects.filter((connect) => connect.status === "ACCEPTED");
};

const getOtherMemberFromConnect = (connect) => {
return connect.from_member.id === myMemberId
? connect.to_member
: connect.from_member;
};

useEffect(() => {
const fetchMyMemberIDAndConnects = async () => {
const myMemberId = await getMyMemberId();
const response = await getMyConnects();
const acceptedConnects = filterAcceptedConnects(response.data);
setMyMemberId(myMemberId);
setConnects(acceptedConnects);
};
fetchMyMemberIDAndConnects();
}, []);

return (
<SafeAreaView style={FriendListStyles.container}>
<TopBar topBar="친구 목록" />
<View style={FriendListStyles.containerFriendNumber}>
<Text style={FriendListStyles.textFriend}>내 친구</Text>
<IconFriendNumber />
<Text style={FriendListStyles.textNumber}>{"23"}</Text>
<Text style={FriendListStyles.textNumber}>
{connects.length}
</Text>
</View>
<FlatList
style={FriendListStyles.flatlist}
data={FriendData}
renderItem={({ item }) => <FriendList name={item.name} />}
data={connects}
renderItem={({ item }) => {
const otherMember = getOtherMemberFromConnect(item);
return <FriendList name={otherMember.username} />;
}}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
11 changes: 11 additions & 0 deletions src/util/secureStoreUtils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as SecureStore from "expo-secure-store";

export const getMyMemberId = async () => {
try {
const myMemberId = await SecureStore.getItemAsync("memberId");
return myMemberId ? parseInt(myMemberId) : null;
} catch (error) {
console.error("본인 memberId를 로컬에서 가져올 수 없습니다.", error);
return null;
}
};

0 comments on commit f12011d

Please sign in to comment.