Skip to content

Chore : Refactor Header.tsx #390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Grafikart wants to merge 1 commit into
base: v3-master
Choose a base branch
from
Open

Chore : Refactor Header.tsx #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 75 additions & 97 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
import { useState, useEffect } from 'react';
import { HeaderType } from './HeaderType';
import { isValidElement, useMemo } from 'react';
import { HeaderQuickAccessItem, HeaderType } from './HeaderType';
import { DEFAULT_HEADER } from './default-header';
import ConvertContent from '../../utils/convertContent';
import Button from '@codegouvfr/react-dsfr/Button';
import { fr } from '@codegouvfr/react-dsfr';
import Display from '@codegouvfr/react-dsfr/Display/Display';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const iconTheme = fr.cx('fr-icon-theme-fill');

function getAuthLabel(isAuthenticated: boolean): string {
if (isAuthenticated) {
return 'Me déconnecter';
}
return 'Me connecter';
}

export type HeaderProps = {
header?: HeaderType;
Expand All @@ -22,39 +12,24 @@ export type HeaderProps = {
};

export function Header(props: HeaderProps) {
const { header, handleOidcAuth, isAuthenticated = false } = props;

const [brandTop, setBrandTop] = useState(DEFAULT_HEADER.brandTop);
const [homeLinkProps, setHomeLinkProps] = useState(
DEFAULT_HEADER.homeLinkProps
);
const [serviceTitle, setServiceTitle] = useState(DEFAULT_HEADER.serviceTitle);
const [operatorLogo, setOperatorLogo] = useState(DEFAULT_HEADER.operatorLogo);
const [quickAccessItems, setQuickAccessItems] = useState<Array<any>>([]);

useEffect(() => {
if (!header) {
return;
}
setBrandTop(header.brandTop || DEFAULT_HEADER.brandTop);
setHomeLinkProps(header.homeLinkProps || DEFAULT_HEADER.homeLinkProps);
setServiceTitle(header.serviceTitle || DEFAULT_HEADER.serviceTitle);
setOperatorLogo(header.operatorLogo || DEFAULT_HEADER.operatorLogo);
}, [header]);

useEffect(() => {
const others = header?.quickAccessItems || [];
setQuickAccessItems([
...others,
const { header, handleOidcAuth, isAuthenticated } = props;
const brandTop = header?.brandTop ?? DEFAULT_HEADER.brandTop;
const homeLinkProps = header?.homeLinkProps ?? DEFAULT_HEADER.homeLinkProps;
const serviceTitle = header?.serviceTitle ?? DEFAULT_HEADER.serviceTitle;
const operatorLogo = header?.operatorLogo ?? DEFAULT_HEADER.operatorLogo;
Comment on lines +16 to +19
Copy link
Contributor

@ddecrulle ddecrulle Sep 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it will clearer to extract this into function that will take header and return brandTop, homeLinkProps ...

const quickAccessItems = useMemo(
() => [
...(header?.quickAccessItems ?? []),
{
iconId: 'fr-icon-lock-line',
buttonProps: {
onClick: handleOidcAuth,
},
text: getAuthLabel(isAuthenticated),
},
]);
}, [isAuthenticated, handleOidcAuth, header]);
text: isAuthenticated ? 'Me déconnecter' : 'Me connecter',
} satisfies HeaderQuickAccessItem,
],
[isAuthenticated, handleOidcAuth, header]
);

return (
<>
Expand Down Expand Up @@ -113,35 +88,9 @@ export function Header(props: HeaderProps) {
Paramètres d'affichage
</button>
</li>
{quickAccessItems &&
quickAccessItems.map((quickAccessItem, index) => {
return (
<li key={index}>
{quickAccessItem.buttonProps ? (
<Button
iconId={quickAccessItem.iconId}
onClick={quickAccessItem.buttonProps.onClick}
>
{quickAccessItem.text}
</Button>
) : (
<Button
linkProps={{
target: quickAccessItem.linkProps?.target,
href: quickAccessItem.linkProps?.href,
title:
quickAccessItem.linkProps?.target ===
'_blank'
? `${quickAccessItem.text} - ouvre une nouvelle fenêtre`
: quickAccessItem.text,
}}
>
{quickAccessItem.text}
</Button>
)}
</li>
);
})}
{quickAccessItems.map((item, index) => (
<QuickAccessLi key={index} item={item} />
Copy link
Contributor

@ddecrulle ddecrulle Sep 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use index as key could cause trouble, use an id

))}
</ul>
</div>
</div>
Expand Down Expand Up @@ -172,34 +121,9 @@ export function Header(props: HeaderProps) {
Paramètres d'affichage
</button>
</li>
{quickAccessItems &&
quickAccessItems.map((quickAccessItem, index) => {
return (
<li key={index}>
{quickAccessItem.buttonProps ? (
<Button
iconId={quickAccessItem.iconId}
onClick={quickAccessItem.buttonProps.onClick}
>
{quickAccessItem.text}
</Button>
) : (
<Button
linkProps={{
target: quickAccessItem.linkProps?.target,
href: quickAccessItem.linkProps?.href,
title:
quickAccessItem.linkProps?.target === '_blank'
? `${quickAccessItem.text} - ouvre une nouvelle fenêtre`
: quickAccessItem.text,
}}
>
{quickAccessItem.text}
</Button>
)}
</li>
);
})}
{quickAccessItems.map((item, index) => (
<QuickAccessLi key={index} item={item} />
Copy link
Contributor

@ddecrulle ddecrulle Sep 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same

))}
</ul>
</div>
</div>
Expand All @@ -209,3 +133,57 @@ export function Header(props: HeaderProps) {
</>
);
}

type QuickAccessLiProps = {
item: HeaderQuickAccessItem;
};

function QuickAccessLi({ item }: QuickAccessLiProps) {
if (!item) {
return null;
}

if (typeof item === 'object' && 'buttonProps' in item && item.buttonProps) {
return (
<li>
<Button iconId={item.iconId} onClick={item.buttonProps.onClick}>
{item.text}
</Button>
</li>
);
}

if (typeof item === 'object' && 'linkProps' in item) {
return (
<li>
<Button
linkProps={{
target: item.linkProps.target,
href: item.linkProps.href,
title:
item.linkProps.target === '_blank'
? `${item.text} - ouvre une nouvelle fenêtre`
: `${item.text}`,
}}
>
{item.text}
</Button>
</li>
);
}

// Item shape is unexpected at this point, try to find the best fallback to avoid errors
if (isValidElement(item)) {
return <li>{item}</li>;
}

if (typeof item === 'object' && 'text' in item) {
return (
<li>
<Button>{`${item.text}`}</Button>
</li>
);
}

return null;
}
5 changes: 5 additions & 0 deletions src/components/Header/HeaderType.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
import { HeaderProps } from '@codegouvfr/react-dsfr/Header';
import type { ItemOf } from '../../type.utils';

export type HeaderType = HeaderProps & {};

export type HeaderQuickAccessItem = ItemOf<
Required<HeaderType>['quickAccessItems']
>;
5 changes: 5 additions & 0 deletions src/type.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
type Defined<T> = T extends undefined | infer V ? V : T;

export type ItemOf<ArrayType> = Defined<ArrayType> extends (infer ElementType)[]
? ElementType
: never;