Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef, useTransition, useDeferredValue } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../services/api';
+import { flushSync } from 'react-dom';
 import { 
   AcademicCapIcon, 
   DocumentTextIcon, 
@@ -39,7 +40,7 @@ interface UserSubmission {
 }
 
 interface WeekBrief {
-    _id: string;
+  _id: string;
   weekNumber: number;
   title: string;
   description: string;
@@ -163,7 +164,7 @@ const TutorialTasks: React.FC = () => {
       if (response.status >= 200 && response.status < 300) {
         const result = response.data;
         console.log('Submission created successfully:', result);
-   
+        
         setTranslationText({ ...translationText, [taskId]: '' });
         setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
         setSubmitting({ ...submitting, [taskId]: false });
@@ -229,7 +230,7 @@ const TutorialTasks: React.FC = () => {
   const saveTask = async () => {
     if (!editingTask || !editTaskText.trim()) return;
     
-      setSaving(true);
+    setSaving(true);
     try {
       const response = await api.put(`/api/tasks/${editingTask}`, {
         content: editTaskText
@@ -254,8 +255,8 @@ const TutorialTasks: React.FC = () => {
       const response = await api.put(`/api/tasks/${taskId}/move`, { direction });
       if (response.status === 200) {
         fetchTutorialTasks();
-        }
-      } catch (error) {
+      }
+    } catch (error) {
       console.error('Error moving task:', error);
     }
   };
@@ -307,18 +308,18 @@ const TutorialTasks: React.FC = () => {
         {/* Week Selector */}
         <div className="flex items-center justify-center space-x-4 mb-8">
           {[1, 2, 3, 4, 5].map((week) => (
-              <button
-                key={week}
+            <button
+              key={week}
               onClick={() => setSelectedWeek(week)}
               className={`px-6 py-3 rounded-lg font-medium transition-colors ${
-                  selectedWeek === week
-                    ? 'bg-indigo-600 text-white'
+                selectedWeek === week
+                  ? 'bg-indigo-600 text-white'
                   : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200'
-                }`}
-              >
-                Week {week}
-              </button>
-            ))}
+              }`}
+            >
+              Week {week}
+            </button>
+          ))}
         </div>
 
         {/* Admin Controls */}
@@ -346,11 +347,11 @@ const TutorialTasks: React.FC = () => {
                           isWeekHidden ? 'translate-x-5' : 'translate-x-0.5'
                         } mt-0.5`}
                       />
-                </div>
-            </div>
+                    </div>
+                  </div>
                 </label>
-                </div>
               </div>
+            </div>
           </div>
         )}
 
@@ -362,7 +363,7 @@ const TutorialTasks: React.FC = () => {
                 <DocumentTextIcon className="h-5 w-5 text-indigo-600" />
               </div>
               <h2 className="text-xl font-semibold text-gray-900">Translation Brief</h2>
-              </div>
+            </div>
             <div className="prose prose-indigo max-w-none">
               <p className="text-gray-700 leading-relaxed">
                 This week focuses on translating {selectedWeek === 1 ? 'basic conversational phrases' : 
@@ -378,19 +379,19 @@ const TutorialTasks: React.FC = () => {
         {/* Group Google Doc Section */}
         {!isWeekHidden && (
           <div ref={groupDocRef} className="bg-white rounded-lg p-6 mb-8 border border-gray-200 shadow-sm">
-              <div className="flex items-center justify-between mb-4">
-                              <div className="flex items-center space-x-3">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center space-x-3">
                 <div className="bg-green-100 rounded-full p-2">
                   <DocumentTextIcon className="h-5 w-5 text-green-600" />
                 </div>
                 <h3 className="text-lg font-semibold text-gray-900">Group Google Doc</h3>
               </div>
-              </div>
+            </div>
             
-                  <div className="space-y-4">
+            <div className="space-y-4">
               <div className="flex items-center space-x-4">
-                          <input
-                            type="text"
+                <input
+                  type="text"
                   placeholder="Enter Google Doc URL"
                   className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
                 />
@@ -402,38 +403,38 @@ const TutorialTasks: React.FC = () => {
                 </select>
                 <button className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                   Add Doc Link
-                                </button>
-                    </div>
-                    
+                </button>
+              </div>
+              
               <div className="bg-gray-50 rounded-lg p-4">
                 <h4 className="font-medium text-gray-900 mb-2">All Groups</h4>
-                      <div className="space-y-2">
+                <div className="space-y-2">
                   <div className="flex items-center justify-between py-2 px-3 bg-white rounded border">
                     <span className="text-sm text-gray-600">No Google Doc links added yet</span>
-                          </div>
-                      </div>
-                    </div>
-                      </div>
-                      </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         )}
 
         {/* Tasks List */}
         {!isWeekHidden && (
           <div ref={listRef} className="space-y-8">
             {tutorialTasks.length === 0 ? (
-            <div className="text-center py-12">
+              <div className="text-center py-12">
                 <div className="bg-gray-100 rounded-full p-4 w-16 h-16 mx-auto mb-4">
                   <DocumentTextIcon className="h-8 w-8 text-gray-400" />
                 </div>
                 <h3 className="text-lg font-medium text-gray-900 mb-2">No tasks available</h3>
                 <p className="text-gray-600">Tasks for this week will be added soon.</p>
-            </div>
-          ) : (
+              </div>
+            ) : (
               tutorialTasks.map((task, index) => (
                 <div key={task._id} className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden" style={{ minHeight: '700px' }}>
                   <div className="p-6">
-                  <div className="flex items-center justify-between mb-4">
-                    <div className="flex items-center space-x-3">
+                    <div className="flex items-center justify-between mb-4">
+                      <div className="flex items-center space-x-3">
                         <div className="relative p-2 rounded-2xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)]">
                           <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
                           <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
@@ -441,63 +442,63 @@ const TutorialTasks: React.FC = () => {
                           <div className="pointer-events-none absolute inset-0 rounded-2xl" style={{ background: 'radial-gradient(120%_120%_at_50%_55%,rgba(0,0,0,0.04),rgba(0,0,0,0)_60%)', opacity: 0.9 }} />
                           <div className="pointer-events-none absolute inset-0 rounded-2xl bg-sky-500/30 mix-blend-overlay opacity-35" />
                           <DocumentTextIcon className="relative h-5 w-5 text-ui-text" />
-                      </div>
-                      <div>
+                        </div>
+                        <div>
                           <h3 className="text-lg font-semibold text-gray-900 flex items-center">Source Text #{index + 1}
                             {isAdmin && selectedWeek >= 4 && (
-                            <span className="ml-2 inline-flex items-center space-x-1">
-                              <button
-                                className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
-                                onClick={() => moveTask(task._id, 'up')}
-                                title="Move up"
-                              >↑</button>
-                              <button
-                                className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
-                                onClick={() => moveTask(task._id, 'down')}
-                                title="Move down"
-                              >↓</button>
-                            </span>
-                          )}
-                        </h3>
+                              <span className="ml-2 inline-flex items-center space-x-1">
+                                <button
+                                  className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
+                                  onClick={() => moveTask(task._id, 'up')}
+                                  title="Move up"
+                                >↑</button>
+                                <button
+                                  className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
+                                  onClick={() => moveTask(task._id, 'down')}
+                                  title="Move down"
+                                >↓</button>
+                              </span>
+                            )}
+                          </h3>
+                        </div>
                       </div>
-                    </div>
                       {isAdmin && (
-                      <div className="flex items-center space-x-2">
-                        {editingTask === task._id ? (
-                          <>
-                            <button
-                              onClick={saveTask}
-                              disabled={saving}
-                              className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
-                            >
-                              {saving ? (
-                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
-                              ) : (
-                                <CheckIcon className="h-4 w-4" />
-                              )}
-                            </button>
-                            <button
+                        <div className="flex items-center space-x-2">
+                          {editingTask === task._id ? (
+                            <>
+                              <button
+                                onClick={saveTask}
+                                disabled={saving}
+                                className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                              >
+                                {saving ? (
+                                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
+                                ) : (
+                                  <CheckIcon className="h-4 w-4" />
+                                )}
+                              </button>
+                              <button
                                 onClick={cancelEditTask}
                                 className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors duration-200"
-                            >
-                              <XMarkIcon className="h-4 w-4" />
-                            </button>
-                          </>
-                        ) : (
+                              >
+                                <XMarkIcon className="h-4 w-4" />
+                              </button>
+                            </>
+                          ) : (
                             <button
                               onClick={() => setEditingTask(task._id)}
                               className="bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-lg transition-colors duration-200"
                             >
                               <PencilIcon className="h-4 w-4" />
                             </button>
-                        )}
-                      </div>
-                    )}
-                  </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
 
                     {/* Source Text Content */}
                     <div className="bg-gray-50 rounded-lg p-4 mb-6">
-                    {editingTask === task._id ? (
+                      {editingTask === task._id ? (
                         <textarea
                           value={editTaskText}
                           onChange={(e) => setEditTaskText(e.target.value)}
@@ -506,62 +507,62 @@ const TutorialTasks: React.FC = () => {
                       ) : (
                         <p className="text-gray-800 leading-relaxed whitespace-pre-wrap">{task.content}</p>
                       )}
-                </div>
+                    </div>
 
-                {/* All Submissions for this Task */}
-                {userSubmissions[task._id] && userSubmissions[task._id].length > 0 && (
-                  <div className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200">
-                    <div className="flex items-center justify-between mb-4">
-                      <div className="flex items-center space-x-2">
-                        <div className="bg-indigo-100 rounded-full p-1">
-                          <CheckCircleIcon className="h-4 w-4 text-indigo-900" />
-                        </div>
-                        <h4 className="text-stone-900 font-semibold text-lg">All Submissions ({userSubmissions[task._id].length})</h4>
-                      </div>
-                      <button
-                        onClick={() => toggleExpanded(task._id)}
-                        className="flex items-center space-x-1 text-indigo-900 hover:text-indigo-900 text-sm font-medium"
-                      >
+                    {/* All Submissions for this Task */}
+                    {userSubmissions[task._id] && userSubmissions[task._id].length > 0 && (
+                      <div className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200">
+                        <div className="flex items-center justify-between mb-4">
+                          <div className="flex items-center space-x-2">
+                            <div className="bg-indigo-100 rounded-full p-1">
+                              <CheckCircleIcon className="h-4 w-4 text-indigo-900" />
+                            </div>
+                            <h4 className="text-stone-900 font-semibold text-lg">All Submissions ({userSubmissions[task._id].length})</h4>
+                          </div>
+                          <button
+                            onClick={() => toggleExpanded(task._id)}
+                            className="flex items-center space-x-1 text-indigo-900 hover:text-indigo-900 text-sm font-medium"
+                          >
                             <span>{expandedSections[task._id] ? 'Hide' : 'Show'}</span>
                             <ChevronDownIcon className={`h-4 w-4 transition-transform ${expandedSections[task._id] ? 'rotate-180' : ''}`} />
-                      </button>
-                    </div>
-                    <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 transition-all duration-300 ${
-                      expandedSections[task._id] 
-                        ? 'max-h-none overflow-visible' 
-                        : 'max-h-0 overflow-hidden'
-                    }`}>
+                          </button>
+                        </div>
+                        <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 transition-all duration-300 ${
+                          expandedSections[task._id] 
+                            ? 'max-h-none overflow-visible' 
+                            : 'max-h-0 overflow-hidden'
+                        }`}>
                           {userSubmissions[task._id].map((submission, submissionIndex) => (
-                        <div key={submission._id} className="bg-white rounded-lg p-3 border border-stone-200 flex flex-col justify-between h-full">
-                          <div className="flex items-center justify-between mb-2">
-                            <div className="flex items-center space-x-2">
-                              {submission.isOwner && (
-                                <span className="inline-block bg-purple-100 text-purple-800 text-xs px-1.5 py-0.5 rounded-full">
+                            <div key={submission._id} className="bg-white rounded-lg p-3 border border-stone-200 flex flex-col justify-between h-full">
+                              <div className="flex items-center justify-between mb-2">
+                                <div className="flex items-center space-x-2">
+                                  {submission.isOwner && (
+                                    <span className="inline-block bg-purple-100 text-purple-800 text-xs px-1.5 py-0.5 rounded-full">
                                       You
-                                </span>
-                              )}
+                                    </span>
+                                  )}
                                   <span className="text-xs text-gray-500">Group {submission.groupNumber}</span>
-                            </div>
-                            <div className="flex items-center space-x-1">
+                                </div>
+                                <div className="flex items-center space-x-1">
                                   {getStatusIcon(submission.status)}
                                   {submission.isOwner && (
                                     <div className="flex space-x-1">
-                              <button
-                                onClick={() => handleEditSubmission(submission._id, submission.transcreation)}
+                                      <button
+                                        onClick={() => handleEditSubmission(submission._id, submission.transcreation)}
                                         className="text-blue-600 hover:text-blue-800 text-xs"
-                              >
-                                Edit
-                              </button>
-                              <button
-                                onClick={() => handleDeleteSubmission(submission._id)}
+                                      >
+                                        Edit
+                                      </button>
+                                      <button
+                                        onClick={() => handleDeleteSubmission(submission._id)}
                                         className="text-red-600 hover:text-red-800 text-xs"
-                              >
-                                Delete
-                              </button>
+                                      >
+                                        Delete
+                                      </button>
                                     </div>
-                            )}
-                          </div>
-                        </div>
+                                  )}
+                                </div>
+                              </div>
                               <div className="text-sm text-gray-700 mb-2 flex-grow">
                                 {editingSubmission?.id === submission._id ? (
                                   <div className="space-y-2">
@@ -583,15 +584,15 @@ const TutorialTasks: React.FC = () => {
                                       >
                                         Cancel
                                       </button>
-                    </div>
-                  </div>
+                                    </div>
+                                  </div>
                                 ) : (
                                   <p className="whitespace-pre-wrap">{submission.transcreation}</p>
                                 )}
-                      </div>
-                    </div>
+                              </div>
+                            </div>
                           ))}
-                    </div>
+                        </div>
                       </div>
                     )}
 
@@ -606,15 +607,15 @@ const TutorialTasks: React.FC = () => {
                         onTranslationChange={(v) => setTranslationText(prev => ({ ...prev, [task._id]: v }))}
                         onSubmit={(localText, localGroup) => handleSubmitTranslation(task._id, localText, localGroup)}
                       />
-                )}
+                    )}
 
-                {/* Show login message for visitors */}
-                {!localStorage.getItem('token') && (
+                    {/* Show login message for visitors */}
+                    {!localStorage.getItem('token') && (
                       <div className="relative rounded-xl p-6 border border-gray-200">
                         <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-gray-100/70 to-indigo-100/60" />
                         <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-6">
                           <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
-                    <div className="flex items-center space-x-2 mb-4">
+                          <div className="flex items-center space-x-2 mb-4">
                             <div className="relative p-2 rounded-2xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)]">
                               <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
                               <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
@@ -622,26 +623,26 @@ const TutorialTasks: React.FC = () => {
                               <div className="pointer-events-none absolute inset-0 rounded-2xl" style={{ background: 'radial-gradient(120%_120%_at_50%_55%,rgba(0,0,0,0.04),rgba(0,0,0,0)_60%)', opacity: 0.9 }} />
                               <div className="pointer-events-none absolute inset-0 rounded-2xl bg-sky-500/30 mix-blend-overlay opacity-35" />
                               <DocumentTextIcon className="relative h-5 w-5 text-ui-text" />
-                      </div>
+                            </div>
                             <h4 className="text-gray-900 font-semibold text-lg">Group Translation</h4>
-                    </div>
+                          </div>
                           <div className="text-center py-8">
                             <p className="text-gray-600 mb-4">Please log in to submit your translation</p>
-                    <button
+                            <button
                               onClick={() => navigate('/login')}
                               className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-                    >
+                            >
                               Log In
-                    </button>
+                            </button>
                           </div>
                         </div>
+                      </div>
+                    )}
                   </div>
-                )}
-                  </div>
-              </div>
-            ))
-          )}
-        </div>
+                </div>
+              ))
+            )}
+          </div>
         )}
       </div>
 
@@ -833,4 +834,4 @@ const TranslationSection: React.FC<{
   a.taskId === b.taskId
 ));
 
-export default TutorialTasks; 
+export default TutorialTasks;