Added user themes section to Theme settings

client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.module.css

@@ -0,0 +1,7 @@
+.ThemeBuilder {
+  margin-bottom: 30px;
+}
+
+.Buttons button:not(:last-child) {
+  margin-right: 10px;
+}

client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx

@@ -1,3 +1,21 @@
-export const ThemeBuilder = (): JSX.Element => {
-  return <h1>theme builder</h1>;
+import { Theme } from '../../../../interfaces';
+import { Button } from '../../../UI';
+import { ThemeGrid } from '../ThemeGrid/ThemeGrid';
+import classes from './ThemeBuilder.module.css';
+
+interface Props {
+  themes: Theme[];
+}
+
+export const ThemeBuilder = ({ themes }: Props): JSX.Element => {
+  return (
+    <div className={classes.ThemeBuilder}>
+      <ThemeGrid themes={themes} />
+
+      <div className={classes.Buttons}>
+        <Button>Create new theme</Button>
+        {themes.length && <Button>Edit user themes</Button>}
+      </div>
+    </div>
+  );
 };

client/src/components/Settings/Themer/Themer.tsx

@@ -15,13 +15,17 @@ import { ThemeGrid } from './ThemeGrid/ThemeGrid';
 
 // Other
 import { State } from '../../../store/reducers';
-import { inputHandler, themeSettingsTemplate } from '../../../utility';
+import {
+  inputHandler,
+  parseThemeToPAB,
+  themeSettingsTemplate,
+} from '../../../utility';
 
 export const Themer = (): JSX.Element => {
   const {
     auth: { isAuthenticated },
     config: { loading, config },
-    theme: { themes },
+    theme: { themes, userThemes },
   } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
@@ -44,7 +48,7 @@ export const Themer = (): JSX.Element => {
     e.preventDefault();
 
     // Save settings
-    await updateConfig(formData);
+    await updateConfig({ ...formData });
   };
 
   // Input handler
@@ -65,8 +69,14 @@ export const Themer = (): JSX.Element => {
       <SettingsHeadline text="App themes" />
       {!themes.length ? <Spinner /> : <ThemeGrid themes={themes} />}
 
-      {/* <SettingsHeadline text="User themes" />
-      <ThemeBuilder /> */}
+      {!userThemes.length ? (
+        isAuthenticated && 'auth and empty'
+      ) : (
+        <Fragment>
+          <SettingsHeadline text="User themes" />
+          <ThemeBuilder themes={userThemes} />
+        </Fragment>
+      )}
 
       {isAuthenticated && (
         <form onSubmit={formSubmitHandler}>
@@ -79,9 +89,9 @@ export const Themer = (): JSX.Element => {
               value={formData.defaultTheme}
               onChange={(e) => inputChangeHandler(e)}
             >
-              {themes.map((theme: Theme, idx) => (
-                <option key={idx} value={theme.name}>
-                  {theme.name}
+              {[...themes, ...userThemes].map((theme: Theme, idx) => (
+                <option key={idx} value={parseThemeToPAB(theme.colors)}>
+                  {theme.isCustom && '+'} {theme.name}
                 </option>
               ))}
             </select>

client/src/interfaces/Theme.ts

@@ -7,4 +7,5 @@ export interface ThemeColors {
 export interface Theme {
   name: string;
   colors: ThemeColors;
+  isCustom: boolean;
 }

client/src/store/reducers/theme.ts

@@ -1,13 +1,16 @@
 import { Action } from '../actions';
 import { ActionType } from '../action-types';
 import { Theme } from '../../interfaces/Theme';
+import { arrayPartition } from '../../utility';
 
 interface ThemeState {
   themes: Theme[];
+  userThemes: Theme[];
 }
 
 const initialState: ThemeState = {
   themes: [],
+  userThemes: [],
 };
 
 export const themeReducer = (
@@ -16,7 +19,16 @@ export const themeReducer = (
 ): ThemeState => {
   switch (action.type) {
     case ActionType.fetchThemes: {
-      return { themes: action.payload };
+      const [themes, userThemes] = arrayPartition<Theme>(
+        action.payload,
+        (e) => !e.isCustom
+      );
+
+      return {
+        ...state,
+        themes,
+        userThemes,
+      };
     }
 
     default:

client/src/utility/arrayPartition.ts

@@ -0,0 +1,11 @@
+export const arrayPartition = <T>(
+  arr: T[],
+  isValid: (e: T) => boolean
+): T[][] => {
+  let pass: T[] = [];
+  let fail: T[] = [];
+
+  arr.forEach((e) => (isValid(e) ? pass : fail).push(e));
+
+  return [pass, fail];
+};

client/src/utility/index.ts

@@ -13,3 +13,4 @@ export * from './decodeToken';
 export * from './applyAuth';
 export * from './escapeRegex';
 export * from './parseTheme';
+export * from './arrayPartition';