Merge pull request #987 from dacadeorg/fix/scoreboard-filter

fix: scoreboard filter

Author: musayann

public/locales/bg/common.json

@@ -167,6 +167,7 @@
   "communities.overview.courses.description": "In the courses of this community, you will be able to learn about new technologies, solve challenges, get feedback and earn bounties.",
   "communities.overview.scoreboard.title": "Scoreboard",
   "communities.overview.scoreboard.description": "On the scoreboard, you can see which users have accumulated the most reputation by giving valuable feedback to their peers.",
+  "communities.scoreboard.empty-state.title": "Няма оценки за тази категория.",
   "communities.card.estimated": "Estimated Time",
   "communities.card.earn": "Earn rewards",
   "communities.card.submissions": "{{count}} Изявления",

public/locales/en/common.json

@@ -170,6 +170,7 @@
   "communities.overview.courses.description": "In the courses of this community, you will be able to learn about new technologies, solve challenges, get feedback and earn bounties.",
   "communities.overview.scoreboard.title": "Scoreboard",
   "communities.overview.scoreboard.description": "On the scoreboard, you can see which users have accumulated the most reputation by giving valuable feedback to their peers.",
+  "communities.scoreboard.empty-state.title": "No scores for this category",
   "communities.card.estimated": "Estimated Time",
   "communities.card.earn": "Earn rewards",
   "communities.card.submissions": "{{count}} Submissions",

public/locales/es/common.json

@@ -170,6 +170,7 @@
   "communities.overview.courses.description": "En los cursos de esta comunidad, podrá aprender sobre nuevas tecnologías, resolver retos, recibir feedbacks y ganar premios.",
   "communities.overview.scoreboard.title": "Tabla de Resultados",
   "communities.overview.scoreboard.description": "En la tabla de resultados, puede ver qué usuarios han acumulado la mejor reputación dando su valioso feedback a sus compañeras.",
+  "communities.scoreboard.empty-state.title": "No hay puntuaciones para esta categoría.",
   "communities.card.estimated": "Tiempo estimado",
   "communities.card.earn": "Gane recompensas",
   "communities.card.submissions": "{{count}} Envíos",

public/locales/hr/common.json

@@ -154,6 +154,7 @@
   "communities.overview.courses.description": "In the courses of this community, you will be able to learn about new technologies, solve challenges, get feedback and earn bounties.",
   "communities.overview.scoreboard.title": "Scoreboard",
   "communities.overview.scoreboard.description": "On the scoreboard, you can see which users have accumulated the most reputation by giving valuable feedback to their peers.",
+  "communities.scoreboard.empty-state.title": "Nema bodova za ovu kategoriju.",
   "communities.card.estimated": "Estimated Time",
   "communities.card.earn": "Earn rewards",
   "communities.overview.challenge.rewards": "Nagrade",

src/components/cards/Scoreboard.tsx

@@ -14,6 +14,7 @@ interface ScoreboardCardProps {
     feedbacks: number;
     score: number;
     submissions: number;
+    submissionPoints: number;
   };
   index: number;
 }
@@ -42,8 +43,8 @@ export default function ScoreboardCard({ value, index }: ScoreboardCardProps): J
             <span>{value.submissions === 1 ? "Submission" : "Submissions"}</span>
           </p>
           <p className="whitespace-nowrap sm:px-4 px-3 text-xs space-x-1">
-            <span>{value.score}</span>
-            <span>{value.score === 1 ? "Total Point" : "Total Points"}</span>
+            <span>{value.submissionPoints}</span>
+            <span>{value.submissionPoints === 1 ? "Submission Point" : "Submission Points"}</span>
           </p>
           <p className="whitespace-nowrap text-xs sm:px-4 px-3 space-x-1">
             <span>{value.feedbacks}</span>

src/components/sections/communities/overview/scoreboard/Filter.tsx

@@ -1,9 +1,8 @@
 import { ChangeEvent, ReactElement, useCallback, useEffect, useState } from "react";
 import FilterOption from "./_partials/FilterOption";
-import { selectList, setLoading, setFilterBy as setScoreboardFilterBy, setScoreboardList, sortScoreboards } from "@/store/feature/communities/scoreboard.slice";
+import { setLoading } from "@/store/feature/communities/scoreboard.slice";
 import { useDispatch } from "@/hooks/useTypedDispatch";
 import { useRouter } from "next/router";
-import { useSelector } from "@/hooks/useTypedSelector";
 import { filterScoreboards } from "@/store/services/communities/scoreboard.service";
 
 /**
@@ -76,12 +75,11 @@ export default function Filters(): ReactElement {
   const [sortBy, setSortBy] = useState("score");
 
   const dispatch = useDispatch();
-  const list = useSelector((state) => selectList(state));
-  const filteredScoreboards = useSelector((state) => selectList(state));
   const router = useRouter();
   const { slug } = router.query;
 
   const onFilterScoreboards = useCallback(async () => {
+    dispatch(setLoading(true));
     await dispatch(
       filterScoreboards({
         slug: slug as string,
@@ -90,28 +88,13 @@ export default function Filters(): ReactElement {
         locale: router.locale as string,
       })
     );
-    const data = filteredScoreboards;
-    if (data) {
-      const filteredData = [...data];
-      dispatch(setScoreboardFilterBy(filterBy));
-      if (sortBy) {
-        filteredData?.sort((firstItem, secondItem) => secondItem[sortBy] - firstItem[sortBy]);
-      }
-      dispatch(setScoreboardList(filteredData));
-    }
-    setLoading(true);
+    dispatch(setLoading(false));
   }, [dispatch, filterBy, router.locale, slug, sortBy]);
 
   useEffect(() => {
     onFilterScoreboards();
   }, [onFilterScoreboards]);
 
-  useEffect(() => {
-    dispatch(setScoreboardList(sortScoreboards({ sortBy, list })));
-    // Eslint disable because the list is running the effect infinitely
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, sortBy]);
-
   const handleFilterByChange = (event: ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.value;
     if (newValue === filterBy) return;

src/components/sections/communities/overview/scoreboard/index.tsx

@@ -3,6 +3,8 @@ import ScoreboardCard from "@/components/cards/Scoreboard";
 import ArrowButton from "@/components/ui/button/Arrow";
 import { useTranslation } from "next-i18next";
 import { ReactElement, useState } from "react";
+import Loader from "@/components/ui/Loader";
+import EmptyState from "@/components/ui/EmptyState";
 
 /**
  * Scoreboard Overview index component
@@ -14,7 +16,7 @@ import { ReactElement, useState } from "react";
 
 export default function ScoreboardOverview(): ReactElement {
   const { t } = useTranslation();
-  const { list, filterBy } = useSelector((state) => state.scoreboard);
+  const { list, loading } = useSelector((state) => state.scoreboard);
 
   const [items, setItems] = useState(3);
 
@@ -24,7 +26,11 @@ export default function ScoreboardOverview(): ReactElement {
 
   return (
     <>
-      {(list && list.length !== 0) || filterBy !== "all" ? (
+      {loading ? (
+        <div className="h-full w-full grid">
+          <Loader className="place-self-center" />
+        </div>
+      ) : list && list.length !== 0 ? (
         <div className="flex flex-col w-full overflow-hidden border border-gray-200 border-solid divide-y divide-gray-200 divide-solid rounded-3xl">
           {list.slice(0, items).map((item, i) => (
             <ScoreboardCard key={`list-element-${i}`} index={i + 1} value={item} />
@@ -38,7 +44,9 @@ export default function ScoreboardOverview(): ReactElement {
           )}
         </div>
       ) : (
-        <></>
+        <div className=" w-full overflow-hidden border-t border-gray-200 ">
+          <EmptyState title={t("communities.scoreboard.empty-state.title")} />
+        </div>
       )}
     </>
   );

src/store/services/communities/scoreboard.service.ts

@@ -49,11 +49,15 @@ const scoreboardService = createApi({
           "Accept-Language": locale || "en",
         },
       }),
-      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
+      onQueryStarted: async ({ sortBy }, { dispatch, queryFulfilled }) => {
         try {
           dispatch(setLoading(true));
           const { data } = await queryFulfilled;
-          dispatch(setScoreboardFilteredList(data));
+          const sortedList = [...data];
+          if (sortBy) {
+            sortedList?.sort((firstItem, secondItem) => secondItem[sortBy] - firstItem[sortBy]);
+          }
+          dispatch(setScoreboardFilteredList(sortedList));
         } catch (err) {
           console.error(err);
         } finally {