동아리 댓글과 실험

club-club.id-answerId

'use client'

import Link from 'next/link'
import { useEffect, useState } from 'react'
import api from "@/util/api"
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import DefaultLayout from "@/components/Layouts/DefaultLayout";

export default function Club() {

    const getClubs = async () => {
        return await api.get('/api/v1/clubs')
            .then((response) => response.data.data.clubs)
    }

    const {isLoading, error, data} = useQuery({
        queryKey: ['clubs'],
        queryFn: getClubs
    });


    const deleteClub = async (id) => {
        await api.delete(`/api/v1/clubs/${id}`)
    }

    const queryClient = useQueryClient()
    const mutation = useMutation({
        mutationFn: deleteClub,
        onSuccess: () => {
            queryClient.invalidateQueries({queryKey: ['clubs']})
        }
    })

    if (error) {
        console.log(error)
    }

    if (isLoading) <>Loading...</>

    if (data) {
        return (
            <DefaultLayout>

                <ul>

                    {data.map((row) => (
                        <li key={row.id}>
                            {row.id} /{' '}
                            <Link href={`/club/${row.id}`}>{row.clubName}</Link> /{' '}
                            {row.author} / {row.createdDate}
                            <button onClick={() => mutation.mutate(row.id)}>
                                삭제
                            </button>
                        </li>
                    ))}
                </ul>
                <Link href="/clubCreate">
                Club Create 페이지로 이동
                </Link>
            </DefaultLayout>
        )
    }
}

'use client'

import Link from 'next/link'
import { useEffect, useState } from 'react'
import api from "@/util/api"
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import DefaultLayout from "@/components/Layouts/DefaultLayout";

export default function Answer() {

    const getAnswers = async () => {
        return await api.get('/api/v1/answers')
            .then((response) => response.data.data.answers)
    }

    const {isLoading, error, data} = useQuery({
        queryKey: ['answers'],
        queryFn: getAnswers
    });


    const deleteAnswer = async (id) => {
        await api.delete(`/api/v1/answers/${id}`)
    }

    const queryClient = useQueryClient()
    const mutation = useMutation({
        mutationFn: deleteAnswer,
        onSuccess: () => {
            queryClient.invalidateQueries({queryKey: ['answers']})
        }
    })

    if (error) {
        console.log(error)
    }

    if (isLoading) <>Loading...</>

    if (data) {
        return (
            <DefaultLayout>

                <ul>

                    {data.map((row) => (
                        <li key={row.id}>
                            {row.id} /{' '}
                            <Link href={`/answer/${row.id}`}>{row.content}</Link> /{' '}
                            {row.author} / {row.createdDate}
                            <button onClick={() => mutation.mutate(row.id)}>
                                삭제
                            </button>
                        </li>
                    ))}
                </ul>
                <Link href="/answerCreate">
                Answer Create 페이지로 이동
                </Link>
            </DefaultLayout>
        )
    }
}

'use client'

import { useState } from 'react';
import { useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import api from "@/util/api";
import Link from 'next/link'
import DefaultLayout from "@/components/Layouts/DefaultLayout";

export default function AnswerDetail() {
    const params = useParams();

    const getAnswer = async () => {
        return await api.get(`/api/v1/answers/${params.id}`)
            .then((response) => response.data.data.answer);
    }

    const { isLoading: answerLoading, error: answerError, data: answerData } = useQuery({
        queryKey: ['answer'],
        queryFn: getAnswer
    });

    if (answerError) {
        console.log(answerError);
    }

    if (answerLoading) {
        return <>Loading...</>;
    }

    if (answerData) {
        return (
            <DefaultLayout>
                <h1>댓글 상세 {params.id}번</h1>

                <div>{answerData.content}</div>
                <Link href={`/answer/${params.id}/edit`}>수정하기</Link>

            </DefaultLayout>
        );
    }
}