Functionality to delete and edit custom themes

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

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 // Redux
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
 import { State } from '../../../../store/reducers';
 
 // Other
@@ -21,11 +23,21 @@ interface Props {
 export const ThemeBuilder = ({ themes }: Props): JSX.Element => {
   const {
     auth: { isAuthenticated },
+    theme: { themeInEdit },
   } = useSelector((state: State) => state);
 
+  const { editTheme } = bindActionCreators(actionCreators, useDispatch());
+
   const [showModal, toggleShowModal] = useState(false);
   const [isInEdit, toggleIsInEdit] = useState(false);
 
+  useEffect(() => {
+    if (themeInEdit) {
+      toggleIsInEdit(false);
+      toggleShowModal(true);
+    }
+  }, [themeInEdit]);
+
   return (
     <div className={classes.ThemeBuilder}>
       {/* MODALS */}
@@ -45,6 +57,7 @@ export const ThemeBuilder = ({ themes }: Props): JSX.Element => {
         <div className={classes.Buttons}>
           <Button
             click={() => {
+              editTheme(null);
               toggleIsInEdit(false);
               toggleShowModal(!showModal);
             }}

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

@@ -19,10 +19,13 @@ interface Props {
 
 export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
   const {
-    theme: { activeTheme },
+    theme: { activeTheme, themeInEdit },
   } = useSelector((state: State) => state);
 
-  const { addTheme } = bindActionCreators(actionCreators, useDispatch());
+  const { addTheme, updateTheme } = bindActionCreators(
+    actionCreators,
+    useDispatch()
+  );
 
   const [formData, setFormData] = useState<Theme>({
     name: '',
@@ -38,6 +41,12 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
     setFormData({ ...formData, colors: activeTheme.colors });
   }, [activeTheme]);
 
+  useEffect(() => {
+    if (themeInEdit) {
+      setFormData(themeInEdit);
+    }
+  }, [themeInEdit]);
+
   const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
 
@@ -62,8 +71,11 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
   const formHandler = (e: FormEvent) => {
     e.preventDefault();
 
-    // add new theme
-    addTheme(formData);
+    if (!themeInEdit) {
+      addTheme(formData);
+    } else {
+      updateTheme(formData);
+    }
 
     // close modal
     modalHandler();
@@ -125,7 +137,11 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
         </InputGroup>
       </div>
 
-      <Button>Add theme</Button>
+      {!themeInEdit ? (
+        <Button>Add theme</Button>
+      ) : (
+        <Button>Update theme</Button>
+      )}
     </ModalForm>
   );
 };

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

@@ -19,9 +19,15 @@ export const ThemeEditor = (props: Props): JSX.Element => {
     theme: { userThemes },
   } = useSelector((state: State) => state);
 
-  const { deleteTheme } = bindActionCreators(actionCreators, useDispatch());
+  const { deleteTheme, editTheme } = bindActionCreators(
+    actionCreators,
+    useDispatch()
+  );
 
-  const updateHandler = (theme: Theme) => {};
+  const updateHandler = (theme: Theme) => {
+    props.modalHandler();
+    editTheme(theme);
+  };
 
   const deleteHandler = (theme: Theme) => {
     if (window.confirm(`Are you sure you want to delete this theme?`)) {