Skip to content

Commit

Permalink
[feat] boostcampwm-2022#66 친구 추가 및 삭제 시, 반영이 바로 되도록 변경
Browse files Browse the repository at this point in the history
- 전역 값도 변경해줌
  • Loading branch information
ktmihs committed Dec 4, 2022
1 parent 158e25f commit c45d134
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 10 deletions.
28 changes: 19 additions & 9 deletions frontend/src/component/Sidebar/Friends/friendItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,42 @@ import { friendItemWrapper, userName } from './friends.styled';
import message from '../../../assets/icon/messageIcon.svg';
import unfollow from '../../../assets/icon/unfollowIcon.svg';
import axios from 'axios';
import { useRecoilState } from 'recoil';
import { friendsState } from '../../../store/atom/friends';
import { useEffect } from 'react';

const FriendItem = (data: friendType) => {
const { isOnline, name } = data;
const FriendItem = ({ friend }: { friend: friendType }) => {
const [friends, setFriends] = useRecoilState(friendsState);

const { id, isOnline, nickname } = friend;

const sendChatting = () => {
alert(`${name}님과 채팅하기`);
alert(`${nickname}님과 채팅하기`);
};

const unfollowing = async () => {
const isConfirm = confirm(`${name}님을 언팔로우 하시겠습니까?`);
const isConfirm = confirm(`${nickname}님을 언팔로우 하시겠습니까?`);

if (isConfirm) {
try {
await axios.delete(`/api/friendship/${name}`);
await axios.delete(`/api/friendship/${nickname}`);

const newFriend = { ...friends };

delete newFriend[nickname];
setFriends(newFriend);

alert(`${name}님을 언팔로우 하였습니다.`);
alert(`${nickname}님을 언팔로우 하였습니다.`);
} catch {
alert('언팔로우 실패');
}
}
};

return (
<Content draggable={isOnline} key={name}>
<section id={name} css={friendItemWrapper(isOnline)}>
<div css={userName(isOnline)}>{name}</div>
<Content draggable={isOnline}>
<section id={id} css={friendItemWrapper(isOnline)}>
<div css={userName(isOnline)}>{nickname}</div>
<div>
<img src={message} alt="채팅하기" onClick={sendChatting}></img>
<img src={unfollow} alt="친구 끊기" onClick={unfollowing}></img>
Expand Down
15 changes: 14 additions & 1 deletion frontend/src/component/Sidebar/Friends/search.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import axios from 'axios';
import { FormEvent, MouseEvent, useState } from 'react';
import { useRecoilState } from 'recoil';
import { friendsState } from '../../../store/atom/friends';
import { findFriend } from './friends.styled';

const testSearchWord = (word: string) =>
Expand All @@ -8,6 +10,7 @@ const testSearchWord = (word: string) =>
);

const Search = () => {
const [friends, setFriends] = useRecoilState(friendsState);
const [searchWord, setSearchWord] = useState<string>('');
const [nicknameList, setNicknameList] = useState<string[]>([]);

Expand All @@ -22,7 +25,17 @@ const Search = () => {
const response = confirm(`${selectedWord}를 친구추가 하시겠습니까?`);
if (response) {
try {
await axios.put(`/api/friendship/${selectedWord}`);
const { data } = await axios.put(`/api/friendship/${selectedWord}`);

setFriends({
...friends,
id: {
id: data.userId,
isOnline: false,
nickname: data.nickname,
isCalling: false,
},
});

alert('팔로우 되었습니다.');
} catch {
Expand Down

0 comments on commit c45d134

Please sign in to comment.