From 2c804328a6430656c262e9d4cdc2b9f2dd635a73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Wed, 6 Jul 2022 13:50:01 +0200
Subject: [PATCH] Fix some bug + type error on stats page

---
 .../design-system/field/Select/index.tsx      | 15 +++---
 site/source/pages/Stats/Chart.tsx             |  1 +
 site/source/pages/Stats/Stats.tsx             | 51 +++++++++++++------
 site/source/pages/Stats/utils.tsx             | 12 +----
 4 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/site/source/design-system/field/Select/index.tsx b/site/source/design-system/field/Select/index.tsx
index 585e2dd26..87750f493 100644
--- a/site/source/design-system/field/Select/index.tsx
+++ b/site/source/design-system/field/Select/index.tsx
@@ -1,10 +1,10 @@
+import { CarretDown } from '@/design-system/icons/carret-down'
 import { useButton } from '@react-aria/button'
 import { useFocusRing } from '@react-aria/focus'
 import { HiddenSelect, useSelect } from '@react-aria/select'
 import { mergeProps } from '@react-aria/utils'
 import { useSelectState } from '@react-stately/select'
 import type { AriaSelectProps } from '@react-types/select'
-import { CarretDown } from '@/design-system/icons/carret-down'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
@@ -35,10 +35,11 @@ export const Label = styled.label`
 			}
 		`}
 `
-
-const Button = styled.button<{
+interface ButtonProps {
 	isFocusVisible?: boolean
-}>`
+}
+
+const Button = styled.button<ButtonProps>`
 	display: inline-flex;
 	align-items: center;
 	justify-content: space-between;
@@ -75,12 +76,14 @@ const StyledIcon = styled(CarretDown)`
 	margin: 0 4px;
 `
 
-export const Wrapper = styled.div<{
+interface WrapperProps {
 	hasError: boolean
 	hasLabel: boolean
 	small?: boolean
 	isOpen?: boolean
-}>`
+}
+
+export const Wrapper = styled.div<WrapperProps>`
 	display: flex;
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	border: ${({ theme }) =>
diff --git a/site/source/pages/Stats/Chart.tsx b/site/source/pages/Stats/Chart.tsx
index 7212f6ea4..ddbc61a9c 100644
--- a/site/source/pages/Stats/Chart.tsx
+++ b/site/source/pages/Stats/Chart.tsx
@@ -161,6 +161,7 @@ export default function VisitsChart({
 							/>
 						) : (
 							<Line
+								key={k}
 								type="monotone"
 								dataKey={k}
 								name={formatLegend(k)}
diff --git a/site/source/pages/Stats/Stats.tsx b/site/source/pages/Stats/Stats.tsx
index 114e6abcc..55cc03baf 100644
--- a/site/source/pages/Stats/Stats.tsx
+++ b/site/source/pages/Stats/Stats.tsx
@@ -131,8 +131,9 @@ const StatsDetail = () => {
 		const paramsEntries = [
 			['periode', period !== defaultPeriod ? period : ''],
 			['module', chapter2],
-		] as [string, string][]
-		setSearchParams(paramsEntries.filter(([, val]) => val !== ''))
+		].filter(([, val]) => val !== '') as [string, string][]
+
+		setSearchParams(paramsEntries, { replace: true })
 	}, [period, chapter2, setSearchParams])
 
 	const visites = useMemo(() => {
@@ -203,7 +204,10 @@ const StatsDetail = () => {
 					</Grid>
 				</div>
 				<div>
-					<ToggleGroup onChange={setPeriod as any} defaultValue={period}>
+					<ToggleGroup
+						onChange={(val) => setPeriod(val as Period)}
+						defaultValue={period}
+					>
 						<Radio value="jours">
 							<Trans>jours</Trans>
 						</Radio>
@@ -332,9 +336,16 @@ function getChapter2(s: SimulatorData[keyof SimulatorData]): Chapter2 | '' {
 
 	return toAtString(chapter2) as typeof chapter2
 }
+
 function SelectedSimulator(props: { chapter2: Chapter2 | '' }) {
 	const simulateur = Object.values(useSimulatorsData()).find(
-		(s) => getChapter2(s) === props.chapter2 && !(s.tracking as any).chapter3
+		(s) =>
+			getChapter2(s) === props.chapter2 &&
+			!(
+				typeof s.tracking === 'object' &&
+				'chapter3' in s.tracking &&
+				s.tracking.chapter3
+			)
 	)
 	if (!simulateur) {
 		return null
@@ -355,24 +366,34 @@ function SimulateursChoice(props: {
 			return (
 				chapter2 &&
 				props.possibleValues.includes(chapter2) &&
-				!(s.tracking as any).chapter3
+				!(
+					typeof s.tracking === 'object' &&
+					'chapter3' in s.tracking &&
+					s.tracking.chapter3
+				)
 			)
 		})
 		.sort((a, b) => (a.shortName < b.shortName ? -1 : 1))
 
 	return (
 		<Select
-			onSelectionChange={props.onChange as any}
+			onSelectionChange={(val) => {
+				props.onChange(
+					typeof val === 'string' && val.length
+						? getChapter2(simulateurs[parseInt(val)])
+						: ''
+				)
+			}}
 			defaultSelectedKey={props.value}
 			label={'Sélectionner la fonctionnalité'}
 		>
-			<Item key={''} textValue="Tout le site">
-				<Emoji emoji="🌍" />
-				Tout le site
-			</Item>
-			{
-				simulateurs.map((s) => (
-					<Item key={getChapter2(s)} textValue={s.shortName}>
+			{[
+				<Item key={''} textValue="Tout le site">
+					<Emoji emoji="🌍" />
+					Tout le site
+				</Item>,
+				...simulateurs.map((s, i) => (
+					<Item key={i} textValue={s.shortName}>
 						{s.icône && (
 							<>
 								<Emoji emoji={s.icône} />
@@ -381,8 +402,8 @@ function SimulateursChoice(props: {
 						)}
 						{s.shortName}
 					</Item>
-				)) as any
-			}
+				)),
+			]}
 		</Select>
 	)
 }
diff --git a/site/source/pages/Stats/utils.tsx b/site/source/pages/Stats/utils.tsx
index b54115aa0..5de27e5a6 100644
--- a/site/source/pages/Stats/utils.tsx
+++ b/site/source/pages/Stats/utils.tsx
@@ -13,18 +13,10 @@ export function Indicator({ main, subTitle, footnote }: IndicatorProps) {
 	return (
 		<StyledIndicator>
 			<H4 as="h2">{subTitle}</H4>
-			<Intro>
+			<Intro as="div">
 				<Strong>{main}</Strong>
 			</Intro>
-			{footnote && (
-				<SmallBody
-					css={`
-						margin-top: -1rem;
-					`}
-				>
-					{footnote}
-				</SmallBody>
-			)}
+			{footnote && <SmallBody>{footnote}</SmallBody>}
 		</StyledIndicator>
 	)
 }