Merge pull request #82 from DISIC/feat/old-editions-integration

feat: old editions integration
DISIC · Jun 10, 2024 · 5879624 · 5879624
2 parents 03a4675 + bd4af5f
commit 5879624
Show file tree

Hide file tree

Showing 11 changed files with 644 additions and 73 deletions.
diff --git a/components/generic/LightSelect.tsx b/components/generic/LightSelect.tsx
@@ -7,6 +7,7 @@ type Props = {
 	options: { label: string; value: string | number; href?: string }[];
 	defaultValue?: string | number;
 	onChange?(value: string | number, href?: string): void;
+	triggerValue?: string | number;
 	placeholder?: string;
 	superLight?: boolean;
 	label: string;
@@ -19,6 +20,7 @@ export function LightSelect(props: Props) {
 		options,
 		placeholder,
 		defaultValue,
+		triggerValue,
 		superLight,
 		label,
 		id
@@ -35,6 +37,10 @@ export function LightSelect(props: Props) {
 			onChange(value, options.find(_ => _.value === value)?.href);
 	}, [value, onChange, options]);
 
+	useEffect(() => {
+		setValue(triggerValue ? triggerValue : '');
+	}, [triggerValue]);
+
 	return (
 		<Select
 			label={label}

diff --git a/components/top250/Top250Header.tsx b/components/top250/Top250Header.tsx
@@ -10,12 +10,30 @@ type Props = {
 	title: ReactNode;
 	searchLabel: string;
 	onSearch: (value: string) => void;
+	old?: boolean;
 };
 
+const oldEditions = [
+	{ slug: '2022-octobre', display: 'Octobre 2022' },
+	{ slug: '2022-juillet', display: 'Juillet 2022' },
+	{ slug: '2022-avril', display: 'Avril 2022' },
+	{ slug: '2022-janvier', display: 'Janvier 2022' },
+	{ slug: '2021-octobre', display: 'Octobre 2021' },
+	{ slug: '2021-juillet', display: 'Juillet 2021' },
+	{ slug: '2021-avril', display: 'Avril 2021' },
+	{ slug: '2021-janvier', display: 'Janvier 2021' },
+	{ slug: '2020-octobre', display: 'Octobre 2020' },
+	{ slug: '2020-juillet', display: 'Juillet 2020' },
+	{ slug: '2020-avril', display: 'Avril 2020' },
+	{ slug: '2020-janvier', display: 'Janvier 2020' },
+	{ slug: '2019-octobre', display: 'Octobre 2019' },
+	{ slug: '2019-juin', display: 'Juin 2019' }
+];
+
 export function Top250Header(props: Props) {
-	const { title, searchLabel, onSearch } = props;
+	const { title, searchLabel, onSearch, old } = props;
 	const router = useRouter();
-	const { id: edition_id } = router.query;
+	const { id: edition_id, slug: old_edition_id } = router.query;
 
 	const { data: editions } = useEditions();
 
@@ -26,43 +44,90 @@ export function Top250Header(props: Props) {
 	return (
 		<div className={cx(classes.root)}>
 			<h1 className={cx(classes.title)}>{title}</h1>
-			<div className={cx(classes.editionsContainer)}>
-				{editions?.map((e, index) => {
-					const isCurrent =
-						(edition_id && e.id === edition_id) || (!edition_id && index === 0);
-					return (
-						<span
-							key={index}
-							className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+			{!old && (
+				<div className={cx(classes.editionsContainer)}>
+					{editions?.map((e, index) => {
+						const isCurrent =
+							(edition_id && e.id === edition_id) ||
+							(!edition_id && index === 0);
+						return (
+							<span
+								key={index}
+								className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+							>
+								{isCurrent ? (
+									<a
+										className={cx(fr.cx('fr-link'), classes.currentLink)}
+										href={'#'}
+									>
+										{e.name}
+									</a>
+								) : (
+									<Link
+										href={`/observatoire/${e.id}`}
+										className={fr.cx('fr-link')}
+									>
+										{e.name}
+									</Link>
+								)}
+							</span>
+						);
+					})}
+					<span
+						className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+					>
+						<a
+							className={fr.cx('fr-link')}
+							href="/observatoire/old/2022-octobre"
+							target="_blank"
 						>
-							{isCurrent ? (
-								<a
-									className={cx(fr.cx('fr-link'), classes.currentLink)}
-									href={'#'}
-								>
-									{e.name}
-								</a>
-							) : (
-								<Link
-									href={`/observatoire/${e.id}`}
-									className={fr.cx('fr-link')}
-								>
-									{e.name}
-								</Link>
-							)}
-						</span>
-					);
-				})}
-				<span className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}>
-					<a
-						className={fr.cx('fr-link')}
-						href="/observatoire/2022-octobre"
-						target="_blank"
+							Voir les éditions précédentes
+						</a>
+					</span>
+				</div>
+			)}
+			{old && (
+				<div className={cx(classes.editionsContainer)}>
+					{oldEditions.map((edition, index) => {
+						const isCurrent =
+							(old_edition_id && edition.slug === old_edition_id) ||
+							(!old_edition_id && index === 0);
+						return (
+							<span
+								key={index}
+								className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
+							>
+								{isCurrent ? (
+									<a
+										className={cx(fr.cx('fr-link'), classes.currentLink)}
+										href={'#'}
+									>
+										{edition.display}
+									</a>
+								) : (
+									<Link
+										href={`/observatoire/old/${edition.slug}`}
+										className={fr.cx('fr-link')}
+									>
+										{edition.display}
+									</Link>
+								)}
+							</span>
+						);
+					})}
+					<span
+						className={cx(fr.cx('fr-px-1w', 'fr-py-0-5v'), classes.linkTag)}
 					>
-						Voir les éditions précédentes
-					</a>
-				</span>
-			</div>
+						<a
+							className={fr.cx('fr-link')}
+							href="/observatoire"
+							target="_blank"
+						>
+							Voir les nouvelles éditions
+						</a>
+					</span>
+				</div>
+			)}
 			<form
 				onSubmit={e => {
 					e.preventDefault();

diff --git a/components/top250/table/IndicatorLabel.tsx b/components/top250/table/IndicatorLabel.tsx
@@ -6,10 +6,11 @@ type Props = {
 	label: string;
 	color: IndicatorColor;
 	noBackground?: boolean | null;
+	old?: boolean;
 };
 
 export function IndicatorLabel(props: Props) {
-	const { label, color, noBackground } = props;
+	const { label, color, noBackground, old } = props;
 	const { classes, cx } = useStyles();
 
 	return (
@@ -22,6 +23,17 @@ export function IndicatorLabel(props: Props) {
 				),
 				classes.root,
 				classes[color],
+				old ? classes.old : '',
+				old &&
+					[
+						'< 100 votes',
+						'n/a',
+						'-',
+						'En attente',
+						'En cours de déploiement local'
+					].includes(label)
+					? classes.oldXs
+					: '',
 				noBackground ? classes.noBackground : ''
 			)}
 		>
@@ -70,5 +82,11 @@ const useStyles = makeStyles()(theme => ({
 	noBackground: {
 		backgroundColor: 'transparent',
 		fontWeight: 'normal'
+	},
+	old: {
+		display: 'block'
+	},
+	oldXs: {
+		fontSize: '0.75rem !important'
 	}
 }));