From 37807ac7898dc9808816d9618a23fc462e5e2f26 Mon Sep 17 00:00:00 2001 From: tjrmswo <93309061+tjrmswo@users.noreply.github.com> Date: Fri, 19 Apr 2024 13:15:10 +0900 Subject: [PATCH] =?UTF-8?q?bugfix:=20=EA=B4=80=EB=A6=AC=EC=9E=90=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=89=EB=8C=80=20=EC=B0=A8?= =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../adminComponents/AdminBarChart.tsx | 14 +++++--- .../components/adminComponents/AdminModal.tsx | 32 +++++++------------ .../AdminSignupCorporation.tsx | 22 +++---------- src/app/pages/adminPage/page.tsx | 19 +++++++++++ 4 files changed, 46 insertions(+), 41 deletions(-) diff --git a/src/app/components/adminComponents/AdminBarChart.tsx b/src/app/components/adminComponents/AdminBarChart.tsx index 24c3aa8..6d0d385 100644 --- a/src/app/components/adminComponents/AdminBarChart.tsx +++ b/src/app/components/adminComponents/AdminBarChart.tsx @@ -2,18 +2,17 @@ /* eslint-disable react-hooks/rules-of-hooks */ "use client"; /** @jsxImportSource @emotion/react */ -import React, { SetStateAction } from "react"; +import React, { SetStateAction, useEffect } from "react"; // libraries import { BarChart } from "@mui/x-charts/BarChart"; import { useQuery } from "@tanstack/react-query"; import { Box } from "@mui/material"; import { css } from "@emotion/react"; +import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth"; // types -import { CompanyMockData } from "@/app/types/aboutAdminPage"; -import moment from "moment"; -import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth"; +import { CompanyData, CompanyMockData } from "@/app/types/aboutAdminPage"; interface BarChartType { mockSignupData: CompanyMockData[]; @@ -22,6 +21,7 @@ interface BarChartType { setMockApprovedData: React.Dispatch>; mockNonApprovedData: CompanyMockData[]; setMockNonApprovedData: React.Dispatch>; + companyData: CompanyData[]; } const adminBarChart: React.FC = ({ @@ -31,7 +31,9 @@ const adminBarChart: React.FC = ({ setMockApprovedData, mockNonApprovedData, setMockNonApprovedData, + companyData = [], }) => { + console.log("companyData: ", companyData); const getEntireData = useQuery({ queryKey: ["getUserMockEntireData"], queryFn: async () => { @@ -56,6 +58,10 @@ const adminBarChart: React.FC = ({ }, }); + useEffect(() => { + getEntireData.refetch(); + }, [companyData]); + if (getEntireData.isLoading) return
Data Loading...
; if (getEntireData.error) return
{getEntireData.error.toString()}
; diff --git a/src/app/components/adminComponents/AdminModal.tsx b/src/app/components/adminComponents/AdminModal.tsx index b4788b7..db46537 100644 --- a/src/app/components/adminComponents/AdminModal.tsx +++ b/src/app/components/adminComponents/AdminModal.tsx @@ -3,7 +3,7 @@ "use client"; /** @jsxImportSource @emotion/react */ -import React, { SetStateAction, useEffect } from "react"; +import React, { SetStateAction } from "react"; import Image from "next/image"; // styles @@ -29,7 +29,11 @@ import Telephone from "@/app/assets/svg/phone.svg"; // libraries import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth"; -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { + UseQueryResult, + useMutation, + useQueryClient, +} from "@tanstack/react-query"; import { css } from "@emotion/react"; interface ModalType { @@ -42,6 +46,7 @@ interface ModalType { setCompanyData: React.Dispatch>; colorChanged: boolean; setColorChanged: React.Dispatch>; + getCompanyData: UseQueryResult; } const AdminModal: React.FC = ({ @@ -49,9 +54,9 @@ const AdminModal: React.FC = ({ isVisible, setIsVisible, changed, - companyData, setCompanyData, setSelectedData, + getCompanyData, }) => { const queryclient = useQueryClient(); @@ -59,19 +64,6 @@ const AdminModal: React.FC = ({ setIsVisible(false); }; - const { isLoading, error, refetch } = useQuery({ - queryKey: ["getCompanyData"], - queryFn: async () => { - const response = await userAxiosWithAuth.get( - `${process.env.NEXT_PUBLIC_BASE_URL}/admin/companies` - ); - - setCompanyData(response.data.data); - return response; - }, - enabled: false, // 초기에는 실행하지 않도록 설정 - }); - const approveCompany = useMutation({ mutationFn: async () => { const body = { @@ -90,7 +82,7 @@ const AdminModal: React.FC = ({ } }, onSuccess: () => { - refetch(); + getCompanyData.refetch(); }, onError: (e) => { console.log(e.message); @@ -115,15 +107,15 @@ const AdminModal: React.FC = ({ } }, onSuccess: () => { - refetch(); + getCompanyData.refetch(); }, onError: (e) => { console.log(e.message); }, }); - if (isLoading) return
로딩중...
; - if (error) return
{error.message}
; + if (getCompanyData.isLoading) return
로딩중...
; + if (getCompanyData.error) return
{getCompanyData.error.message}
; return (
>; changed: number; setChanged: (T: number) => void; + getCompanyData: UseQueryResult; } const AdminSignupCorporation: React.FC = ({ @@ -34,21 +35,8 @@ const AdminSignupCorporation: React.FC = ({ setIsVisible, changed, setChanged, + getCompanyData, }) => { - const { isLoading, error, refetch } = useQuery({ - queryKey: ["getCompanyData"], - queryFn: async () => { - const response = await userAxiosWithAuth.get( - `${process.env.NEXT_PUBLIC_BASE_URL}/admin/companies` - ); - const data = response.data.data; - console.log(data); - - setCompanyData(data); - return data; - }, - }); - const getTableData = (row: CompanyData) => { if (row.id !== selectedData?.id) { setIsVisible(true); @@ -67,8 +55,8 @@ const AdminSignupCorporation: React.FC = ({ } }; - if (isLoading) return
로딩중...
; - if (error) return
{error.message}
; + if (getCompanyData.isLoading) return
로딩중...
; + if (getCompanyData.error) return
{getCompanyData.error.message}
; return (
{ const [cookies] = useCookies(["role"]); @@ -98,6 +100,20 @@ const page = () => { } }, []); + const getCompanyData = useQuery({ + queryKey: ["getCompanyData"], + queryFn: async () => { + const response = await userAxiosWithAuth.get( + `${process.env.NEXT_PUBLIC_BASE_URL}/admin/companies` + ); + const data = response.data.data; + console.log(data); + + setCompanyData(data); + return data; + }, + }); + return (
@@ -144,6 +160,7 @@ const page = () => { setIsVisible={setIsVisible} changed={changed} setChanged={setChanged} + getCompanyData={getCompanyData} /> {isVisible === true ? ( { setCompanyData={setCompanyData} colorChanged={colorChanged} setColorChanged={setColorChanged} + getCompanyData={getCompanyData} /> ) : undefined}
@@ -177,6 +195,7 @@ const page = () => { setMockApprovedData={setMockApprovedData} mockNonApprovedData={mockNonApprovedData} setMockNonApprovedData={setMockNonApprovedData} + companyData={companyData} />