refactor leaderboardSection

client/src/components/LeaderboardSection.jsx

@@ -1,559 +0,0 @@
-import React, { useState, useMemo } from "react";
-import {
-  Typography,
-  Grid,
-  Box,
-  Button,
-  Collapse,
-  Stack,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from "@mui/material";
-import { alpha } from "@mui/material/styles";
-import LeaderboardCard from "./LeaderboardCard";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { useLeaderboard } from "../context/LeaderboardContext";
-import SearchOffIcon from "@mui/icons-material/SearchOff";
-
-const ITEMS_PER_PAGE = 4;
-
-const LeaderboardSection = ({
-  title,
-  leaderboards,
-  filteredLeaderboards,
-  id,
-}) => {
-  const {
-    expandedSections,
-    setExpandedSections,
-    selectedLanguage,
-    setSelectedLanguage,
-    searchQuery,
-    selectedCategory,
-  } = useLeaderboard();
-  const isExpanded = expandedSections.has(id);
-
-  // Définition des familles de langues
-  const LANGUAGE_FAMILIES = {
-    "European Languages": {
-      Main: [
-        "English",
-        "French",
-        "Spanish",
-        "German",
-        "Italian",
-        "Portuguese",
-        "Dutch",
-        "Romanian",
-        "Polish",
-        "Greek",
-        "Swedish",
-        "Danish",
-        "Norwegian",
-        "Finnish",
-        "Hungarian",
-        "Czech",
-        "Slovak",
-        "Croatian",
-        "Serbian",
-        "Bulgarian",
-        "Ukrainian",
-        "Russian",
-        "Lithuanian",
-        "Latvian",
-        "Estonian",
-        "Basque",
-        "Catalan",
-        "Albanian",
-        "Slovenian",
-        "Icelandic",
-        "Galician",
-        "Armenian",
-      ],
-    },
-    "Asian Languages": {
-      Main: [
-        "Chinese",
-        "Japanese",
-        "Korean",
-        "Vietnamese",
-        "Thai",
-        "Indonesian",
-        "Malay",
-        "Tagalog",
-        "Mandarin",
-        "Cantonese",
-        "日本語",
-        "Taiwanese",
-        "Filipino",
-        "Singlish",
-      ],
-    },
-    "Indian Languages": {
-      Main: [
-        "Hindi",
-        "Bengali",
-        "Tamil",
-        "Telugu",
-        "Marathi",
-        "Gujarati",
-        "Kannada",
-        "Malayalam",
-        "Nepali",
-        "Urdu",
-        "Indic",
-      ],
-    },
-    "Middle Eastern & African": {
-      Main: [
-        "Arabic",
-        "Hebrew",
-        "Turkish",
-        "Persian",
-        "Darija",
-        "Swahili",
-        "Amharic",
-        "Hausa",
-        "Yoruba",
-      ],
-    },
-    "Other Languages": {
-      Main: [], // Pour les langues non listées
-    },
-  };
-
-  // Helper pour trouver la famille d'une langue
-  const findLanguageFamily = (language) => {
-    for (const [familyName, subFamilies] of Object.entries(LANGUAGE_FAMILIES)) {
-      for (const [subFamilyName, languages] of Object.entries(subFamilies)) {
-        if (languages.includes(language)) {
-          return { family: familyName, subFamily: subFamilyName };
-        }
-      }
-    }
-    // Si la langue n'est pas trouvée, on la met dans Other Languages
-    console.log(`Language not categorized: ${language}`);
-    return { family: "Other Languages", subFamily: "Main" };
-  };
-
-  // Extraire la liste des langues si c'est la section Language Specific
-  const languages = useMemo(() => {
-    if (id !== "language") return null;
-    const langSet = new Set();
-
-    // Compter toutes les langues uniques
-    leaderboards.forEach((board) => {
-      board.tags?.forEach((tag) => {
-        if (tag.startsWith("language:")) {
-          const language = tag.split(":")[1];
-          const capitalizedLang =
-            language.charAt(0).toUpperCase() + language.slice(1);
-          langSet.add(capitalizedLang);
-        }
-      });
-    });
-
-    // Créer un tableau de paires [langue, nombre de leaderboards, famille]
-    const langArray = Array.from(langSet).map((lang) => {
-      const count = leaderboards.filter((board) =>
-        board.tags?.some(
-          (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
-        )
-      ).length;
-      const { family, subFamily } = findLanguageFamily(lang);
-      return [lang, count, family, subFamily];
-    });
-
-    // Trier d'abord par famille, puis par nombre de leaderboards
-    return langArray
-      .sort((a, b) => {
-        // Si les familles sont différentes
-        if (a[2] !== b[2]) {
-          if (a[2] === "Other Languages") return 1; // Other Languages toujours à la fin
-          if (b[2] === "Other Languages") return -1;
-          return a[2].localeCompare(b[2]);
-        }
-        // Si même famille, trier par nombre de leaderboards
-        return b[1] - a[1];
-      })
-      .map(([lang]) => lang);
-  }, [id, leaderboards]);
-
-  // Calculer le nombre de leaderboards par langue
-  // On utilise les leaderboards filtrés pour avoir les bonnes statistiques
-  const languageStats = useMemo(() => {
-    if (!languages) return null;
-    const stats = new Map();
-
-    // Compter les leaderboards pour chaque langue en tenant compte des filtres
-    languages.forEach((lang) => {
-      const count = filteredLeaderboards.filter((board) =>
-        board.tags?.some(
-          (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
-        )
-      ).length;
-      stats.set(lang, count);
-    });
-
-    return stats;
-  }, [languages, filteredLeaderboards]);
-
-  // Filtrer pour n'avoir que les leaderboards approuvés
-  const approvedLeaderboards = filteredLeaderboards.filter(
-    (leaderboard) => leaderboard.approval_status === "approved"
-  );
-
-  // On ne retourne null que si on n'a pas de leaderboards bruts
-  if (!leaderboards) return null;
-
-  // On affiche toujours les 3 premiers
-  const displayedLeaderboards = approvedLeaderboards.slice(0, ITEMS_PER_PAGE);
-  // Le reste sera dans le Collapse
-  const remainingLeaderboards = approvedLeaderboards.slice(ITEMS_PER_PAGE);
-
-  // Calculate how many skeletons we need
-  const skeletonsNeeded = Math.max(0, 4 - approvedLeaderboards.length);
-
-  // On affiche le bouton seulement si aucune catégorie n'est sélectionnée
-  const showExpandButton = !selectedCategory;
-
-  // Le bouton est actif seulement s'il y a plus de 4 leaderboards
-  const isExpandButtonEnabled = approvedLeaderboards.length > ITEMS_PER_PAGE;
-
-  const toggleExpanded = () => {
-    setExpandedSections((prev) => {
-      const newSet = new Set(prev);
-      if (isExpanded) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
-    });
-  };
-
-  return (
-    <Box sx={{ mb: 6 }}>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          mb: languageStats ? 2 : 4,
-        }}
-      >
-        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-          <Typography
-            variant="h4"
-            sx={{
-              color: "text.primary",
-              fontWeight: 600,
-              fontSize: { xs: "1.5rem", md: "2rem" },
-            }}
-          >
-            {title}
-          </Typography>
-          <Box
-            sx={(theme) => ({
-              width: "4px",
-              height: "4px",
-              borderRadius: "100%",
-              backgroundColor: alpha(
-                theme.palette.text.primary,
-                theme.palette.mode === "dark" ? 0.2 : 0.15
-              ),
-            })}
-          />
-          <Typography
-            variant="h4"
-            sx={{
-              color: "text.secondary",
-              fontWeight: 400,
-              fontSize: { xs: "1.25rem", md: "1.5rem" },
-              opacity: 0.6,
-            }}
-          >
-            {approvedLeaderboards.length}
-          </Typography>
-        </Box>
-        {showExpandButton && (
-          <Button
-            onClick={toggleExpanded}
-            size="small"
-            disabled={!isExpandButtonEnabled}
-            sx={{
-              color: "text.secondary",
-              fontSize: "0.875rem",
-              textTransform: "none",
-              opacity: isExpandButtonEnabled ? 1 : 0.5,
-              "&:hover": {
-                backgroundColor: (theme) =>
-                  isExpandButtonEnabled
-                    ? alpha(
-                        theme.palette.text.primary,
-                        theme.palette.mode === "dark" ? 0.1 : 0.06
-                      )
-                    : "transparent",
-              },
-            }}
-            endIcon={
-              <ExpandMoreIcon
-                sx={{
-                  transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
-                  transition: "transform 300ms",
-                }}
-              />
-            }
-          >
-            {isExpanded ? "Show less" : "Show more"}
-          </Button>
-        )}
-      </Box>
-
-      {languages && selectedCategory === "language" && (
-        <Accordion
-          defaultExpanded={false}
-          elevation={0}
-          disableGutters
-          sx={{
-            mb: approvedLeaderboards.length > 0 ? 4 : 2,
-            "&:before": {
-              display: "none",
-            },
-            backgroundColor: "transparent",
-          }}
-        >
-          <AccordionSummary
-            expandIcon={
-              <ExpandMoreIcon sx={{ fontSize: 20, color: "text.secondary" }} />
-            }
-            sx={{
-              p: 0,
-              minHeight: 32,
-              height: 32,
-              "&.MuiAccordionSummary-root": {
-                "&.Mui-expanded": {
-                  minHeight: 32,
-                  height: 32,
-                },
-              },
-              "& .MuiAccordionSummary-content": {
-                m: 0,
-                "&.Mui-expanded": {
-                  m: 0,
-                },
-              },
-            }}
-          >
-            <Typography
-              variant="body2"
-              color="text.secondary"
-              sx={{ fontWeight: 500 }}
-            >
-              Filter by language
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails sx={{ padding: 0 }}>
-            {/* Grouper les langues par famille */}
-            {Object.entries(LANGUAGE_FAMILIES).map(([family, subFamilies]) => {
-              const familyLanguages = languages.filter((lang) => {
-                const { family: langFamily } = findLanguageFamily(lang);
-                return langFamily === family;
-              });
-
-              // Toujours afficher toutes les familles qui ont des langues dans la liste complète
-              if (familyLanguages.length === 0 && family !== "Other Languages")
-                return null;
-
-              // Calculer le nombre total de leaderboards dans cette famille
-              const familyTotal = familyLanguages.reduce(
-                (sum, lang) => sum + (languageStats?.get(lang) || 0),
-                0
-              );
-
-              return (
-                <Box key={family} sx={{ mb: 3 }}>
-                  <Typography
-                    variant="subtitle2"
-                    sx={{
-                      color: "text.secondary",
-                      mb: 1,
-                      fontWeight: 500,
-                      opacity: familyTotal === 0 ? 0.5 : 0.8,
-                    }}
-                  >
-                    {family}{" "}
-                    {familyLanguages.length > 0 ? `(${familyTotal})` : ""}
-                  </Typography>
-                  <Box
-                    sx={{
-                      display: "flex",
-                      flexWrap: "wrap",
-                      gap: 1,
-                      mx: -0.5,
-                    }}
-                  >
-                    {familyLanguages.map((lang) => {
-                      const isActive = selectedLanguage === lang;
-                      const count = languageStats?.get(lang) || 0;
-                      const isDisabled = count === 0 && !isActive;
-
-                      return (
-                        <Button
-                          key={lang}
-                          onClick={() =>
-                            setSelectedLanguage(isActive ? null : lang)
-                          }
-                          variant={isActive ? "contained" : "outlined"}
-                          size="small"
-                          disabled={isDisabled}
-                          sx={{
-                            textTransform: "none",
-                            m: 0.125,
-                            opacity: isDisabled ? 0.5 : 1,
-                            backgroundColor: (theme) =>
-                              isActive
-                                ? undefined
-                                : theme.palette.mode === "dark"
-                                ? "background.paper"
-                                : "white",
-                            "&:hover": {
-                              backgroundColor: (theme) =>
-                                isActive
-                                  ? undefined
-                                  : theme.palette.mode === "dark"
-                                  ? "background.paper"
-                                  : "white",
-                              opacity: isDisabled ? 0.5 : 0.8,
-                            },
-                            "& .MuiTouchRipple-root": {
-                              transition: "none",
-                            },
-                            transition: "none",
-                          }}
-                        >
-                          {lang}
-                          <Box
-                            component="span"
-                            sx={{
-                              display: "inline-flex",
-                              alignItems: "center",
-                              gap: 0.75,
-                              color: isActive ? "inherit" : "text.secondary",
-                              ml: 0.75,
-                            }}
-                          >
-                            <Box
-                              component="span"
-                              sx={(theme) => ({
-                                width: "4px",
-                                height: "4px",
-                                borderRadius: "100%",
-                                backgroundColor: alpha(
-                                  theme.palette.text.primary,
-                                  theme.palette.mode === "dark" ? 0.2 : 0.15
-                                ),
-                              })}
-                            />
-                            {count}
-                          </Box>
-                        </Button>
-                      );
-                    })}
-                  </Box>
-                </Box>
-              );
-            })}
-          </AccordionDetails>
-        </Accordion>
-      )}
-
-      {approvedLeaderboards.length === 0 ? (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 2,
-            py: 7,
-            bgcolor: (theme) =>
-              theme.palette.mode === "dark"
-                ? "background.paper"
-                : "background.default",
-            borderRadius: 2,
-          }}
-        >
-          <SearchOffIcon
-            sx={{
-              fontSize: 64,
-              color: "text.secondary",
-              opacity: 0.5,
-            }}
-          />
-          <Typography variant="h5" color="text.secondary" align="center">
-            {searchQuery ? (
-              <>
-                No {title.toLowerCase()} leaderboard matches{" "}
-                <Box
-                  component="span"
-                  sx={{
-                    bgcolor: "primary.main",
-                    color: "primary.contrastText",
-                    px: 1,
-                    borderRadius: 1,
-                  }}
-                >
-                  {searchQuery}
-                </Box>
-              </>
-            ) : (
-              `No ${title.toLowerCase()} leaderboard matches your criteria`
-            )}
-          </Typography>
-          <Typography variant="body1" color="text.secondary" align="center">
-            Try adjusting your search filters
-          </Typography>
-        </Box>
-      ) : (
-        <>
-          <Grid container spacing={3}>
-            {displayedLeaderboards.map((leaderboard, index) => (
-              <Grid item xs={12} sm={6} md={3} key={index}>
-                <LeaderboardCard leaderboard={leaderboard} />
-              </Grid>
-            ))}
-            {/* Add skeletons if needed */}
-            {Array.from({ length: skeletonsNeeded }).map((_, index) => (
-              <Grid item xs={12} sm={6} md={3} key={`skeleton-${index}`}>
-                <Box
-                  sx={{
-                    height: "180px",
-                    borderRadius: 2,
-                    bgcolor: (theme) => alpha(theme.palette.primary.main, 0.15),
-                    opacity: 1,
-                    transition: "opacity 0.3s ease-in-out",
-                    "&:hover": {
-                      opacity: 0.8,
-                    },
-                  }}
-                />
-              </Grid>
-            ))}
-          </Grid>
-          <Collapse in={isExpanded} timeout={300} unmountOnExit>
-            <Grid container spacing={3} sx={{ mt: 0 }}>
-              {remainingLeaderboards.map((leaderboard, index) => (
-                <Grid item xs={12} sm={6} md={3} key={index + ITEMS_PER_PAGE}>
-                  <LeaderboardCard leaderboard={leaderboard} />
-                </Grid>
-              ))}
-            </Grid>
-          </Collapse>
-        </>
-      )}
-    </Box>
-  );
-};
-
-export default LeaderboardSection;

client/src/components/LeaderboardSection/components/EmptyState.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import SearchOffIcon from "@mui/icons-material/SearchOff";
+
+const EmptyState = ({ title, searchQuery }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 2,
+        py: 7,
+        bgcolor: (theme) =>
+          theme.palette.mode === "dark"
+            ? "background.paper"
+            : "background.default",
+        borderRadius: 2,
+      }}
+    >
+      <SearchOffIcon
+        sx={{
+          fontSize: 64,
+          color: "text.secondary",
+          opacity: 0.5,
+        }}
+      />
+      <Typography variant="h5" color="text.secondary" align="center">
+        {searchQuery ? (
+          <>
+            No {title.toLowerCase()} leaderboard matches{" "}
+            <Box
+              component="span"
+              sx={{
+                bgcolor: "primary.main",
+                color: "primary.contrastText",
+                px: 1,
+                borderRadius: 1,
+              }}
+            >
+              {searchQuery}
+            </Box>
+          </>
+        ) : (
+          `No ${title.toLowerCase()} leaderboard matches your criteria`
+        )}
+      </Typography>
+      <Typography variant="body1" color="text.secondary" align="center">
+        Try adjusting your search filters
+      </Typography>
+    </Box>
+  );
+};
+
+export default EmptyState;

client/src/components/LeaderboardSection/components/LanguageAccordion.jsx

@@ -0,0 +1,167 @@
+import React from "react";
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+  Box,
+  Button,
+} from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+const LanguageAccordion = ({
+  languages,
+  languageStats,
+  selectedLanguage,
+  onLanguageSelect,
+  LANGUAGE_FAMILIES,
+  findLanguageFamily,
+}) => {
+  return (
+    <Accordion
+      defaultExpanded={false}
+      elevation={0}
+      disableGutters
+      sx={{
+        mb: 4,
+        "&:before": {
+          display: "none",
+        },
+        backgroundColor: "transparent",
+      }}
+    >
+      <AccordionSummary
+        expandIcon={
+          <ExpandMoreIcon sx={{ fontSize: 20, color: "text.secondary" }} />
+        }
+        sx={{
+          p: 0,
+          minHeight: 32,
+          height: 32,
+          "&.MuiAccordionSummary-root": {
+            "&.Mui-expanded": {
+              minHeight: 32,
+              height: 32,
+            },
+          },
+          "& .MuiAccordionSummary-content": {
+            m: 0,
+            "&.Mui-expanded": {
+              m: 0,
+            },
+          },
+        }}
+      >
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={{ fontWeight: 500 }}
+        >
+          Filter by language
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails sx={{ padding: 0 }}>
+        {Object.entries(LANGUAGE_FAMILIES).map(([family, subFamilies]) => {
+          const familyLanguages = languages.filter((lang) => {
+            const { family: langFamily } = findLanguageFamily(lang);
+            return langFamily === family;
+          });
+
+          if (familyLanguages.length === 0 && family !== "Other Languages")
+            return null;
+
+          const familyTotal = familyLanguages.reduce(
+            (sum, lang) => sum + (languageStats?.get(lang) || 0),
+            0
+          );
+
+          if (familyTotal === 0) return null;
+
+          return (
+            <Box key={family} sx={{ mb: 3 }}>
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                sx={{ mb: 1, opacity: 0.7 }}
+              >
+                {family}
+              </Typography>
+              <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+                {familyLanguages.map((lang) => {
+                  const count = languageStats?.get(lang) || 0;
+                  if (count === 0) return null;
+
+                  const isActive = selectedLanguage === lang;
+                  const isDisabled = count === 0;
+
+                  return (
+                    <Button
+                      key={lang}
+                      onClick={() => onLanguageSelect(isActive ? null : lang)}
+                      variant={isActive ? "contained" : "outlined"}
+                      size="small"
+                      disabled={isDisabled}
+                      sx={{
+                        textTransform: "none",
+                        m: 0.125,
+                        opacity: isDisabled ? 0.5 : 1,
+                        backgroundColor: (theme) =>
+                          isActive
+                            ? undefined
+                            : theme.palette.mode === "dark"
+                            ? "background.paper"
+                            : "white",
+                        "&:hover": {
+                          backgroundColor: (theme) =>
+                            isActive
+                              ? undefined
+                              : theme.palette.mode === "dark"
+                              ? "background.paper"
+                              : "white",
+                          opacity: isDisabled ? 0.5 : 0.8,
+                        },
+                        "& .MuiTouchRipple-root": {
+                          transition: "none",
+                        },
+                        transition: "none",
+                      }}
+                    >
+                      {lang}
+                      <Box
+                        component="span"
+                        sx={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 0.75,
+                          color: isActive ? "inherit" : "text.secondary",
+                          ml: 0.75,
+                        }}
+                      >
+                        <Box
+                          component="span"
+                          sx={(theme) => ({
+                            width: "4px",
+                            height: "4px",
+                            borderRadius: "100%",
+                            backgroundColor: alpha(
+                              theme.palette.text.primary,
+                              theme.palette.mode === "dark" ? 0.2 : 0.15
+                            ),
+                          })}
+                        />
+                        {count}
+                      </Box>
+                    </Button>
+                  );
+                })}
+              </Box>
+            </Box>
+          );
+        })}
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default LanguageAccordion;

client/src/components/{LeaderboardCard.jsx → LeaderboardSection/components/LeaderboardCard.jsx}

@@ -2,7 +2,7 @@ import React from "react";
 import { Card, CardContent, Typography, Box, Stack } from "@mui/material";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import { alpha } from "@mui/material/styles";
-import { useLeaderboard } from "../context/LeaderboardContext";
+import { useLeaderboard } from "../../../context/LeaderboardContext";
 
 const LeaderboardCard = ({ leaderboard }) => {
   const {

client/src/components/LeaderboardSection/components/LeaderboardGrid.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Grid, Box, Collapse } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import LeaderboardCard from "./LeaderboardCard";
+
+const ITEMS_PER_PAGE = 4;
+
+const LeaderboardSkeleton = () => (
+  <Box
+    sx={{
+      height: "180px",
+      borderRadius: 2,
+      bgcolor: (theme) => alpha(theme.palette.primary.main, 0.15),
+      opacity: 1,
+      transition: "opacity 0.3s ease-in-out",
+      "&:hover": {
+        opacity: 0.8,
+      },
+    }}
+  />
+);
+
+const LeaderboardGrid = ({
+  displayedLeaderboards,
+  remainingLeaderboards,
+  isExpanded,
+  skeletonsNeeded,
+}) => {
+  return (
+    <>
+      <Grid container spacing={3}>
+        {displayedLeaderboards.map((leaderboard, index) => (
+          <Grid item xs={12} sm={6} md={3} key={index}>
+            <LeaderboardCard leaderboard={leaderboard} />
+          </Grid>
+        ))}
+        {Array.from({ length: skeletonsNeeded }).map((_, index) => (
+          <Grid item xs={12} sm={6} md={3} key={`skeleton-${index}`}>
+            <LeaderboardSkeleton />
+          </Grid>
+        ))}
+      </Grid>
+      <Collapse in={isExpanded} timeout={300} unmountOnExit>
+        <Grid container spacing={3} sx={{ mt: 0 }}>
+          {remainingLeaderboards.map((leaderboard, index) => (
+            <Grid item xs={12} sm={6} md={3} key={index + ITEMS_PER_PAGE}>
+              <LeaderboardCard leaderboard={leaderboard} />
+            </Grid>
+          ))}
+        </Grid>
+      </Collapse>
+    </>
+  );
+};
+
+export default LeaderboardGrid;

client/src/components/LeaderboardSection/components/SectionHeader.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { Typography, Box, Button } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+const SectionHeader = ({
+  title,
+  count,
+  isExpanded,
+  onToggleExpand,
+  showExpandButton,
+  isExpandButtonEnabled,
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        mb: 4,
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+        <Typography
+          variant="h4"
+          sx={{
+            color: "text.primary",
+            fontWeight: 600,
+            fontSize: { xs: "1.5rem", md: "2rem" },
+          }}
+        >
+          {title}
+        </Typography>
+        <Box
+          sx={(theme) => ({
+            width: "4px",
+            height: "4px",
+            borderRadius: "100%",
+            backgroundColor: alpha(
+              theme.palette.text.primary,
+              theme.palette.mode === "dark" ? 0.2 : 0.15
+            ),
+          })}
+        />
+        <Typography
+          variant="h4"
+          sx={{
+            color: "text.secondary",
+            fontWeight: 400,
+            fontSize: { xs: "1.25rem", md: "1.5rem" },
+            opacity: 0.6,
+          }}
+        >
+          {count}
+        </Typography>
+      </Box>
+      {showExpandButton && (
+        <Button
+          onClick={onToggleExpand}
+          size="small"
+          disabled={!isExpandButtonEnabled}
+          sx={{
+            color: "text.secondary",
+            fontSize: "0.875rem",
+            textTransform: "none",
+            opacity: isExpandButtonEnabled ? 1 : 0.5,
+            "&:hover": {
+              backgroundColor: (theme) =>
+                isExpandButtonEnabled
+                  ? alpha(
+                      theme.palette.text.primary,
+                      theme.palette.mode === "dark" ? 0.1 : 0.06
+                    )
+                  : "transparent",
+            },
+          }}
+          endIcon={
+            <ExpandMoreIcon
+              sx={{
+                transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 300ms",
+              }}
+            />
+          }
+        >
+          {isExpanded ? "Show less" : "Show more"}
+        </Button>
+      )}
+    </Box>
+  );
+};
+
+export default SectionHeader;

client/src/components/LeaderboardSection/hooks/useLanguageStats.js

@@ -0,0 +1,84 @@
+import { useMemo } from "react";
+
+const LANGUAGE_FAMILIES = {
+  "Romance Languages": [
+    "french",
+    "spanish",
+    "italian",
+    "portuguese",
+    "romanian",
+  ],
+  "Germanic Languages": [
+    "english",
+    "german",
+    "dutch",
+    "swedish",
+    "danish",
+    "norwegian",
+  ],
+  "Asian Languages": ["chinese", "japanese", "korean", "vietnamese", "thai"],
+  "Other Languages": [], // Will catch any language not in other families
+};
+
+const findLanguageFamily = (language) => {
+  for (const [family, languages] of Object.entries(LANGUAGE_FAMILIES)) {
+    if (languages.includes(language.toLowerCase())) {
+      return { family, subFamily: language };
+    }
+  }
+  return { family: "Other Languages", subFamily: language };
+};
+
+export const useLanguageStats = (leaderboards, filteredLeaderboards) => {
+  const languages = useMemo(() => {
+    if (!leaderboards) return null;
+
+    const langMap = new Map();
+    const langFamilyMap = new Map();
+
+    leaderboards.forEach((board) => {
+      board.tags?.forEach((tag) => {
+        if (tag.toLowerCase().startsWith("language:")) {
+          const lang = tag.split(":")[1].toLowerCase();
+          langMap.set(lang, (langMap.get(lang) || 0) + 1);
+          const { family } = findLanguageFamily(lang);
+          langFamilyMap.set(family, (langFamilyMap.get(family) || 0) + 1);
+        }
+      });
+    });
+
+    const langArray = Array.from(langMap.entries()).map(([lang, count]) => {
+      const { family } = findLanguageFamily(lang);
+      return [lang, count, family];
+    });
+
+    return langArray
+      .sort((a, b) => {
+        if (a[2] !== b[2]) {
+          if (a[2] === "Other Languages") return 1;
+          if (b[2] === "Other Languages") return -1;
+          return a[2].localeCompare(b[2]);
+        }
+        return b[1] - a[1];
+      })
+      .map(([lang]) => lang);
+  }, [leaderboards]);
+
+  const languageStats = useMemo(() => {
+    if (!languages) return null;
+    const stats = new Map();
+
+    languages.forEach((lang) => {
+      const count = filteredLeaderboards.filter((board) =>
+        board.tags?.some(
+          (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
+        )
+      ).length;
+      stats.set(lang, count);
+    });
+
+    return stats;
+  }, [languages, filteredLeaderboards]);
+
+  return { languages, languageStats, LANGUAGE_FAMILIES, findLanguageFamily };
+};

client/src/components/LeaderboardSection/index.jsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { useLeaderboard } from "../../context/LeaderboardContext";
+import SectionHeader from "./components/SectionHeader";
+import LanguageAccordion from "./components/LanguageAccordion";
+import LeaderboardGrid from "./components/LeaderboardGrid";
+import EmptyState from "./components/EmptyState";
+import { useLanguageStats } from "./hooks/useLanguageStats";
+
+const ITEMS_PER_PAGE = 4;
+
+const LeaderboardSection = ({
+  title,
+  leaderboards,
+  filteredLeaderboards,
+  id,
+}) => {
+  const {
+    expandedSections,
+    setExpandedSections,
+    selectedLanguage,
+    setSelectedLanguage,
+    searchQuery,
+    selectedCategory,
+  } = useLeaderboard();
+
+  const isExpanded = expandedSections.has(id);
+
+  const { languages, languageStats, LANGUAGE_FAMILIES, findLanguageFamily } =
+    useLanguageStats(leaderboards, filteredLeaderboards);
+
+  // Filtrer pour n'avoir que les leaderboards approuvés
+  const approvedLeaderboards = filteredLeaderboards.filter(
+    (leaderboard) => leaderboard.approval_status === "approved"
+  );
+
+  // On ne retourne null que si on n'a pas de leaderboards bruts
+  if (!leaderboards) return null;
+
+  // On affiche toujours les 3 premiers
+  const displayedLeaderboards = approvedLeaderboards.slice(0, ITEMS_PER_PAGE);
+  // Le reste sera dans le Collapse
+  const remainingLeaderboards = approvedLeaderboards.slice(ITEMS_PER_PAGE);
+
+  // Calculate how many skeletons we need
+  const skeletonsNeeded = Math.max(0, 4 - approvedLeaderboards.length);
+
+  // On affiche le bouton seulement si aucune catégorie n'est sélectionnée
+  const showExpandButton = !selectedCategory;
+
+  // Le bouton est actif seulement s'il y a plus de 4 leaderboards
+  const isExpandButtonEnabled = approvedLeaderboards.length > ITEMS_PER_PAGE;
+
+  const toggleExpanded = () => {
+    setExpandedSections((prev) => {
+      const newSet = new Set(prev);
+      if (isExpanded) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Box sx={{ mb: 6 }}>
+      <SectionHeader
+        title={title}
+        count={approvedLeaderboards.length}
+        isExpanded={isExpanded}
+        onToggleExpand={toggleExpanded}
+        showExpandButton={showExpandButton}
+        isExpandButtonEnabled={isExpandButtonEnabled}
+      />
+
+      {languages && selectedCategory === "language" && (
+        <LanguageAccordion
+          languages={languages}
+          languageStats={languageStats}
+          selectedLanguage={selectedLanguage}
+          onLanguageSelect={setSelectedLanguage}
+          LANGUAGE_FAMILIES={LANGUAGE_FAMILIES}
+          findLanguageFamily={findLanguageFamily}
+        />
+      )}
+
+      {approvedLeaderboards.length === 0 ? (
+        <EmptyState title={title} searchQuery={searchQuery} />
+      ) : (
+        <LeaderboardGrid
+          displayedLeaderboards={displayedLeaderboards}
+          remainingLeaderboards={remainingLeaderboards}
+          isExpanded={isExpanded}
+          skeletonsNeeded={skeletonsNeeded}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default LeaderboardSection;