-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Grant to profile dashboard (#3993)
Co-authored-by: Alessia Marcolini <98marcolini@gmail.com>
- Loading branch information
1 parent
90ebef4
commit cafd1fb
Showing
18 changed files
with
695 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
frontend/src/components/my-grant-profile-page-handler/grant-table-info.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { Grid, Spacer, Text } from "@python-italia/pycon-styleguide"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| import type { MyProfileWithGrantQuery } from "~/types"; | ||
|
|
||
| import { TableItemHeader } from "~/components/table-item-header"; | ||
| import { getCountryLabel } from "~/helpers/country-utils"; | ||
| import { useCountries } from "~/helpers/use-countries"; | ||
|
|
||
| type Props = { | ||
| grant: MyProfileWithGrantQuery["me"]["grant"]; | ||
| }; | ||
|
|
||
| export const GrantTableInfo = ({ grant }: Props) => { | ||
| const countries = useCountries(); | ||
|
|
||
| return ( | ||
| <Grid cols={3} gap="small" fullWidth> | ||
| <GrantInfo label={<FormattedMessage id="grants.form.fields.name" />}> | ||
| {grant.name} | ||
| </GrantInfo> | ||
|
|
||
| <GrantInfo label={<FormattedMessage id="grants.form.fields.fullName" />}> | ||
| {grant.fullName} | ||
| </GrantInfo> | ||
|
|
||
| <GrantInfo label={<FormattedMessage id="grants.form.fields.ageGroup" />}> | ||
| {grant.ageGroup && ( | ||
| <FormattedMessage | ||
| id={`grants.form.fields.ageGroup.values.${grant.ageGroup}`} | ||
| /> | ||
| )} | ||
| </GrantInfo> | ||
|
|
||
| <GrantInfo | ||
| label={<FormattedMessage id="grants.form.fields.travellingFrom" />} | ||
| > | ||
| {getCountryLabel(countries, grant.travellingFrom)} | ||
| </GrantInfo> | ||
|
|
||
| <GrantInfo label={<FormattedMessage id="grants.form.fields.gender" />}> | ||
| {grant.gender ? ( | ||
| <FormattedMessage id={`profile.gender.${grant.gender}`} /> | ||
| ) : ( | ||
| "-" | ||
| )} | ||
| </GrantInfo> | ||
|
|
||
| <GrantInfo | ||
| label={<FormattedMessage id="grants.form.fields.occupation" />} | ||
| > | ||
| <FormattedMessage | ||
| id={`grants.form.fields.occupation.values.${grant.occupation}`} | ||
| /> | ||
| </GrantInfo> | ||
| </Grid> | ||
| ); | ||
| }; | ||
|
|
||
| const GrantInfo = ({ | ||
| label, | ||
| children, | ||
| }: { | ||
| label: React.ReactNode; | ||
| children: React.ReactNode; | ||
| }) => { | ||
| return ( | ||
| <div> | ||
| <TableItemHeader>{label}</TableItemHeader> | ||
| <Spacer size="xs" /> | ||
| <Text>{children}</Text> | ||
| </div> | ||
| ); | ||
| }; |
40 changes: 40 additions & 0 deletions
40
frontend/src/components/my-grant-profile-page-handler/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { Heading, Page, Section } from "@python-italia/pycon-styleguide"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| import { useMyProfileWithGrantQuery } from "~/types"; | ||
|
|
||
| import { MyGrant } from "~/components/my-grant-profile-page-handler/my-grant"; | ||
| import { NoGrant } from "~/components/my-grant-profile-page-handler/no-grant"; | ||
| import { MetaTags } from "../meta-tags"; | ||
|
|
||
| export const MyGrantProfilePageHandler = () => { | ||
| const { | ||
| data: { | ||
| me: { grant }, | ||
| conference: { deadline }, | ||
| }, | ||
| } = useMyProfileWithGrantQuery({ | ||
| variables: { | ||
| conference: process.env.conferenceCode, | ||
| }, | ||
| }); | ||
|
|
||
| return ( | ||
| <Page endSeparator={false}> | ||
| <FormattedMessage id="profile.myGrant"> | ||
| {(text) => <MetaTags title={text} />} | ||
| </FormattedMessage> | ||
|
|
||
| <Section background="green"> | ||
| <Heading size="display2"> | ||
| <FormattedMessage id="profile.myGrant" /> | ||
| </Heading> | ||
| </Section> | ||
|
|
||
| <Section> | ||
| {grant && <MyGrant grant={grant} deadline={deadline} />} | ||
| {!grant && <NoGrant deadline={deadline} />} | ||
| </Section> | ||
| </Page> | ||
| ); | ||
| }; |
135 changes: 135 additions & 0 deletions
135
frontend/src/components/my-grant-profile-page-handler/my-grant.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import { | ||
| Button, | ||
| Grid, | ||
| GridColumn, | ||
| Link, | ||
| Spacer, | ||
| Text, | ||
| VerticalStack, | ||
| } from "@python-italia/pycon-styleguide"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| import { useCurrentLanguage } from "~/locale/context"; | ||
| import { DeadlineStatus, Status as GrantStatus } from "~/types"; | ||
| import type { MyProfileWithGrantQuery } from "~/types"; | ||
|
|
||
| import { createHref } from "../link"; | ||
| import { GrantTableInfo } from "./grant-table-info"; | ||
| import { Sidebar } from "./sidebar"; | ||
|
|
||
| type Props = { | ||
| grant: MyProfileWithGrantQuery["me"]["grant"]; | ||
| deadline: MyProfileWithGrantQuery["conference"]["deadline"]; | ||
| }; | ||
|
|
||
| const grantManageableStatuses = [ | ||
| GrantStatus.WaitingForConfirmation, | ||
| GrantStatus.Confirmed, | ||
| GrantStatus.WaitingList, | ||
| GrantStatus.WaitingListMaybe, | ||
| ]; | ||
|
|
||
| export const MyGrant = ({ grant, deadline }: Props) => { | ||
| const language = useCurrentLanguage(); | ||
|
|
||
| const canManageGrant = grantManageableStatuses.includes(grant.status); | ||
|
|
||
| const dateFormatter = new Intl.DateTimeFormat(language, { | ||
| day: "numeric", | ||
| month: "long", | ||
| year: "numeric", | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <Grid cols={12}> | ||
| <GridColumn colSpan={4}> | ||
| <Sidebar | ||
| status={grant.status} | ||
| grantType={grant.grantType} | ||
| needsFundsForTravel={grant.needsFundsForTravel} | ||
| needAccommodation={grant.needAccommodation} | ||
| /> | ||
| {deadline?.status === DeadlineStatus.HappeningNow && ( | ||
| <> | ||
| <Spacer size="medium" /> | ||
| <Button | ||
| href={createHref({ | ||
| path: "/grants/edit", | ||
| locale: language, | ||
| })} | ||
| size="small" | ||
| variant="secondary" | ||
| > | ||
| <FormattedMessage id="profile.myGrant.edit" /> | ||
| </Button> | ||
| </> | ||
| )} | ||
| </GridColumn> | ||
|
|
||
| <GridColumn colSpan={8}> | ||
| <VerticalStack gap="medium" justifyContent="spaceBetween" fullHeight> | ||
| <div> | ||
| <Text size="label3" uppercase weight="strong"> | ||
| <FormattedMessage id="profile.myGrant.nextSteps" /> | ||
| </Text> | ||
| <Spacer size="xs" /> | ||
| <Text> | ||
| <FormattedMessage | ||
| id={`profile.myGrant.status.${grant.status}.nextSteps`} | ||
| values={{ | ||
| replyDeadline: ( | ||
| <Text as="span" weight="strong"> | ||
| {dateFormatter.format( | ||
| new Date(grant.applicantReplyDeadline), | ||
| )} | ||
| </Text> | ||
| ), | ||
| }} | ||
| /> | ||
| </Text> | ||
| </div> | ||
|
|
||
| {canManageGrant && ( | ||
| <div> | ||
| <Button | ||
| href={createHref({ | ||
| path: "/grants/reply", | ||
| locale: language, | ||
| })} | ||
| size="small" | ||
| variant="secondary" | ||
| > | ||
| <FormattedMessage id="profile.myGrant.manage" /> | ||
| </Button> | ||
| </div> | ||
| )} | ||
|
|
||
| <GrantTableInfo grant={grant} /> | ||
|
|
||
| {deadline?.status === DeadlineStatus.HappeningNow && ( | ||
| <Text> | ||
| <FormattedMessage | ||
| id="profile.myGrant.editInfo" | ||
| values={{ | ||
| editDeadline: ( | ||
| <Text as="span" weight="strong"> | ||
| {dateFormatter.format(new Date(deadline.end))} | ||
| </Text> | ||
| ), | ||
| }} | ||
| /> | ||
| </Text> | ||
| )} | ||
|
|
||
| {canManageGrant && ( | ||
| <Text> | ||
| <FormattedMessage id="profile.myGrant.manage.warning" /> | ||
| </Text> | ||
| )} | ||
| </VerticalStack> | ||
| </GridColumn> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.