✨ feat : Add material state management

- Add material state management
- Modify components to retrieve values via material state management

Related issue: YJU-OKURA#93

Author: dorimu0

src/app/[className]/[materialName]/components/subComponents/PromptChat.tsx

@@ -9,21 +9,21 @@ import {PromptMessagesProps} from '@/src/interfaces/prompt';
 import icons from '@/public/svgs/prompt';
 import '@/src/styles/variable.css';
 
-const PromptChat = () => {
+const PromptChat = ({pId}: {pId: number}) => {
   const [messages, setMsg] = useState<PromptMessagesProps[]>();
   const [inputMsg, setInputMsg] = useState<string>('');
   const [promptRes, setPromptRes] = useState<string>('');
   const [reload, setReload] = useState<boolean>(false);
 
   useEffect(() => {
-    getPrompt(4, 126, 1, 6).then(res => {
+    getPrompt(4, pId, 1, 6).then(res => {
       res.messages.reverse();
       setMsg(res.messages);
     });
   }, [reload]);
 
   const handleClickIcon = (mId: number) => {
-    patchMessage(4, 126, mId, true).then(res => {
+    patchMessage(4, pId, mId, true).then(res => {
       console.log(res);
     });
   };
@@ -56,7 +56,7 @@ const PromptChat = () => {
 
   useEffect(() => {
     if (inputMsg === '') return;
-    postPrompt(4, 126, inputMsg, chat).then(() => {
+    postPrompt(4, pId, inputMsg, chat).then(() => {
       setInputMsg('');
     });
   }, [inputMsg]);

src/app/[className]/[materialName]/components/subComponents/Storage.tsx

@@ -7,14 +7,14 @@ import patchMessage from '@/src/api/prompts/patchMessage';
 import {StorageMessage} from '@/src/interfaces/prompt';
 import icons from '@/public/svgs/prompt';
 
-const Storage = () => {
+const Storage = ({pId}: {pId: number}) => {
   const [isOpen, setIsOpen] = useState<boolean[]>([]);
   const [messages, setMsg] = useState<StorageMessage[]>();
   const [reload, setReload] = useState<boolean>(false);
 
   useEffect(() => {
     // コメントを取得する処理
-    getMessage(4, 126, 1, 5).then(res => {
+    getMessage(4, pId, 1, 5).then(res => {
       console.log(res);
       setMsg(res);
       setIsOpen(new Array(res.length).fill(false)); // コメントの開閉状態を初期化
@@ -23,7 +23,7 @@ const Storage = () => {
 
   const handleClickDelete = (messageId: number) => {
     // コメントを削除する処理
-    patchMessage(1, 1, messageId, false).then(res => {
+    patchMessage(4, pId, messageId, false).then(res => {
       console.log(res);
       setReload(!reload);
     });

src/app/[className]/[materialName]/components/subComponents/SubContainer.tsx

@@ -1,16 +1,19 @@
 'use client';
 import {useState} from 'react';
+import {useRecoilValue} from 'recoil';
 import {Dashboard, TabsMapping} from '@/src/components/dashboard';
 import PromptChat from './PromptChat';
 import Storage from './Storage';
+import materialState from '@/src/recoil/atoms/materialState';
 import '@/src/styles/variable.css';
 
 const SubContainer = () => {
   const TABS = ['PromptChat', 'Storage'];
   const [activeTab, setActiveTab] = useState(TABS[0]);
+  const material = useRecoilValue(materialState);
   const tabMapping = {
-    PromptChat: <PromptChat />,
-    Storage: <Storage />,
+    PromptChat: <PromptChat pId={material ? material?.prompts[0].id : 0} />,
+    Storage: <Storage pId={material ? material?.prompts[0].id : 0} />,
   };
 
   return (

src/app/[className]/[materialName]/page.tsx

@@ -1,11 +1,15 @@
+'use client';
+import {useRecoilValue} from 'recoil';
 import {ManageContainer, UserContainer} from './components';
 import {SubContainer} from './components/subComponents';
-import User from '@/src/model/User';
+import classUserState from '@/src/recoil/atoms/classUserState';
+import ROLES from '@/src/constants/roles';
 
 const Page = () => {
+  const classUser = useRecoilValue(classUserState);
   return (
     <div className="w-full box-border ">
-      {User.managerRoll === 'manager' ? (
+      {classUser && ROLES[classUser?.role_id] === 'ADMIN' ? (
         <div className="p-4">
           <div className="text-5xl py-4 border-b-2">SubjectName</div>
           <ManageContainer />

src/components/navbar/material/MaterialList.tsx

@@ -6,6 +6,8 @@ import deleteMaterial from '@/src/api/material/deleteMaterial';
 import postPromptAccess from '@/src/api/prompts/postPromptAccess';
 import {Material, ParamsProps} from '@/src/interfaces/navbar';
 import icons from '@/public/svgs/navbar';
+import {useSetRecoilState} from 'recoil';
+import materialState from '@/src/recoil/atoms/materialState';
 
 const MaterialList = ({
   materials,
@@ -19,6 +21,7 @@ const MaterialList = ({
   const [isToggleOpen, setIsToggleOpen] = useState<boolean[]>([]);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [editData, setEditData] = useState<Material>();
+  const setMaterialState = useSetRecoilState(materialState);
 
   const handleClickSubject = (mId: number) => {
     if (materials[mId] && materials[mId].prompts.length === 0 && cId) {
@@ -57,7 +60,10 @@ const MaterialList = ({
                 className="flex w-full items-center justify-between"
                 onClick={() => handleClickSubject(parseInt(material.id))}
               >
-                <Link href={`/${params.className}/${material.name}`}>
+                <Link
+                  href={`/${params.className}/${material.name}`}
+                  onClick={() => setMaterialState(material)}
+                >
                   {material.name}
                 </Link>
                 <Image

src/interfaces/navbar/material.ts

@@ -4,7 +4,9 @@ interface Material {
   file: {
     m_path: string;
   };
-  prompts: [];
+  prompts: {
+    id: number;
+  }[];
 }
 
 export default Material;

src/recoil/atoms/materialState.ts

@@ -0,0 +1,13 @@
+import {atom} from 'recoil';
+import {Material} from '@/src/interfaces/navbar';
+import {recoilPersist} from 'recoil-persist';
+
+const {persistAtom} = recoilPersist();
+
+const materialState = atom<Material | null>({
+  key: 'materialState',
+  default: null,
+  effects_UNSTABLE: [persistAtom],
+});
+
+export default materialState;