Merge pull request #103 from Stack-Knowledge/feature/approveList

[Admin] approve list

Author: TaerangLee

packages/api/admin/src/hooks/user/index.ts

@@ -1,3 +1,5 @@
+export * from './useGetApprovedList';
 export * from './useGetScoringList';
 export * from './useGetSolveDetail';
+export * from './usePatchApprovalStatus';
 export * from './usePostScoringResult';

packages/api/admin/src/hooks/user/useGetApprovedList.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { userQueryKeys, userUrl, get } from 'api/common';
+
+import type { UseQueryOptions } from '@tanstack/react-query';
+import type { ApprovalStatusType } from 'types';
+
+export const useGetApprovedList = (
+  options?: UseQueryOptions<ApprovalStatusType[]>
+) =>
+  useQuery<ApprovalStatusType[]>(
+    userQueryKeys.getApprovedList(),
+    () => get(userUrl.approvedList()),
+    options
+  );

packages/api/admin/src/hooks/user/usePatchApprovalStatus.ts

@@ -0,0 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { userQueryKeys, userUrl, patch } from 'api/common';
+
+interface ApprovedStatus {
+  approveStatus: 'REJECT' | 'APPROVED';
+}
+
+export const usePatchApprovalStatus = (userId: string) =>
+  useMutation<void, Error, ApprovedStatus>(
+    userQueryKeys.patchApprovedStatus(userId),
+    (data) => patch(userUrl.approvedStatus(userId), data)
+  );

packages/api/common/src/hooks/auth/usePostLoginCode.ts

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { post, authQueryKeys, authUrl } from 'api/common';
+import { authQueryKeys, authUrl, post } from 'api/common';
 
 import type { TokenResponseLoginType } from 'types';
 

packages/api/common/src/libs/queryKeys.ts

@@ -34,4 +34,6 @@ export const userQueryKeys = {
   getScoringList: () => ['user', 'scoring'],
   postScoringResult: (solveId: string) => ['user', 'scoring', solveId],
   getSolveDetail: (solveId: string) => ['user', 'solve', solveId],
+  getApprovedList: () => ['user', 'list', 'approval'],
+  patchApprovedStatus: (userId: string) => ['user', 'approved', userId],
 };

packages/api/common/src/libs/urlController.ts

@@ -31,4 +31,6 @@ export const userUrl = {
   scoring: () => '/user/scoring',
   scoringResult: (solveId: string) => `/user/scoring/${solveId}`,
   solveDetail: (solveId: string) => `/user/scoring/${solveId}`,
+  approvedList: () => '/user/teacher',
+  approvedStatus: (userId: string) => `/user/${userId}`,
 };

packages/common/src/components/Header/index.tsx

@@ -53,7 +53,7 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
     toast.success('로그아웃 되었습니다.');
   }
 
-  if (isError) toast.success('로그아웃에 실패했습니다.');
+  if (isError) toast.error('로그아웃에 실패했습니다.');
 
   return (
     <S.HeaderWrapper>

packages/types/src/approvalStatus.ts

@@ -0,0 +1,5 @@
+export interface ApprovalStatusType {
+  name: string;
+  createdAt: string; // LocalDateTime
+  userId: string; // UUID
+}

packages/types/src/index.ts

@@ -9,3 +9,4 @@ export * from './solveStatusType';
 export * from './missionDetail';
 export * from './studentType';
 export * from './uploadProfile';
+export * from './approvalStatus';

projects/admin/src/PageContainer/MainPage/index.tsx

@@ -2,30 +2,58 @@
 
 import { useRef, useState } from 'react';
 
-import { XIcon } from 'admin/assets';
-import { ApproveModalButton } from 'admin/components';
+import { toast } from 'react-toastify';
+
+import { CapIcon, XIcon } from 'admin/assets';
+import { ModalItem, ApproveModalButton } from 'admin/components';
+
+import { useGetApprovedList } from 'api/admin';
 
 import { MainPage } from 'common';
 
 import * as S from './style';
 
 const MainPageComponent = () => {
-  const dialog = useRef<HTMLDialogElement>(null);
+  const { data, refetch } = useGetApprovedList();
 
+  const dialog = useRef<HTMLDialogElement>(null);
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const handleModalOpen = () => {
     dialog.current?.showModal();
     setIsOpen(true);
   };
 
+  const handleSuccessApproved = (isAccepted: boolean) => {
+    refetch();
+    isAccepted
+      ? toast.success('수락되었습니다.')
+      : toast.error('거절되었습니다.');
+  };
+
   return (
     <>
       <S.Modal ref={dialog} isOpen={isOpen}>
         <form method='dialog'>
           <S.ModalButton onClick={() => setIsOpen(false)}>
             <XIcon />
           </S.ModalButton>
+          <S.ModalWrapper>
+            {data && data.length > 0 ? (
+              data.map((item) => (
+                <ModalItem
+                  key={item.userId}
+                  teacherItem={item}
+                  onSuccessApproved={handleSuccessApproved}
+                />
+              ))
+            ) : (
+              <S.ApprovedNone>
+                <CapIcon />
+                <span>대기중인 선생님이 없습니다..</span>
+              </S.ApprovedNone>
+            )}
+          </S.ModalWrapper>
         </form>
       </S.Modal>
       <S.Wrapper onClick={handleModalOpen}>