From 3bb4f03e960d8baa6c12f450f0840315921e3eac Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 15 May 2024 09:21:36 +0200 Subject: [PATCH 1/3] feat(dashboard): init calculator component --- src/app/dashboard/page.tsx | 4 ++++ src/components/Calculator.tsx | 32 ++++++++++++++++++++++++++++++++ src/components/Edito.tsx | 4 ++-- 3 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 src/components/Calculator.tsx diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 203c2e7ac..b6900e584 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -12,6 +12,7 @@ import Summary, { SummaryLinksProps } from "@/components/Summary"; import TitleBlock from "@/components/TitleBlock"; import { fetchData } from "@/pages/api/chart"; +import Calculator from "@/components/Calculator"; const DashboardChart = dynamic(() => import("@/components/DashboardChart"), { ssr: false, @@ -133,6 +134,9 @@ const DashboardPage = () => { <> + + +
diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx new file mode 100644 index 000000000..079395054 --- /dev/null +++ b/src/components/Calculator.tsx @@ -0,0 +1,32 @@ +import clsx from "clsx"; +import React, { useEffect, useState } from "react"; + +const Calculator = ({ className }: { className?: string }) => { + const [seconds, setSeconds] = useState(0); + + useEffect(() => { + const timer = setInterval(() => { + setSeconds(seconds + 1); + }, 1000); + + return () => clearInterval(timer); + }); + + return ( +
+

+ Voici les impacts de l'industrie du saumon dans le monde depuis que vous + avez ouvert cette page web. +

+
+ {seconds} {seconds > 1 ? "secondes" : "seconde"} +
+
+ ); +}; +export default Calculator; diff --git a/src/components/Edito.tsx b/src/components/Edito.tsx index f6b72d0c1..c0f8b08ad 100644 --- a/src/components/Edito.tsx +++ b/src/components/Edito.tsx @@ -3,7 +3,7 @@ import Image from "next/image"; import Link from "next/link"; import React from "react"; -const IconCard = ({ +const Edito = ({ className, title, image, @@ -101,4 +101,4 @@ const IconCard = ({ ); }; -export default IconCard; +export default Edito; From f0f6bd27391854dbbc3804710aa240708e1f1985 Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 15 May 2024 13:36:20 +0200 Subject: [PATCH 2/3] feat(dashboard): calculator section --- src/app/dashboard/page.tsx | 16 +++++++++++++++- src/components/Calculator.tsx | 30 ++++++++++++++++++++++++++++-- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index b6900e584..50bcb5405 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -135,7 +135,21 @@ const DashboardPage = () => { - +
diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx index 079395054..a34a13ad6 100644 --- a/src/components/Calculator.tsx +++ b/src/components/Calculator.tsx @@ -1,7 +1,15 @@ import clsx from "clsx"; import React, { useEffect, useState } from "react"; -const Calculator = ({ className }: { className?: string }) => { +type CalculatorProps = { + data: { + multiplicator: number; + label: string; + }[]; + className?: string; +}; + +const Calculator = ({ data, className, ...rest }: CalculatorProps) => { const [seconds, setSeconds] = useState(0); useEffect(() => { @@ -12,20 +20,38 @@ const Calculator = ({ className }: { className?: string }) => { return () => clearInterval(timer); }); + if (!data.length) { + return <>; + } + return (

Voici les impacts de l'industrie du saumon dans le monde depuis que vous avez ouvert cette page web.

-
+
{seconds} {seconds > 1 ? "secondes" : "seconde"}
+ +
    + {data.map((element, key) => ( +
  • + + {new Intl.NumberFormat("fr").format( + element.multiplicator * (seconds + 1), + )} + + {element.label} +
    • + ))} +
); }; From 3708816fdf7fd20f22b060466145b5374159de5b Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 15 May 2024 13:42:49 +0200 Subject: [PATCH 3/3] fix: lint --- README.md | 12 +++++++----- src/app/dashboard/page.tsx | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c41ab39f8..07320607a 100644 --- a/README.md +++ b/README.md @@ -20,13 +20,15 @@ yarn dev Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`. -### 4. Change defaults +### 4. Build and test -There are some things you need to change including title, urls, favicons, etc. +Run the followed command: -Find all comments with !STARTERCONF, then follow the guide. - -Don't forget to change the package name in package.json +- Build the project: `yarn build` +- Launch linter: `yarn lint:strict` +- Launch Typecheck: `yarn typecheck` +- Launch Prettier: `yarn format:check` +- Launch Jest: `yarn test` ### 5. Commit Message Convention diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 50bcb5405..b9cf2e60c 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -4,6 +4,7 @@ import dynamic from "next/dynamic"; import React, { useEffect, useState } from "react"; import "@/lib/env"; +import Calculator from "@/components/Calculator"; import CustomDashboardSection from "@/components/CustomDashboardSection"; import DashboardSection from "@/components/DashboardSection"; import IntroBlock from "@/components/IntroBlock"; @@ -12,7 +13,6 @@ import Summary, { SummaryLinksProps } from "@/components/Summary"; import TitleBlock from "@/components/TitleBlock"; import { fetchData } from "@/pages/api/chart"; -import Calculator from "@/components/Calculator"; const DashboardChart = dynamic(() => import("@/components/DashboardChart"), { ssr: false,