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>
   );
 };

controllers/themes/deleteTheme.js

@@ -0,0 +1,22 @@
+const asyncWrapper = require('../../middleware/asyncWrapper');
+const File = require('../../utils/File');
+
+// @desc      Delete theme
+// @route     DELETE /api/themes/:name
+// @access    Public
+const deleteTheme = asyncWrapper(async (req, res, next) => {
+  const file = new File('data/themes.json');
+  let content = JSON.parse(file.read());
+
+  content.themes = content.themes.filter((t) => t.name != req.params.name);
+  file.write(content, true);
+
+  const userThemes = content.themes.filter((t) => t.isCustom);
+
+  res.status(200).json({
+    success: true,
+    data: userThemes,
+  });
+});
+
+module.exports = deleteTheme;

controllers/themes/index.js

@@ -1,4 +1,6 @@
 module.exports = {
   getThemes: require('./getThemes'),
   addTheme: require('./addTheme'),
+  deleteTheme: require('./deleteTheme'),
+  updateTheme: require('./updateTheme'),
 };

controllers/themes/updateTheme.js

@@ -0,0 +1,32 @@
+const asyncWrapper = require('../../middleware/asyncWrapper');
+const File = require('../../utils/File');
+
+// @desc      Update theme
+// @route     PUT /api/themes/:name
+// @access    Public
+const updateTheme = asyncWrapper(async (req, res, next) => {
+  const file = new File('data/themes.json');
+  let content = JSON.parse(file.read());
+
+  let themeIdx = content.themes.findIndex((t) => t.name == req.params.name);
+
+  // theme found
+  if (themeIdx > -1) {
+    content.themes = [
+      ...content.themes.slice(0, themeIdx),
+      req.body,
+      ...content.themes.slice(themeIdx + 1),
+    ];
+  }
+
+  file.write(content, true);
+
+  const userThemes = content.themes.filter((t) => t.isCustom);
+
+  res.status(200).json({
+    success: true,
+    data: userThemes,
+  });
+});
+
+module.exports = updateTheme;

routes/themes.js

@@ -4,7 +4,12 @@ const router = express.Router();
 // middleware
 const { auth, requireAuth, requireBody } = require('../middleware');
 
-const { getThemes, addTheme } = require('../controllers/themes/');
+const {
+  getThemes,
+  addTheme,
+  deleteTheme,
+  updateTheme,
+} = require('../controllers/themes/');
 
 router
   .route('/')
@@ -16,4 +21,9 @@ router
     addTheme
   );
 
+router
+  .route('/:name')
+  .delete(auth, requireAuth, deleteTheme)
+  .put(auth, requireAuth, updateTheme);
+
 module.exports = router;