Skip to content

Commit b3fd510

Browse files
Jonath-zJonath-z
committed
refactor: challenge page rendering
1 parent 94ab04e commit b3fd510

File tree

1 file changed

+47
-44
lines changed
  • src/pages/communities/[slug]/challenges/[challenge_id]

1 file changed

+47
-44
lines changed

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

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ interface ChallengePageMultiSelector {
5454
* @export
5555
* @returns {ReactElement}
5656
*/
57-
export default function ChallengePage(): ReactElement {
57+
export default function ChallengePage() {
5858
const [challenge, setChallenge] = useState<Challenge | null>(null);
5959
const [community, setCommunity] = useState<Community | null>(null);
6060
const [loading, setLoading] = useState(true);
@@ -102,55 +102,58 @@ export default function ChallengePage(): ReactElement {
102102
}, [challenge, dispatch, isAuthenticated]);
103103

104104
const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
105-
if (loading || !challenge || !community)
105+
106+
if (loading)
106107
return (
107108
<Section className="h-[50vh] flex items-center justify-center">
108109
<Loader />
109110
</Section>
110111
);
111-
return (
112-
<>
113-
<Head>
114-
<title>{title}</title>
115-
<MetaData description={challenge?.description} />
116-
</Head>
117-
<Wrapper paths={headerPaths}>
118-
<div className="flex flex-col py-4 space-y-8 text-gray-700 divide-y divide-gray-200 divide-solid">
119-
<Header />
120-
<Rewards />
121-
<Objectives />
122-
{challenge.isTeamChallenge && <TeamChallenge />}
123-
<Learning courses={challenge.courses} learningModules={challenge.learningModules} community={community} />
124-
<RatingRubric ratingCriteria={challenge?.ratingCriteria} selected={[]} />
125-
<BestSubmissions />
126112

127-
{isAuthenticated && (
128-
<div>
129-
{isSubmissionLoading ? (
130-
<div className="h-24 sm:h-48 grid place-items-center">
131-
<Loader />
132-
</div>
133-
) : (
134-
<>
135-
{submission ? (
136-
<div className="mt-8">
137-
<h4 className="my-8 text-.5xl font-medium">{t("communities.challenge.your-submission")}</h4>
138-
<SubmissionCard submission={submission} />
139-
</div>
140-
) : (
141-
<>
142-
{challenge.isTeamChallenge && <SetupTeamChallenge />}
143-
<SubmissionForm />
144-
</>
145-
)}
146-
</>
147-
)}
148-
</div>
149-
)}
150-
</div>
151-
</Wrapper>
152-
</>
153-
);
113+
if (challenge && community)
114+
return (
115+
<>
116+
<Head>
117+
<title>{title}</title>
118+
<MetaData description={challenge?.description} />
119+
</Head>
120+
<Wrapper paths={headerPaths}>
121+
<div className="flex flex-col py-4 space-y-8 text-gray-700 divide-y divide-gray-200 divide-solid">
122+
<Header />
123+
<Rewards />
124+
<Objectives />
125+
{challenge.isTeamChallenge && <TeamChallenge />}
126+
<Learning courses={challenge.courses} learningModules={challenge.learningModules} community={community} />
127+
<RatingRubric ratingCriteria={challenge?.ratingCriteria} selected={[]} />
128+
<BestSubmissions />
129+
130+
{isAuthenticated && (
131+
<div>
132+
{isSubmissionLoading ? (
133+
<div className="h-24 sm:h-48 grid place-items-center">
134+
<Loader />
135+
</div>
136+
) : (
137+
<>
138+
{submission ? (
139+
<div className="mt-8">
140+
<h4 className="my-8 text-.5xl font-medium">{t("communities.challenge.your-submission")}</h4>
141+
<SubmissionCard submission={submission} />
142+
</div>
143+
) : (
144+
<>
145+
{challenge.isTeamChallenge && <SetupTeamChallenge />}
146+
<SubmissionForm />
147+
</>
148+
)}
149+
</>
150+
)}
151+
</div>
152+
)}
153+
</div>
154+
</Wrapper>
155+
</>
156+
);
154157
}
155158

156159
ChallengePage.getLayout = function (page: ReactElement) {

0 commit comments

Comments
 (0)