fix: show scoreboard on mobile screen

Author: Odile078

src/components/sections/communities/overview/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from "@/hooks/useTypedSelector";
 import Link from "next/link";
-import { useRouter } from 'next/router';
+import { useRouter } from "next/router";
 
 /**
  * @interface SidebarProps
@@ -26,9 +26,7 @@ export default function Sidebar(): JSX.Element {
     return router.asPath === link;
   };
 
-  const scoreboardLink = hasCurrentCommunity
-    ? `/communities/${currentCommunity.slug}/scoreboard`
-    : "";
+  const scoreboardLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}/scoreboard` : "";
   const mainLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}` : "";
 
   return (
@@ -37,18 +35,16 @@ export default function Sidebar(): JSX.Element {
         <div className={isActive(mainLink) ? "" : "opacity-80"}>
           <div className="font-medium text-.5xl leading-snug">Challenges</div>
           <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">
-            In the courses of this community, you will be able to learn about new
-            technologies, solve challenges, get feedback, and earn bounties.
+            In the courses of this community, you will be able to learn about new technologies, solve challenges, get feedback, and earn bounties.
           </div>
         </div>
       </Link>
       {hasCurrentCommunity && (
         <Link href={scoreboardLink}>
           <div className={isActive(scoreboardLink) ? "pt-5" : "opacity-80 md:block hidden scroll-smooth pt-5"}>
             <div className="font-medium text-.5xl leading-snug">Scoreboard</div>
-            <div className="text-sm font-light lg:w-full lg:pr-7 pt-2">
-              On the scoreboard, you can see which users have accumulated the most
-              reputation by giving valuable feedback to their peers.
+            <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">
+              On the scoreboard, you can see which users have accumulated the most reputation by giving valuable feedback to their peers.
             </div>
           </div>
         </Link>

src/pages/communities/[slug]/index.tsx

@@ -10,6 +10,7 @@ import { wrapper } from "@/store";
 import { fetchCurrentCommunity } from "@/store/services/community.service";
 import { fetchAllChallenges } from "@/store/services/communities/challenges";
 import { NotFoundError } from "@/utilities/errors/NotFoundError";
+import { fetchAllScoreboards } from "@/store/services/communities/scoreboard.service";
 export default function Slug(props: {
   pageProps: {
     community: Community;
@@ -43,16 +44,18 @@ export const getServerSideProps = wrapper.getServerSideProps((store) => async ({
   try {
     const slug = params?.slug as string;
 
-    const [{ data: community }, { data: challenges }, translations] = await Promise.all([
+    const [{ data: community }, { data: challenges }, { data: scoreboards }, translations] = await Promise.all([
       store.dispatch(fetchCurrentCommunity({ slug, locale })),
       store.dispatch(fetchAllChallenges({ slug })),
+      store.dispatch(fetchAllScoreboards({ slug, locale: locale || "en" })),
       serverSideTranslations(locale as string),
     ]);
-    if (!community || !challenges) throw new NotFoundError();
+    if (!community || !challenges || !scoreboards) throw new NotFoundError();
     return {
       props: {
         community,
         challenges,
+        scoreboards,
         ...translations,
       },
     };

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

@@ -37,7 +37,7 @@ const scoreboardService = createApi({
         } catch (err) {
           console.error(err);
         } finally {
-          setLoading(false);
+          dispatch(setLoading(false));
         }
       },
     }),