♻️ refactor : Modify API requests based on classId

- Modify API requests based on the specified class user on prompt and material pages.
- Fix to get locally stored token in postPrompt function

Related issue: #104

Author: dorimu0

src/api/prompts/postPrompt.ts

@@ -4,18 +4,19 @@ const postPrompt = async (
   message: string,
   chat: (reader: ReadableStreamDefaultReader) => void
 ) => {
+  const token = localStorage.getItem('access_token');
+  console.log('token:', token);
   const body = {
     message: message,
   };
+  console.log('body:', body);
   try {
     const response = await fetch(
       `http://3.38.86.236:3000/api/nest/class/${cId}/prompts/${id}`,
       {
         method: 'POST',
         headers: {
-          Authorization:
-            'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MiwiZXhwIjoxOTY5OTAxMDIyfQ.U0k1q2oTrp3JwsIpem16o2W77tpVGiwylwc5cTFaZgU',
-          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify(body),
       }

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

@@ -16,14 +16,14 @@ const PromptChat = () => {
   const [reload, setReload] = useState<boolean>(false);
 
   useEffect(() => {
-    getPrompt(1, 1, 1, 6).then(res => {
+    getPrompt(4, 126, 1, 6).then(res => {
       res.messages.reverse();
       setMsg(res.messages);
     });
   }, [reload]);
 
   const handleClickIcon = (mId: number) => {
-    patchMessage(1, 1, mId, true).then(res => {
+    patchMessage(4, 126, mId, true).then(res => {
       console.log(res);
     });
   };
@@ -56,8 +56,7 @@ const PromptChat = () => {
 
   useEffect(() => {
     if (inputMsg === '') return;
-    postPrompt(1, 1, inputMsg, chat).then(res => {
-      console.log(res);
+    postPrompt(4, 126, inputMsg, chat).then(() => {
       setInputMsg('');
     });
   }, [inputMsg]);

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

@@ -14,7 +14,7 @@ const Storage = () => {
 
   useEffect(() => {
     // コメントを取得する処理
-    getMessage(1, 1, 1, 5).then(res => {
+    getMessage(4, 126, 1, 5).then(res => {
       console.log(res);
       setMsg(res);
       setIsOpen(new Array(res.length).fill(false)); // コメントの開閉状態を初期化

src/components/navbar/material/MaterialContainer.tsx

@@ -7,7 +7,13 @@ import searchMaterial from '@/src/api/material/searchMaterial';
 import {Material, ParamsProps} from '@/src/interfaces/navbar';
 import icons from '@/public/svgs/navbar';
 
-const MaterialContainer = ({params}: {params: ParamsProps}) => {
+const MaterialContainer = ({
+  params,
+  cId,
+}: {
+  params: ParamsProps;
+  cId: string | null;
+}) => {
   const [materials, setMaterials] = useState<Material[]>([]);
   const [searchMaterials, setSearchMaterials] = useState<Material[]>([]);
   const [keyWord, setKeyWord] = useState<string>('');
@@ -16,7 +22,7 @@ const MaterialContainer = ({params}: {params: ParamsProps}) => {
 
   const onLoadMore = () => {
     setHasMore(false);
-    getMaterial(1, boardPage, 8).then(res => {
+    getMaterial(4, boardPage, 8).then(res => {
       if (res.length === 0) {
         setHasMore(false);
       } else {
@@ -85,9 +91,13 @@ const MaterialContainer = ({params}: {params: ParamsProps}) => {
         >
           {materials ? (
             keyWord ? (
-              <MaterialList materials={searchMaterials} params={params} />
+              <MaterialList
+                materials={searchMaterials}
+                params={params}
+                cId={cId}
+              />
             ) : (
-              <MaterialList materials={materials} params={params} />
+              <MaterialList materials={materials} params={params} cId={cId} />
             )
           ) : null}
         </InfiniteScroll>

src/components/navbar/material/MaterialForm.tsx

@@ -1,14 +1,20 @@
-import {ChangeEvent, useRef, useState} from 'react';
+import {ChangeEvent, useEffect, useRef, useState} from 'react';
 import Image from 'next/image';
 import postMaterial from '@/src/api/material/postMaterial';
 import {FormProps} from '@/src/interfaces/navbar';
 import icons from '@/public/svgs/navbar/prompt';
 
-const MaterialForm = ({setIsOpen}: FormProps) => {
+const MaterialForm = ({setIsOpen, editData}: FormProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [materialName, setMaterialName] = useState<string>('');
   const [material, setMaterial] = useState<File>();
 
+  useEffect(() => {
+    if (editData) {
+      console.log(editData);
+    }
+  }, []);
+
   const handleEnterName = (e: ChangeEvent<HTMLInputElement>) => {
     setMaterialName(e.target.value);
   };
@@ -28,7 +34,7 @@ const MaterialForm = ({setIsOpen}: FormProps) => {
   const handleClickButton = () => {
     console.log(material, materialName);
     if (material && materialName) {
-      postMaterial(1, materialName, material);
+      postMaterial(4, materialName, material);
     }
   };
 

src/components/navbar/material/MaterialList.tsx

@@ -10,16 +10,19 @@ import icons from '@/public/svgs/navbar';
 const MaterialList = ({
   materials,
   params,
+  cId,
 }: {
   materials: Material[];
   params: ParamsProps;
+  cId: string | null;
 }) => {
   const [isToggleOpen, setIsToggleOpen] = useState<boolean[]>([]);
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [editData, setEditData] = useState<Material>();
 
   const handleClickSubject = (mId: number) => {
-    if (materials[mId] && materials[mId].prompts.length === 0) {
-      postPromptAccess(1, mId);
+    if (materials[mId] && materials[mId].prompts.length === 0 && cId) {
+      postPromptAccess(parseInt(cId), mId);
     }
   };
 
@@ -70,6 +73,7 @@ const MaterialList = ({
                   <div
                     className="p-2 hover:bg-gray-200"
                     onClick={() => {
+                      setEditData(material);
                       setIsOpen(true);
                       setIsToggleOpen(prev => prev.map(() => false));
                     }}
@@ -89,7 +93,9 @@ const MaterialList = ({
             </li>
           );
         })}
-        {isOpen ? <MaterialForm setIsOpen={setIsOpen} /> : null}
+        {isOpen ? (
+          <MaterialForm setIsOpen={setIsOpen} editData={editData} />
+        ) : null}
       </ul>
     </div>
   );