Til (2023.02.13)

친구 검색, 요청, 수락, 내역 / 유저 검색

 

유저 정보는 { "id": 1 , "nickname": "고양이", "tag" : 1234 } 이런식으로 저장된다.

그리고 친구 검색을 하면 친구 내역에서 제외된 모든 유저중에 검색된다.

거기서 친구 요청을 누르면

    {
      "id": "e579a3db-ab5c-4658-8844-4a16f48cdfcc",
      "myId": 내아이디,
      "friendId": 친구아이디,
      "myNickName": "내 닉네임",
      "friendNickName": "친구 닉네임"
    },

 

이런식으로 저장이 된다.

 

이런식으로 한방향 으로만 저장이 돼있다면 filter와 for, if문을 사용해 보낸쪽은 친구 요청 상태로 받는쪽은 친구 요청이 온 상태로 표시되게 하였다.

  //친구 요청 온 내역 전체
  const friendAdd = getFriendAuth?.filter((i: FriendProps) => {
    return i.friendId === myId;
  });

  //내가 친구 요청 보낸 내역 (내 친구내역만 있고 상대 친구내역엔 없는 상태)
  const friendAddSend = getFriendAuth?.filter((i: FriendProps) => {
    //만약 친구 요청온 것의 myid와 frendid / frendid와 myid가 같다면 제외
    for (let t = 0; t < friendAdd.length; t++) {
      if (
        friendAdd[t].friendId === i.myId &&
        friendAdd[t].myId === i.friendId
      ) {
        return;
      }
    }
    return i.myId === myId && frendSearchInput === "";
  });
  
    //친구 요청 온 내역만 (내 친구내역엔 없고 상대 친구내역엔 있는 상태)
  const friendAddCome = getFriendAuth?.filter((i: FriendProps) => {
    for (let t = 0; t < friend.length; t++) {
      if (friend[t].friendId === i.myId && friend[t].myId === i.friendId) {
        return;
      }
    }
    return i.friendId === myId && frendSearchInput === "";
  });

이런 식으로 양방향으로 서로 친구 추가가 돼있다면 친구 상태로 표시 되게 해놨다.

    {
      "id": "e579a3db-ab5c-4658-8844-4a16f48cdfcc",
      "myId": 1,
      "friendId": 2,
      "myNickName": "고양이",
      "friendNickName": "강아지"
    },
    {
      "id": "e579a3db-ab5c-4658-8844-4a16f48cdfcc1",
      "myId": 2,
      "friendId": 1,
      "myNickName": "강아지",
      "friendNickName": "고양이"
    },

  //양쪽 다 친구 내역
  const friend = getFriendAuth?.filter((i: FriendProps) => {
    for (let t = 0; t < friendAdd.length; t++) {
      if (
        friendAdd[t].friendId === i.myId &&
        friendAdd[t].myId === i.friendId &&
        frendSearchInput === ""
      ) {
        return i.myId === myId;
      } else if (
        friendAdd[t].friendId === i.myId &&
        friendAdd[t].myId === i.friendId
      ) {
        const lowercaseNickname = i.friendNickName.toLowerCase();
        const lowercaseSearchInput = frendSearchInput.toLowerCase();
        return (
          i.myId === myId && lowercaseNickname.includes(lowercaseSearchInput)
        );
      }
    }
  });

삭제는 usemutation을 사용했는데 사용하는 경우는 요청전송 취소, 온 요청 삭제, 친구 삭제이다.

앞 두경우는 그냥 데이터 하나씩 지워주면 되는데 뒤에는 두개의 데이터를 모두 삭제해줘야 깔끔하게 사라지는 문제가 생겼다.

 

// 그래서 id가 uuid로 저장되는데 친구요청을 수락할때는 그uuid + "1"한 데이터를 저장해준후 삭제할때 uuid, uuid+1, uuid.slice(0, -1)까지 모두 삭제되게 만들었다.

원래 위에처럼 만들 었었는데 화상채팅 방에서 친구추가를 하거나 서로 검색에서 친구추가를 하는등 생각 했던 것과 다른 상황이 나오면 아이디가 서로 다르게 저장돼 문제가 생겼다. 그래서 id를 전부 uuid로 바꿔주고 삭제 할때마다 그 아이디를 추적해 삭제하는 방법으로 수정 하였다. 맨 아래 코드가 수정 후의 코드이다.

  //친구 수락
  const friendAddOnClick = (i: FriendProps) => {
    console.log(i);

    let friendAdd = {
      id: i.id + "1",
      myId: i.friendId,
      friendId: i.myId,
      myNickName: i.friendNickName,
      friendNickName: i.myNickName,
    };

    postMutation.mutate(friendAdd);
  };

  //친구 삭제 인데 +1 된것 까지 삭제 혹은 그 반대로 +1이 없는 것 까지 삭제
  const friendDeleteOnClick = (id: any) => {
    const deleteAll: any = id + "1";
    const deleteAll2: any = id.slice(0, -1);
    DeleteMutation.mutate(id);
    DeleteMutation.mutate(deleteAll);
    DeleteMutation.mutate(deleteAll2);
  };

  // 친구 삭제
  const DeleteMutation = useMutation(
    //넘겨받은 id를 삭제
    (id) => axios.delete(`http://localhost:3001/friend/${id}`),
    {
      onSuccess: () => {
        // 쿼리 무효화
        queryClient.invalidateQueries("friend");
        queryClient.invalidateQueries("friendsearch");
      },
    }
  );

  //찾아온 친구 id 를이용해 두개다 삭제
  const friendDeleteOnClick = (id: any) => {
    const friendDelete = getFriendAuth.filter((i) => {
      return (
        (id === i.friendId && i.myId === myId) ||
        (id === i.myId && myId === i.friendId)
      );
    });

    DeleteMutation.mutate(friendDelete[0].id);
    DeleteMutation.mutate(friendDelete[1].id);
  };