Added option to hide header greetings and date separately

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>
   );
 };