From ee0b4354933e5565138b6c28c6d9bbcf09b392b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Wed, 23 Mar 2022 13:02:32 +0100
Subject: [PATCH] Separated theme components

---
 .../GeneralSettings/GeneralSettings.tsx       |  2 +-
 .../Themer/ThemeBuilder/ThemeBuilder.tsx      |  3 ++
 .../ThemeGrid.module.css}                     |  2 +-
 .../Settings/Themer/ThemeGrid/ThemeGrid.tsx   | 30 +++++++++++++++++++
 .../ThemePreview.module.css                   |  0
 .../{ => ThemePreview}/ThemePreview.tsx       |  2 +-
 .../src/components/Settings/Themer/Themer.tsx | 22 +++++---------
 7 files changed, 44 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx
 rename client/src/components/Settings/Themer/{Themer.module.css => ThemeGrid/ThemeGrid.module.css} (99%)
 create mode 100644 client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.tsx
 rename client/src/components/Settings/Themer/{ => ThemePreview}/ThemePreview.module.css (100%)
 rename client/src/components/Settings/Themer/{ => ThemePreview}/ThemePreview.tsx (93%)

diff --git a/client/src/components/Settings/GeneralSettings/GeneralSettings.tsx b/client/src/components/Settings/GeneralSettings/GeneralSettings.tsx
index 4173c72..d88208e 100644
--- a/client/src/components/Settings/GeneralSettings/GeneralSettings.tsx
+++ b/client/src/components/Settings/GeneralSettings/GeneralSettings.tsx
@@ -164,7 +164,7 @@ export const GeneralSettings = (): JSX.Element => {
           </select>
         </InputGroup>
 
-        {/* SEARCH SETTINGS */}
+        {/* === SEARCH OPTIONS === */}
         <SettingsHeadline text="Search" />
         <InputGroup>
           <label htmlFor="defaultSearchProvider">Default search provider</label>
diff --git a/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx b/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx
new file mode 100644
index 0000000..c95eb38
--- /dev/null
+++ b/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx
@@ -0,0 +1,3 @@
+export const ThemeBuilder = (): JSX.Element => {
+  return <h1>theme builder</h1>;
+};
diff --git a/client/src/components/Settings/Themer/Themer.module.css b/client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.module.css
similarity index 99%
rename from client/src/components/Settings/Themer/Themer.module.css
rename to client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.module.css
index 986f6c5..65dbd44 100644
--- a/client/src/components/Settings/Themer/Themer.module.css
+++ b/client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.module.css
@@ -15,4 +15,4 @@
   .ThemerGrid {
     grid-template-columns: 1fr 1fr 1fr;
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.tsx b/client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.tsx
new file mode 100644
index 0000000..bd88961
--- /dev/null
+++ b/client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.tsx
@@ -0,0 +1,30 @@
+// Redux
+import { useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
+
+// Components
+import { ThemePreview } from '../ThemePreview/ThemePreview';
+
+// Other
+import { Theme } from '../../../../interfaces';
+import classes from './ThemeGrid.module.css';
+
+interface Props {
+  themes: Theme[];
+}
+
+export const ThemeGrid = ({ themes }: Props): JSX.Element => {
+  const dispatch = useDispatch();
+  const { setTheme } = bindActionCreators(actionCreators, dispatch);
+
+  return (
+    <div className={classes.ThemerGrid}>
+      {themes.map(
+        (theme: Theme, idx: number): JSX.Element => (
+          <ThemePreview key={idx} theme={theme} applyTheme={setTheme} />
+        )
+      )}
+    </div>
+  );
+};
diff --git a/client/src/components/Settings/Themer/ThemePreview.module.css b/client/src/components/Settings/Themer/ThemePreview/ThemePreview.module.css
similarity index 100%
rename from client/src/components/Settings/Themer/ThemePreview.module.css
rename to client/src/components/Settings/Themer/ThemePreview/ThemePreview.module.css
diff --git a/client/src/components/Settings/Themer/ThemePreview.tsx b/client/src/components/Settings/Themer/ThemePreview/ThemePreview.tsx
similarity index 93%
rename from client/src/components/Settings/Themer/ThemePreview.tsx
rename to client/src/components/Settings/Themer/ThemePreview/ThemePreview.tsx
index eccf872..81a48fe 100644
--- a/client/src/components/Settings/Themer/ThemePreview.tsx
+++ b/client/src/components/Settings/Themer/ThemePreview/ThemePreview.tsx
@@ -1,4 +1,4 @@
-import { Theme } from '../../../interfaces/Theme';
+import { Theme } from '../../../../interfaces/Theme';
 import classes from './ThemePreview.module.css';
 
 interface Props {
diff --git a/client/src/components/Settings/Themer/Themer.tsx b/client/src/components/Settings/Themer/Themer.tsx
index 61fbb92..4274a34 100644
--- a/client/src/components/Settings/Themer/Themer.tsx
+++ b/client/src/components/Settings/Themer/Themer.tsx
@@ -9,11 +9,11 @@ import { actionCreators } from '../../../store';
 import { Theme, ThemeSettingsForm } from '../../../interfaces';
 
 // Components
-import { ThemePreview } from './ThemePreview';
 import { Button, InputGroup, SettingsHeadline } from '../../UI';
+import { ThemeBuilder } from './ThemeBuilder/ThemeBuilder';
+import { ThemeGrid } from './ThemeGrid/ThemeGrid';
 
 // Other
-import classes from './Themer.module.css';
 import { themes } from './themes.json';
 import { State } from '../../../store/reducers';
 import { inputHandler, themeSettingsTemplate } from '../../../utility';
@@ -25,10 +25,7 @@ export const Themer = (): JSX.Element => {
   } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { setTheme, updateConfig } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
+  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
 
   // Initial state
   const [formData, setFormData] = useState<ThemeSettingsForm>(
@@ -65,14 +62,11 @@ export const Themer = (): JSX.Element => {
 
   return (
     <Fragment>
-      <SettingsHeadline text="Set theme" />
-      <div className={classes.ThemerGrid}>
-        {themes.map(
-          (theme: Theme, idx: number): JSX.Element => (
-            <ThemePreview key={idx} theme={theme} applyTheme={setTheme} />
-          )
-        )}
-      </div>
+      <SettingsHeadline text="App themes" />
+      <ThemeGrid themes={themes} />
+
+      <SettingsHeadline text="User themes" />
+      <ThemeBuilder />
 
       {isAuthenticated && (
         <form onSubmit={formSubmitHandler}>