Merge pull request #24 from MARU-EGG/admin-feat-file-check-store

[Admin] check question and answer store
MARU-EGG · Aug 9, 2024 · 8f73d53 · 8f73d53
2 parents 022cb8f + 1036d4d
commit 8f73d53
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 66 deletions.
diff --git a/src/hooks/use-html-file-submit.hooks.ts b/src/hooks/use-html-file-submit.hooks.ts
@@ -11,7 +11,7 @@ export const useHtmlFileSubmit = (type: string, category: string, html_file: Fil
     console.log(formdata.get('category'));
     console.log(formdata.get('html_file'));
     try {
-      const response = await llm_axiosInstance.post('/upload_html/', formdata, {
+      const response = await llm_axiosInstance.post('/upload_pdf/', formdata, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },

diff --git a/src/store/admin/check-question-answer-store.ts b/src/store/admin/check-question-answer-store.ts
@@ -0,0 +1,40 @@
+import { create } from 'zustand';
+
+export interface QuestionAnswerState {
+  id: number;
+  content: string;
+  viewCount: string;
+  isChecked: boolean;
+  answer: {
+    id: number;
+    content: string;
+  };
+}
+
+interface CheckQuestionAnswerState {
+  questionData: QuestionAnswerState[];
+  updateQuestionData: (firstData: QuestionAnswerState[]) => void; //처음 데이터를 삽입할 때 사용하는 거
+  inputQuestionData: (data: QuestionAnswerState) => void; //커스텀 질문 생성시 사용하는거
+  updateCheck: (id: number, isChecked: boolean) => void; //질문-답변 상태 확인할 때 사용
+  updateAnswer: (answerId: number, answerContent: string) => void; //답변 내용 변경할 때 사용
+}
+
+const useCheckQuestionAnswerStore = create<CheckQuestionAnswerState>((set) => ({
+  questionData: [],
+  updateQuestionData: (firstData) => set({ questionData: firstData }),
+  inputQuestionData: (data) => set((state) => ({ questionData: [...state.questionData, data] })),
+  updateCheck: (id, isChecked) =>
+    set((state) => ({
+      questionData: state.questionData.map((question) => (question.id === id ? { ...question, isChecked } : question)),
+    })),
+  updateAnswer: (answerId, answerContent) =>
+    set((state) => ({
+      questionData: state.questionData.map((question) =>
+        question.answer.id === answerId
+          ? { ...question, answer: { ...question.answer, content: answerContent } }
+          : question,
+      ),
+    })),
+}));
+
+export default useCheckQuestionAnswerStore;
diff --git a/src/store/chat-store.ts b/src/store/chat-store.ts
@@ -1,11 +1,11 @@
 import { create } from 'zustand';
 
 interface ChatState {
-  messages: { content: string; role: 'user' | 'system' }[];
-  loading: boolean;
-  addMessage: (message: { content: string; role: 'user' | 'system' }) => void;
+  messages: { content: string; role: 'user' | 'system' }[]; //사용자와 시스템 메시지가 저장되는 배열
+  loading: boolean; //답변이 오는 기간동안 로딩상태 파악 위한 것으로, 스피너에 적용
+  addMessage: (message: { content: string; role: 'user' | 'system' }) => void; //새로운 메시지가 들어올때 사용
   setLoading: (loading: boolean) => void;
-  updateLastMessage: (content: string) => void;
+  updateLastMessage: (content: string) => void; //유저가 새로운 질문을 할 때 화면에 보여지기 위해 사용되는 함수
 }
 
 const useChatStore = create<ChatState>((set) => ({

diff --git a/src/ui/components/admin/modal/edit-modal.tsx b/src/ui/components/admin/modal/edit-modal.tsx
@@ -3,29 +3,26 @@ import TextArea from 'antd/es/input/TextArea';
 import React, { useState } from 'react';
 import { AdminEditAnswer } from '../../../../api/admin-edit-answer';
 import { AdminCheckQuestionAnswer } from '../../../../api/admin-check-question-answer';
+import useCheckQuestionAnswerStore from '../../../../store/admin/check-question-answer-store';
 
 interface CustomModalProps {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  modalTitle: string;
-  modalContent: string;
-  modalContentId: number;
   questionId: number;
-  isChecked: boolean;
 }
 
-const EditModal = ({
-  open,
-  setOpen,
-  modalTitle,
-  modalContent,
-  modalContentId,
-  questionId,
-  isChecked,
-}: CustomModalProps) => {
+const EditModal = ({ open, setOpen, questionId }: CustomModalProps) => {
+  const { questionData, updateCheck, updateAnswer } = useCheckQuestionAnswerStore();
+  const question = questionData.find((question) => question.id === questionId);
+
+  if (!question) {
+    return null;
+  }
+
+  const { content: modalTitle, answer, isChecked } = question;
   const [editStatus, setEditStatus] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [content, setContent] = useState(modalContent);
+  const [content, setContent] = useState(answer.content);
 
   const executeWithLoading = async (action: () => Promise<void>) => {
     setLoading(true);
@@ -41,8 +38,12 @@ const EditModal = ({
   const handleEditSubmit = async () => {
     try {
       await executeWithLoading(async () => {
-        await AdminEditAnswer(modalContentId, content);
-        await AdminCheckQuestionAnswer({ questionId, check: true });
+        await AdminEditAnswer(answer.id, content);
+        updateAnswer(answer.id, content);
+        if (!isChecked) {
+          await AdminCheckQuestionAnswer({ questionId, check: true });
+          updateCheck(questionId, true);
+        }
       });
     } catch (err) {
       setEditStatus(false);
@@ -51,8 +52,10 @@ const EditModal = ({
   };
 
   const handleCheckToggle = async () => {
+    const newCheckStatus = !isChecked;
     await executeWithLoading(async () => {
-      await AdminCheckQuestionAnswer({ questionId, check: !isChecked });
+      await AdminCheckQuestionAnswer({ questionId, check: newCheckStatus });
+      updateCheck(questionId, newCheckStatus);
     });
   };
 
@@ -86,7 +89,6 @@ const EditModal = ({
             질문-답변 미확인 상태 변경
           </Button>
         ),
-
         editStatus ? (
           <Button key="submit" onClick={handleEditSubmit} loading={loading} type="primary">
             편집완료
@@ -98,7 +100,7 @@ const EditModal = ({
         ),
       ]}
     >
-      {editStatus ? <TextArea rows={25} value={content} onChange={handleChange} /> : <div>{modalContent}</div>}
+      {editStatus ? <TextArea rows={25} value={content} onChange={handleChange} /> : <div>{answer.content}</div>}
     </Modal>
   );
 };

diff --git a/src/ui/pages/admin/file-list.tsx b/src/ui/pages/admin/file-list.tsx
@@ -30,7 +30,7 @@ const FileList: React.FC = () => {
     setUploading(true);
     try {
       if (fileList.length > 0) {
-        const file = fileList[0].originFileObj as File; // 여기서 실제 File 객체를 가져옵니다.
+        const file = fileList[0].originFileObj as File;
         const uploadData = useHtmlFileSubmit(type, category, file);
         await uploadData();
         console.log('success');

diff --git a/src/ui/pages/admin/login.tsx b/src/ui/pages/admin/login.tsx
@@ -37,7 +37,7 @@ export default function Login() {
     <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-sm">
         <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
-          Sign in to your account
+          명지대학교 챗봇 관리 시스템
         </h2>
       </div>
 
@@ -78,7 +78,6 @@ export default function Login() {
                 onChange={(e) => setPassword(e.target.value)}
                 className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
               />
-
             </div>
           </div>
           {error && <div className="text-red-500">{error}</div>}

diff --git a/src/ui/pages/admin/question-check.tsx b/src/ui/pages/admin/question-check.tsx
@@ -2,19 +2,9 @@ import { Divider, Select, Table, TableProps, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { adminQuestionCheck } from '../../../api/admin-question-check';
 import EditModal from '../../components/admin/modal/edit-modal';
+import useCheckQuestionAnswerStore, { QuestionAnswerState } from '../../../store/admin/check-question-answer-store';
 
-interface DataType {
-  id: number;
-  content: string;
-  viewCount: string;
-  isChecked: boolean;
-  answer: {
-    id: number;
-    content: string;
-  };
-}
-
-const columns: TableProps<DataType>['columns'] = [
+const columns: TableProps<QuestionAnswerState>['columns'] = [
   {
     title: '질문내용',
     dataIndex: 'content',
@@ -34,13 +24,13 @@ const columns: TableProps<DataType>['columns'] = [
 ];
 
 const QuestionCheck = () => {
+  const { questionData, updateQuestionData } = useCheckQuestionAnswerStore();
   const [type, setType] = useState('SUSI');
   const [category, setCategory] = useState('');
-  const [data, setData] = useState<DataType[]>([]);
   const [loading, setLoading] = useState(false);
 
   const [modalOpen, setModalOpen] = useState(false);
-  const [selectedQuestion, setSelectedQuestion] = useState<DataType | null>(null);
+  const [selectedQuestion, setSelectedQuestion] = useState<QuestionAnswerState | null>(null);
 
   const handleTypeChange = (value: string) => {
     setType(value);
@@ -50,7 +40,7 @@ const QuestionCheck = () => {
     setCategory(value);
   };
 
-  const handleRowClick = (record: DataType) => {
+  const handleRowClick = (record: QuestionAnswerState) => {
     setSelectedQuestion(record);
     setModalOpen(true);
   };
@@ -60,17 +50,7 @@ const QuestionCheck = () => {
       setLoading(true);
       try {
         const response = await adminQuestionCheck({ type, category });
-        const formattedData = response.map((item: any) => ({
-          id: item.id,
-          content: item.content,
-          viewCount: item.viewCount.toString(),
-          isChecked: item.isChecked,
-          answer: {
-            id: item.answer.id,
-            content: item.answer.content,
-          },
-        }));
-        setData(formattedData);
+        updateQuestionData(response);
       } catch (error) {
         console.error('Error fetching data:', error);
       } finally {
@@ -79,7 +59,7 @@ const QuestionCheck = () => {
     };
 
     fetchData();
-  }, [type, category]);
+  }, [type, category, updateQuestionData]);
 
   return (
     <div className="w-full">
@@ -115,7 +95,7 @@ const QuestionCheck = () => {
       <div className="mx-8 my-3">
         <Table
           columns={columns}
-          dataSource={data}
+          dataSource={questionData}
           loading={loading}
           rowKey="id"
           onRow={(record) => ({
@@ -124,17 +104,7 @@ const QuestionCheck = () => {
         />
       </div>
 
-      {selectedQuestion && (
-        <EditModal
-          open={modalOpen}
-          setOpen={setModalOpen}
-          modalTitle={selectedQuestion.content}
-          modalContent={selectedQuestion.answer.content}
-          modalContentId={selectedQuestion.answer.id}
-          questionId={selectedQuestion.id}
-          isChecked={selectedQuestion.isChecked}
-        />
-      )}
+      {selectedQuestion && <EditModal open={modalOpen} setOpen={setModalOpen} questionId={selectedQuestion.id} />}
     </div>
   );
 };