From cf40b0192c5ef6a982d6631202356d3250687dc2 Mon Sep 17 00:00:00 2001 From: Alice Dahan Date: Mon, 22 Jul 2024 18:08:18 +0200 Subject: [PATCH] =?UTF-8?q?refactor(site):=20Cr=C3=A9e=20un=20composant=20?= =?UTF-8?q?ind=C3=A9pendant=20pour=20les=20r=C3=A9sultats=20de=20recherche?= =?UTF-8?q?=20d'entreprise?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../company/EntrepriseSearchResults.tsx | 106 +++++++++++++++++ .../source/components/company/SearchField.tsx | 108 +----------------- 2 files changed, 110 insertions(+), 104 deletions(-) create mode 100644 site/source/components/company/EntrepriseSearchResults.tsx diff --git a/site/source/components/company/EntrepriseSearchResults.tsx b/site/source/components/company/EntrepriseSearchResults.tsx new file mode 100644 index 000000000..e04807978 --- /dev/null +++ b/site/source/components/company/EntrepriseSearchResults.tsx @@ -0,0 +1,106 @@ +import { Trans, useTranslation } from 'react-i18next' +import { styled } from 'styled-components' + +import { ForceThemeProvider } from '@/components/utils/DarkModeContext' +import { Message } from '@/design-system' +import { Card } from '@/design-system/card' +import { FocusStyle } from '@/design-system/global-style' +import { ChevronIcon } from '@/design-system/icons' +import { Strong } from '@/design-system/typography' +import { StyledLink } from '@/design-system/typography/link' +import { Li, Ul } from '@/design-system/typography/list' +import { Body } from '@/design-system/typography/paragraphs' +import { Entreprise } from '@/domain/Entreprise' + +import { FromTop } from '../ui/animate' +import EntrepriseSearchDetails from './SearchDetails' + +const StyledCard = styled(Card)` + flex-direction: row; // for Safari <= 13 + cursor: pointer; + &:focus-visible { + ${FocusStyle} + } +` + +export default function EntrepriseSearchResults({ + results, + onSubmit, +}: { + results: Array + onSubmit?: (entreprise: Entreprise) => void +}) { + const { t } = useTranslation() + + return !results.length ? ( + + + + + + Nous n’avons pas trouvé de résultat pour cette entreprise. + + + + + + Vous pouvez réessayer avec votre SIREN ou votre SIRET pour un + meilleur résultat. + + + + + Si votre entreprise n'apparait pas en utilisant votre SIREN/SIRET, + il se peut que vous ayez opté pour que{' '} + + les informations de votre entreprise ne soient pas rendues + publiques + + , auquel cas elle n'apparaitra pas dans les résultats de recherche. + Vous pouvez le vérifier sur{' '} + + l'annuaire des entreprises + + . + + Si tel est le cas, pas d'inquiétude, vous pouvez tout de même + consulter et utiliser nos simulateurs. + + + + + + ) : ( + + +
    + {results.map((entreprise) => ( +
  • + onSubmit?.(entreprise)} + onClick={() => onSubmit?.(entreprise)} + compact + bodyAs="div" + aria-label={`${entreprise.nom}, Selectionner cette entreprise`} + ctaLabel={ + + } + > + + +
    • + ))} +
+ + + ) +} diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/company/SearchField.tsx index fddb895d7..17892da5e 100644 --- a/site/source/components/company/SearchField.tsx +++ b/site/source/components/company/SearchField.tsx @@ -1,32 +1,14 @@ import { useSearchFieldState } from '@react-stately/searchfield' import { ReactNode, useEffect, useRef } from 'react' -import { Trans, useTranslation } from 'react-i18next' -import { styled } from 'styled-components' +import { useTranslation } from 'react-i18next' -import { ForceThemeProvider } from '@/components/utils/DarkModeContext' -import { Message } from '@/design-system' -import { Card } from '@/design-system/card' import { SearchableSelectField } from '@/design-system/field/SearchableSelectField/SearchableSelectField' -import { FocusStyle } from '@/design-system/global-style' -import { ChevronIcon } from '@/design-system/icons' import { Grid } from '@/design-system/layout' -import { Strong } from '@/design-system/typography' -import { StyledLink } from '@/design-system/typography/link' -import { Li, Ul } from '@/design-system/typography/list' -import { Body } from '@/design-system/typography/paragraphs' import { Entreprise } from '@/domain/Entreprise' import useSearchCompany from '@/hooks/useSearchCompany' -import { Appear, FromTop } from '../ui/animate' -import EntrepriseSearchDetails from './SearchDetails' - -const StyledCard = styled(Card)` - flex-direction: row; // for Safari <= 13 - cursor: pointer; - &:focus-visible { - ${FocusStyle} - } -` +import { Appear } from '../ui/animate' +import EntrepriseSearchResults from './EntrepriseSearchResults' export function EntrepriseSearchField(props: { label?: ReactNode @@ -93,92 +75,10 @@ export function EntrepriseSearchField(props: { {state.value && !searchPending && !props.selectedValue && ( - + )} ) } - -function Results({ - results, - onSubmit, -}: { - results: Array - onSubmit?: (entreprise: Entreprise) => void -}) { - const { t } = useTranslation() - - return !results.length ? ( - - - - - - Nous n’avons pas trouvé de résultat pour cette entreprise. - - - - - - Vous pouvez réessayer avec votre SIREN ou votre SIRET pour un - meilleur résultat. - - - - - Si votre entreprise n'apparait pas en utilisant votre SIREN/SIRET, - il se peut que vous ayez opté pour que{' '} - - les informations de votre entreprise ne soient pas rendues - publiques - - , auquel cas elle n'apparaitra pas dans les résultats de recherche. - Vous pouvez le vérifier sur{' '} - - l'annuaire des entreprises - - . - - Si tel est le cas, pas d'inquiétude, vous pouvez tout de même - consulter et utiliser nos simulateurs. - - - - - - ) : ( - - -
    - {results.map((entreprise) => ( -
  • - onSubmit?.(entreprise)} - onClick={() => onSubmit?.(entreprise)} - compact - bodyAs="div" - aria-label={`${entreprise.nom}, Selectionner cette entreprise`} - ctaLabel={ - - } - > - - -
    • - ))} -
- - - ) -}