Fix API calls to use api service for TutorialTasks - restore Week 1 submissions

src/pages/TutorialTasks.tsx

@@ -87,14 +87,16 @@ const TutorialTasks: React.FC = () => {
   const fetchUserSubmissions = useCallback(async (tasks: TutorialTask[]) => {
     try {
       const token = localStorage.getItem('token');
-      const response = await fetch('/api/submissions/my-submissions', {
-        headers: {
-          'Authorization': `Bearer ${token}`
-        }
-      });
+      const user = localStorage.getItem('user');
+      
+      if (!token || !user) {
+        return;
+      }
+
+      const response = await api.get('/submissions/my-submissions');
 
-      if (response.ok) {
-        const data = await response.json();
+      if (response.data && response.data.submissions) {
+        const data = response.data;
         
         const groupedSubmissions: {[key: string]: UserSubmission[]} = {};
         
@@ -104,14 +106,16 @@ const TutorialTasks: React.FC = () => {
         });
         
         // Then populate with actual submissions
-        tasks.forEach(task => {
-          const taskSubmissions = data.submissions.filter((sub: any) => 
-            sub.sourceTextId && sub.sourceTextId._id === task._id
-          );
-          if (taskSubmissions.length > 0) {
-            groupedSubmissions[task._id] = taskSubmissions;
-          }
-        });
+        if (data.submissions && Array.isArray(data.submissions)) {
+          data.submissions.forEach((submission: any) => {
+            // Extract the actual ID from sourceTextId (could be string or object)
+            const sourceTextId = submission.sourceTextId?._id || submission.sourceTextId;
+            
+            if (sourceTextId && groupedSubmissions[sourceTextId]) {
+              groupedSubmissions[sourceTextId].push(submission);
+            }
+          });
+        }
                   
         setUserSubmissions(groupedSubmissions);
       }
@@ -124,14 +128,17 @@ const TutorialTasks: React.FC = () => {
     try {
       setLoading(true);
       const token = localStorage.getItem('token');
-      const response = await fetch(`/api/search/tutorial-tasks/${selectedWeek}`, {
-        headers: {
-          'Authorization': `Bearer ${token}`
-        }
-      });
+      const user = localStorage.getItem('user');
+      
+      if (!token || !user) {
+        navigate('/login');
+        return;
+      }
+
+      const response = await api.get(`/search/tutorial-tasks/${selectedWeek}`);
 
-      if (response.ok) {
-        const tasks = await response.json();
+      if (response.data) {
+        const tasks = response.data;
         setTutorialTasks(tasks);
         
         // Organize tasks into week structure
@@ -156,7 +163,7 @@ const TutorialTasks: React.FC = () => {
     } finally {
       setLoading(false);
     }
-  }, [selectedWeek, fetchUserSubmissions]);
+  }, [selectedWeek, fetchUserSubmissions, navigate]);
 
   useEffect(() => {
     const user = localStorage.getItem('user');
@@ -188,34 +195,24 @@ const TutorialTasks: React.FC = () => {
 
     try {
       setSubmitting({ ...submitting, [taskId]: true });
-      const token = localStorage.getItem('token');
       const user = JSON.parse(localStorage.getItem('user') || '{}');
-      const response = await fetch('/api/submissions', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          sourceTextId: taskId,
-          transcreation: translationText[taskId],
-          groupNumber: selectedGroups[taskId],
-          culturalAdaptations: [],
-          username: user.name || 'Unknown'
-        })
+      const response = await api.post('/submissions', {
+        sourceTextId: taskId,
+        transcreation: translationText[taskId],
+        groupNumber: selectedGroups[taskId],
+        culturalAdaptations: [],
+        username: user.name || 'Unknown'
       });
 
-      if (response.ok) {
-        const result = await response.json();
+      if (response.status >= 200 && response.status < 300) {
+        const result = response.data;
         console.log('Submission created successfully:', result);
    
         setTranslationText({ ...translationText, [taskId]: '' });
         setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
         await fetchUserSubmissions(tutorialTasks);
       } else {
-        const error = await response.json();
-        console.error('Failed to submit translation:', error);
-
+        console.error('Failed to submit translation:', response.data);
       }
     } catch (error) {
       console.error('Error submitting translation:', error);
@@ -237,26 +234,17 @@ const TutorialTasks: React.FC = () => {
     if (!editingSubmission || !editSubmissionText.trim()) return;
 
     try {
-      const token = localStorage.getItem('token');
-      const response = await fetch(`/api/submissions/${editingSubmission.id}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          transcreation: editSubmissionText
-        })
+      const response = await api.put(`/submissions/${editingSubmission.id}`, {
+        transcreation: editSubmissionText
       });
 
-      if (response.ok) {
+      if (response.status >= 200 && response.status < 300) {
   
         setEditingSubmission(null);
         setEditSubmissionText('');
         await fetchUserSubmissions(tutorialTasks);
       } else {
-        const error = await response.json();
-
+        console.error('Failed to update translation:', response.data);
       }
     } catch (error) {
       console.error('Error updating translation:', error);
@@ -342,24 +330,16 @@ const TutorialTasks: React.FC = () => {
         return;
       }
 
-      const response = await fetch(`/api/auth/admin/tutorial-brief/${selectedWeek}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'user-role': user.role
-        },
-        body: JSON.stringify({
-          translationBrief: '',
-          weekNumber: selectedWeek
-        })
+      const response = await api.put(`/auth/admin/tutorial-brief/${selectedWeek}`, {
+        translationBrief: '',
+        weekNumber: selectedWeek
       });
 
-      if (response.ok) {
+      if (response.status >= 200 && response.status < 300) {
         await fetchTutorialTasks();
 
       } else {
-        const error = await response.json();
+        console.error('Failed to remove translation brief:', response.data);
         
       }
     } catch (error) {
@@ -395,25 +375,17 @@ const TutorialTasks: React.FC = () => {
         return;
       }
 
-      const response = await fetch(`/api/auth/admin/tutorial-tasks/${editingTask}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'user-role': user.role
-        },
-        body: JSON.stringify({
-          ...editForm,
-          weekNumber: selectedWeek
-        })
+      const response = await api.put(`/auth/admin/tutorial-tasks/${editingTask}`, {
+        ...editForm,
+        weekNumber: selectedWeek
       });
 
-      if (response.ok) {
+      if (response.status >= 200 && response.status < 300) {
         await fetchTutorialTasks();
         setEditingTask(null);
 
       } else {
-        const error = await response.json();
+        console.error('Failed to update tutorial task:', response.data);
         
       }
     } catch (error) {
@@ -436,25 +408,17 @@ const TutorialTasks: React.FC = () => {
         return;
       }
 
-      const response = await fetch(`/api/auth/admin/tutorial-brief/${selectedWeek}`, {
-        method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'user-role': user.role
-        },
-        body: JSON.stringify({
-          translationBrief: editForm.translationBrief,
-          weekNumber: selectedWeek
-        })
+      const response = await api.put(`/auth/admin/tutorial-brief/${selectedWeek}`, {
+        translationBrief: editForm.translationBrief,
+        weekNumber: selectedWeek
       });
 
-      if (response.ok) {
+      if (response.status >= 200 && response.status < 300) {
         await fetchTutorialTasks();
         setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
 
       } else {
-        const error = await response.json();
+        console.error('Failed to update translation brief:', response.data);
         
       }
     } catch (error) {
@@ -502,28 +466,20 @@ const TutorialTasks: React.FC = () => {
         return;
       }
 
-      const response = await fetch('/api/auth/admin/tutorial-tasks', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'user-role': user.role
-        },
-        body: JSON.stringify({
-          title: `Week ${selectedWeek} Tutorial Task`,
-          content: editForm.content,
-          sourceLanguage: 'English',
-          weekNumber: selectedWeek,
-          category: 'tutorial'
-        })
+      const response = await api.post('/auth/admin/tutorial-tasks', {
+        title: `Week ${selectedWeek} Tutorial Task`,
+        content: editForm.content,
+        sourceLanguage: 'English',
+        weekNumber: selectedWeek,
+        category: 'tutorial'
       });
 
-      if (response.ok) {
+      if (response.status >= 200 && response.status < 300) {
         await fetchTutorialTasks();
         setAddingTask(false);
 
       } else {
-        const error = await response.json();
+        console.error('Failed to add tutorial task:', response.data);
         
       }
     } catch (error) {
@@ -547,19 +503,13 @@ const TutorialTasks: React.FC = () => {
         return;
       }
 
-      const response = await fetch(`/api/auth/admin/tutorial-tasks/${taskId}`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'user-role': user.role
-        }
-      });
+      const response = await api.delete(`/auth/admin/tutorial-tasks/${taskId}`);
 
-      if (response.ok) {
+      if (response.status >= 200 && response.status < 300) {
         await fetchTutorialTasks();
 
       } else {
-        const error = await response.json();
+        console.error('Failed to delete tutorial task:', response.data);
         
       }
     } catch (error) {
@@ -891,21 +841,7 @@ const TutorialTasks: React.FC = () => {
                         placeholder="Enter source text..."
                       />
                     ) : (
-                      <>
-                        <p className="text-indigo-900 leading-relaxed text-lg font-source-text mb-4">{task.content}</p>
-                        {task.imageUrl && (
-                          <div className="mt-4">
-                            <img 
-                              src={task.imageUrl} 
-                              alt={task.imageAlt || 'Task image'} 
-                              className="w-full max-w-md mx-auto rounded-lg shadow-md"
-                              onError={(e) => {
-                                e.currentTarget.style.display = 'none';
-                              }}
-                            />
-                          </div>
-                        )}
-                      </>
+                      <p className="text-indigo-900 leading-relaxed text-lg font-source-text">{task.content}</p>
                     )}
                   </div>