-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(organizations): Warnings notices are now displayed only when needed.
- Loading branch information
Showing
2 changed files
with
184 additions
and
167 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,75 @@ | ||
| import { useParams } from "react-router-dom"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { | ||
| Breadcrumb, | ||
| Container, | ||
| Link, | ||
| Notice, | ||
| useDSFRConfig, | ||
| Breadcrumb, | ||
| Container, | ||
| Link, | ||
| Notice, | ||
| useDSFRConfig, | ||
| } from "@dataesr/dsfr-plus"; | ||
| import PageSkeleton from "../../../components/skeleton/page-skeleton"; | ||
| import OrganizationPresentation from "./components/organization"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { RawIntlProvider, createIntl } from "react-intl"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { getOrganizationById } from "../../../api/organizations/[id]"; | ||
| import PageSkeleton from "../../../components/skeleton/page-skeleton"; | ||
| import getLangFieldValue from "../../../utils/lang"; | ||
| import { RawIntlProvider, createIntl } from "react-intl"; | ||
| import OrganizationPresentation from "./components/organization"; | ||
|
|
||
| const modules = import.meta.glob("./locales/*.json", { | ||
| eager: true, | ||
| import: "default", | ||
| eager: true, | ||
| import: "default", | ||
| }); | ||
|
|
||
| const messages = Object.keys(modules).reduce((acc, key) => { | ||
| const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1]; | ||
| if (locale) { | ||
| return { ...acc, [locale]: modules[key] }; | ||
| } | ||
| return acc; | ||
| const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1]; | ||
| if (locale) { | ||
| return { ...acc, [locale]: modules[key] }; | ||
| } | ||
| return acc; | ||
| }, {}); | ||
|
|
||
| export default function Organization() { | ||
| const { locale } = useDSFRConfig(); | ||
| const intl = createIntl({ locale, messages: messages[locale] }); | ||
| const { id } = useParams(); | ||
| const { data, isLoading } = useQuery({ | ||
| queryKey: ["organizations", id], | ||
| queryFn: () => getOrganizationById(id), | ||
| throwOnError: true, | ||
| }); | ||
| const { locale } = useDSFRConfig(); | ||
| const intl = createIntl({ locale, messages: messages[locale] }); | ||
| const { id } = useParams(); | ||
| const { data, isLoading } = useQuery({ | ||
| queryKey: ["organizations", id], | ||
| queryFn: () => getOrganizationById(id), | ||
| throwOnError: true, | ||
| }); | ||
|
|
||
| // if Date.parse fails, it returns NaN and NaN compares false to everything | ||
| // it then defaults to false if data?.endDate is undefined, null or invalid | ||
| // it returns true only if data?.endDate is a valid date in the past | ||
| const isClosed = Date.parse(data?.endDate) < Date.now(); | ||
|
|
||
| const isForeign = data?.isFrench === false; | ||
| const breadcrumbLabel = getLangFieldValue(locale)(data?.label); | ||
|
|
||
| return ( | ||
| <RawIntlProvider value={intl}> | ||
| {data && !data?.isFrench && ( | ||
| <Notice closeMode="disallow" type="warning"> | ||
| {intl.formatMessage({ id: "organizations.notice.not-french" })} | ||
| </Notice> | ||
| )} | ||
| {data?.endDate && ( | ||
| <Notice closeMode="disallow" type="warning"> | ||
| {intl.formatMessage({ id: "organizations.notice.closed" })} {data.endDate.slice(0, 4)}. | ||
| </Notice> | ||
| )} | ||
| <Container> | ||
| <Breadcrumb> | ||
| <Link href="/">{intl.formatMessage({ id: "organizations.breadcrumb.home" })}</Link> | ||
| <Link href="/search/organizations">{intl.formatMessage({ id: "organizations.breadcrumb.search" })}</Link> | ||
| <Link>{getLangFieldValue(locale)(data?.label)}</Link> | ||
| </Breadcrumb> | ||
| {(isLoading || !data?.id) && <PageSkeleton />} | ||
| {data?.id && <OrganizationPresentation data={data} />} | ||
| </Container> | ||
| </RawIntlProvider> | ||
| ) | ||
| return ( | ||
| <RawIntlProvider value={intl}> | ||
| {isForeign && ( | ||
| <Notice closeMode="disallow" type="warning"> | ||
| {intl.formatMessage({ id: "organizations.notice.not-french" })} | ||
| </Notice> | ||
| )} | ||
| {isClosed && ( | ||
| <Notice closeMode="disallow" type="warning"> | ||
| {intl.formatMessage({ id: "organizations.notice.closed" })}{" "} | ||
| {new Date(data.endDate).toLocaleDateString()}. | ||
| </Notice> | ||
| )} | ||
| <Container> | ||
| <Breadcrumb> | ||
| <Link href="/"> | ||
| {intl.formatMessage({ id: "organizations.breadcrumb.home" })} | ||
| </Link> | ||
| <Link href="/search/organizations"> | ||
| {intl.formatMessage({ id: "organizations.breadcrumb.search" })} | ||
| </Link> | ||
| <Link>{breadcrumbLabel}</Link> | ||
| </Breadcrumb> | ||
| {(isLoading || !data?.id) && <PageSkeleton />} | ||
| {data?.id && <OrganizationPresentation data={data} />} | ||
| </Container> | ||
| </RawIntlProvider> | ||
| ); | ||
| } |
Oops, something went wrong.