From 85f7cff159768eac10e53fdc6c6a094e173a921f Mon Sep 17 00:00:00 2001
From: Juschwy <jul.fehlmann@gmail.com>
Date: Tue, 9 Jan 2024 16:13:13 +0100
Subject: [PATCH] Add customizable time format

---
 src/components/Apps/Settings/Settings.tsx           |  8 +++++++-
 src/components/InfoBar/InfoBar.tsx                  | 13 ++++++++++---
 .../personalisation/PersonalisationSlice.ts         |  7 ++++++-
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Apps/Settings/Settings.tsx b/src/components/Apps/Settings/Settings.tsx
index 1ea0895..5844fac 100644
--- a/src/components/Apps/Settings/Settings.tsx
+++ b/src/components/Apps/Settings/Settings.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../app/hooks.ts";
-import { setAppBarWidth, setInfoBarHeight } from "../../../features/personalisation/PersonalisationSlice.ts";
+import { setAppBarWidth, setInfoBarHeight, setInfoBarTimeFormat } from "../../../features/personalisation/PersonalisationSlice.ts";
 
 
 function Settings() {
@@ -24,6 +24,12 @@ function Settings() {
         value={useAppSelector((state) => state.personalisation.infoBarHeight)}
         onChange={(e) => dispatch(setInfoBarHeight(e.target.valueAsNumber))}
       />
+      <p>InfoBarTimeFormat (use <a target={"_blank"} href="https://day.js.org/docs/en/display/format">this format</a>)</p>
+      <input
+        type="text"
+        value={useAppSelector((state) => state.personalisation.infoBarTimeFormat)}
+        onChange={(e) => dispatch(setInfoBarTimeFormat(e.target.value))}
+      />
     </>
   );
 }
diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx
index 0ad0aba..1852015 100644
--- a/src/components/InfoBar/InfoBar.tsx
+++ b/src/components/InfoBar/InfoBar.tsx
@@ -1,5 +1,5 @@
 import "./InfoBar.css";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import { useAppSelector } from "../../app/hooks.ts";
 
@@ -7,12 +7,19 @@ function InfoBar() {
   const infoBarHeight = useAppSelector(
     (state) => state.personalisation.infoBarHeight
   );
+  const infoBarTimeFormat = useAppSelector(
+    (state) => state.personalisation.infoBarTimeFormat
+  );
+  const intervalId = useRef<null | number>(null)
 
   const [time, setTime] = useState(dayjs().format("DD MMM HH:mm"));
 
   useEffect(() => {
-    setInterval(() => setTime(dayjs().format("DD MMM HH:mm")), 3000);
-  }, []);
+    if (intervalId.current){
+      clearInterval(intervalId.current)
+    }
+    intervalId.current = setInterval(() => setTime(dayjs().format(infoBarTimeFormat)), 1000);
+  }, [infoBarTimeFormat]);
 
   return (
     <header id={"infoBar"} style={{ height: infoBarHeight }}>
diff --git a/src/features/personalisation/PersonalisationSlice.ts b/src/features/personalisation/PersonalisationSlice.ts
index 677c6d0..e6d610c 100644
--- a/src/features/personalisation/PersonalisationSlice.ts
+++ b/src/features/personalisation/PersonalisationSlice.ts
@@ -4,12 +4,14 @@ import ThemeType from "./ThemeType.ts";
 interface PersonalisationState {
   appBarWidth: number;
   infoBarHeight: number;
+  infoBarTimeFormat: string;
   theme: ThemeType;
 }
 
 const initialState: PersonalisationState = {
   appBarWidth: 70,
   infoBarHeight: 23,
+  infoBarTimeFormat: "DD MMM HH:mm",
   theme: {
     fontColor: "#FFF",
     firstColor: "#2c2c2c",
@@ -28,12 +30,15 @@ const personalisationSlice = createSlice({
     setInfoBarHeight: (state, action: PayloadAction<number>) => {
       state.infoBarHeight = action.payload;
     },
+    setInfoBarTimeFormat: (state, action: PayloadAction<string>) => {
+      state.infoBarTimeFormat = action.payload;
+    },
     setTheme: (state, action: PayloadAction<ThemeType>) => {
       state.theme = action.payload;
     },
   },
 });
-export const { setAppBarWidth, setInfoBarHeight, setTheme } =
+export const { setAppBarWidth, setInfoBarHeight, setTheme, setInfoBarTimeFormat } =
   personalisationSlice.actions;
 
 export default personalisationSlice.reducer;