[내일배움캠프] 67일차 TIL 230615 - 처음 해보는 친구신청 기능에 우여곡절을 겪는 중 (최종프로젝트 Day 8)

오늘 한 일

BE

친구신청목록 추가

프론트 연결하다보니 친구 신청을 수락하려면 신청목록이 있어야 한다는 것을 깨달음 (이제서야...?)

- serializers.py : 친구신청 목록 serializer 추가
- serializers.py : 필터별 친구추천 serializer에 admin 숨김처리
- views.py : 친구신청 목록 view 추가

class RequestListSerializer(serializers.ModelSerializer):
    from_account = serializers.SerializerMethodField()
    to_account = serializers.SerializerMethodField()
    from_nickname = serializers.SerializerMethodField()
    to_nickname = serializers.SerializerMethodField()
    
    def get_from_account(self,obj):
        return obj.from_user.account
    def get_to_account(self,obj):
        return obj.to_user.account
    
    def get_from_nickname(self,obj):
        return obj.from_user.nickname
    def get_to_nickname(self,obj):
        return obj.to_user.nickname
    
    class Meta:
        model = Friend
        fields = "__all__"

그리고 친구목록도 없다는 걸 또 이제서야 깨달음

친구 목록 serializer 를 만들었다가 굳이 그럴 필요가 없을 것 같아서 RequestListSerializer를 같이 쓰기로 했다. 

FE

- 비밀번호 재설정, 변경 페이지 구현

- 프로필 > 받은 친구신청/보낸 친구신청 목록 버튼 + 해당 페이지 구현 + API 연결 

- 보낸 친구 신청 목록 : 누르면 프로필로 이동
- 받은 친구 신청 목록 : 수락/거절 버튼 

// request_list.js

const me = new URLSearchParams(window.location.search).get('me');
const logined_token = localStorage.getItem("access");
const logined_account = payload_parse.account
window.onload = () => {
    requestList(me)
}

function go_requestList(me) {
    location.href = `request_list.html?me=${me}`
}

async function requestList(me) {
    $('.list-section').empty()

    $.ajax({
        url: `${BACKEND_BASE_URL}/user/friend/request-list/`,
        type: "GET",
        dataType: "json",
        headers: {
            "Authorization": "Bearer " + logined_token
        },
        success: function (response) {

            if (me === 'to') {
                let filteredResults = response.filter(item => item.to_account === logined_account);
                const rows = filteredResults;

                console.log(rows)
                console.log(rows[0]['from_nickname'])
                console.log(rows[0]['from_account'])
                console.log(rows[0]['from_user'])
                console.log(rows[0]['id'])
                for (let i = 0; i < rows.length; i++) {
                    let user_nickname = rows[i]['from_nickname']
                    let user_account = rows[i]['from_account']
                    let user_id = rows[i]['from_user']
                    let request_id = rows[i]['id']

                    let temp_html = `
                    <div class="info-box">
                        <a onclick="go_profile(${user_id})">
                            <div class="nickname">${user_nickname}</div>
                            <div class="account">${user_account}</div>
                        </a>
                    </div>
                    <div class="buttons">
                        <button onclick="acceptRequest(${request_id})">수락</button>
                        <button onclick="rejectRequest(${request_id})">거절</button>
                    </div>
                `

                $('.list-section').append(temp_html)

                }

            } else if (me === 'from') {
                let filteredResults = response.filter(item => item.from_account === logined_account);
                const rows = filteredResults;
                console.log(rows)
                console.log(rows[0]['to_nickname'])

                for (let i = 0; i < rows.length; i++) {
                    let user_nickname = rows[i]['to_nickname']
                    let user_account = rows[i]['to_account']
                    let user_id = rows[i]['to_user']
                    let request_id = rows[i]['id']

                    let temp_html = `
                    <div class="info-box">
                        <a onclick="go_profile(${user_id})">
                            <div class="nickname">${user_nickname}</div>
                            <div class="account">${user_account}</div>
                        </a>
                    </div>
                `

                $('.list-section').append(temp_html)

                }
            }
        }
    })
}

// 수락 user/friend/<int:friend_request_id>/accept/
function acceptRequest(request_id) {

    $.ajax({
        url : `${BACKEND_BASE_URL}/user/friend/${request_id}/accept/`, 
        type : "POST",
        dataType:"json",
        headers:{
            "Authorization": "Bearer " + logined_token
        },
        success: function(response){
            alert(response['message'])
            location.reload()
        },
        error : function(response){
            alert(response['responseJSON']['message'])
        }
    })
}


// 거절 user/friend/<int:friend_request_id>/reject/
async function rejectRequest(request_id) {

    $.ajax({
        url : `${BACKEND_BASE_URL}/user/friend/${request_id}/reject/`, 
        type : "POST",
        dataType:"json",
        headers:{
            "Authorization": "Bearer " + logined_token
        },
        success: function(response){
            alert(response['message'])
            location.reload()
        },
        error : function(response){
            alert(response['responseJSON']['message'])
        }
    })
}

- 친구목록 구현

// friends_list.js

const logined_token = localStorage.getItem("access");
window.onload = () => {
    friendsList()
}

async function friendsList() {
    $('.list-section').empty()

    $.ajax({
        url: `${BACKEND_BASE_URL}/user/friend/list/`,
        type: "GET",
        dataType: "json",
        headers: {
            "Authorization": "Bearer " + logined_token
        },
        success: function (response) {

            const rows = response;
            console.log(rows)

            console.log(rows)
            console.log(rows[0]['from_nickname'])
            console.log(rows[0]['from_account'])
            console.log(rows[0]['from_user'])
            console.log(rows[0]['id'])
            for (let i = 0; i < rows.length; i++) {
                let user_nickname = rows[i]['from_nickname']
                let user_account = rows[i]['from_account']
                let user_id = rows[i]['from_user']
                let request_id = rows[i]['id']

                let temp_html = `
                    <div class="info-box">
                        <a onclick="go_profile(${user_id})">
                            <div class="nickname">${user_nickname}</div>
                            <div class="account">${user_account}</div>
                        </a>
                    </div>
                `

                $('.list-section').append(temp_html)

            }
        }
    })
}