From b1d66d7ad64b6fc52e0329164ac4ed754ebb601c Mon Sep 17 00:00:00 2001
From: fsoussand <fflloo98@me.com>
Date: Mon, 18 Sep 2023 10:01:36 +0200
Subject: [PATCH] translate distraction filter

---
 public/locales/en/distraction.json |  7 +++++++
 public/locales/fr/distraction.json |  7 +++++++
 src/pages/egg.tsx                  | 19 +++++++++++++++++--
 src/simulators/distractions.ts     | 15 +++------------
 src/simulators/index.ts            | 14 ++++++++++----
 5 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 public/locales/en/distraction.json
 create mode 100644 public/locales/fr/distraction.json

diff --git a/public/locales/en/distraction.json b/public/locales/en/distraction.json
new file mode 100644
index 0000000..2535b64
--- /dev/null
+++ b/public/locales/en/distraction.json
@@ -0,0 +1,7 @@
+{
+  "distraction-1": "Did I eat lunch ?",
+  "distraction-2": "I have to go back to work...",
+  "distraction-3": "Ventilation is very noisy today. bzzzzzz",
+  "distraction-4": "Should I answer this message ?",
+  "distraction-5": "I have to focus, focus, focus"
+}
diff --git a/public/locales/fr/distraction.json b/public/locales/fr/distraction.json
new file mode 100644
index 0000000..25a0d5f
--- /dev/null
+++ b/public/locales/fr/distraction.json
@@ -0,0 +1,7 @@
+{
+  "distraction-1": "J'ai mangé ce midi ?",
+  "distraction-2": "Je dois retourner travailler...",
+  "distraction-3": "La ventilation fait beaucoup de bruit aujourd'hui. bzzzzzz",
+  "distraction-4": "Est-ce que je devrais répondre à ce message ?",
+  "distraction-5": "Je dois me concentrer, me concentrer, me concentrer"
+}
diff --git a/src/pages/egg.tsx b/src/pages/egg.tsx
index 8e8164e..c3b7231 100644
--- a/src/pages/egg.tsx
+++ b/src/pages/egg.tsx
@@ -1,5 +1,6 @@
 import { CircularProgress } from "@mui/material";
 import type { NextPage } from "next";
+import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import useSwr from "swr";
 
@@ -20,7 +21,17 @@ const EggPage: NextPage = () => {
     fetcher
   );
 
-  useSimulator([SIMULATE_EFFECT.DISTRACTIONS]);
+  const { t } = useTranslation();
+
+  const texts = [
+    t("distraction:distraction-1"),
+    t("distraction:distraction-2"),
+    t("distraction:distraction-3"),
+    t("distraction:distraction-4"),
+    t("distraction:distraction-5"),
+  ];
+
+  useSimulator([SIMULATE_EFFECT.DISTRACTIONS], texts);
 
   if (data === undefined || error) {
     return <CircularProgress />;
@@ -40,7 +51,11 @@ export default EggPage;
 export async function getStaticProps({ locale }: StaticProps) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ["dairy_coffee_egg", "common"])),
+      ...(await serverSideTranslations(locale, [
+        "dairy_coffee_egg",
+        "common",
+        "distraction",
+      ])),
     },
   };
 }
diff --git a/src/simulators/distractions.ts b/src/simulators/distractions.ts
index b6d4b0b..0fb2673 100644
--- a/src/simulators/distractions.ts
+++ b/src/simulators/distractions.ts
@@ -1,11 +1,10 @@
 let distractionIntervale: NodeJS.Timer;
 
-export const activeDistractions = () => {
-  scriptImportedFromExternalRepository();
+export const activeDistractions = (texts: string[]) => {
+  scriptImportedFromExternalRepository(texts);
 };
 
 const timeouts: NodeJS.Timeout[] = [];
-
 // used to save and clear timeouts
 export const TIMEOUTS = {
   timeouts,
@@ -73,7 +72,7 @@ function removeClass(element: string, classname: string) {
   }
 }
 
-const scriptImportedFromExternalRepository = () => {
+const scriptImportedFromExternalRepository = (texts: string[]) => {
   function createElement(
     element: string,
     classname: string,
@@ -93,14 +92,6 @@ const scriptImportedFromExternalRepository = () => {
     createElement("span", `wds-text-element-${index}`, text);
   }
 
-  const texts = [
-    "J'ai mangé ce midi ?",
-    "Je dois retourner travailler...",
-    "La ventilation fait beaucoup de bruit aujourd'hui. bzzzzzz",
-    "Est-ce que je devrais répondre à ce message ?",
-    "Je dois me concentrer, me concentrer, me concentrer",
-  ];
-
   texts.forEach(createTextElements);
 
   //add and remove animation classes, then loop
diff --git a/src/simulators/index.ts b/src/simulators/index.ts
index c633a43..0be65b2 100644
--- a/src/simulators/index.ts
+++ b/src/simulators/index.ts
@@ -17,9 +17,12 @@ import { activeScrambleLetter, removeScrambleLetter } from "./scrambleLetter";
 import { COLOR_FILTER_ID, SIMULATE_EFFECT } from "./types";
 import { activeFullZoom, resetZoom } from "./zoom";
 
-export const useSimulator = (effects: SIMULATE_EFFECT[]) => {
+export const useSimulator = (
+  effects: SIMULATE_EFFECT[],
+  texts: string[] = []
+) => {
   useEffect(() => {
-    activateSimulators(effects);
+    activateSimulators(effects, texts);
 
     return () => removeSimulations();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -35,7 +38,10 @@ export const useColorFilterSimulator = (filterIds: COLOR_FILTER_ID[]) => {
   }, filterIds);
 };
 
-export const activateSimulators = (effects: SIMULATE_EFFECT[]) => {
+export const activateSimulators = (
+  effects: SIMULATE_EFFECT[],
+  texts: string[]
+) => {
   effects.forEach((effect) => {
     switch (effect) {
       case SIMULATE_EFFECT.ZOOM:
@@ -60,7 +66,7 @@ export const activateSimulators = (effects: SIMULATE_EFFECT[]) => {
         activeScrambleLetter();
         break;
       case SIMULATE_EFFECT.DISTRACTIONS:
-        activeDistractions();
+        activeDistractions(texts);
         break;
     }
   });