Implement code review suggestions

pythonitalia · Aug 17, 2024 · af9b496 · af9b496
1 parent 29940c6
commit af9b496
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 85 deletions.
diff --git a/frontend/src/components/my-grant-profile-page-handler/index.tsx b/frontend/src/components/my-grant-profile-page-handler/index.tsx
@@ -20,7 +20,7 @@ export const MyGrantProfilePageHandler = () => {
     },
   });
 
-  const grant = me?.grant;
+  const grant = me.grant;
 
   return (
     <Page endSeparator={false}>

diff --git a/frontend/src/components/my-grant-profile-page-handler/my-grant.tsx b/frontend/src/components/my-grant-profile-page-handler/my-grant.tsx
@@ -13,6 +13,7 @@ import { useCurrentLanguage } from "~/locale/context";
 import { DeadlineStatus, Status as GrantStatus } from "~/types";
 import type { MyProfileWithGrantQuery } from "~/types";
 
+import { getCountryLabel } from "~/helpers/country-utils";
 import { useCountries } from "~/helpers/use-countries";
 import { createHref } from "../link";
 import { Sidebar } from "./sidebar";
@@ -22,21 +23,18 @@ type Props = {
   deadline: MyProfileWithGrantQuery["conference"]["deadline"];
 };
 
+const grantManageableStatuses = [
+  GrantStatus.WaitingForConfirmation,
+  GrantStatus.Confirmed,
+  GrantStatus.WaitingList,
+  GrantStatus.WaitingListMaybe,
+];
+
 export const MyGrant = ({ grant, deadline }: Props) => {
   const language = useCurrentLanguage();
   const countries = useCountries();
 
-  const canManageGrant = [
-    GrantStatus.WaitingForConfirmation,
-    GrantStatus.Confirmed,
-    GrantStatus.WaitingList,
-    GrantStatus.WaitingListMaybe,
-  ].includes(grant.status);
-
-  const getCountryLabel = (value: string): string | undefined => {
-    const country = countries.find((country) => country.value === value);
-    return country ? country.label : undefined;
-  };
+  const canManageGrant = grantManageableStatuses.includes(grant.status);
 
   const dateFormatter = new Intl.DateTimeFormat(language, {
     day: "numeric",
@@ -94,23 +92,23 @@ export const MyGrant = ({ grant, deadline }: Props) => {
             )}
 
             <Grid cols={3} gap="small" fullWidth>
-              <GridColumn>
+              <div>
                 <Title>
                   <FormattedMessage id="grants.form.fields.name" />
                 </Title>
                 <Spacer size="xs" />
                 <Text>{grant.name}</Text>
-              </GridColumn>
+              </div>
 
-              <GridColumn>
+              <div>
                 <Title>
                   <FormattedMessage id="grants.form.fields.fullName" />
                 </Title>
                 <Spacer size="xs" />
                 <Text>{grant.fullName}</Text>
-              </GridColumn>
+              </div>
 
-              <GridColumn>
+              <div>
                 <Title>
                   <FormattedMessage id="grants.form.fields.ageGroup" />
                 </Title>
@@ -121,27 +119,27 @@ export const MyGrant = ({ grant, deadline }: Props) => {
                     id={`grants.form.fields.ageGroup.values.${grant.ageGroup}`}
                   />
                 </Text>
-              </GridColumn>
+              </div>
 
-              <GridColumn>
+              <div>
                 <Title>
                   <FormattedMessage id="grants.form.fields.travellingFrom" />
                 </Title>
                 <Spacer size="xs" />
-                <Text>{getCountryLabel(grant.travellingFrom)}</Text>
-              </GridColumn>
+                <Text>{getCountryLabel(countries, grant.travellingFrom)}</Text>
+              </div>
 
-              <GridColumn>
+              <div>
                 <Title>
                   <FormattedMessage id="grants.form.fields.gender" />
                 </Title>
                 <Spacer size="xs" />
                 <Text>
                   <FormattedMessage id={`profile.gender.${grant.gender}`} />
                 </Text>
-              </GridColumn>
+              </div>
 
-              <GridColumn>
+              <div>
                 <Title>
                   <FormattedMessage id="grants.form.fields.occupation" />
                 </Title>
@@ -151,7 +149,7 @@ export const MyGrant = ({ grant, deadline }: Props) => {
                     id={`grants.form.fields.occupation.values.${grant.occupation}`}
                   />
                 </Text>
-              </GridColumn>
+              </div>
             </Grid>
           </VerticalStack>
         </GridColumn>

diff --git a/frontend/src/components/my-grant-profile-page-handler/no-grant.tsx b/frontend/src/components/my-grant-profile-page-handler/no-grant.tsx
@@ -10,6 +10,7 @@ import { FormattedMessage } from "react-intl";
 import { useCurrentLanguage } from "~/locale/context";
 import { DeadlineStatus, type MyProfileWithSubmissionsQuery } from "~/types";
 
+import { Link } from "@python-italia/pycon-styleguide";
 import { createHref } from "../link";
 
 type Props = {
@@ -26,9 +27,26 @@ export const NoGrant = ({ deadline }: Props) => {
         <FormattedMessage id="profile.myGrant.noGrant.heading" />
       </Heading>
       <Spacer size="small" />
-      <Text size={2}>
+      <Text>
         {deadlineStatus === DeadlineStatus.HappeningNow && (
-          <FormattedMessage id="profile.myGrant.noGrant.body.canSubmit" />
+          <FormattedMessage
+            id="profile.myGrant.noGrant.body.canSubmit"
+            values={{
+              grantInfoLink: (
+                <Link
+                  href={createHref({
+                    path: "/grants-info",
+                    locale: language,
+                  })}
+                  target="_blank"
+                >
+                  <Text decoration="underline">
+                    <FormattedMessage id="global.here" />
+                  </Text>
+                </Link>
+              ),
+            }}
+          />
         )}
         {deadlineStatus === DeadlineStatus.InThePast && (
           <FormattedMessage id="profile.myGrant.noGrant.body.closed" />
@@ -37,28 +55,20 @@ export const NoGrant = ({ deadline }: Props) => {
           <FormattedMessage id="profile.myGrant.noGrant.body.openingSoon" />
         )}
       </Text>
-      <Spacer size="large" />
-      {deadlineStatus === DeadlineStatus.HappeningNow && (
-        <Button
-          href={createHref({
-            path: "/grants",
-            locale: language,
-          })}
-          variant="secondary"
-        >
-          <FormattedMessage id="profile.myGrant.noGrant.submitGrant" />
-        </Button>
-      )}
-      {deadlineStatus === DeadlineStatus.InTheFuture && (
-        <Button
-          href={createHref({
-            path: "/grants-info",
-            locale: language,
-          })}
-          variant="secondary"
-        >
-          <FormattedMessage id="profile.myGrant.noGrant.submitGrant" />
-        </Button>
+      {(deadlineStatus === DeadlineStatus.HappeningNow ||
+        deadlineStatus === DeadlineStatus.InTheFuture) && (
+        <>
+          <Spacer size="large" />
+          <Button
+            href={createHref({
+              path: "/grants-info",
+              locale: language,
+            })}
+            variant="secondary"
+          >
+            <FormattedMessage id="profile.myGrant.noGrant.submitGrant" />
+          </Button>
+        </>
       )}
     </Container>
   );

diff --git a/frontend/src/components/my-grant-profile-page-handler/sidebar.tsx b/frontend/src/components/my-grant-profile-page-handler/sidebar.tsx
@@ -29,39 +29,37 @@ export const Sidebar = ({
   needAccommodation,
 }: Props) => {
   return (
-    <>
-      <MultiplePartsCard>
-        <GrantInfo label={<FormattedMessage id="profile.myGrant.status" />}>
-          <Tag color={getStatusColor(status)}>
-            <FormattedMessage id={`profile.myGrant.status.${status}`} />
-          </Tag>
-        </GrantInfo>
+    <MultiplePartsCard>
+      <GrantInfo label={<FormattedMessage id="profile.myGrant.status" />}>
+        <Tag color={getStatusColor(status)}>
+          <FormattedMessage id={`profile.myGrant.status.${status}`} />
+        </Tag>
+      </GrantInfo>
 
-        <GrantInfo label={<FormattedMessage id="profile.myGrant.grantType" />}>
-          <FormattedMessage
-            id={`grants.form.fields.grantType.values.${grantType}`}
-          />
-        </GrantInfo>
+      <GrantInfo label={<FormattedMessage id="profile.myGrant.grantType" />}>
+        <FormattedMessage
+          id={`grants.form.fields.grantType.values.${grantType}`}
+        />
+      </GrantInfo>
 
-        <GrantInfo label={<FormattedMessage id="profile.myGrant.appliedFor" />}>
-          <VerticalStack gap="small">
-            <FormattedMessage id="profile.myGrant.appliedFor.ticket" />
+      <GrantInfo label={<FormattedMessage id="profile.myGrant.appliedFor" />}>
+        <VerticalStack gap="small">
+          <FormattedMessage id="profile.myGrant.appliedFor.ticket" />
 
-            {needsFundsForTravel && (
-              <Text size="label2" weight="strong">
-                <FormattedMessage id="profile.myGrant.appliedFor.travel" />
-              </Text>
-            )}
+          {needsFundsForTravel && (
+            <Text size="label2" weight="strong">
+              <FormattedMessage id="profile.myGrant.appliedFor.travel" />
+            </Text>
+          )}
 
-            {needAccommodation && (
-              <Text size="label2" weight="strong">
-                <FormattedMessage id="profile.myGrant.appliedFor.accommodation" />
-              </Text>
-            )}
-          </VerticalStack>
-        </GrantInfo>
-      </MultiplePartsCard>
-    </>
+          {needAccommodation && (
+            <Text size="label2" weight="strong">
+              <FormattedMessage id="profile.myGrant.appliedFor.accommodation" />
+            </Text>
+          )}
+        </VerticalStack>
+      </GrantInfo>
+    </MultiplePartsCard>
   );
 };
 

diff --git a/frontend/src/helpers/country-utils.ts b/frontend/src/helpers/country-utils.ts
@@ -0,0 +1,7 @@
+export const getCountryLabel = (
+  countries: { label: string; value: string; disabled: boolean }[],
+  value: string,
+): string | undefined => {
+  const country = countries.find((country) => country.value === value);
+  return country ? country.label : undefined;
+};
diff --git a/frontend/src/locale/index.ts b/frontend/src/locale/index.ts
@@ -165,9 +165,9 @@ Use the 'Manage' button on the page to confirm or decline the grant. You have un
     "profile.myGrant.manage": "Manage",
     "profile.myGrant.manage.warning": `If your plans change or you cannot attend the conference anymore, please let us know by clicking the 'Manage' button to refuse your grant or email us at {grantsEmail} as soon as possible.
 Failing to notify us may impact your eligibility for financial aid at future events.`,
-    "profile.myGrant.noGrant.heading": "You haven't requested a grant yet",
-    "profile.myGrant.noGrant.body.canSubmit":
-      "If you're facing financial difficulties and wish to attend PyCon Italia, our grant application form is currently open. Submit your grant request today!",
+    "profile.myGrant.noGrant.heading": "You haven't requested a grant",
+    "profile.myGrant.noGrant.body.canSubmit": `If you're facing financial difficulties and wish to attend PyCon Italia, our grant application form is currently open!
+Find our more information {grantInfoLink} and submit your application below.`,
     "profile.myGrant.noGrant.submitGrant": "Request a grant",
     "profile.myGrant.noGrant.body.closed":
       "The grant application form is currently closed. Stay tuned for future opportunities.",
@@ -2006,12 +2006,12 @@ Usa il pulsante 'Gestisci' nella pagina per confermare o rifiutare il grant. Hai
     "profile.myGrant.status.did_not_attend": "Non ha partecipato",
     "profile.myGrant.status.did_not_attend.nextSteps":
       "Non hai partecipato alla conferenza.",
-    "profile.myGrant.noGrant.heading": "Non hai ancora richiesto un grant",
-    "profile.myGrant.noGrant.body.canSubmit":
-      "Se ti trovi in difficoltà economica e desideri partecipare a PyCon Italia, il nostro modulo per la richiesta di grant è attualmente aperto. Invia la tua richiesta oggi stesso!",
+    "profile.myGrant.noGrant.heading": "Non hai richiesto un grant",
+    "profile.myGrant.noGrant.body.canSubmit": `Se ti trovi in difficoltà economica e desideri partecipare a PyCon Italia, il nostro modulo per la richiesta di grant è attualmente aperto.
+Guarda {grantInfoLink} per maggiori informazioni e invia la richiesta qui sotto.`,
     "profile.myGrant.noGrant.submitGrant": "Richiedi un grant",
     "profile.myGrant.noGrant.body.closed":
-      "Il modulo per la richiesta di grant è attualmente chiuso. Continua a seguirci per future opportunità.",
+      "Il modulo per la richiesta di grant è attualmente chiuso. Purtroppo non possiamo accettare nuove richieste dopo la scadenza.",
     "profile.myGrant.noGrant.body.openingSoon":
       "Il nostro modulo per la richiesta di grant aprirà presto! Visita la nostra pagina informativa per ulteriori dettagli.",