Skip to content

Commit 76c15af

Browse files
musayannmusayann
authored
Merge pull request #952 from dacadeorg/fix/netlify-timeout
chore: fix netlify timeout for challenge and sugggestion view page
2 parents b92481f + 19007cc commit 76c15af

File tree

2 files changed

+129
-136
lines changed

2 files changed

+129
-136
lines changed

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

Lines changed: 94 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useMemo } from "react";
1+
import { useCallback, useEffect, useMemo, useState } from "react";
22
import Wrapper from "@/components/sections/courses/Wrapper";
33
import Header from "@/components/sections/challenges/Header";
44
import { OverviewRewards as Rewards } from "@/components/sections/challenges/Rewards";
@@ -31,7 +31,8 @@ import Objectives from "@/components/sections/challenges/Objectives";
3131
import { getTeamByChallenge, getUserInvitesByChallenge } from "@/store/services/teams.service";
3232
import { fetchChallenge, fetchChallengeAuthenticated } from "@/store/services/communities/challenges";
3333
import Loader from "@/components/ui/Loader";
34-
import { NotFoundError } from "@/utilities/errors/NotFoundError";
34+
import { useRouter } from "next/router";
35+
import Section from "@/components/ui/Section";
3536
import Hint from "@/components/ui/Hint";
3637
import Link from "next/link";
3738

@@ -53,23 +54,12 @@ interface ChallengePageMultiSelector {
5354
* @date 4/25/2023 - 8:12:39 PM
5455
*
5556
* @export
56-
* @param {{
57-
pageProps: {
58-
submission: Submission;
59-
challenge: Challenge;
60-
community: Community;
61-
};
62-
}} props
6357
* @returns {ReactElement}
6458
*/
65-
export default function ChallengePage(props: {
66-
pageProps: {
67-
submission: Submission;
68-
challenge: Challenge;
69-
community: Community;
70-
};
71-
}): ReactElement {
72-
const { challenge, community } = props.pageProps;
59+
export default function ChallengePage() {
60+
const [challenge, setChallenge] = useState<Challenge | null>(null);
61+
const [community, setCommunity] = useState<Community | null>(null);
62+
const [loading, setLoading] = useState(true);
7363
const dispatch = useDispatch();
7464
const { t } = useTranslation();
7565
const { submission, isAuthenticated, isSubmissionLoading } = useMultiSelector<unknown, ChallengePageMultiSelector>({
@@ -80,10 +70,29 @@ export default function ChallengePage(props: {
8070
const title = useMemo(() => getMetadataTitle(t("communities.challenge.title"), challenge?.name || ""), [challenge?.name, t]);
8171

8272
const navigation = useNavigation();
73+
const router = useRouter();
74+
const { challenge_id, slug, locale } = router.query;
8375

84-
useEffect(() => {
76+
const initPage = useCallback(async () => {
77+
const fetchPayload = {
78+
slug: slug as string,
79+
locale: locale as string,
80+
};
81+
82+
setLoading(true);
83+
const [{ data: community }, { data: challenge }] = await Promise.all([
84+
dispatch(fetchCurrentCommunity(fetchPayload)) as any,
85+
dispatch(fetchChallenge({ ...fetchPayload, id: challenge_id as string, relations: ["rubric", "courses", "learning-modules", "best-submissions"] })) as any,
86+
]);
87+
setCommunity(community);
88+
setChallenge(challenge);
8589
dispatch(initChallengeNavigationMenu(navigation.community));
86-
}, []);
90+
setLoading(false);
91+
}, [challenge_id, slug]);
92+
93+
useEffect(() => {
94+
initPage();
95+
}, [initPage]);
8796

8897
useEffect(() => {
8998
if (challenge && isAuthenticated) {
@@ -94,90 +103,78 @@ export default function ChallengePage(props: {
94103
}, [challenge, dispatch, isAuthenticated]);
95104

96105
const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
97-
return (
98-
<>
99-
<Head>
100-
<title>{title}</title>
101-
<MetaData description={challenge?.description} />
102-
</Head>
103-
<Wrapper paths={headerPaths}>
104-
<div className="flex flex-col py-4 space-y-8 text-gray-700 divide-y divide-gray-200 divide-solid">
105-
<Header />
106-
<Rewards />
107-
<Objectives />
108-
{challenge.isTeamChallenge && <TeamChallenge />}
109-
<Learning courses={challenge.courses} learningModules={challenge.learningModules} community={community} />
110-
<RatingRubric ratingCriteria={challenge?.ratingCriteria} selected={[]} />
111-
<BestSubmissions />
112106

113-
{isAuthenticated ? (
114-
<div>
115-
{isSubmissionLoading ? (
116-
<div className="h-24 sm:h-48 grid place-items-center">
117-
<Loader />
118-
</div>
119-
) : (
120-
<>
121-
{submission ? (
122-
<div className="mt-8">
123-
<h4 className="my-8 text-.5xl font-medium">{t("communities.challenge.your-submission")}</h4>
124-
<SubmissionCard submission={submission} />
125-
</div>
126-
) : (
127-
<>
128-
{challenge.isTeamChallenge && <SetupTeamChallenge />}
129-
<SubmissionForm />
130-
</>
131-
)}
132-
</>
133-
)}
134-
</div>
135-
) : (
136-
<div>
137-
<Hint className="mt-6 flex flex-col md:flex-row">
138-
<p>To be able to submit</p>&nbsp;
139-
<Link className="underline" href="/login">
140-
Login.
141-
</Link>
142-
</Hint>
143-
</div>
144-
)}
145-
</div>
146-
</Wrapper>
147-
</>
148-
);
107+
if (loading)
108+
return (
109+
<Section className="h-[50vh] flex items-center justify-center">
110+
<Loader />
111+
</Section>
112+
);
113+
114+
if (challenge && community)
115+
return (
116+
<>
117+
<Head>
118+
<title>{title}</title>
119+
<MetaData description={challenge?.description} />
120+
</Head>
121+
<Wrapper paths={headerPaths}>
122+
<div className="flex flex-col py-4 space-y-8 text-gray-700 divide-y divide-gray-200 divide-solid">
123+
<Header />
124+
<Rewards />
125+
<Objectives />
126+
{challenge.isTeamChallenge && <TeamChallenge />}
127+
<Learning courses={challenge.courses} learningModules={challenge.learningModules} community={community} />
128+
<RatingRubric ratingCriteria={challenge?.ratingCriteria} selected={[]} />
129+
<BestSubmissions />
130+
131+
{isAuthenticated ? (
132+
<div>
133+
{isSubmissionLoading ? (
134+
<div className="h-24 sm:h-48 grid place-items-center">
135+
<Loader />
136+
</div>
137+
) : (
138+
<>
139+
{submission ? (
140+
<div className="mt-8">
141+
<h4 className="my-8 text-.5xl font-medium">{t("communities.challenge.your-submission")}</h4>
142+
<SubmissionCard submission={submission} />
143+
</div>
144+
) : (
145+
<>
146+
{challenge.isTeamChallenge && <SetupTeamChallenge />}
147+
<SubmissionForm />
148+
</>
149+
)}
150+
</>
151+
)}
152+
</div>
153+
) : (
154+
<div>
155+
<Hint className="mt-6 flex flex-col md:flex-row">
156+
<p>To be able to submit</p>&nbsp;
157+
<Link className="underline" href="/login">
158+
Login.
159+
</Link>
160+
</Hint>
161+
</div>
162+
)}
163+
</div>
164+
</Wrapper>
165+
</>
166+
);
149167
}
150168

151169
ChallengePage.getLayout = function (page: ReactElement) {
152170
return <DefaultLayout footerBackgroundColor={false}>{page}</DefaultLayout>;
153171
};
154172

155-
export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps((store) => async (data) => {
156-
const { query, locale } = data;
157-
const { slug, challenge_id } = query;
158-
159-
const fetchPayload = {
160-
slug: slug as string,
161-
locale: locale as string,
173+
export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps(() => async (data) => {
174+
const { locale } = data;
175+
return {
176+
props: {
177+
...(await serverSideTranslations(locale as string)),
178+
},
162179
};
163-
164-
try {
165-
const [{ data: community }, { data: challenge }, translations] = await Promise.all([
166-
store.dispatch(fetchCurrentCommunity(fetchPayload)),
167-
store.dispatch(fetchChallenge({ ...fetchPayload, id: challenge_id as string, relations: ["rubric", "courses", "learning-modules", "best-submissions"] })),
168-
serverSideTranslations(locale as string),
169-
]);
170-
if (!community || !challenge) throw new NotFoundError();
171-
return {
172-
props: {
173-
...translations,
174-
community,
175-
challenge,
176-
},
177-
};
178-
} catch (e) {
179-
return {
180-
notFound: true,
181-
};
182-
}
183180
});

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

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useMemo } from "react";
1+
import { useCallback, useEffect, useMemo, useState } from "react";
22
import Header from "@/components/sections/communities/_partials/Header";
33
import SubmissionView from "@/components/sections/submissions/View";
44
import Wrapper from "@/components/sections/courses/Wrapper";
@@ -11,28 +11,49 @@ import { GetServerSideProps } from "next";
1111
import { fetchCurrentCommunity } from "@/store/services/community.service";
1212
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
1313
import { wrapper } from "@/store";
14-
import { Challenge } from "@/types/course";
1514
import { initChallengeNavigationMenu } from "@/store/feature/communities/navigation.slice";
1615
import useNavigation from "@/hooks/useNavigation";
17-
import { fetchChallenge } from "@/store/services/communities/challenges";
18-
import { NotFoundError } from "@/utilities/errors/NotFoundError";
16+
import { useRouter } from "next/router";
17+
import Loader from "@/components/ui/Loader";
18+
import Section from "@/components/ui/Section";
19+
import { useSelector } from "@/hooks/useTypedSelector";
1920

20-
export default function SubmissionPage(props: { pageProps: { challenge: Challenge } }) {
21+
export default function SubmissionPage() {
2122
const dispatch = useDispatch();
2223
const { t } = useTranslation();
23-
const { challenge } = props.pageProps;
2424
const navigation = useNavigation();
25+
const router = useRouter();
26+
const { slug, locale, submission_id } = router.query;
27+
const [loading, setLoading] = useState(true);
28+
const { current } = useSelector((state) => state.submissions);
2529

26-
useEffect(() => {
30+
const initPage = useCallback(async () => {
31+
const fetchCurrentCommunityPayload = {
32+
slug: slug as string,
33+
locale: locale as string,
34+
};
35+
setLoading(true);
36+
await Promise.all([dispatch(fetchCurrentCommunity(fetchCurrentCommunityPayload)), dispatch(findSubmssionById({ id: submission_id as string }))]);
2737
dispatch(initChallengeNavigationMenu(navigation.community));
28-
}, [dispatch, navigation.community]);
38+
setLoading(false);
39+
}, [slug, submission_id]);
40+
41+
useEffect(() => {
42+
initPage();
43+
}, [initPage]);
2944

3045
const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
3146

47+
if (loading)
48+
return (
49+
<Section className="h-[50vh] flex items-center justify-center">
50+
<Loader />
51+
</Section>
52+
);
3253
return (
3354
<Wrapper paths={headerPaths}>
3455
<div className="flex flex-col py-4 space-y-8">
35-
<Header title={challenge.name} subtitle={t("communities.submission.title")} />
56+
<Header title={current?.challenge?.name} subtitle={t("communities.submission.title")} />
3657
<SubmissionView />
3758
</div>
3859
</Wrapper>
@@ -42,35 +63,10 @@ SubmissionPage.getLayout = function (page: ReactElement) {
4263
return <DefaultLayout footerBackgroundColor={false}>{page}</DefaultLayout>;
4364
};
4465

45-
export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps((store) => async ({ query, locale }) => {
46-
const { dispatch } = store;
47-
const { slug, submission_id, challenge_id } = query;
48-
const fetchPayload = {
49-
slug: slug as string,
50-
locale: locale as string,
66+
export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps(() => async ({ locale }) => {
67+
return {
68+
props: {
69+
...(await serverSideTranslations(locale as string)),
70+
},
5171
};
52-
53-
try {
54-
const [{ data: community }, { payload: submission }, { data: challenge }, translations] = await Promise.all([
55-
dispatch(fetchCurrentCommunity(fetchPayload)),
56-
dispatch(findSubmssionById({ id: submission_id as string })),
57-
dispatch(fetchChallenge({ id: challenge_id as string, relations: ["rubric", "courses", "learning-modules"] })),
58-
serverSideTranslations(locale as string),
59-
]);
60-
61-
if (!community || !challenge || !submission) throw new NotFoundError();
62-
63-
return {
64-
props: {
65-
community,
66-
submission,
67-
challenge,
68-
...translations,
69-
},
70-
};
71-
} catch (e) {
72-
return {
73-
notFound: true,
74-
};
75-
}
7672
});

0 commit comments

Comments
 (0)