API routes to edit and delete custom themes. Added ThemeEditor table

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

@@ -1,13 +1,51 @@
-import { ModalForm } from '../../../UI';
+import { Fragment } from 'react';
+
+// Redux
+import { useSelector, useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Theme } from '../../../../interfaces';
+import { actionCreators } from '../../../../store';
+import { State } from '../../../../store/reducers';
+
+// Other
+import { ActionIcons, CompactTable, Icon, ModalForm } from '../../../UI';
 
 interface Props {
   modalHandler: () => void;
 }
 
 export const ThemeEditor = (props: Props): JSX.Element => {
+  const {
+    theme: { userThemes },
+  } = useSelector((state: State) => state);
+
+  const { deleteTheme } = bindActionCreators(actionCreators, useDispatch());
+
+  const updateHandler = (theme: Theme) => {};
+
+  const deleteHandler = (theme: Theme) => {
+    if (window.confirm(`Are you sure you want to delete this theme?`)) {
+      deleteTheme(theme.name);
+    }
+  };
+
   return (
     <ModalForm formHandler={() => {}} modalHandler={props.modalHandler}>
-      <h1>edit</h1>
+      <CompactTable headers={['Name', 'Actions']}>
+        {userThemes.map((t, idx) => (
+          <Fragment key={idx}>
+            <span>{t.name}</span>
+            <ActionIcons>
+              <span onClick={() => updateHandler(t)}>
+                <Icon icon="mdiPencil" />
+              </span>
+              <span onClick={() => deleteHandler(t)}>
+                <Icon icon="mdiDelete" />
+              </span>
+            </ActionIcons>
+          </Fragment>
+        ))}
+      </CompactTable>
     </ModalForm>
   );
 };