Moved some settings between general and ui tabs

client/src/components/Settings/UISettings/UISettings.tsx

@@ -7,28 +7,22 @@ import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
 
 // Typescript
-import { OtherSettingsForm } from '../../../interfaces';
+import { UISettingsForm } from '../../../interfaces';
 
 // UI
 import { InputGroup, Button, SettingsHeadline } from '../../UI';
 
 // Utils
-import { otherSettingsTemplate, inputHandler } from '../../../utility';
+import { uiSettingsTemplate, inputHandler } from '../../../utility';
 
 export const UISettings = (): JSX.Element => {
-  const {
+  const { loading, config } = useSelector((state: State) => state.config);
-    config: { loading, config },
-    bookmarks: { categories },
-  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
+  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
-    bindActionCreators(actionCreators, dispatch);
 
   // Initial state
-  const [formData, setFormData] = useState<OtherSettingsForm>(
+  const [formData, setFormData] = useState<UISettingsForm>(uiSettingsTemplate);
-    otherSettingsTemplate
-  );
 
   // Get config
   useEffect(() => {
@@ -46,16 +40,6 @@ export const UISettings = (): JSX.Element => {
 
     // Update local page title
     document.title = formData.customTitle;
-
-    // Sort entities with new settings
-    if (formData.useOrdering !== config.useOrdering) {
-      sortApps();
-      sortCategories();
-
-      for (let { id } of categories) {
-        sortBookmarks(id);
-      }
-    }
   };
 
   // Input handler
@@ -63,7 +47,7 @@ export const UISettings = (): JSX.Element => {
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
     options?: { isNumber?: boolean; isBool?: boolean }
   ) => {
-    inputHandler<OtherSettingsForm>({
+    inputHandler<UISettingsForm>({
       e,
       options,
       setStateHandler: setFormData,
@@ -88,6 +72,36 @@ export const UISettings = (): JSX.Element => {
         />
       </InputGroup>
 
+      {/* === SEARCH OPTIONS === */}
+      <SettingsHeadline text="Search" />
+      {/* HIDE SEARCHBAR */}
+      <InputGroup>
+        <label htmlFor="hideSearch">Hide search bar</label>
+        <select
+          id="hideSearch"
+          name="hideSearch"
+          value={formData.hideSearch ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* AUTOFOCUS SEARCHBAR */}
+      <InputGroup>
+        <label htmlFor="disableAutofocus">Disable search bar autofocus</label>
+        <select
+          id="disableAutofocus"
+          name="disableAutofocus"
+          value={formData.disableAutofocus ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
       {/* === HEADER OPTIONS === */}
       <SettingsHeadline text="Header" />
       {/* HIDE HEADER */}
@@ -160,8 +174,8 @@ export const UISettings = (): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
         <span>
-          Greetings must be separated with semicolon. Only 4 messages can be
+          Greetings must be separated with semicolon. All 4 messages must be
-          used
+          filled, even if they are the same
         </span>
       </InputGroup>
 
@@ -193,85 +207,8 @@ export const UISettings = (): JSX.Element => {
         <span>Names must be separated with semicolon</span>
       </InputGroup>
 
-      {/* === BEAHVIOR OPTIONS === */}
+      {/* === SECTIONS OPTIONS === */}
-      <SettingsHeadline text="App Behavior" />
+      <SettingsHeadline text="Sections" />
-      {/* PIN APPS */}
-      <InputGroup>
-        <label htmlFor="pinAppsByDefault">
-          Pin new applications by default
-        </label>
-        <select
-          id="pinAppsByDefault"
-          name="pinAppsByDefault"
-          value={formData.pinAppsByDefault ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* PIN CATEGORIES */}
-      <InputGroup>
-        <label htmlFor="pinCategoriesByDefault">
-          Pin new categories by default
-        </label>
-        <select
-          id="pinCategoriesByDefault"
-          name="pinCategoriesByDefault"
-          value={formData.pinCategoriesByDefault ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* SORT TYPE */}
-      <InputGroup>
-        <label htmlFor="useOrdering">Sorting type</label>
-        <select
-          id="useOrdering"
-          name="useOrdering"
-          value={formData.useOrdering}
-          onChange={(e) => inputChangeHandler(e)}
-        >
-          <option value="createdAt">By creation date</option>
-          <option value="name">Alphabetical order</option>
-          <option value="orderId">Custom order</option>
-        </select>
-      </InputGroup>
-
-      {/* APPS OPPENING */}
-      <InputGroup>
-        <label htmlFor="appsSameTab">Open applications in the same tab</label>
-        <select
-          id="appsSameTab"
-          name="appsSameTab"
-          value={formData.appsSameTab ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* BOOKMARKS OPPENING */}
-      <InputGroup>
-        <label htmlFor="bookmarksSameTab">Open bookmarks in the same tab</label>
-        <select
-          id="bookmarksSameTab"
-          name="bookmarksSameTab"
-          value={formData.bookmarksSameTab ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* === MODULES OPTIONS === */}
-      <SettingsHeadline text="Modules" />
       {/* HIDE APPS */}
       <InputGroup>
         <label htmlFor="hideApps">Hide applications</label>

client/src/interfaces/Forms.ts

@@ -9,28 +9,28 @@ export interface WeatherForm {
 }
 
 export interface GeneralForm {
-  hideSearch: boolean;
   defaultSearchProvider: string;
   searchSameTab: boolean;
-  disableAutofocus: boolean;
-}
-
-export interface OtherSettingsForm {
-  customTitle: string;
   pinAppsByDefault: boolean;
   pinCategoriesByDefault: boolean;
-  hideHeader: boolean;
-  hideApps: boolean;
-  hideCategories: boolean;
   useOrdering: string;
   appsSameTab: boolean;
   bookmarksSameTab: boolean;
+}
+
+export interface UISettingsForm {
+  customTitle: string;
+  hideHeader: boolean;
+  hideApps: boolean;
+  hideCategories: boolean;
   useAmericanDate: boolean;
   greetingsSchema: string;
   daySchema: string;
   monthSchema: string;
   showTime: boolean;
   hideDate: boolean;
+  hideSearch: boolean;
+  disableAutofocus: boolean;
 }
 
 export interface DockerSettingsForm {

client/src/types/ConfigFormData.ts

@@ -1,6 +1,6 @@
 import {
   DockerSettingsForm,
-  OtherSettingsForm,
+  UISettingsForm,
   GeneralForm,
   ThemeSettingsForm,
   WeatherForm,
@@ -10,5 +10,5 @@ export type ConfigFormData =
   | WeatherForm
   | GeneralForm
   | DockerSettingsForm
-  | OtherSettingsForm
+  | UISettingsForm
   | ThemeSettingsForm;

client/src/utility/templateObjects/settingsTemplate.ts

@@ -1,21 +1,16 @@
 import {
   DockerSettingsForm,
-  OtherSettingsForm,
+  UISettingsForm,
   GeneralForm,
   ThemeSettingsForm,
   WeatherForm,
 } from '../../interfaces';
 
-export const otherSettingsTemplate: OtherSettingsForm = {
+export const uiSettingsTemplate: UISettingsForm = {
   customTitle: document.title,
-  pinAppsByDefault: true,
-  pinCategoriesByDefault: true,
   hideHeader: false,
   hideApps: false,
   hideCategories: false,
-  useOrdering: 'createdAt',
-  appsSameTab: false,
-  bookmarksSameTab: false,
   useAmericanDate: false,
   greetingsSchema: 'Good evening!;Good afternoon!;Good morning!;Good night!',
   daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday',
@@ -23,6 +18,8 @@ export const otherSettingsTemplate: OtherSettingsForm = {
     'January;February;March;April;May;June;July;August;September;October;November;December',
   showTime: false,
   hideDate: false,
+  hideSearch: false,
+  disableAutofocus: false,
 };
 
 export const weatherSettingsTemplate: WeatherForm = {
@@ -34,10 +31,13 @@ export const weatherSettingsTemplate: WeatherForm = {
 };
 
 export const generalSettingsTemplate: GeneralForm = {
-  hideSearch: false,
   searchSameTab: false,
   defaultSearchProvider: 'l',
-  disableAutofocus: false,
+  pinAppsByDefault: true,
+  pinCategoriesByDefault: true,
+  useOrdering: 'createdAt',
+  appsSameTab: false,
+  bookmarksSameTab: false,
 };
 
 export const dockerSettingsTemplate: DockerSettingsForm = {