Skip to content

Commit 379fcc4

Browse files
lsagetlethiaslsagetlethias
committed
chore: review
1 parent 694de50 commit 379fcc4

File tree

14 files changed

+62
-50
lines changed

14 files changed

+62
-50
lines changed

‎src/ConsentBanner/index.tsx‎ renamed to ‎src/ConsentBanner/ConsentBanner.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { memo } from "react";
22

33
import { symToStr } from "tsafe/symToStr";
44
import { createModal } from "../Modal";
5-
import { ConsentBannerContentProps } from "./ConsentBannerContent";
5+
import { type ConsentBannerContentProps } from "./ConsentBannerContent";
66
import { ConsentManager } from "./ConsentManager";
77
import { ConsentBannerContentDisplayer } from "./ConsentBannerContentDisplayer";
88
import { useTranslation } from "./i18n";
@@ -19,14 +19,14 @@ export type ConsentBannerProps = Omit<ConsentBannerContentProps, "consentModalBu
1919
/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-consentbanner> */
2020
// TODO handle sub finalities (https://www.systeme-de-design.gouv.fr/uploads/Capture_d_ecran_2021_03_24_a_17_45_33_8ba8e1fabb_1_1dd3309589.png)
2121
export const ConsentBanner = memo((props: ConsentBannerProps) => {
22-
const { gdprPageLink, services } = props;
22+
const { gdprLinkProps, services } = props;
2323
const { t } = useTranslation();
2424

2525
return (
2626
<>
2727
<ConsentModal title={t("consent modal title")} size="large">
2828
<ConsentManager
29-
gdprPageLink={gdprPageLink}
29+
gdprLinkProps={gdprLinkProps}
3030
services={services}
3131
consentModalButtonProps={consentModalButtonProps}
3232
/>

‎src/ConsentBanner/ConsentBannerActions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ import { ButtonsGroup } from "../ButtonsGroup";
44
import { fr } from "../fr";
55
import React from "react";
66
import { useGdprStore } from "../useGdprStore";
7-
import { GdprService } from "../gdpr";
8-
import { ModalProps } from "../Modal";
7+
import { type GdprService } from "../gdpr";
8+
import { type ModalProps } from "../Modal";
99
import { useTranslation } from "./i18n";
1010

1111
export interface ConsentBannerActionsProps {
1212
services: GdprService[];
1313
consentModalButtonProps: ModalProps.ModalButtonProps;
1414
}
1515

16-
export const ConsentBannerActions = ({
16+
export function ConsentBannerActions({
1717
services,
1818
consentModalButtonProps
19-
}: ConsentBannerActionsProps) => {
19+
}: ConsentBannerActionsProps) {
2020
const setConsent = useGdprStore(state => state.setConsent);
2121
const setFirstChoiceMade = useGdprStore(state => state.setFirstChoiceMade);
2222

@@ -61,4 +61,4 @@ export const ConsentBannerActions = ({
6161
]}
6262
/>
6363
);
64-
};
64+
}

‎src/ConsentBanner/ConsentBannerContent.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
import React from "react";
22
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in doc
3-
import { FooterProps } from "../Footer";
3+
import { type FooterProps } from "../Footer";
44
import { fr } from "../fr";
5-
import { ConsentBannerActions, ConsentBannerActionsProps } from "./ConsentBannerActions";
5+
import { type RegisteredLinkProps } from "../link";
6+
import { ConsentBannerActions, type ConsentBannerActionsProps } from "./ConsentBannerActions";
67
import { useTranslation } from "./i18n";
78

89
export interface ConsentBannerContentProps extends ConsentBannerActionsProps {
910
/** Usually the same as {@link FooterProps.personalDataLinkProps} */
10-
gdprPageLink: string;
11+
gdprLinkProps: RegisteredLinkProps;
1112
/** Current website name */
1213
siteName: string;
1314
}
1415

15-
export const ConsentBannerContent = ({
16-
gdprPageLink,
16+
export function ConsentBannerContent({
17+
gdprLinkProps,
1718
siteName,
1819
services,
1920
consentModalButtonProps
20-
}: ConsentBannerContentProps) => {
21+
}: ConsentBannerContentProps) {
2122
const { t } = useTranslation();
2223
return (
2324
<div className={fr.cx("fr-consent-banner")}>
2425
<h2 className={fr.cx("fr-h6")}>{t("about cookies", { siteName })}</h2>
2526
<div className="fr-consent-banner__content">
2627
<p className="fr-text--sm">
2728
{t("welcome message", {
28-
gdprPageLink
29+
gdprLinkProps
2930
})}
3031
</p>
3132
</div>
@@ -35,4 +36,4 @@ export const ConsentBannerContent = ({
3536
/>
3637
</div>
3738
);
38-
};
39+
}

‎src/ConsentBanner/ConsentBannerContentDisplayer.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@
22

33
import React, { useState, useEffect } from "react";
44
import { useGdprStore } from "../useGdprStore";
5-
import { ConsentBannerContent, ConsentBannerContentProps } from "./ConsentBannerContent";
5+
import { ConsentBannerContent, type ConsentBannerContentProps } from "./ConsentBannerContent";
66

7-
export const ConsentBannerContentDisplayer = (props: ConsentBannerContentProps) => {
7+
export function ConsentBannerContentDisplayer(props: ConsentBannerContentProps) {
88
const firstChoiceMade = useGdprStore(state => state.firstChoiceMade);
99
const __inited = useGdprStore(state => state.__inited);
10-
const [stateFCM, setStateFCM] = useState(true);
10+
const [isFCM, setIsFCM] = useState(true);
1111

1212
useEffect(() => {
13-
__inited && setStateFCM(firstChoiceMade);
13+
if (!__inited) return;
14+
setIsFCM(firstChoiceMade);
1415
}, [firstChoiceMade, __inited]);
1516

16-
if (stateFCM) return null;
17+
if (isFCM) return null;
1718
return <ConsentBannerContent {...props} />;
18-
};
19+
}

‎src/ConsentBanner/ConsentManager.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
"use client";
22

33
import React, { useState, useEffect } from "react";
4-
import ButtonsGroup from "../ButtonsGroup";
4+
import { ButtonsGroup } from "../ButtonsGroup";
55
import { fr } from "../fr";
6-
import { GdprService } from "../gdpr";
6+
import { type GdprService } from "../gdpr";
77
import { getLink } from "../link";
8+
import { partition } from "../tools/partition";
89
import { useGdprStore } from "../useGdprStore";
9-
import { ConsentBannerContentProps } from "./ConsentBannerContent";
10+
import { type ConsentBannerContentProps } from "./ConsentBannerContent";
1011
import { useTranslation } from "./i18n";
1112

12-
const partition = <T,>(arr: T[], criteria: (item: T) => boolean): [T[], T[]] => [
13-
arr.filter(item => criteria(item)),
14-
arr.filter(item => !criteria(item))
15-
];
16-
17-
type ConsentManagerProps = Required<Omit<ConsentBannerContentProps, "siteName">>;
18-
export const ConsentManager = ({
19-
gdprPageLink,
13+
export type ConsentManagerProps = Required<Omit<ConsentBannerContentProps, "siteName">>;
14+
export function ConsentManager({
15+
gdprLinkProps,
2016
services,
2117
consentModalButtonProps
22-
}: ConsentManagerProps) => {
18+
}: ConsentManagerProps) {
2319
const { Link } = getLink();
2420
const setConsent = useGdprStore(state => state.setConsent);
2521
const setFirstChoiceMade = useGdprStore(state => state.setFirstChoiceMade);
@@ -76,7 +72,7 @@ export const ConsentManager = ({
7672
>
7773
{t("all services pref")}
7874
<br />
79-
<Link href={gdprPageLink}>{t("personal data cookies")}</Link>
75+
<Link {...gdprLinkProps}>{t("personal data cookies")}</Link>
8076
</legend>
8177
<div className={fr.cx("fr-consent-service__radios")}>
8278
<ButtonsGroup
@@ -170,4 +166,4 @@ export const ConsentManager = ({
170166
/>
171167
</div>
172168
);
173-
};
169+
}

‎src/ConsentBanner/i18n.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createComponentI18nApi } from "../i18n";
22
import React from "react";
3-
import { getLink } from "../link";
3+
import { getLink, type RegisteredLinkProps } from "../link";
44

55
export const { useTranslation, addConsentBannerTranslations } = createComponentI18nApi({
66
componentName: "ConsentBanner",
@@ -15,13 +15,13 @@ export const { useTranslation, addConsentBannerTranslations } = createComponentI
1515
"refuse": "Refuser",
1616
"confirm choices": "Confirmer mes choix",
1717
"about cookies": (p: { siteName: string }) => `À propos des cookies sur ${p.siteName}`,
18-
"welcome message": (p: { gdprPageLink: string }) => {
18+
"welcome message": (p: { gdprLinkProps: RegisteredLinkProps }) => {
1919
const { Link } = getLink();
2020
return (
2121
<>
2222
Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les
2323
services disponibles sur ce site. Pour en savoir plus, visitez la page{" "}
24-
<Link href={p.gdprPageLink}>Données personnelles et cookies</Link>. Vous pouvez,
24+
<Link {...p.gdprLinkProps}>Données personnelles et cookies</Link>. Vous pouvez,
2525
à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.
2626
</>
2727
);
@@ -44,14 +44,14 @@ addConsentBannerTranslations({
4444
"accept": "Accept",
4545
"refuse": "Refuse",
4646
"confirm choices": "Confirm my choices",
47-
"about cookies": (p: { siteName: string }) => `About cookies on ${p.siteName}`,
48-
"welcome message": (p: { gdprPageLink: string }) => {
47+
"about cookies": p => `About cookies on ${p.siteName}`,
48+
"welcome message": p => {
4949
const { Link } = getLink();
5050
return (
5151
<>
5252
Welcome to our website! We use cookies to improve your experience and the
5353
services available services available on this site. To learn more, visit the{" "}
54-
<Link href={p.gdprPageLink}>"Personal Data and Cookies"</Link> page. You can, at
54+
<Link {...p.gdprLinkProps}>"Personal Data and Cookies"</Link> page. You can, at
5555
any time, have control over which cookies you wish to enable at any time.
5656
</>
5757
);

‎src/ConsentBanner/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ConsentBanner } from "./ConsentBanner";
2+
export * from "./ConsentBanner";
3+
export { addConsentBannerTranslations } from "./i18n";
4+
5+
export default ConsentBanner;

‎src/tools/partition.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* Creates an array of elements split into two groups, the first of which contains elements
3+
* `predicate` returns truthy for, the second of which contains elements `predicate` returns
4+
* falsy for. The predicate is invoked with one argument: (value).
5+
*/
6+
export function partition<T>(arr: T[], predicate: (value: T) => boolean): [T[], T[]] {
7+
return [arr.filter(value => predicate(value)), arr.filter(item => !predicate(item))];
8+
}

‎src/useGdprStore.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useContext } from "react";
4-
import { GdprStoreContext, GdprStore } from "./gdpr/GdprStore";
4+
import { GdprStoreContext, type GdprStore } from "./gdpr/GdprStore";
55

66
/**
77
* Zustand like store based on ReactContext. See {@link GdprStore} for store content.

‎stories/ConsentBanner.stories.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ function App(){
4141
<>
4242
{/* must be on root level */}
4343
<ConsentBanner
44-
gdprPageLink="#"
44+
{/* depending on your registered Link */}
45+
gdprLinkProps={{href: "#"}}
4546
services={[
4647
{
4748
name: "mandatory-cookie-consumer",
@@ -70,7 +71,7 @@ function App(){
7071
\`\`\`
7172
`,
7273
argTypes: {
73-
gdprPageLink: {
74+
gdprLinkProps: {
7475
description: "Usually the same as FooterProps.personalDataLinkProps"
7576
},
7677
siteName: {
@@ -99,7 +100,7 @@ function Story(props: ConsentBannerProps) {
99100
}
100101

101102
export const Default = getStory({
102-
gdprPageLink: "#",
103+
gdprLinkProps: { href: "#" },
103104
services: [
104105
{
105106
name: "mandatory-cookie-consumer",

0 commit comments

Comments
 (0)