Skip to content

Commit

Permalink
Prise en compte des retours PR vitejs
Browse files Browse the repository at this point in the history
- Creation d'un composnant <BrowserOnly /> pour éviter le CLS
- Restaure l'animation de chargement et le message de navigateur obsolète
- Correction d'une chaîne de caractère dans l'UI avec des tabulations
- Répare la section nouveautés
- Suppression du rehooks/local-storage
- Suppression de swr
  • Loading branch information
mquandalle committed Jan 31, 2022
1 parent 05b3692 commit 0dc45b4
Show file tree
Hide file tree
Showing 23 changed files with 249 additions and 156 deletions.
6 changes: 2 additions & 4 deletions .github/workflows/deploy.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ jobs:
build:
needs: deploy-context
env:
FR_BASE_URL: ${{ needs.deploy-context.outputs.fr_url }}
EN_BASE_URL: ${{ needs.deploy-context.outputs.en_url }}
VITE_FR_BASE_URL: ${{ needs.deploy-context.outputs.fr_url }}
VITE_EN_BASE_URL: ${{ needs.deploy-context.outputs.en_url }}
runs-on: ubuntu-18.04
Expand Down Expand Up @@ -65,8 +63,8 @@ jobs:
yarn workspace site build:prerender
- name: Replace site placeholders in netlify.toml redirection file
run: |
sed -i "s|:SITE_FR|$FR_BASE_URL|g" site/netlify.toml;
sed -i "s|:SITE_EN|$EN_BASE_URL|g" site/netlify.toml;
sed -i "s|:SITE_FR|$VITE_FR_BASE_URL|g" site/netlify.toml;
sed -i "s|:SITE_EN|$VITE_EN_BASE_URL|g" site/netlify.toml;
- name: Update Algolia index
run: yarn workspace site algolia:update
env:
Expand Down
8 changes: 4 additions & 4 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ Nous utilisons :
- [React](https://reactjs.org) pour la gestion de l'interface utilisateur
- [Redux](https://redux.js.org) pour gérer le “state” de l'application côté client
- [Prettier](https://prettier.io/) pour formater le code source, l'idéal est de configurer votre éditeur de texte pour que les fichiers soit formatés automatiquement quand vous sauvegardez un fichier. Si vous utilisez [VS Code](https://code.visualstudio.com/) cette configuration est automatique.
- [Webpack](https://webpack.js.org) pour le “bundling”
- [ViteJS](https://vitejs.dev) pour le “bundling” et le serveur de développement
- [Eslint](http://eslint.org) qui permet par exemple d'éviter de garder des variables inutilisées
- [Ramda](https://ramdajs.com) comme libraire d'utilitaires pour manipuler les listes/objects/etc (c'est une alternative à lodash ou underscore)
- [Mocha](https://mochajs.org), [Jest](https://jestjs.io) et [Cypress](https://www.cypress.io) pour les l'execution des tests. Plus d'informations dans la section consacrée aux tests.
- [Vitest](https://vitest.dev) et [Cypress](https://www.cypress.io) pour les l'execution des tests. Plus d'informations dans la section consacrée aux tests.

### Démarrage

Expand Down Expand Up @@ -121,10 +121,10 @@ yarn test
#### Tests de non-regression (snapshots)

```sh
yarn test:regressions
yarn test regressions
```

Si vous souhaitez mettre à jour les snapshots vous pouvez utiliser le paramètre `--updateSnapshot`, son raccourci `-u`, ou encore le [mode interactif](https://jestjs.io/docs/en/snapshot-testing#interactive-snapshot-mode).
Si vous souhaitez mettre à jour les snapshots vous pouvez utiliser le paramètre `--update`, son raccourci `-u`.

#### Tests d'integrations

Expand Down
2 changes: 0 additions & 2 deletions site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@
"@react-stately/radio": "^3.3.2",
"@react-stately/searchfield": "^3.1.3",
"@react-stately/toggle": "^3.2.3",
"@rehooks/local-storage": "2.4.0",
"@sentry/react": "^6.3.5",
"@sentry/tracing": "^6.3.5",
"algoliasearch": "^4.10.2",
Expand Down Expand Up @@ -93,7 +92,6 @@
"regenerator-runtime": "^0.13.3",
"reselect": "^4.0.0",
"styled-components": "^5.3.1",
"swr": "^0.1.16",
"whatwg-fetch": "^3.0.0",
"yaml": "^1.9.2"
},
Expand Down
4 changes: 3 additions & 1 deletion site/prerender.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ const templates = Object.fromEntries(
)
})()

const htmlBodyStart = '<!--app-html:start-->'
const htmlBodyEnd = '<!--app-html:end-->'
const headTagsStart = '<!--app-helmet-tags:start-->'
const headTagsEnd = '<!--app-helmet-tags:end-->'

Expand All @@ -53,7 +55,7 @@ async function prerenderUrl(url, site) {
// TODO: Add CI test to enforce meta tags on SSR pages
const { html, styleTags, helmet } = await render(url, lang)
const page = templates[site]
.replace('<!--app-html-->', html)
.replace(new RegExp(htmlBodyStart + '[\\s\\S]+' + htmlBodyEnd, 'm'), html)
.replace('<!--app-style-->', styleTags)
.replace(
new RegExp(headTagsStart + '[\\s\\S]+' + headTagsEnd, 'm'),
Expand Down
2 changes: 1 addition & 1 deletion site/source/Provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
// ATInternet Tracking
import { TrackingContext } from './ATInternetTracking'
import { createTracker } from './ATInternetTracking/Tracker'
import safeLocalStorage from './storage/safeLocalStorage'
import * as safeLocalStorage from './storage/safeLocalStorage'
import { inIframe } from './utils'

if (
Expand Down
2 changes: 1 addition & 1 deletion site/source/components/Feedback/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Trans } from 'react-i18next'
import { useLocation } from 'react-router-dom'
import styled from 'styled-components'
import { TrackingContext } from '../../ATInternetTracking'
import safeLocalStorage from '../../storage/safeLocalStorage'
import * as safeLocalStorage from '../../storage/safeLocalStorage'
import { INSCRIPTION_LINK } from '../layout/Footer/InscriptionBetaTesteur'
import './Feedback.css'
import Form from './FeedbackForm'
Expand Down
2 changes: 1 addition & 1 deletion site/source/components/layout/Footer/Privacy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Body, SmallBody } from 'DesignSystem/typography/paragraphs'
import { useCallback, useContext, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { TrackingContext, TrackPage } from '../../../ATInternetTracking'
import safeLocalStorage from '../../../storage/safeLocalStorage'
import * as safeLocalStorage from '../../../storage/safeLocalStorage'

export default function Privacy({ label }: { label?: string }) {
const tracker = useContext(TrackingContext)
Expand Down
6 changes: 4 additions & 2 deletions site/source/components/layout/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Logo } from 'Components/Logo'
import SearchButton from 'Components/SearchButton'
import BrowserOnly from 'Components/utils/BrowserOnly'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import { Container } from 'DesignSystem/layout'
import { Link } from 'DesignSystem/typography/link'
Expand Down Expand Up @@ -28,8 +29,9 @@ export default function Header() {
/>
{language === 'fr' && <SearchButton />}
</StyledHeader>

{!import.meta.env.SSR && <NewsBanner />}
<BrowserOnly>
<NewsBanner />
</BrowserOnly>
</Container>
)
}
Expand Down
57 changes: 30 additions & 27 deletions site/source/components/layout/NewsBanner.tsx
Original file line number Diff line number Diff line change
@@ -1,56 +1,59 @@
// import { useLocalStorage, writeStorage } from '@rehooks/local-storage'
import { Appear } from 'Components/ui/animate'
import Emoji from 'Components/utils/Emoji'
import { SitePathsContext } from 'Components/utils/SitePathsContext'
import lastRelease from 'Data/last-release.json'
import { Banner, HideButton, InnerBanner } from 'DesignSystem/banner'
import { Link } from 'DesignSystem/typography/link'
import { useContext, useEffect } from 'react'
import { useContext, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { getItem, setItem } from '../../storage/safeLocalStorage'

const localStorageKey = 'last-viewed-release'

export const hideNewsBanner = () => {
// writeStorage(localStorageKey, lastRelease.name)
setItem(localStorageKey, lastRelease.name)
}

export const determinant = (word: string) =>
/^[aeiouy]/i.exec(word) ? 'd’' : 'de '

export default function NewsBanner() {
// const [lastViewedRelease] = useLocalStorage(localStorageKey)
const sitePaths = useContext(SitePathsContext)
const { i18n, t } = useTranslation()
const { t } = useTranslation()
const lastViewedRelease = getItem(localStorageKey)
const [showBanner, setShowBanner] = useState(
lastViewedRelease && lastViewedRelease !== lastRelease.name
)

// We only want to show the banner to returning visitors, so we initiate the
// local storage value with the last release.
useEffect(() => {
// writeStorage(
// localStorageKey,
// lastViewedRelease === undefined ? lastRelease.name : lastViewedRelease
// )
setItem(
localStorageKey,
lastViewedRelease == undefined ? lastRelease.name : lastViewedRelease
)
}, [])

const showBanner = false

if (!showBanner) {
return null
}
return (
<Appear>
<Banner className="print-hidden">
<InnerBanner>
<span>
<Emoji emoji="✨" /> Découvrez les nouveautés{' '}
{determinant(lastRelease.name)}
<Link to={sitePaths.nouveautés}>
{lastRelease.name.toLowerCase()}
</Link>
</span>
<HideButton onPress={hideNewsBanner} aria-label={t('Fermer')}>
&times;
</HideButton>
</InnerBanner>
</Banner>
</Appear>
<Banner className="print-hidden" onClick={() => setShowBanner(false)}>
<InnerBanner>
<span>
<Emoji emoji="✨" /> Découvrez les nouveautés{' '}
{determinant(lastRelease.name)}
<Link to={sitePaths.nouveautés}>
{lastRelease.name.toLowerCase()}
</Link>
</span>
<HideButton
onPress={() => setShowBanner(false)}
aria-label={t('Fermer')}
>
&times;
</HideButton>
</InnerBanner>
</Banner>
)
}
15 changes: 15 additions & 0 deletions site/source/components/utils/BrowserOnly.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Appear } from 'Components/ui/animate'
import React from 'react'

// We add a animation for all coponents displayed on the client only but not on
// the SSR to avoid augment the CLS (Cumulative Layout Shift).
export default function BrowserOnly({
children,
}: {
children: React.ReactNode
}) {
if (import.meta.env.SSR) {
return null
}
return <Appear>{children}</Appear>
}
2 changes: 1 addition & 1 deletion site/source/components/utils/persistState.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'
import safeLocalStorage from '../../storage/safeLocalStorage'
import * as safeLocalStorage from '../../storage/safeLocalStorage'

export const getInitialState = (key: string) => {
const value = safeLocalStorage.getItem(key)
Expand Down
15 changes: 4 additions & 11 deletions site/source/locales/ui-en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1675,17 +1675,10 @@ replier: show less
responsabilité:
bouton1: Limited liability company
bouton2: Sole proprietorship
description: "
\t\t\t\t\t\tLimited liability? Sole proprietorship? Each option has
\t\t\t\t\t\tlegal implications and leads to a different status for the
\t\t\t\t\t\tyour business in France. This guide helps you choose
\t\t\t\t\t\tbetween the different forms of liability.
\t\t\t\t\t"
description: Limited liability? Sole proprietorship? Each option has legal
implications and leads to a different status for the creation of your
company in France. This guide helps you choose between the different forms
of liability.
entreprise-individuelle: >
<0>Sole proprietorship:</0>
Expand Down
18 changes: 4 additions & 14 deletions site/source/locales/ui-fr.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1313,20 +1313,10 @@ recherche-globale:
responsabilité:
bouton1: Société
bouton2: Entreprise individuelle
description: "
\t\t\t\t\t\tResponsabilité limitée ? entreprise individuelle ? Chaque
option a
\t\t\t\t\t\tdes implications juridiques et conduit à un statut différent
pour la
\t\t\t\t\t\tcréation de votre entreprise en France. Ce guide vous aide à
choisir
\t\t\t\t\t\tentre les différentes forme de responsabilité.
\t\t\t\t\t"
description: Responsabilité limitée ? entreprise individuelle ? Chaque option a
des implications juridiques et conduit à un statut différent pour la
création de votre entreprise en France. Ce guide vous aide à choisir entre
les différentes forme de responsabilité.
entreprise-individuelle: "<0>Entreprise individuelle : </0>Une activité
économique exercée par une seule personne physique, en son nom propre. Moins
de formalités, mais plus de risques en cas de faillite, car votre patrimoine
Expand Down
7 changes: 1 addition & 6 deletions site/source/pages/Creer/GuideStatut/SoleProprietorship.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,7 @@ export default function SoleProprietorship() {
name="description"
content={t(
'responsabilité.description',
`
Responsabilité limitée ? entreprise individuelle ? Chaque option a
des implications juridiques et conduit à un statut différent pour la
création de votre entreprise en France. Ce guide vous aide à choisir
entre les différentes forme de responsabilité.
`
'Responsabilité limitée ? entreprise individuelle ? Chaque option a des implications juridiques et conduit à un statut différent pour la création de votre entreprise en France. Ce guide vous aide à choisir entre les différentes forme de responsabilité.'
)}
/>
</Helmet>
Expand Down
5 changes: 3 additions & 2 deletions site/source/pages/Gerer/DemandeMobilite/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Grid } from '@mui/material'
import RuleInput from 'Components/conversation/RuleInput'
import { WhenApplicable, WhenNotApplicable } from 'Components/EngineValue'
import PageHeader from 'Components/PageHeader'
import BrowserOnly from 'Components/utils/BrowserOnly'
import Emoji from 'Components/utils/Emoji'
import { EngineContext, EngineProvider } from 'Components/utils/EngineContext'
import { Markdown } from 'Components/utils/markdown'
Expand Down Expand Up @@ -175,11 +176,11 @@ function FormulairePublicodes() {
</Grid>
<Spacing xl />
<WhenNotApplicable dottedName={'situation . notification' as DottedName}>
{!import.meta.env.SSR && (
<BrowserOnly>
<Suspense fallback={null}>
<LazyEndBlock fields={fields} missingValues={missingValues} />
</Suspense>
)}
</BrowserOnly>
</WhenNotApplicable>

{!!Object.keys(situation).length && (
Expand Down
17 changes: 9 additions & 8 deletions site/source/pages/Nouveautes/Nouveautes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,11 @@ import { Container } from 'DesignSystem/layout'
import { H1 } from 'DesignSystem/typography/heading'
import { GenericButtonOrLinkProps, Link } from 'DesignSystem/typography/link'
import { Body } from 'DesignSystem/typography/paragraphs'
import { useContext, useEffect, useMemo } from 'react'
import { useContext, useEffect, useMemo, useState } from 'react'
import { Redirect, useHistory, useRouteMatch } from 'react-router-dom'
import styled from 'styled-components'
import useSWR from 'swr'
import { TrackPage } from '../../ATInternetTracking'

const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json())
const slugify = (name: string) => name.toLowerCase().replace(' ', '-')

type ReleasesData = Array<{
Expand All @@ -27,9 +25,13 @@ type ReleasesData = Array<{

export default function Nouveautés() {
// The release.json file may be big, we don't want to include it in the main
// bundle, that's why we only fetch it on this page. Alternatively we could
// use import("data/release.json") and configure code splitting with Webpack.
const { data } = useSWR<ReleasesData>('/data/releases.json', fetcher)
// bundle, that's why we only fetch it on this page.
const [data, setData] = useState<ReleasesData>([])
useEffect(() => {
import('Data/releases.json').then(({ default: data }) => {
setData(data)
})
}, [])
const history = useHistory()
const sitePaths = useContext(SitePathsContext)
const slug = useRouteMatch<{ slug: string }>(`${sitePaths.nouveautés}/:slug`)
Expand All @@ -41,7 +43,7 @@ export default function Nouveautés() {
[data]
)

if (!data) {
if (data.length === 0) {
return null
}

Expand All @@ -55,7 +57,6 @@ export default function Nouveautés() {
}

const releaseName = data[selectedRelease].name.toLowerCase()

return (
<>
<TrackPage chapter1="informations" name="nouveautes" />
Expand Down
Loading

0 comments on commit 0dc45b4

Please sign in to comment.