Added option to set custom greetings. Moved HomeHeader to separate file. Cleaned up README file

client/src/components/Home/Header/Header.module.css

@@ -0,0 +1,31 @@
+.Header h1 {
+  color: var(--color-primary);
+  font-weight: 700;
+  font-size: 4em;
+  display: inline-block;
+}
+
+.Header p {
+  color: var(--color-primary);
+  font-weight: 300;
+  text-transform: uppercase;
+  height: 30px;
+}
+
+.HeaderMain {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2.5rem;
+}
+
+.SettingsLink {
+  visibility: visible;
+  color: var(--color-accent);
+}
+
+@media (min-width: 769px) {
+  .SettingsLink {
+    visibility: hidden;
+  }
+}

client/src/components/Home/Header/Header.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Config, GlobalState } from '../../../interfaces';
+import WeatherWidget from '../../Widgets/WeatherWidget/WeatherWidget';
+import { getDateTime } from './functions/getDateTime';
+import { greeter } from './functions/greeter';
+import classes from './Header.module.css';
+
+interface Props {
+  config: Config;
+}
+
+const Header = (props: Props): JSX.Element => {
+  const [dateTime, setDateTime] = useState<string>(getDateTime());
+  const [greeting, setGreeting] = useState<string>(greeter());
+
+  useEffect(() => {
+    let dateTimeInterval: NodeJS.Timeout;
+
+    dateTimeInterval = setInterval(() => {
+      setDateTime(getDateTime());
+      setGreeting(greeter());
+    }, 1000);
+
+    return () => window.clearInterval(dateTimeInterval);
+  }, []);
+
+  return (
+    <header className={classes.Header}>
+      <p>{dateTime}</p>
+      <Link to="/settings" className={classes.SettingsLink}>
+        Go to Settings
+      </Link>
+      <span className={classes.HeaderMain}>
+        <h1>{greeting}</h1>
+        <WeatherWidget />
+      </span>
+    </header>
+  );
+};
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    config: state.config.config,
+  };
+};
+
+export default connect(mapStateToProps)(Header);

client/src/components/Home/Header/functions/getDateTime.ts

@@ -1,4 +1,4 @@
-export const dateTime = (): string => {
+export const getDateTime = (): string => {
   const days = [
     'Sunday',
     'Monday',

client/src/components/Home/Header/functions/greeter.ts

@@ -0,0 +1,17 @@
+export const greeter = (): string => {
+  const now = new Date().getHours();
+  let msg: string;
+
+  const greetingsSchemaRaw =
+    localStorage.getItem('greetingsSchema') ||
+    'Good evening!;Good afternoon!;Good morning!;Good night!';
+  const greetingsSchema = greetingsSchemaRaw.split(';');
+
+  if (now >= 18) msg = greetingsSchema[0];
+  else if (now >= 12) msg = greetingsSchema[1];
+  else if (now >= 6) msg = greetingsSchema[2];
+  else if (now >= 0) msg = greetingsSchema[3];
+  else msg = 'Hello!';
+
+  return msg;
+};

client/src/components/Home/Home.module.css

@@ -1,24 +1,3 @@
-.Header h1 {
-  color: var(--color-primary);
-  font-weight: 700;
-  font-size: 4em;
-  display: inline-block;
-}
-
-.Header p {
-  color: var(--color-primary);
-  font-weight: 300;
-  text-transform: uppercase;
-  height: 30px;
-}
-
-.HeaderMain {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2.5rem;
-}
-
 .SettingsButton {
   width: 35px;
   height: 35px;
@@ -40,21 +19,12 @@
   opacity: 1;
 }
 
-.SettingsLink {
-  visibility: visible;
-  color: var(--color-accent);
-}
-
 @media (min-width: 769px) {
   .SettingsButton {
     visibility: visible;
   }
-
-  .SettingsLink {
-    visibility: hidden;
-  }
 }
 
 .HomeSpace {
   height: 20px;
-}
+}

client/src/components/Home/Home.tsx

@@ -21,12 +21,8 @@ import classes from './Home.module.css';
 // Components
 import AppGrid from '../Apps/AppGrid/AppGrid';
 import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
-import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
 import SearchBar from '../SearchBar/SearchBar';
-
-// Functions
-import { greeter } from './functions/greeter';
-import { dateTime } from './functions/dateTime';
+import Header from './Header/Header';
 
 interface ComponentProps {
   getApps: Function;
@@ -48,11 +44,6 @@ const Home = (props: ComponentProps): JSX.Element => {
     categoriesLoading,
   } = props;
 
-  const [header, setHeader] = useState({
-    dateTime: dateTime(),
-    greeting: greeter(),
-  });
-
   // Local search query
   const [localSearch, setLocalSearch] = useState<null | string>(null);
   const [appSearchResult, setAppSearchResult] = useState<null | App[]>(null);
@@ -74,23 +65,6 @@ const Home = (props: ComponentProps): JSX.Element => {
     }
   }, [getCategories]);
 
-  // Refresh greeter and time
-  useEffect(() => {
-    let interval: any;
-
-    // Start interval only when hideHeader is false
-    if (!props.config.hideHeader) {
-      interval = setInterval(() => {
-        setHeader({
-          dateTime: dateTime(),
-          greeting: greeter(),
-        });
-      }, 1000);
-    }
-
-    return () => clearInterval(interval);
-  }, []);
-
   useEffect(() => {
     if (localSearch) {
       // Search through apps
@@ -126,20 +100,7 @@ const Home = (props: ComponentProps): JSX.Element => {
         <div></div>
       )}
 
-      {!props.config.hideHeader ? (
-        <header className={classes.Header}>
-          <p>{header.dateTime}</p>
-          <Link to="/settings" className={classes.SettingsLink}>
-            Go to Settings
-          </Link>
-          <span className={classes.HeaderMain}>
-            <h1>{header.greeting}</h1>
-            <WeatherWidget />
-          </span>
-        </header>
-      ) : (
-        <div></div>
-      )}
+      {!props.config.hideHeader ? <Header /> : <div></div>}
 
       {!props.config.hideApps ? (
         <Fragment>

client/src/components/Home/functions/greeter.ts

@@ -1,12 +0,0 @@
-export const greeter = (): string => {
-  const now = new Date().getHours();
-  let msg: string;
-
-  if (now >= 18) msg = 'Good evening!';
-  else if (now >= 12) msg = 'Good afternoon!';
-  else if (now >= 6) msg = 'Good morning!';
-  else if (now >= 0) msg = 'Good night!';
-  else msg = 'Hello!';
-
-  return msg;
-}

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -187,6 +187,21 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+      <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>
       <InputGroup>
         <label htmlFor="hideApps">Hide applications</label>
         <select