Merge pull request #1273 from dacadeorg/fix/submission-page-load-issue

fix: submission list page load issue

Author: serapieTuyishime

.nvmrc

@@ -1 +1 @@
-v21.0.0
+v20.14.0

__tests__/components/ui/MetaData.test.tsx

@@ -3,16 +3,17 @@ import { getMetadataDescription } from "@/utilities/Metadata";
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 
-describe("MetaData", () => {
-  const description = "Test description";
+const description = "Test description";
+const expectedMetaTags = getMetadataDescription(description);
 
-  it("should render metaData", () => {
+describe("MetaData", () => {
+  it("should render metaData tags", () => {
     render(<MetaData description={description} />);
-    const metadata = screen.queryByTestId("meta-id");
-    expect(metadata).toBeInTheDocument();
+    const metaTags = screen.getAllByTestId("meta-id");
+    expect(metaTags).toHaveLength(expectedMetaTags.length);
   });
 
-  it("should render meta tags", () => {
+  it("should render the correct content in the meta tags", () => {
     render(<MetaData description={description} />);
     const mockMetas = getMetadataDescription(description);
     mockMetas.forEach((meta, index) => {

src/components/ui/MetaData.tsx

@@ -1,5 +1,5 @@
 import { getMetadataDescription } from "@/utilities/Metadata";
-import { ReactElement } from "react";
+import { ReactElement, useMemo } from "react";
 
 /**
  * Meta tags component
@@ -8,13 +8,13 @@ import { ReactElement } from "react";
  * @export
  * @returns {ReactElement}
  */
-export default function MetaData({ description, testId = "meta-id" }: { description: string; testId?: string }): ReactElement {
-  const metas = getMetadataDescription(description);
+export default function MetaData({ description, testId = "meta-id" }: { description?: string; testId?: string }): ReactElement {
+  const metas = useMemo(() => getMetadataDescription(description), [description]);
   return (
-    <div data-testid={testId}>
+    <>
       {metas.map((meta, index) => (
-        <meta key={`meta-${index}`} content={meta.content} name={meta.name} />
+        <meta data-testid={testId} key={`meta-${index}`} content={meta.content} name={meta.name} />
       ))}
-    </div>
+    </>
   );
 }

src/hooks/useSubmissionNavigation.ts

@@ -0,0 +1,77 @@
+import useNavigation from "@/hooks/useNavigation";
+import { useDispatch } from "@/hooks/useTypedDispatch";
+import { useMultiSelector } from "@/hooks/useTypedSelector";
+import { IRootState } from "@/store";
+import { showSubmission } from "@/store/feature/communities/challenges/submissions";
+import { initChallengeNavigationMenu } from "@/store/feature/communities/navigation.slice";
+import { toggleBodyScrolling } from "@/store/feature/ui.slice";
+import { Submission as SubmissionType } from "@/types/bounty";
+import { localePath } from "@/utilities/Routing";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
+
+
+
+const useSubmissionNavigation = () => {
+    const [showPopup, setShowPopup] = useState<boolean>(false);
+    const dispatch = useDispatch();
+    const router = useRouter();
+    const { submission_id } = router.query;
+
+    const navigation = useNavigation();
+
+    const { selectedSubmission, submissions } = useMultiSelector<unknown, { selectedSubmission: SubmissionType; submissions: SubmissionType[] }>({
+        selectedSubmission: (state: IRootState) => state.submissions.current,
+        submissions: (state: IRootState) => state.submissions.list,
+    });
+
+    const handleCloseSubmission = useCallback(() => {
+        if (!selectedSubmission) return;
+        dispatch(showSubmission(""));
+        setShowPopup(false);
+        window.history.pushState("", "", localePath(router, router.asPath));
+        dispatch(toggleBodyScrolling(false));
+    }, [dispatch, router, selectedSubmission]);
+
+    useEffect(() => {
+        dispatch(initChallengeNavigationMenu(navigation.community));
+    }, [navigation.community, dispatch]);
+
+    const handleShowSubmission = useCallback(
+        (e: any) => {
+            const newUrl = e.detail;
+            const submissionId = newUrl.replace(localePath(router, router.asPath), "").replace(/\//g, "");
+            const submission = submissions.find((submission) => submission.id === submissionId);
+            if (!submission) return;
+            dispatch(showSubmission(submissionId));
+            setShowPopup(true);
+            dispatch(toggleBodyScrolling(true));
+        },
+        [dispatch, router, submissions]
+    );
+
+    useEffect(() => {
+        window.addEventListener("onSoftNavigation", handleShowSubmission);
+        window.addEventListener("popstate", handleCloseSubmission);
+        return () => {
+            window.removeEventListener("onSoftNavigation", handleShowSubmission);
+            window.removeEventListener("popstate", handleCloseSubmission);
+        };
+    }, [handleCloseSubmission, handleShowSubmission]);
+
+    // Temporary fix for links copied which have submission_id as a query parameter
+    useEffect(() => {
+        if (submission_id) router.push(`${router.asPath.split("?")[0]}/${submission_id}`);
+    }, [router, submission_id]);
+
+
+    return {
+        showPopup,
+        handleCloseSubmission,
+        handleShowSubmission,
+        selectedSubmission,
+        submissions,
+    }
+};
+
+export default useSubmissionNavigation;

src/pages/communities/[slug]/challenges/[challenge_id]/submissions/index.tsx

@@ -4,26 +4,19 @@ import Header from "@/components/sections/communities/_partials/Header";
 import Wrapper from "@/components/sections/courses/Wrapper";
 import SubmissionList from "@/components/sections/submissions/List";
 import MetaData from "@/components/ui/MetaData";
-import useNavigation from "@/hooks/useNavigation";
-import { useDispatch } from "@/hooks/useTypedDispatch";
-import { useMultiSelector } from "@/hooks/useTypedSelector";
-import { IRootState, wrapper } from "@/store";
-import { showSubmission } from "@/store/feature/communities/challenges/submissions";
-import { initChallengeNavigationMenu } from "@/store/feature/communities/navigation.slice";
-import { toggleBodyScrolling } from "@/store/feature/ui.slice";
+import useSubmissionNavigation from "@/hooks/useSubmissionNavigation";
+import { wrapper } from "@/store";
 import { fetchAllSubmission, fetchChallenge } from "@/store/services/communities/challenges";
 import { fetchCurrentCommunity } from "@/store/services/community.service";
 import { Submission as SubmissionType } from "@/types/bounty";
 import { Community } from "@/types/community";
 import { Challenge } from "@/types/course";
 import { NotFoundError } from "@/utilities/errors/NotFoundError";
-import { localePath } from "@/utilities/Routing";
 import { GetServerSideProps } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
-import { useRouter } from "next/router";
-import { ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import { ReactElement, useMemo } from "react";
 
 /**
  * Submission page
@@ -35,55 +28,10 @@ import { ReactElement, useCallback, useEffect, useMemo, useState } from "react";
  */
 export default function Submission(props: { pageProps: { currentCommunity: Community; submissions: SubmissionType[]; challenge: Challenge } }) {
   const { challenge } = props.pageProps;
-  const { selectedSubmission, submissions } = useMultiSelector<unknown, { selectedSubmission: SubmissionType; submissions: SubmissionType[] }>({
-    selectedSubmission: (state: IRootState) => state.submissions.current,
-    submissions: (state: IRootState) => state.submissions.list,
-  });
-  const [showModal, setShowModal] = useState<boolean>(false);
-  const dispatch = useDispatch();
-  const router = useRouter();
-  const { submission_id } = router.query;
-  const { t } = useTranslation();
-  const navigation = useNavigation();
-
-  const handleCloseSubmission = useCallback(() => {
-    if (!selectedSubmission) return;
-    dispatch(showSubmission(""));
-    setShowModal(false);
-    window.history.pushState("", "", localePath(router, router.asPath));
-    dispatch(toggleBodyScrolling(false));
-  }, [dispatch, router, selectedSubmission]);
 
-  useEffect(() => {
-    dispatch(initChallengeNavigationMenu(navigation.community));
-  }, [navigation.community, dispatch]);
-
-  const handleShowSubmission = useCallback(
-    (e: any) => {
-      const newUrl = e.detail;
-      const submissionId = newUrl.replace(localePath(router, router.asPath), "").replace(/\//g, "");
-      const submission = submissions.find((submission) => submission.id === submissionId);
-      if (!submission) return;
-      dispatch(showSubmission(submissionId));
-      setShowModal(true);
-      dispatch(toggleBodyScrolling(true));
-    },
-    [dispatch, router, submissions]
-  );
+  const { submissions, selectedSubmission, handleCloseSubmission, showPopup} = useSubmissionNavigation();
 
-  useEffect(() => {
-    window.addEventListener("onSoftNavigation", handleShowSubmission);
-    window.addEventListener("popstate", handleCloseSubmission);
-    return () => {
-      window.removeEventListener("onSoftNavigation", handleShowSubmission);
-      window.removeEventListener("popstate", handleCloseSubmission);
-    };
-  }, [handleCloseSubmission, handleShowSubmission]);
-
-  // Temporary fix for links copied which have submission_id as a query parameter
-  useEffect(() => {
-    if (submission_id) router.push(`${router.asPath.split("?")[0]}/${submission_id}`);
-  }, [router, submission_id]);
+  const { t } = useTranslation();
 
   const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
 
@@ -93,14 +41,14 @@ export default function Submission(props: { pageProps: { currentCommunity: Commu
     <>
       <Head>
         <title>{`${t("communities.submission.title")} ${challenge?.name}`}</title>
-        <MetaData description={challenge?.description as string} />
+        <MetaData description={challenge?.description} />
       </Head>
       <Wrapper paths={headerPaths}>
         <div className="flex flex-col py-4 space-y-8 text-gray-700">
           <Header title={challenge?.name} subtitle={t("communities.submission.title")} isTeamChallenge={challenge?.isTeamChallenge} isHackathon={challenge?.isHackathon} />
           <SubmissionList />
         </div>
-        {showModal && <SubmissionPopup show={showModal} onClose={handleCloseSubmission} submissionId={selectedSubmission?.id} />}
+        {showPopup && <SubmissionPopup show={showPopup} onClose={handleCloseSubmission} submissionId={selectedSubmission?.id} />}
       </Wrapper>
     </>
   );

src/utilities/Metadata.ts

@@ -32,7 +32,7 @@ export const getMetadataTitle = (...args: string[]): string => {
  * @returns {MetadataDescription[]}
  */
 
-export const getMetadataDescription = (description: string): MetadataDescription[] => {
+export const getMetadataDescription = (description?: string): MetadataDescription[] => {
   if (!description) return [];
   return [
     {