Merge pull request #975 from dacadeorg/dev

Release changes to stage

Author: musayann

.github/workflows/pre-release.yaml

@@ -0,0 +1,20 @@
+on:
+  push:
+    branches:
+      - stage
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v4
+        with:
+          release-type: node
+          target-branch: stage
+          prerelease: true

.github/workflows/release.yaml

@@ -1,7 +1,6 @@
 on:
   push:
     branches:
-      - stage
       - main
 
 permissions:
@@ -14,9 +13,7 @@ jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
-      - uses: google-github-actions/release-please-action@v3
+      - uses: google-github-actions/release-please-action@v4
         with:
           release-type: node
           target-branch: main
-          package-name: package.json
-          labels: "stable"

src/components/cards/challenge/Badges.tsx

@@ -26,7 +26,7 @@ export default function Badges({ challenge, className }: BadgeProps) {
   }, [challenge.level]);
 
   return (
-    <div className={`uppercase flex gap-2 mb-6 ${className}`}>
+    <div className={`uppercase flex flex-wrap gap-2 mb-6 ${className}`}>
       {challenge?.level && <Tag>{t(challengeLevel)}</Tag>}
       {challenge?.isTeamChallenge && <Tag type="light">{challenge?.isHackathon ? "Hackathon" : "Team"} challenge</Tag>}
     </div>

src/components/cards/challenge/Challenge.tsx

@@ -40,7 +40,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
               <Badges challenge={data} className="md:hidden" />
             </div>
 
-            <div className="flex flex-col mb-6 lg:mb-0 mt-6 md:mt-0 rounded-full max-w-max text-sm">
+            <div className="flex flex-col mb-6 lg:mb-0 mt-6 md:mt-0 max-w-max text-sm">
               <div className="flex items-center mb-8 gap-2 md:gap-0">
                 <Certificate size="medium" name={community.slug} />
                 <div className="md:pl-2 max-w-max">
@@ -56,11 +56,9 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
                 <Coin size="medium" token={reward?.token} />
                 <div className="md:pl-2 max-w-max">
                   <div className="flex text-sm text-gray-700">
-                    <span className="block font-medium pr-1">
-                      {data?.isHackathon && "$"}
-                      {totalReward}
+                    <span className="block font-medium">
+                      {`${data?.isHackathon ? "$" : ""} ${totalReward} ${data?.isHackathon ? `Prize Pool Rewards` : `${reward?.token} Rewards`}`}
                     </span>
-                    <span className="block font-medium">{data?.isHackathon ? `Prize Pool Rewards` : `${reward?.token} Rewards`}</span>
                   </div>
                   <div className="text-gray-400 text-xs font-normal">{data?.isHackathon ? "Top projects win money prizes" : "For submission and feedback"}</div>
                 </div>

src/components/sections/profile/Header.tsx

@@ -111,18 +111,18 @@ export default function ProfileHeader() {
           <></>
         )}
       </div>
-      {canConnectDiscord && (
-        <div className="pt-5 space-x-3">
+      <div className="pt-5 space-x-3">
+        {canConnectDiscord && (
           <Button variant="outline-primary" className="flex mx-auto text-base" onClick={triggerDiscordOauth}>
             {t("profile.header.connect-discord")}
           </Button>
-          {!isKycVerified && (
-            <Button variant="outline-primary" className="flex mx-auto text-base" onClick={triggerKYCVerification}>
-              {t("profile.header.sumsub.verify")}
-            </Button>
-          )}
-        </div>
-      )}
+        )}
+        {!isKycVerified && (
+          <Button variant="outline-primary" className="flex mx-auto text-base" onClick={triggerKYCVerification}>
+            {t("profile.header.sumsub.verify")}
+          </Button>
+        )}
+      </div>
       <KYCVerification />
     </div>
   );

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Wrapper from "@/components/sections/courses/Wrapper";
 import Header from "@/components/sections/challenges/Header";
 import { OverviewRewards as Rewards } from "@/components/sections/challenges/Rewards";
@@ -31,7 +31,8 @@ import Objectives from "@/components/sections/challenges/Objectives";
 import { getTeamByChallenge, getUserInvitesByChallenge } from "@/store/services/teams.service";
 import { fetchChallenge, fetchChallengeAuthenticated } from "@/store/services/communities/challenges";
 import Loader from "@/components/ui/Loader";
-import { NotFoundError } from "@/utilities/errors/NotFoundError";
+import { useRouter } from "next/router";
+import Section from "@/components/ui/Section";
 import Hint from "@/components/ui/Hint";
 import Link from "next/link";
 
@@ -53,23 +54,12 @@ interface ChallengePageMultiSelector {
  * @date 4/25/2023 - 8:12:39 PM
  *
  * @export
- * @param {{
-  pageProps: {
-    submission: Submission;
-    challenge: Challenge;
-    community: Community;
-  };
-}} props
  * @returns {ReactElement}
  */
-export default function ChallengePage(props: {
-  pageProps: {
-    submission: Submission;
-    challenge: Challenge;
-    community: Community;
-  };
-}): ReactElement {
-  const { challenge, community } = props.pageProps;
+export default function ChallengePage() {
+  const [challenge, setChallenge] = useState<Challenge | null>(null);
+  const [community, setCommunity] = useState<Community | null>(null);
+  const [loading, setLoading] = useState(true);
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const { submission, isAuthenticated, isSubmissionLoading } = useMultiSelector<unknown, ChallengePageMultiSelector>({
@@ -80,10 +70,29 @@ export default function ChallengePage(props: {
   const title = useMemo(() => getMetadataTitle(t("communities.challenge.title"), challenge?.name || ""), [challenge?.name, t]);
 
   const navigation = useNavigation();
+  const router = useRouter();
+  const { challenge_id, slug, locale } = router.query;
 
-  useEffect(() => {
+  const initPage = useCallback(async () => {
+    const fetchPayload = {
+      slug: slug as string,
+      locale: locale as string,
+    };
+
+    setLoading(true);
+    const [{ data: community }, { data: challenge }] = await Promise.all([
+      dispatch(fetchCurrentCommunity(fetchPayload)) as any,
+      dispatch(fetchChallenge({ ...fetchPayload, id: challenge_id as string, relations: ["rubric", "courses", "learning-modules", "best-submissions"] })) as any,
+    ]);
+    setCommunity(community);
+    setChallenge(challenge);
     dispatch(initChallengeNavigationMenu(navigation.community));
-  }, []);
+    setLoading(false);
+  }, [challenge_id, slug]);
+
+  useEffect(() => {
+    initPage();
+  }, [initPage]);
 
   useEffect(() => {
     if (challenge && isAuthenticated) {
@@ -94,90 +103,78 @@ export default function ChallengePage(props: {
   }, [challenge, dispatch, isAuthenticated]);
 
   const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
-  return (
-    <>
-      <Head>
-        <title>{title}</title>
-        <MetaData description={challenge?.description} />
-      </Head>
-      <Wrapper paths={headerPaths}>
-        <div className="flex flex-col py-4 space-y-8 text-gray-700 divide-y divide-gray-200 divide-solid">
-          <Header />
-          <Rewards />
-          <Objectives />
-          {challenge.isTeamChallenge && <TeamChallenge />}
-          <Learning courses={challenge.courses} learningModules={challenge.learningModules} community={community} />
-          <RatingRubric ratingCriteria={challenge?.ratingCriteria} selected={[]} />
-          <BestSubmissions />
 
-          {isAuthenticated ? (
-            <div>
-              {isSubmissionLoading ? (
-                <div className="h-24 sm:h-48 grid place-items-center">
-                  <Loader />
-                </div>
-              ) : (
-                <>
-                  {submission ? (
-                    <div className="mt-8">
-                      <h4 className="my-8 text-.5xl font-medium">{t("communities.challenge.your-submission")}</h4>
-                      <SubmissionCard submission={submission} />
-                    </div>
-                  ) : (
-                    <>
-                      {challenge.isTeamChallenge && <SetupTeamChallenge />}
-                      <SubmissionForm />
-                    </>
-                  )}
-                </>
-              )}
-            </div>
-          ) : (
-            <div>
-              <Hint className="mt-6 flex flex-col md:flex-row">
-                <p>To be able to submit</p>&nbsp;
-                <Link className="underline" href="/login">
-                  Login.
-                </Link>
-              </Hint>
-            </div>
-          )}
-        </div>
-      </Wrapper>
-    </>
-  );
+  if (loading)
+    return (
+      <Section className="h-[50vh] flex items-center justify-center">
+        <Loader />
+      </Section>
+    );
+
+  if (challenge && community)
+    return (
+      <>
+        <Head>
+          <title>{title}</title>
+          <MetaData description={challenge?.description} />
+        </Head>
+        <Wrapper paths={headerPaths}>
+          <div className="flex flex-col py-4 space-y-8 text-gray-700 divide-y divide-gray-200 divide-solid">
+            <Header />
+            <Rewards />
+            <Objectives />
+            {challenge.isTeamChallenge && <TeamChallenge />}
+            <Learning courses={challenge.courses} learningModules={challenge.learningModules} community={community} />
+            <RatingRubric ratingCriteria={challenge?.ratingCriteria} selected={[]} />
+            <BestSubmissions />
+
+            {isAuthenticated ? (
+              <div>
+                {isSubmissionLoading ? (
+                  <div className="h-24 sm:h-48 grid place-items-center">
+                    <Loader />
+                  </div>
+                ) : (
+                  <>
+                    {submission ? (
+                      <div className="mt-8">
+                        <h4 className="my-8 text-.5xl font-medium">{t("communities.challenge.your-submission")}</h4>
+                        <SubmissionCard submission={submission} />
+                      </div>
+                    ) : (
+                      <>
+                        {challenge.isTeamChallenge && <SetupTeamChallenge />}
+                        <SubmissionForm />
+                      </>
+                    )}
+                  </>
+                )}
+              </div>
+            ) : (
+              <div>
+                <Hint className="mt-6 flex flex-col md:flex-row">
+                  <p>To be able to submit</p>&nbsp;
+                  <Link className="underline" href="/login">
+                    Login.
+                  </Link>
+                </Hint>
+              </div>
+            )}
+          </div>
+        </Wrapper>
+      </>
+    );
 }
 
 ChallengePage.getLayout = function (page: ReactElement) {
   return <DefaultLayout footerBackgroundColor={false}>{page}</DefaultLayout>;
 };
 
-export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps((store) => async (data) => {
-  const { query, locale } = data;
-  const { slug, challenge_id } = query;
-
-  const fetchPayload = {
-    slug: slug as string,
-    locale: locale as string,
+export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps(() => async (data) => {
+  const { locale } = data;
+  return {
+    props: {
+      ...(await serverSideTranslations(locale as string)),
+    },
   };
-
-  try {
-    const [{ data: community }, { data: challenge }, translations] = await Promise.all([
-      store.dispatch(fetchCurrentCommunity(fetchPayload)),
-      store.dispatch(fetchChallenge({ ...fetchPayload, id: challenge_id as string, relations: ["rubric", "courses", "learning-modules", "best-submissions"] })),
-      serverSideTranslations(locale as string),
-    ]);
-    if (!community || !challenge) throw new NotFoundError();
-    return {
-      props: {
-        ...translations,
-        community,
-        challenge,
-      },
-    };
-  } catch (e) {
-    return {
-      notFound: true,
-    };
-  }
 });