Skip to content

Commit 222592e

Browse files
musayannmusayann
committed
feat: separate the submission navigation into a hook
1 parent f646be4 commit 222592e

File tree

3 files changed

+103
-50
lines changed

3 files changed

+103
-50
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v21.0.0
1+
v20.14.0

‎src/hooks/useSubmissionNavigation.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import useNavigation from "@/hooks/useNavigation";
2+
import { useDispatch } from "@/hooks/useTypedDispatch";
3+
import { useMultiSelector } from "@/hooks/useTypedSelector";
4+
import { IRootState } from "@/store";
5+
import { showSubmission } from "@/store/feature/communities/challenges/submissions";
6+
import { initChallengeNavigationMenu } from "@/store/feature/communities/navigation.slice";
7+
import { toggleBodyScrolling } from "@/store/feature/ui.slice";
8+
import { Submission as SubmissionType } from "@/types/bounty";
9+
import { localePath } from "@/utilities/Routing";
10+
import { useRouter } from "next/router";
11+
import { useCallback, useEffect, useState } from "react";
12+
13+
14+
15+
const useSubmissionNavigation = () => {
16+
const [showPopup, setShowPopup] = useState<boolean>(false);
17+
const dispatch = useDispatch();
18+
const router = useRouter();
19+
const { submission_id } = router.query;
20+
21+
const navigation = useNavigation();
22+
23+
const { selectedSubmission, submissions } = useMultiSelector<unknown, { selectedSubmission: SubmissionType; submissions: SubmissionType[] }>({
24+
selectedSubmission: (state: IRootState) => state.submissions.current,
25+
submissions: (state: IRootState) => state.submissions.list,
26+
});
27+
28+
const handleCloseSubmission = useCallback(() => {
29+
if (!selectedSubmission) return;
30+
dispatch(showSubmission(""));
31+
setShowPopup(false);
32+
window.history.pushState("", "", localePath(router, router.asPath));
33+
dispatch(toggleBodyScrolling(false));
34+
}, [dispatch, router, selectedSubmission]);
35+
36+
useEffect(() => {
37+
dispatch(initChallengeNavigationMenu(navigation.community));
38+
}, [navigation.community, dispatch]);
39+
40+
const handleShowSubmission = useCallback(
41+
(e: any) => {
42+
const newUrl = e.detail;
43+
const submissionId = newUrl.replace(localePath(router, router.asPath), "").replace(/\//g, "");
44+
const submission = submissions.find((submission) => submission.id === submissionId);
45+
if (!submission) return;
46+
dispatch(showSubmission(submissionId));
47+
setShowPopup(true);
48+
dispatch(toggleBodyScrolling(true));
49+
},
50+
[dispatch, router, submissions]
51+
);
52+
53+
useEffect(() => {
54+
window.addEventListener("onSoftNavigation", handleShowSubmission);
55+
window.addEventListener("popstate", handleCloseSubmission);
56+
return () => {
57+
window.removeEventListener("onSoftNavigation", handleShowSubmission);
58+
window.removeEventListener("popstate", handleCloseSubmission);
59+
};
60+
}, [handleCloseSubmission, handleShowSubmission]);
61+
62+
// Temporary fix for links copied which have submission_id as a query parameter
63+
useEffect(() => {
64+
if (submission_id) router.push(`${router.asPath.split("?")[0]}/${submission_id}`);
65+
}, [router, submission_id]);
66+
67+
68+
return {
69+
showPopup,
70+
handleCloseSubmission,
71+
handleShowSubmission,
72+
selectedSubmission,
73+
submissions,
74+
}
75+
};
76+
77+
export default useSubmissionNavigation;

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

Lines changed: 25 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
import DefaultLayout from "@/components/layout/Default";
2+
import SubmissionPopup from "@/components/popups/submission";
3+
import Header from "@/components/sections/communities/_partials/Header";
4+
import Wrapper from "@/components/sections/courses/Wrapper";
5+
import SubmissionList from "@/components/sections/submissions/List";
6+
import MetaData from "@/components/ui/MetaData";
7+
import useSubmissionNavigation from "@/hooks/useSubmissionNavigation";
28
import { wrapper } from "@/store";
39
import { fetchAllSubmission, fetchChallenge } from "@/store/services/communities/challenges";
410
import { fetchCurrentCommunity } from "@/store/services/community.service";
@@ -7,8 +13,10 @@ import { Community } from "@/types/community";
713
import { Challenge } from "@/types/course";
814
import { NotFoundError } from "@/utilities/errors/NotFoundError";
915
import { GetServerSideProps } from "next";
16+
import { useTranslation } from "next-i18next";
1017
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
11-
import { ReactElement } from "react";
18+
import Head from "next/head";
19+
import { ReactElement, useMemo } from "react";
1220

1321
/**
1422
* Submission page
@@ -19,65 +27,33 @@ import { ReactElement } from "react";
1927
* @returns
2028
*/
2129
export default function Submission(props: { pageProps: { currentCommunity: Community; submissions: SubmissionType[]; challenge: Challenge } }) {
22-
console.log(props);
23-
// const { challenge } = props.pageProps;
30+
const { challenge } = props.pageProps;
2431
// const { selectedSubmission, submissions } = useMultiSelector<unknown, { selectedSubmission: SubmissionType; submissions: SubmissionType[] }>({
2532
// selectedSubmission: (state: IRootState) => state.submissions.current,
2633
// submissions: (state: IRootState) => state.submissions.list,
2734
// });
28-
// const [showModal, setShowModal] = useState<boolean>(false);
29-
// const dispatch = useDispatch();
30-
// const router = useRouter();
31-
// const { submission_id } = router.query;
32-
// const { t } = useTranslation();
33-
// const navigation = useNavigation();
3435

35-
// const handleCloseSubmission = useCallback(() => {
36-
// if (!selectedSubmission) return;
37-
// dispatch(showSubmission(""));
38-
// setShowModal(false);
39-
// window.history.pushState("", "", localePath(router, router.asPath));
40-
// dispatch(toggleBodyScrolling(false));
41-
// }, [dispatch, router, selectedSubmission]);
36+
const { submissions, selectedSubmission, handleCloseSubmission, showPopup} = useSubmissionNavigation();
4237

43-
// useEffect(() => {
44-
// dispatch(initChallengeNavigationMenu(navigation.community));
45-
// }, [navigation.community, dispatch]);
38+
const { t } = useTranslation();
4639

47-
// const handleShowSubmission = useCallback(
48-
// (e: any) => {
49-
// const newUrl = e.detail;
50-
// const submissionId = newUrl.replace(localePath(router, router.asPath), "").replace(/\//g, "");
51-
// const submission = submissions.find((submission) => submission.id === submissionId);
52-
// if (!submission) return;
53-
// dispatch(showSubmission(submissionId));
54-
// setShowModal(true);
55-
// dispatch(toggleBodyScrolling(true));
56-
// },
57-
// [dispatch, router, submissions]
58-
// );
40+
const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
5941

60-
// useEffect(() => {
61-
// window.addEventListener("onSoftNavigation", handleShowSubmission);
62-
// window.addEventListener("popstate", handleCloseSubmission);
63-
// return () => {
64-
// window.removeEventListener("onSoftNavigation", handleShowSubmission);
65-
// window.removeEventListener("popstate", handleCloseSubmission);
66-
// };
67-
// }, [handleCloseSubmission, handleShowSubmission]);
68-
69-
// // Temporary fix for links copied which have submission_id as a query parameter
70-
// useEffect(() => {
71-
// if (submission_id) router.push(`${router.asPath.split("?")[0]}/${submission_id}`);
72-
// }, [router, submission_id]);
73-
74-
// const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
75-
76-
// if (!submissions) return <></>;
42+
if (!submissions) return <></>;
7743

7844
return (
7945
<>
80-
<h1>Hello</h1>
46+
<Head>
47+
<title>{`${t("communities.submission.title")} ${challenge?.name}`}</title>
48+
<MetaData description={challenge?.description as string} />
49+
</Head>
50+
<Wrapper paths={headerPaths}>
51+
<div className="flex flex-col py-4 space-y-8 text-gray-700">
52+
<Header title={challenge?.name} subtitle={t("communities.submission.title")} isTeamChallenge={challenge?.isTeamChallenge} isHackathon={challenge?.isHackathon} />
53+
<SubmissionList />
54+
</div>
55+
{showPopup && <SubmissionPopup show={showPopup} onClose={handleCloseSubmission} submissionId={selectedSubmission?.id} />}
56+
</Wrapper>
8157
</>
8258
);
8359
}

0 commit comments

Comments
 (0)