[241126 TIL] 본캠프 40일차 ('MBTI' 프로젝트 기능 구현)

MBTI 테스트 결과 데이터 저장을 위해서 json-server를 사용하였다.

 

테스트 결과 저장

/* src/api/TestResult.js */

import axios from 'axios';

const BASE_URL = 'http://localhost:5000/testResults';

export const createTestResult = async (data) => {
    try {
        await axios.post(BASE_URL, data);
    } catch (e) {
        return { error: e };
    }
};

/* src/pages/Test.jsx */

import { useForm } from '../hooks/useForm';
import { calculateMBTI } from '../utils/calculateMBTI';
import { createTestResult } from '../api/TestResult';
import { fetchUser } from '../api/Auth';
import { formatDate } from '../utils/formatDate';

export default function Test() {
    const token = localStorage.getItem('accessToken');

    const { values, handleSelect, handleReset } = useForm(
        Array(questions.length).fill({ type: '', answer: '', value: '' })
    );

    const handleSubmit = async (e) => {
        e.preventDefault();

        const { data } = await fetchUser(token);

        await createTestResult({
            created_at: formatDate(),
            user: data,
            result: calculateMBTI(values),
            isVisibility: true
        });
    };
}

 

 

테스트 결과 삭제

/* src/api/TestResult.js */

import axios from 'axios';

const BASE_URL = 'http://localhost:5000/testResults';

export const getTestResults = async () => {
    try {
        const response = await axios.get(BASE_URL);

        return { data: response.data };
    } catch (e) {
        return { error: e };
    }
};

export const deleteTestResult = async (id) => {
    try {
        await axios.delete(`${BASE_URL}/${id}`);
    } catch (e) {
        return { error: e };
    }
};

/* src/pages/Result.jsx */

import { useState } from 'react';
import { deleteTestResult, getTestResults } from '../api/TestResult';
import { useAuth } from '../contexts/AuthContext';

export default function Result() {
    const [results, setResults] = useState([]);

    const { user } = useAuth();

    const fetchResults = async () => {
        const { data } = await getTestResults();

        const filterData = data.filter((item) => item.user.id === user?.id || item.isVisibility);
        setResults(filterData);
    };

    const handleDelete = async (id) => {
        await deleteTestResult(id);
        fetchResults();
    };
}

 

 

테스트 결과 공개 여부 변경

/* src/api/TestResult.js */

import axios from 'axios';

const BASE_URL = 'http://localhost:5000/testResults';

export const getTestResults = async () => {
    try {
        const response = await axios.get(BASE_URL);

        return { data: response.data };
    } catch (e) {
        return { error: e };
    }
};

export const updateTestResultVisibility = async (id, visibility) => {
    try {
        await axios.patch(`${BASE_URL}/${id}`, { isVisibility: visibility });
    } catch (e) {
        return { error: e };
    }
};

/* src/pages/Result.jsx */

import { useState } from 'react';
import { deleteTestResult, getTestResults } from '../api/TestResult';
import { useAuth } from '../contexts/AuthContext';

export default function Result() {
    const [results, setResults] = useState([]);

    const { user } = useAuth();

    const fetchResults = async () => {
        const { data } = await getTestResults();

        const filterData = data.filter((item) => item.user.id === user?.id || item.isVisibility);
        setResults(filterData);
    };

	const handleUpdateVisibility = async (id, visibility) => {
        await updateTestResultVisibility(id, visibility);
        fetchResults();
    };
}