From 85a65aef52b41fd476bb404991bc0d01fcbef207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Thu, 18 Nov 2021 16:03:44 +0100
Subject: [PATCH] Added option to hide header greetings and date separately

---
 CHANGELOG.md                                  |   1 +
 client/src/components/Home/Header/Header.tsx  |  22 ++-
 .../Home/Header/functions/getDateTime.ts      |  44 +++--
 client/src/components/Home/Home.tsx           |   2 +-
 .../Settings/UISettings/UISettings.tsx        | 170 ++++++++++--------
 client/src/interfaces/Config.ts               |   1 +
 client/src/interfaces/Forms.ts                |   1 +
 client/src/store/action-creators/config.ts    |   1 +
 .../utility/templateObjects/configTemplate.ts |   1 +
 .../templateObjects/settingsTemplate.ts       |   1 +
 utils/init/initialConfig.json                 |   3 +-
 11 files changed, 150 insertions(+), 97 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index efc16359055269eb56c92a09f3d83b2252c0a3cf..f5fc9df974090d3dce79634384dca9f4f638ee0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ### v2.0.1 (TBA)
 - Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
 - Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))
+- Added option to hide header greetings and date separately ([#200](https://github.com/pawelmalak/flame/issues/200))
 - Fixed bug with custom icons not working with apps when "pin by default" was disabled
 
 ### v2.0.0 (2021-11-15)
diff --git a/client/src/components/Home/Header/Header.tsx b/client/src/components/Home/Header/Header.tsx
index f059b497836a4d2d0b0abb257d95a28c7f3252d2..84da28060feab74903b1852013e3ca8fe7f039f6 100644
--- a/client/src/components/Home/Header/Header.tsx
+++ b/client/src/components/Home/Header/Header.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
+// Redux
+import { useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+
 // CSS
 import classes from './Header.module.css';
 
@@ -12,6 +16,10 @@ import { getDateTime } from './functions/getDateTime';
 import { greeter } from './functions/greeter';
 
 export const Header = (): JSX.Element => {
+  const { hideHeader, hideDate, showTime } = useSelector(
+    (state: State) => state.config.config
+  );
+
   const [dateTime, setDateTime] = useState<string>(getDateTime());
   const [greeting, setGreeting] = useState<string>(greeter());
 
@@ -28,14 +36,18 @@ export const Header = (): JSX.Element => {
 
   return (
     <header className={classes.Header}>
-      <p>{dateTime}</p>
+      {(!hideDate || showTime) && <p>{dateTime}</p>}
+
       <Link to="/settings" className={classes.SettingsLink}>
         Go to Settings
       </Link>
-      <span className={classes.HeaderMain}>
-        <h1>{greeting}</h1>
-        <WeatherWidget />
-      </span>
+
+      {!hideHeader && (
+        <span className={classes.HeaderMain}>
+          <h1>{greeting}</h1>
+          <WeatherWidget />
+        </span>
+      )}
     </header>
   );
 };
diff --git a/client/src/components/Home/Header/functions/getDateTime.ts b/client/src/components/Home/Header/functions/getDateTime.ts
index 69cd78bcd8f8539e7915a043a0677f14853512e3..45ffc9d5cd028c9ccc811d249f74a74d8a5b6716 100644
--- a/client/src/components/Home/Header/functions/getDateTime.ts
+++ b/client/src/components/Home/Header/functions/getDateTime.ts
@@ -30,22 +30,42 @@ export const getDateTime = (): string => {
 
   const useAmericanDate = localStorage.useAmericanDate === 'true';
   const showTime = localStorage.showTime === 'true';
+  const hideDate = localStorage.hideDate === 'true';
 
+  // Date
+  let dateEl = '';
+
+  if (!hideDate) {
+    if (!useAmericanDate) {
+      dateEl = `${days[now.getDay()]}, ${now.getDate()} ${
+        months[now.getMonth()]
+      } ${now.getFullYear()}`;
+    } else {
+      dateEl = `${days[now.getDay()]}, ${
+        months[now.getMonth()]
+      } ${now.getDate()} ${now.getFullYear()}`;
+    }
+  }
+
+  // Time
   const p = parseTime;
+  let timeEl = '';
 
-  const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p(
-    now.getSeconds()
-  )}`;
+  if (showTime) {
+    const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p(
+      now.getSeconds()
+    )}`;
 
-  const timeEl = showTime ? ` - ${time}` : '';
+    timeEl = time;
+  }
+
+  // Separator
+  let separator = '';
 
-  if (!useAmericanDate) {
-    return `${days[now.getDay()]}, ${now.getDate()} ${
-      months[now.getMonth()]
-    } ${now.getFullYear()}${timeEl}`;
-  } else {
-    return `${days[now.getDay()]}, ${
-      months[now.getMonth()]
-    } ${now.getDate()} ${now.getFullYear()}${timeEl}`;
+  if (!hideDate && showTime) {
+    separator = ' - ';
   }
+
+  // Output
+  return `${dateEl}${separator}${timeEl}`;
 };
diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx
index 43b2373544c603c5d035afc158f67806b70f96ca..d7f387284f5491a5e5bc9e50aedd39b0e56a3a0c 100644
--- a/client/src/components/Home/Home.tsx
+++ b/client/src/components/Home/Home.tsx
@@ -98,7 +98,7 @@ export const Home = (): JSX.Element => {
         <div></div>
       )}
 
-      {!config.hideHeader ? <Header /> : <div></div>}
+      <Header />
 
       {!config.hideApps ? (
         <Fragment>
diff --git a/client/src/components/Settings/UISettings/UISettings.tsx b/client/src/components/Settings/UISettings/UISettings.tsx
index 78d8b1468c7fde13f8949398e83e98c89abee319..b0de4529fd66cb78d882200e3416d3fb8c34e787 100644
--- a/client/src/components/Settings/UISettings/UISettings.tsx
+++ b/client/src/components/Settings/UISettings/UISettings.tsx
@@ -66,7 +66,7 @@ export const UISettings = (): JSX.Element => {
 
   return (
     <form onSubmit={(e) => formSubmitHandler(e)}>
-      {/* OTHER OPTIONS */}
+      {/* === OTHER OPTIONS === */}
       <SettingsHeadline text="Miscellaneous" />
       {/* PAGE TITLE */}
       <InputGroup>
@@ -81,6 +81,50 @@ export const UISettings = (): JSX.Element => {
         />
       </InputGroup>
 
+      {/* === HEADER OPTIONS === */}
+      <SettingsHeadline text="Header" />
+      {/* HIDE HEADER */}
+      <InputGroup>
+        <label htmlFor="hideHeader">Hide greetings</label>
+        <select
+          id="hideHeader"
+          name="hideHeader"
+          value={formData.hideHeader ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* HIDE DATE */}
+      <InputGroup>
+        <label htmlFor="hideDate">Hide date</label>
+        <select
+          id="hideDate"
+          name="hideDate"
+          value={formData.hideDate ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* HIDE TIME */}
+      <InputGroup>
+        <label htmlFor="showTime">Hide time</label>
+        <select
+          id="showTime"
+          name="showTime"
+          value={formData.showTime ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={0}>True</option>
+          <option value={1}>False</option>
+        </select>
+      </InputGroup>
+
       {/* DATE FORMAT */}
       <InputGroup>
         <label htmlFor="useAmericanDate">Date formatting</label>
@@ -95,7 +139,52 @@ export const UISettings = (): JSX.Element => {
         </select>
       </InputGroup>
 
-      {/* BEAHVIOR OPTIONS */}
+      {/* CUSTOM GREETINGS */}
+      <InputGroup>
+        <label htmlFor="greetingsSchema">Custom greetings</label>
+        <input
+          type="text"
+          id="greetingsSchema"
+          name="greetingsSchema"
+          placeholder="Good day;Hi;Bye!"
+          value={formData.greetingsSchema}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>
+          Greetings must be separated with semicolon. Only 4 messages can be
+          used
+        </span>
+      </InputGroup>
+
+      {/* CUSTOM DAYS */}
+      <InputGroup>
+        <label htmlFor="daySchema">Custom weekday names</label>
+        <input
+          type="text"
+          id="daySchema"
+          name="daySchema"
+          placeholder="Sunday;Monday;Tuesday"
+          value={formData.daySchema}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>Names must be separated with semicolon</span>
+      </InputGroup>
+
+      {/* CUSTOM MONTHS */}
+      <InputGroup>
+        <label htmlFor="monthSchema">Custom month names</label>
+        <input
+          type="text"
+          id="monthSchema"
+          name="monthSchema"
+          placeholder="January;February;March"
+          value={formData.monthSchema}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>Names must be separated with semicolon</span>
+      </InputGroup>
+
+      {/* === BEAHVIOR OPTIONS === */}
       <SettingsHeadline text="App Behavior" />
       {/* PIN APPS */}
       <InputGroup>
@@ -172,82 +261,7 @@ export const UISettings = (): JSX.Element => {
         </select>
       </InputGroup>
 
-      {/* HEADER OPTIONS */}
-      <SettingsHeadline text="Header" />
-      {/* HIDE HEADER */}
-      <InputGroup>
-        <label htmlFor="hideHeader">Hide greeting and date</label>
-        <select
-          id="hideHeader"
-          name="hideHeader"
-          value={formData.hideHeader ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* CUSTOM GREETINGS */}
-      <InputGroup>
-        <label htmlFor="greetingsSchema">Custom greetings</label>
-        <input
-          type="text"
-          id="greetingsSchema"
-          name="greetingsSchema"
-          placeholder="Good day;Hi;Bye!"
-          value={formData.greetingsSchema}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-        <span>
-          Greetings must be separated with semicolon. Only 4 messages can be
-          used
-        </span>
-      </InputGroup>
-
-      {/* CUSTOM DAYS */}
-      <InputGroup>
-        <label htmlFor="daySchema">Custom weekday names</label>
-        <input
-          type="text"
-          id="daySchema"
-          name="daySchema"
-          placeholder="Sunday;Monday;Tuesday"
-          value={formData.daySchema}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-        <span>Names must be separated with semicolon</span>
-      </InputGroup>
-
-      {/* CUSTOM MONTHS */}
-      <InputGroup>
-        <label htmlFor="monthSchema">Custom month names</label>
-        <input
-          type="text"
-          id="monthSchema"
-          name="monthSchema"
-          placeholder="January;February;March"
-          value={formData.monthSchema}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-        <span>Names must be separated with semicolon</span>
-      </InputGroup>
-
-      {/* SHOW TIME */}
-      <InputGroup>
-        <label htmlFor="showTime">Show time</label>
-        <select
-          id="showTime"
-          name="showTime"
-          value={formData.showTime ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* MODULES OPTIONS */}
+      {/* === MODULES OPTIONS === */}
       <SettingsHeadline text="Modules" />
       {/* HIDE APPS */}
       <InputGroup>
diff --git a/client/src/interfaces/Config.ts b/client/src/interfaces/Config.ts
index f3d93344ccb77439807cf4aa99ce8c9f16538a18..cab413fb1b0ae307d0d969f758e8c0c89ae6d2fb 100644
--- a/client/src/interfaces/Config.ts
+++ b/client/src/interfaces/Config.ts
@@ -30,4 +30,5 @@ export interface Config {
   defaultTheme: string;
   isKilometer: boolean;
   weatherData: WeatherData;
+  hideDate: boolean;
 }
diff --git a/client/src/interfaces/Forms.ts b/client/src/interfaces/Forms.ts
index 878013bf14f65b5208ad1dc75093d373790ee789..ad3763f94b4459002a8edc84425ecdb4ce4c4873 100644
--- a/client/src/interfaces/Forms.ts
+++ b/client/src/interfaces/Forms.ts
@@ -30,6 +30,7 @@ export interface OtherSettingsForm {
   daySchema: string;
   monthSchema: string;
   showTime: boolean;
+  hideDate: boolean;
 }
 
 export interface DockerSettingsForm {
diff --git a/client/src/store/action-creators/config.ts b/client/src/store/action-creators/config.ts
index 079faac956818c6986d602875b1b724258004e3b..6b516f74c63f18017ddcb6ed530cca8dc85e66e3 100644
--- a/client/src/store/action-creators/config.ts
+++ b/client/src/store/action-creators/config.ts
@@ -19,6 +19,7 @@ const keys: (keyof Config)[] = [
   'daySchema',
   'monthSchema',
   'showTime',
+  'hideDate',
 ];
 
 export const getConfig = () => async (dispatch: Dispatch<GetConfigAction>) => {
diff --git a/client/src/utility/templateObjects/configTemplate.ts b/client/src/utility/templateObjects/configTemplate.ts
index 690697359d70e5c73f51a2c332d0bc264fceaf1c..8d58153b932d6242df4129395c22bb9a18726e60 100644
--- a/client/src/utility/templateObjects/configTemplate.ts
+++ b/client/src/utility/templateObjects/configTemplate.ts
@@ -31,4 +31,5 @@ export const configTemplate: Config = {
   defaultTheme: 'tron',
   isKilometer: true,
   weatherData: 'cloud',
+  hideDate: false,
 };
diff --git a/client/src/utility/templateObjects/settingsTemplate.ts b/client/src/utility/templateObjects/settingsTemplate.ts
index 8752859e2dd647c4e3c071d7d853a275023a3127..a1228308e073cc8db0fdce1d4f12420784ec332e 100644
--- a/client/src/utility/templateObjects/settingsTemplate.ts
+++ b/client/src/utility/templateObjects/settingsTemplate.ts
@@ -22,6 +22,7 @@ export const otherSettingsTemplate: OtherSettingsForm = {
   monthSchema:
     'January;February;March;April;May;June;July;August;September;October;November;December',
   showTime: false,
+  hideDate: false,
 };
 
 export const weatherSettingsTemplate: WeatherForm = {
diff --git a/utils/init/initialConfig.json b/utils/init/initialConfig.json
index 897b43e84330ee648c79aad868bc463b7bab245a..575a2e7fd76cb971336447d00ed118872e0a2003 100644
--- a/utils/init/initialConfig.json
+++ b/utils/init/initialConfig.json
@@ -27,5 +27,6 @@
   "showTime": false,
   "defaultTheme": "tron",
   "isKilometer": true,
-  "weatherData": "cloud"
+  "weatherData": "cloud",
+  "hideDate": false
 }