Added option to hide apps and categories from home screen

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.4.3
+REACT_APP_VERSION=1.4.4

client/src/components/Apps/AppForm/AppForm.tsx

@@ -18,7 +18,7 @@ interface ComponentProps {
 }
 
 const AppForm = (props: ComponentProps): JSX.Element => {
-  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(true);
+  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [formData, setFormData] = useState<NewApp>({
     name: '',

client/src/components/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
 // Redux
@@ -101,24 +101,33 @@ const Home = (props: ComponentProps): JSX.Element => {
         : <div></div>
       }
       
-      <SectionHeadline title='Applications' link='/applications' />
+      {searchConfig('hideApps', 0) !== 1
-      {appsLoading
+        ? (<Fragment>
-        ? <Spinner />
+            <SectionHeadline title='Applications' link='/applications' />
-        : <AppGrid
+            {appsLoading
-          apps={apps.filter((app: App) => app.isPinned)}
+              ? <Spinner />
-          totalApps={apps.length}
+              : <AppGrid
-        />
+                apps={apps.filter((app: App) => app.isPinned)}
+                totalApps={apps.length}
+              />
+            }
+            <div className={classes.HomeSpace}></div>
+          </Fragment>)
+        : <div></div>
       }
 
-      <div className={classes.HomeSpace}></div>
+      {searchConfig('hideCategories', 0) !== 1
-
+        ? (<Fragment>
-      <SectionHeadline title='Bookmarks' link='/bookmarks' />
+            <SectionHeadline title='Bookmarks' link='/bookmarks' />
-      {categoriesLoading
+            {categoriesLoading
-        ? <Spinner />
+              ? <Spinner />
-        : <BookmarkGrid
+              : <BookmarkGrid
-            categories={categories.filter((category: Category) => category.isPinned)}
+                  categories={categories.filter((category: Category) => category.isPinned)}
-            totalCategories={categories.length}
+                  totalCategories={categories.length}
-        />
+              />
+            }
+          </Fragment>)
+        : <div></div>
       }
 
       <Link to='/settings' className={classes.SettingsButton}>

client/src/components/Settings/OtherSettings/OtherSettings.module.css

@@ -0,0 +1,9 @@
+.SettingsSection {
+  color: var(--color-primary);
+  padding-bottom: 3px;
+  margin-bottom: 10px;
+  font-size: 20px;
+  font-weight: 500;
+  border-bottom: 2px solid var(--color-accent);
+  display: inline-block;
+}

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

@@ -11,6 +11,9 @@ import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces'
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';
 
+// CSS
+import classes from './OtherSettings.module.css';
+
 // Utils
 import { searchConfig } from '../../../utility';
 
@@ -29,6 +32,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     pinAppsByDefault: 1,
     pinCategoriesByDefault: 1,
     hideHeader: 0,
+    hideApps: 0,
+    hideCategories: 0,
     useOrdering: 'createdAt',
     openSameTab: 0
   })
@@ -40,6 +45,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
       pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
       pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
       hideHeader: searchConfig('hideHeader', 0),
+      hideApps: searchConfig('hideApps', 0),
+      hideCategories: searchConfig('hideCategories', 0),
       useOrdering: searchConfig('useOrdering', 'createdAt'),
       openSameTab: searchConfig('openSameTab', 0)
     })
@@ -76,6 +83,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
   return (
     <form onSubmit={(e) => formSubmitHandler(e)}>
+      {/* OTHER OPTIONS */}
+      <h2 className={classes.SettingsSection}>Miscellaneous</h2>
       <InputGroup>
         <label htmlFor='customTitle'>Custom page title</label>
         <input
@@ -87,6 +96,9 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
       </InputGroup>
+
+      {/* BEAHVIOR OPTIONS */}
+      <h2 className={classes.SettingsSection}>App Behavior</h2>
       <InputGroup>
         <label htmlFor='pinAppsByDefault'>Pin new applications by default</label>
         <select
@@ -111,18 +123,6 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
-      <InputGroup>
-        <label htmlFor='hideHeader'>Hide greeting and date</label>
-        <select
-          id='hideHeader'
-          name='hideHeader'
-          value={formData.hideHeader}
-          onChange={(e) => inputChangeHandler(e, true)}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
       <InputGroup>
         <label htmlFor='useOrdering'>Sorting type</label>
         <select
@@ -148,6 +148,45 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+
+      {/* MODULES OPTIONS */}
+      <h2 className={classes.SettingsSection}>Modules</h2>
+      <InputGroup>
+        <label htmlFor='hideHeader'>Hide greeting and date</label>
+        <select
+          id='hideHeader'
+          name='hideHeader'
+          value={formData.hideHeader}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='hideApps'>Hide applications</label>
+        <select
+          id='hideApps'
+          name='hideApps'
+          value={formData.hideApps}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='hideCategories'>Hide categories</label>
+        <select
+          id='hideCategories'
+          name='hideCategories'
+          value={formData.hideCategories}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
     <Button>Save changes</Button>
     </form>
   )

client/src/interfaces/Forms.ts

@@ -10,6 +10,8 @@ export interface SettingsForm {
   pinAppsByDefault: number;
   pinCategoriesByDefault: number;
   hideHeader: number;
+  hideApps: number;
+  hideCategories: number;
   useOrdering: string;
   openSameTab: number;
 }

utils/initialConfig.json

@@ -39,6 +39,14 @@
     {
       "key": "openSameTab",
       "value": false
+    },
+    {
+      "key": "hideApps",
+      "value": false
+    },
+    {
+      "key": "hideCategories",
+      "value": false
     }
   ]
 }