♻️ refactor : Modify functions to use material state

- Modify to send API requests using material state
- Fix to get token from localStorage in api request via fetch

Related issue: YJU-OKURA#93

Author: dorimu0

src/api/feedback/getFeedback.ts

@@ -1,8 +1,9 @@
+import BASE_URLS from '../baseUrl';
+
+const token = localStorage.getItem('access_token');
+
 const myHeaders = new Headers();
-myHeaders.append(
-  'Authorization',
-  'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MiwiZXhwIjoxOTY5OTAxMDIyfQ.U0k1q2oTrp3JwsIpem16o2W77tpVGiwylwc5cTFaZgU'
-);
+if (token) myHeaders.append('Authorization', token);
 
 const requestOptions = {
   method: 'GET',
@@ -16,7 +17,7 @@ const getFeedback = async (
 ) => {
   try {
     const response = await fetch(
-      `http://3.38.86.236:3000/api/nest/class/${cId}/feedback/materials/${mId}/get-feedback`,
+      `${BASE_URLS.nest}/class/${cId}/feedback/materials/${mId}/get-feedback`,
       requestOptions
     );
     console.log('res:', response);

src/app/[className]/[materialName]/components/FeedbackContainer.tsx

@@ -1,15 +1,19 @@
 import {useEffect, useState} from 'react';
+import {useRecoilValue} from 'recoil';
 import FeedbackForm from './FeedbackForm';
 import FeedbackList from './FeedbackList';
 import FeedbackKeywordList from './FeedbackKeywordList';
 import getFeedbacks from '@/src/api/feedback/getFeedbacks';
+import materialState from '@/src/recoil/atoms/materialState';
 import {feedback} from '@/src/interfaces/feedback';
 import '@/src/styles/variable.css';
 
 const FeedbackContainer = () => {
+  const material = useRecoilValue(materialState);
   const [feedbacks, setFeedbacks] = useState<feedback[]>([]);
   useEffect(() => {
-    getFeedbacks(1, 1, 1, 5).then(res => {
+    if (!material) return;
+    getFeedbacks(4, parseInt(material.id), 1, 5).then(res => {
       console.log(res);
       setFeedbacks(res);
     });
@@ -19,7 +23,7 @@ const FeedbackContainer = () => {
     <div className="">
       <div className="flex justify-between items-center p-4">
         <div className="text-gray-500 text-lg">Request feedback</div>
-        <FeedbackForm />
+        {material ? <FeedbackForm mId={parseInt(material?.id)} /> : null}
       </div>
       <div className="text-center w-full feedbackContainer box-border">
         {/* 資料のFeedback */}
@@ -49,7 +53,7 @@ const FeedbackContainer = () => {
           <div className="text-2xl font-semibold p-5">
             ✅ Pages most relevant to the question users were asking
           </div>
-          <FeedbackKeywordList />
+          {material ? <FeedbackKeywordList mId={material?.id} /> : null}
         </div>
       </div>
     </div>

src/app/[className]/[materialName]/components/FeedbackForm.tsx

@@ -3,36 +3,35 @@ import {useState} from 'react';
 import getFeedback from '@/src/api/feedback/getFeedback';
 import postFeedback from '@/src/api/feedback/postFeedback';
 
-const FeedbackForm = () => {
+const FeedbackForm = ({mId}: {mId: number}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [feedback, setFeedback] = useState('');
 
   const handleClickFeedback = () => {
     if (feedback !== '') setFeedback('');
-    getFeedback(1, 1, chat);
+    getFeedback(4, mId, chat);
     setFeedback(feedback.replace(/AI|:|"/g, ''));
   };
 
   const handleClickSave = () => {
     const data = feedback.replace(/AI|:|"/g, '');
-    postFeedback(1, 1, data).then(res => {
+    postFeedback(4, mId, data).then(res => {
       console.log(res);
       setIsOpen(false);
     });
   };
 
   const chat = async (reader: ReadableStreamDefaultReader) => {
-    let feedbackData = '';
+    // let feedbackData = '';
     try {
       while (reader) {
         const {done, value} = await reader.read();
         const decodedValue = new TextDecoder().decode(value);
-        feedbackData += decodedValue;
-        console.log(feedbackData);
+        // feedbackData += decodedValue;
         setFeedback(promptRes => promptRes + decodedValue);
 
         if (feedback.includes(' ')) {
-          feedbackData = '';
+          // feedbackData = '';
         }
         if (done) {
           break;

src/app/[className]/[materialName]/components/FeedbackKeywordList.tsx

@@ -4,11 +4,11 @@ import Image from 'next/image';
 import getKeywords from '@/src/api/feedback/getKeywords';
 import {keyword} from '@/src/interfaces/feedback';
 
-const FeedbackKeywordList = () => {
+const FeedbackKeywordList = ({mId}: {mId: string}) => {
   const [keywords, setKeywords] = useState<keyword[]>([]);
   const [loading, setLoading] = useState(true);
   useEffect(() => {
-    getKeywords(1, 1).then(res => {
+    getKeywords(4, parseInt(mId)).then(res => {
       console.log(res);
       setKeywords(res);
       setLoading(false);

src/app/[className]/[materialName]/components/FeedbackList.tsx

@@ -12,7 +12,7 @@ const FeedbackList = ({feedbacks}: {feedbacks: feedback[]}) => {
   SwiperCore.use([Navigation, Scrollbar, Autoplay]);
 
   const handleClickDelete = (fId: number) => {
-    deleteFeedback(1, fId).then(res => {
+    deleteFeedback(4, fId).then(res => {
       console.log(res);
     });
   };

src/app/[className]/[materialName]/components/ManageContainer.tsx

@@ -7,7 +7,7 @@ import FeedbackContainer from './FeedbackContainer';
 // import AttendanceContainer from './AttendanceContainer';
 import '@/src/styles/variable.css';
 
-const UserContainer = () => {
+const ManageContainer = () => {
   const tabs = ['Material', 'Quiz', 'Feedback', 'Attendance'];
   const [activeTab, setActiveTab] = useState(tabs[0]);
   const tabMapping = {
@@ -29,4 +29,4 @@ const UserContainer = () => {
   );
 };
 
-export default UserContainer;
+export default ManageContainer;