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/7] 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/7] 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/7] 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, From 44f87542a81d81dfb2fccd6a04671c157ab21c56 Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 15 May 2024 13:57:41 +0200 Subject: [PATCH 4/7] fix(graph): page overflow with graph --- src/app/dashboard/page.tsx | 12 +++++++----- src/app/page.tsx | 2 +- src/components/JoinBlock.tsx | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 203c2e7ac..a28f606ca 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -238,11 +238,13 @@ const TopCountriesSection = () => { Evolution de l'élevage du saumon par pays - +
+ +
); diff --git a/src/app/page.tsx b/src/app/page.tsx index dfb793409..389c9ccc1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -217,7 +217,7 @@ const BusinessSection = () => { connaît depuis quelques décennies une hyper-croissance à l’échelle globale.

-
+
diff --git a/src/components/JoinBlock.tsx b/src/components/JoinBlock.tsx index 3f348000c..176af7d87 100644 --- a/src/components/JoinBlock.tsx +++ b/src/components/JoinBlock.tsx @@ -67,7 +67,7 @@ const IntroBlock = ({ saumon au monde, porte une responsabilité particulière dans l'orientation des pratiques.

-
+
From c6aa2fa84597bddf5adfcd2fc09495de3b571320 Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 15 May 2024 14:21:39 +0200 Subject: [PATCH 5/7] feat: prepare component --- src/components/Summary.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx index f23cde843..2bb7f2823 100644 --- a/src/components/Summary.tsx +++ b/src/components/Summary.tsx @@ -21,7 +21,10 @@ const Summary = ({ } return ( -
+
+ ); }; export default Summary; From e5601e213ff39bc9aded9d624e296ce6c731988d Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 22 May 2024 14:18:23 +0200 Subject: [PATCH 6/7] feat: update summary links --- public/images/bottom-dark.svg | 3 ++ src/app/dashboard/page.tsx | 8 ++++ src/app/layout.tsx | 6 ++- src/components/IntroBlock.tsx | 6 +-- src/components/Summary.tsx | 90 +++++++++++++++++++++++++---------- 5 files changed, 85 insertions(+), 28 deletions(-) create mode 100644 public/images/bottom-dark.svg diff --git a/public/images/bottom-dark.svg b/public/images/bottom-dark.svg new file mode 100644 index 000000000..e118cba83 --- /dev/null +++ b/public/images/bottom-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 5a0c62744..e5e9da28a 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -20,6 +20,7 @@ const DashboardChart = dynamic(() => import("@/components/DashboardChart"), { const summary: SummaryLinksProps = [ { + id: "intro", title: "Intro", sublinks: [ { @@ -41,6 +42,7 @@ const summary: SummaryLinksProps = [ ], }, { + id: "company", title: "Entreprises", sublinks: [ { @@ -62,6 +64,7 @@ const summary: SummaryLinksProps = [ ], }, { + id: "biondiversity", title: "Biodiversité", sublinks: [ { @@ -75,6 +78,7 @@ const summary: SummaryLinksProps = [ ], }, { + id: "health", title: "Human health", sublinks: [ { @@ -88,6 +92,7 @@ const summary: SummaryLinksProps = [ ], }, { + id: "animals", title: "Bien être animal", sublinks: [ { @@ -101,6 +106,7 @@ const summary: SummaryLinksProps = [ ], }, { + id: "climate", title: "Climat", sublinks: [ { @@ -110,6 +116,7 @@ const summary: SummaryLinksProps = [ ], }, { + id: "social", title: "Social", sublinks: [ { @@ -119,6 +126,7 @@ const summary: SummaryLinksProps = [ ], }, { + id: "alternative", title: "Alternatives", sublinks: [ { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 67a9190ac..5acea8103 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import { Metadata } from "next"; import { Barlow_Condensed, Montserrat } from "next/font/google"; import * as React from "react"; @@ -60,7 +61,10 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - +
{children}
diff --git a/src/components/IntroBlock.tsx b/src/components/IntroBlock.tsx index d8c04cf0c..e1e2f8074 100644 --- a/src/components/IntroBlock.tsx +++ b/src/components/IntroBlock.tsx @@ -19,11 +19,11 @@ const IntroBlock = ({
-
+
{image && ( { + const [openMenu, setOpenMenu] = useState(""); + const handleClickLink = ( + e: React.MouseEvent, + id: string, + ) => { + e.preventDefault(); + setOpenMenu(openMenu === id ? "" : id); + }; + if (!links) { return <>; } return ( ); }; From a3e06526e90a50a822b5096d25567f6238d75e96 Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 22 May 2024 14:20:05 +0200 Subject: [PATCH 7/7] fix: build --- src/components/Summary.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx index dc29095c1..a4adc76b0 100644 --- a/src/components/Summary.tsx +++ b/src/components/Summary.tsx @@ -1,6 +1,6 @@ import clsx from "clsx"; -import React, { useState } from "react"; import Image from "next/image"; +import React, { useState } from "react"; export type SummaryLinksProps = { id: string; @@ -77,7 +77,7 @@ const Summary = ({ href={`#${sublink.targetId}`} role="menuitem" className="block p-2 hover:text-red1" - onClick={(e) => { + onClick={() => { setOpenMenu(""); }} >