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>