fix: hide the submission form when its past deadline

Author: serapieTuyishime

public/locales/bg/common.json

@@ -118,6 +118,7 @@
   "communities.overview.challenge.submission.description": "Поставете кода на вашия екип по-долу и той автоматично ще създаде връзки към всички профили.",
   "communities.challenge.submission.hint": "Подаването ще бъде активирано, когато всички членове на екипа приемат поканата и екипът бъде напълно сформиран.",
   "communities.overview.challenge.deadline": "Краен срок",
+  "communities.overview.challenge.submissions-closed": "Предложенията за това предизвикателство вече са затворени.",
   "communities.reward": "Награди",
   "communities.overview.subtitle": "Какво може да получите в тази общност:",
   "communities.submissions": "Submissions",

public/locales/en/common.json

@@ -124,6 +124,7 @@
   "communities.overview.challenge.submission.description": "Paste the code of your team below and it will automatically link to all the profiles",
   "communities.challenge.submission.hint": "Submitions will be enabled when when all the team members accept the invitation and the team is fully formed.",
   "communities.overview.challenge.deadline": "Deadline",
+  "communities.overview.challenge.submissions-closed": "Submissions for this challenge are now closed.",
   "communities.challenge.hint": "Hint",
   "communities.challenge.criteria.title": "Rating Rubric",
   "communities.challenge.criteria.subtitle": "The following learning materials will equip you with the technical expertise required to successfully address the challenge.",

public/locales/es/common.json

@@ -123,6 +123,7 @@
   "communities.overview.challenge.submission.description": "Pega el código de tu equipo a continuación y se enlazará automáticamente a todos los perfiles.",
   "communities.challenge.submission.hint": "Las presentaciones estarán habilitadas cuando todos los miembros del equipo acepten la invitación y el equipo esté completamente formado.",
   "communities.overview.challenge.deadline": "Fecha límite",
+  "communities.overview.challenge.submissions-closed": "Las inscripciones para este desafío ya están cerradas.",
   "communities.challenge.hint": "Pista",
   "communities.challenge.criteria.title": "Rúbrica de evaluación",
   "communities.overview.challenge.title": "¿Ya estás lista para completar el desafío?",

public/locales/hr/common.json

@@ -169,6 +169,7 @@
   "communities.overview.challenge.submission.description": "Zalijepite kod svog tima u nastavku i automatski će se povezati sa svim profilima.",
   "communities.challenge.submission.hint": "Podnošenje će biti omogućeno kada svi članovi tima prihvate pozivnicu i tim bude potpuno formiran.",
   "communities.overview.challenge.deadline": "Rok",
+  "communities.overview.challenge.submissions-closed": "Prijave za ovaj izazov sada su zatvorene.",
   "communities.card.submissions": "{{count}} Podnesci",
   "communities.card.submission": "{{count}} Podnošenje",
   "communities.card.courses": "in {{count}} Courses",

src/components/cards/CreateTeam.tsx

@@ -120,6 +120,8 @@ export default function CreateTeamCard({ index = 1, title = "", text = "" }: Cre
     return challenge?.teamLimit ? members.length >= challenge?.teamLimit - 1 : members.length >= 2;
   }, [challenge?.teamLimit, membersList]);
 
+  const submissionsClosed = challenge?.expiresAt ? Date.parse(challenge?.expiresAt) < Date.now() : false;
+
   const canAddMembers = useMemo(() => {
     return team ? isCurrentUserOrganiser && !team?.locked && !isTeamFull : true;
   }, [isCurrentUserOrganiser, team, isTeamFull]);
@@ -236,6 +238,7 @@ export default function CreateTeamCard({ index = 1, title = "", text = "" }: Cre
                     defaultOptions={[]}
                     className="text-lg"
                     isClearable={true}
+                    isDisabled={submissionsClosed}
                     loadOptions={(inputValue: string, callback: (options: Option[]) => void) => {
                       searchUserByUsername(inputValue, callback);
                     }}

src/components/sections/challenges/Submission.tsx

@@ -92,6 +92,8 @@ export default function Submission(): ReactElement {
 
   const disabled = submitting || (challenge?.format.disclaimer ? !checkedTerms : false);
 
+  const submissionsClosed = challenge?.expiresAt ? Date.parse(challenge?.expiresAt) < Date.now() : false;
+
   /**
    * Submit form function
    * @date 4/18/2023 - 8:22:10 PM
@@ -130,81 +132,87 @@ export default function Submission(): ReactElement {
 
   return (
     <Section title={t("communities.challenge.submission")}>
-      {challenge?.isTeamChallenge && <p className="text-base font-normal text-slate-700 pt-2 pb-7 md:w-99">{t("communities.overview.challenge.submission.description")}</p>}
-      {!canSubmit ? (
-        <Hint className="mb-8">{t("communities.challenge.submission.hint")}</Hint>
+      {submissionsClosed ? (
+        <Hint className="mb-8">{t("communities.overview.challenge.submissions-closed")}</Hint>
       ) : (
-        <form onSubmit={handleSubmit(onSubmit)}>
-          {challenge?.format && (
-            <div className="relative w-full md:pl-7.5 my-6">
-              <div className="absolute z-50 left-3 md:left-0 top-3">
-                <Avatar user={team?.organizer || authUser} size="medium" />
-              </div>
+        <>
+          {challenge?.isTeamChallenge && <p className="text-base font-normal text-slate-700 pt-2 pb-7 md:w-99"> {t("communities.overview.challenge.submission.description")}</p>}
+          {!canSubmit ? (
+            <Hint className="mb-8">{t("communities.challenge.submission.hint")}</Hint>
+          ) : (
+            <form onSubmit={handleSubmit(onSubmit)}>
+              {challenge?.format && (
+                <div className="relative w-full md:pl-7.5 my-6">
+                  <div className="absolute z-50 left-3 md:left-0 top-3">
+                    <Avatar user={team?.organizer || authUser} size="medium" />
+                  </div>
 
-              <div label-for="input-text">
-                <TextInput
-                  id="input-text"
-                  value={textValue}
-                  placeholder={`${t("communities.challenge.submission.placeholder.text")}`}
-                  error={errors.text?.message as string}
-                  {...register("text", {
-                    required: "This field is required",
-                    minLength: {
-                      value: 15,
-                      message: "This field must be at least 15 characters.",
-                    },
-                  })}
-                />
-              </div>
-              {challenge.format.githubLink && (
-                <div
-                  className={classNames("w-full border border-solid border-gray-200 m-0 rounded-b text-lg py-0 leading-none items-center space-x-2", {
-                    "border-t-0": challenge.format.text,
-                  })}
-                >
-                  <div>
-                    <GithubLinkInput
-                      id="input-github"
-                      error={errors.githubLink?.message as string}
-                      className="p-0 border-none border-transparent focus:outline-none outline-none active:border-none focus:border-none block m-0 flex-grow w-full placeholder-gray-400 placeholder-opacity-100"
-                      placeholder={`${t("communities.challenge.submission.placeholder.github")}`}
-                      {...register("githubLink", {
-                        value: githubLinkValue,
+                  <div label-for="input-text">
+                    <TextInput
+                      id="input-text"
+                      value={textValue}
+                      placeholder={`${t("communities.challenge.submission.placeholder.text")}`}
+                      error={errors.text?.message as string}
+                      {...register("text", {
                         required: "This field is required",
-                        pattern: {
-                          /*
-                          This pattern validates a valid GitHub link URL.
-                          The URL should follow the format: https://github.com/username/repository.
-                        */
-                          value: /^https?:\/\/(www\.)?github\.com\/[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+$/,
-                          message: "This value must be a valid Github repository URL",
+                        minLength: {
+                          value: 15,
+                          message: "This field must be at least 15 characters.",
                         },
                       })}
                     />
                   </div>
+                  {challenge.format.githubLink && (
+                    <div
+                      className={classNames("w-full border border-solid border-gray-200 m-0 rounded-b text-lg py-0 leading-none items-center space-x-2", {
+                        "border-t-0": challenge.format.text,
+                      })}
+                    >
+                      <div>
+                        <GithubLinkInput
+                          id="input-github"
+                          error={errors.githubLink?.message as string}
+                          className="p-0 border-none border-transparent focus:outline-none outline-none active:border-none focus:border-none block m-0 flex-grow w-full placeholder-gray-400 placeholder-opacity-100"
+                          placeholder={`${t("communities.challenge.submission.placeholder.github")}`}
+                          {...register("githubLink", {
+                            value: githubLinkValue,
+                            required: "This field is required",
+                            pattern: {
+                              /*
+                          This pattern validates a valid GitHub link URL.
+                          The URL should follow the format: https://github.com/username/repository.
+                        */
+                              value: /^https?:\/\/(www\.)?github\.com\/[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+$/,
+                              message: "This value must be a valid Github repository URL",
+                            },
+                          })}
+                        />
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}
-            </div>
-          )}
-          <div className="pl-7.5">
-            <MarkdownIcon />
-          </div>
-          <div className="flex justify-between">
-            <div className="flex xl:pl-10.75 flex-col self-center">
-              {challenge?.format.disclaimer && (
-                <div className="flex flex-row max-w-xm space-x-3 items-center">
-                  <input type="checkbox" className="xl:w-5 w-10 h-5" name="agree" required onChange={() => setCheckedTerms(!checkedTerms)} checked={checkedTerms} />
-                  <span className="max-w-none text-sm leading-none">{challenge.format.disclaimer}</span>
+              <div className="pl-7.5">
+                <MarkdownIcon />
+              </div>
+              <div className="flex justify-between">
+                <div className="flex xl:pl-10.75 flex-col self-center">
+                  {challenge?.format.disclaimer && (
+                    <div className="flex flex-row max-w-xm space-x-3 items-center">
+                      <input type="checkbox" className="xl:w-5 w-10 h-5" name="agree" required onChange={() => setCheckedTerms(!checkedTerms)} checked={checkedTerms} />
+                      <span className="max-w-none text-sm leading-none">{challenge.format.disclaimer}</span>
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-            <div className="flex text-right self-start">
-              <ArrowButton variant="primary" disabled={disabled} customStyle={activeButtonStyle} loading={submitting}>
-                submit
-              </ArrowButton>
-            </div>
-          </div>
-        </form>
+                <div className="flex text-right self-start">
+                  <ArrowButton variant="primary" disabled={disabled} customStyle={activeButtonStyle} loading={submitting}>
+                    submit
+                  </ArrowButton>
+                </div>
+              </div>
+            </form>
+          )}
+        </>
       )}
     </Section>
   );