add localstorage for pending votes

frontend/src/pages/AddModelPage/components/EvaluationQueues/EvaluationQueues.js

@@ -644,10 +644,6 @@ const EvaluationQueues = ({ defaultExpanded = true }) => {
                 },
                 width: { xs: "100%", sm: "auto" },
                 alignItems: { xs: "stretch", sm: "center" },
-                mb: { xs: 1, sm: 0 },
-                ".Mui-expanded &": {
-                  mb: 0,
-                },
               }}
             >
               <Chip

frontend/src/pages/VoteModelPage/VoteModelPage.js

@@ -70,13 +70,16 @@ const NoModelsToVote = () => (
   </Box>
 );
 
+const LOCAL_STORAGE_KEY = "pending_votes";
+
 function VoteModelPage() {
-  const { isAuthenticated, user, loading } = useAuth();
+  const { isAuthenticated, user, loading: authLoading } = useAuth();
   const [pendingModels, setPendingModels] = useState([]);
   const [loadingModels, setLoadingModels] = useState(true);
   const [error, setError] = useState(null);
   const [userVotes, setUserVotes] = useState(new Set());
   const [loadingVotes, setLoadingVotes] = useState({});
+  const [localVotes, setLocalVotes] = useState(new Set());
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
@@ -109,24 +112,25 @@ function VoteModelPage() {
   };
 
   const getConfigVotes = (votesData, model) => {
-    // Afficher les données pour le debug
-    console.log("Checking votes for model:", {
-      model_name: model.name,
-      precision: model.precision,
-      revision: model.revision,
-      votes_data: votesData,
-    });
+    // Créer l'identifiant unique du modèle
+    const modelUniqueId = getModelUniqueId(model);
 
-    // Parcourir toutes les configurations pour trouver celle qui correspond
+    // Compter les votes du serveur
+    let serverVotes = 0;
     for (const [key, config] of Object.entries(votesData.votes_by_config)) {
       if (
         config.precision === model.precision &&
         config.revision === model.revision
       ) {
-        return config.count;
+        serverVotes = config.count;
+        break;
       }
     }
-    return 0;
+
+    // Ajouter les votes en attente du localStorage
+    const pendingVote = localVotes.has(modelUniqueId) ? 1 : 0;
+
+    return serverVotes + pendingVote;
   };
 
   const sortModels = (models) => {
@@ -151,22 +155,57 @@ function VoteModelPage() {
     });
   };
 
-  // Fetch user's votes and models together
+  // Add this function to handle localStorage
+  const updateLocalVotes = (modelUniqueId, action = "add") => {
+    const storedVotes = JSON.parse(
+      localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
+    );
+    if (action === "add") {
+      if (!storedVotes.includes(modelUniqueId)) {
+        storedVotes.push(modelUniqueId);
+      }
+    } else {
+      const index = storedVotes.indexOf(modelUniqueId);
+      if (index > -1) {
+        storedVotes.splice(index, 1);
+      }
+    }
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(storedVotes));
+    setLocalVotes(new Set(storedVotes));
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       try {
-        setLoadingModels(true);
+        // Ne pas afficher le loading si on a déjà des données
+        if (pendingModels.length === 0) {
+          setLoadingModels(true);
+        }
         setError(null);
 
-        // Fetch user votes only if authenticated
-        let votedModels = new Set();
-        if (isAuthenticated && user) {
-          const userVotesResponse = await fetch(
-            `/api/votes/user/${user.username}`
-          );
-          if (!userVotesResponse.ok) {
-            throw new Error("Failed to fetch user votes");
-          }
+        // Charger d'abord les votes en attente du localStorage
+        const storedVotes = JSON.parse(
+          localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
+        );
+        const localVotesSet = new Set(storedVotes);
+
+        // Préparer toutes les requêtes en parallèle
+        const [pendingModelsResponse, userVotesResponse] = await Promise.all([
+          fetch("/api/models/pending"),
+          isAuthenticated && user
+            ? fetch(`/api/votes/user/${user.username}`)
+            : Promise.resolve(null),
+        ]);
+
+        if (!pendingModelsResponse.ok) {
+          throw new Error("Failed to fetch pending models");
+        }
+
+        const modelsData = await pendingModelsResponse.json();
+        const votedModels = new Set();
+
+        // Traiter les votes de l'utilisateur si connecté
+        if (userVotesResponse && userVotesResponse.ok) {
           const votesData = await userVotesResponse.json();
           const userVotes = Array.isArray(votesData) ? votesData : [];
 
@@ -175,64 +214,64 @@ function VoteModelPage() {
               vote.revision || "main"
             }`;
             votedModels.add(uniqueId);
+            if (localVotesSet.has(uniqueId)) {
+              localVotesSet.delete(uniqueId);
+              updateLocalVotes(uniqueId, "remove");
+            }
           });
         }
-        setUserVotes(votedModels);
-
-        // Fetch pending models
-        const pendingModelsResponse = await fetch("/api/models/pending");
-        if (!pendingModelsResponse.ok) {
-          throw new Error("Failed to fetch pending models");
-        }
-        const modelsData = await pendingModelsResponse.json();
-
-        // Fetch votes for each model
-        const modelsWithVotes = await Promise.all(
-          modelsData.map(async (model) => {
-            try {
-              const [provider, modelName] = model.name.split("/");
-              const votesResponse = await fetch(
-                `/api/votes/model/${provider}/${modelName}`
-              );
-
-              if (!votesResponse.ok) {
-                return {
-                  ...model,
-                  votes: 0,
-                  votes_by_config: {},
-                  wait_time: formatWaitTime(model.submission_time),
-                  hasVoted: votedModels.has(getModelUniqueId(model)),
-                };
-              }
 
-              const votesData = await votesResponse.json();
-              return {
-                ...model,
-                votes: getConfigVotes(votesData, model),
-                votes_by_config: votesData.votes_by_config || {},
-                wait_time: formatWaitTime(model.submission_time),
-                hasVoted: votedModels.has(getModelUniqueId(model)),
-              };
-            } catch (err) {
-              console.error(`Error fetching votes for ${model.name}:`, err);
-              return {
-                ...model,
-                votes: 0,
-                votes_by_config: {},
-                wait_time: formatWaitTime(model.submission_time),
-                hasVoted: votedModels.has(getModelUniqueId(model)),
-              };
-            }
+        // Préparer et exécuter toutes les requêtes de votes en une seule fois
+        const modelVotesResponses = await Promise.all(
+          modelsData.map((model) => {
+            const [provider, modelName] = model.name.split("/");
+            return fetch(`/api/votes/model/${provider}/${modelName}`)
+              .then((response) =>
+                response.ok
+                  ? response.json()
+                  : { total_votes: 0, votes_by_config: {} }
+              )
+              .catch(() => ({ total_votes: 0, votes_by_config: {} }));
           })
         );
 
-        // Sort models
+        // Construire les modèles avec toutes les données
+        const modelsWithVotes = modelsData.map((model, index) => {
+          const votesData = modelVotesResponses[index];
+          const modelUniqueId = getModelUniqueId(model);
+          const isVotedByUser =
+            votedModels.has(modelUniqueId) || localVotesSet.has(modelUniqueId);
+
+          return {
+            ...model,
+            votes: getConfigVotes(
+              {
+                ...votesData,
+                votes_by_config: votesData.votes_by_config || {},
+              },
+              model
+            ),
+            votes_by_config: votesData.votes_by_config || {},
+            wait_time: formatWaitTime(model.submission_time),
+            hasVoted: isVotedByUser,
+          };
+        });
+
+        // Mettre à jour tous les états en une seule fois
         const sortedModels = sortModels(modelsWithVotes);
-        setPendingModels(sortedModels);
+
+        // Batch updates
+        const updates = () => {
+          setPendingModels(sortedModels);
+          setUserVotes(votedModels);
+          setLocalVotes(localVotesSet);
+          setLoadingModels(false);
+        };
+
+        updates();
       } catch (err) {
         console.error("Error fetching data:", err);
         setError(err.message);
-      } finally {
         setLoadingModels(false);
       }
     };
@@ -240,13 +279,18 @@ function VoteModelPage() {
     fetchData();
   }, [isAuthenticated, user]);
 
+  // Modify the handleVote function
   const handleVote = async (model) => {
     if (!isAuthenticated) return;
 
+    const modelUniqueId = getModelUniqueId(model);
+
     try {
       setError(null);
-      // Set loading state for this specific model
-      setLoadingVotes((prev) => ({ ...prev, [getModelUniqueId(model)]: true }));
+      setLoadingVotes((prev) => ({ ...prev, [modelUniqueId]: true }));
+
+      // Add to localStorage immediately
+      updateLocalVotes(modelUniqueId, "add");
 
       // Encode model name for URL
       const encodedModelName = encodeURIComponent(model.name);
@@ -266,6 +310,8 @@ function VoteModelPage() {
       );
 
       if (!response.ok) {
+        // If the request fails, remove from localStorage
+        updateLocalVotes(modelUniqueId, "remove");
         throw new Error("Failed to submit vote");
       }
 
@@ -309,12 +355,19 @@ function VoteModelPage() {
       // Clear loading state for this model
       setLoadingVotes((prev) => ({
         ...prev,
-        [getModelUniqueId(model)]: false,
+        [modelUniqueId]: false,
       }));
     }
   };
 
-  if (loading) {
+  // Modify the rendering logic to consider both server and local votes
+  // Inside the map function where you render models
+  const isVoted = (model) => {
+    const modelUniqueId = getModelUniqueId(model);
+    return userVotes.has(modelUniqueId) || localVotes.has(modelUniqueId);
+  };
+
+  if (authLoading || (loadingModels && pendingModels.length === 0)) {
     return (
       <Box
         sx={{
@@ -716,12 +769,12 @@ function VoteModelPage() {
                           </Typography>
                         </Stack>
                         <Button
-                          variant={model.hasVoted ? "contained" : "outlined"}
+                          variant={isVoted(model) ? "contained" : "outlined"}
                           size={isMobile ? "medium" : "large"}
                           onClick={() => handleVote(model)}
                           disabled={
                             !isAuthenticated ||
-                            model.hasVoted ||
+                            isVoted(model) ||
                             loadingVotes[getModelUniqueId(model)]
                           }
                           color="primary"
@@ -731,7 +784,7 @@ function VoteModelPage() {
                             textTransform: "none",
                             fontWeight: 600,
                             fontSize: { xs: "0.875rem", sm: "0.95rem" },
-                            ...(model.hasVoted
+                            ...(isVoted(model)
                               ? {
                                   bgcolor: "primary.main",
                                   "&:hover": {
@@ -753,7 +806,7 @@ function VoteModelPage() {
                         >
                           {loadingVotes[getModelUniqueId(model)] ? (
                             <CircularProgress size={20} color="inherit" />
-                          ) : model.hasVoted ? (
+                          ) : isVoted(model) ? (
                             <Stack
                               direction="row"
                               spacing={0.5}