Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
-import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../services/api';
 import { 
@@ -868,36 +867,13 @@ const TutorialTasks: React.FC = () => {
       setSubmitting({ ...submitting, [taskId]: true });
       });
       const user = JSON.parse(localStorage.getItem('user') || '{}');
-      // Safari: build the optimistic item synchronously so height stays stable; do network after paint
-      let optimisticId: string | null = null;
-      const userName = user.name || 'Unknown';
-      flushSync(() => {
-        const temp = {
-          _id: `optimistic-${Date.now()}`,
-        sourceTextId: taskId,
-          transcreation: text,
-          groupNumber: group,
-        culturalAdaptations: [],
-          username: userName,
-          status: 'pending',
-          isOwner: true,
-          createdAt: new Date().toISOString()
-        } as any;
-        optimisticId = temp._id;
-        setUserSubmissions(prev => {
-          const current = prev[taskId] || [];
-          const next = [temp, ...current];
-          return { ...prev, [taskId]: next };
-        });
-      });
-
       const response = await new Promise((resolve) => requestAnimationFrame(async () => {
         const res = await api.post('/api/submissions', {
           sourceTextId: taskId,
           transcreation: text,
           groupNumber: group,
           culturalAdaptations: [],
-          username: userName
+          username: user.name || 'Unknown'
         });
         resolve(res);
       })) as any;
@@ -906,44 +882,34 @@ const TutorialTasks: React.FC = () => {
         const created = response.data;
         console.log('Submission created successfully:', created);
 
-        // Replace optimistic item (if any) with server item to avoid extra height changes
+        // Optimistic append to avoid large reflow from full refetch
         setUserSubmissions(prev => {
           const current = prev[taskId] || [];
-          const mapped = current.map(s => (optimisticId && s._id === optimisticId) ? { ...created, isOwner: true } : s);
-          // If optimistic not found (e.g., not Safari), prepend as usual
-          const next = (optimisticId && current.some(s => s._id === optimisticId)) ? mapped : [{ ...created, isOwner: true }, ...current];
+          // Put newest first like server returns
+          const next = [{ ...created, isOwner: true }, ...current];
           return { ...prev, [taskId]: next };
         });
 
         // Defer state updates and minimal refetch
-        if (!isSafari) {
-          // Measure grid height and set spacer before refetch to keep layout height constant
-          const gridEl = submissionsGridRefs.current[taskId];
-          const gridHeight = gridEl ? gridEl.getBoundingClientRect().height : 0;
-          if (gridHeight > 0) setSpacerHeights(prev => ({ ...prev, [taskId]: gridHeight }));
-          withPreservedCardOffset(taskId, () => {
-            React.startTransition(() => {
-              setTranslationText({ ...translationText, [taskId]: '' });
-              setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
-              // Narrow refetch: only this task's submissions. Build off-DOM then swap in one commit
-              api.get(`/api/submissions/by-source/${taskId}`).then(r => {
-                const list = (r.data && r.data.submissions) || [];
-                flushSync(() => {
-                  setUserSubmissions(prev => ({ ...prev, [taskId]: list }));
-                });
-                requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
-              }).catch(() => {
-                requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
-              });
-            });
-          });
-        } else {
-          // Safari: skip refetch to avoid extra reflow; just clear local fields
+        // Measure grid height and set spacer before refetch to keep layout height constant
+        const gridEl = submissionsGridRefs.current[taskId];
+        const gridHeight = gridEl ? gridEl.getBoundingClientRect().height : 0;
+        if (gridHeight > 0) setSpacerHeights(prev => ({ ...prev, [taskId]: gridHeight }));
+        withPreservedCardOffset(taskId, () => {
           React.startTransition(() => {
             setTranslationText({ ...translationText, [taskId]: '' });
             setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
+            // Narrow refetch: only this task's submissions
+            api.get(`/api/submissions/by-source/${taskId}`).then(r => {
+              const list = (r.data && r.data.submissions) || [];
+              setUserSubmissions(prev => ({ ...prev, [taskId]: list }));
+              // Release spacer one frame after list update to avoid jump
+              requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+            }).catch(() => {
+              requestAnimationFrame(() => setSpacerHeights(prev => ({ ...prev, [taskId]: 0 })));
+            });
           });
-        }
+        });
       } else {
         console.error('Failed to submit translation:', response.data);
       }
@@ -2331,7 +2297,7 @@ const TutorialTasks: React.FC = () => {
 
                 {/* All Submissions for this Task */}
                 {userSubmissions[task._id] && userSubmissions[task._id].length > 0 && (
-                  <div ref={(el) => { submissionsContainerRefs.current[task._id] = el; }} className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200" style={{ overflowAnchor: 'none', overscrollBehavior: 'contain' as any }}>
+                  <div ref={(el) => { submissionsContainerRefs.current[task._id] = el; }} className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200" style={{ overflowAnchor: 'none' }}>
                     <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">
@@ -2358,7 +2324,7 @@ const TutorialTasks: React.FC = () => {
                       expandedSections[task._id] 
                         ? 'max-h-none overflow-visible' 
                         : 'max-h-0 overflow-hidden'
-                    }`} style={{ overscrollBehavior: 'contain' as any }}>
+                    }`}>
                       {userSubmissions[task._id].map((submission, index) => (
                         <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">