From ad92de141b21e5e0e898516d7ad0135ea94c0cdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Fri, 25 Mar 2022 11:33:42 +0100
Subject: [PATCH] API routes to edit and delete custom themes. Added
 ThemeEditor table

---
 .../Themer/ThemeBuilder/ThemeEditor.tsx       | 42 ++++++++++++++++++-
 controllers/themes/deleteTheme.js             | 22 ++++++++++
 controllers/themes/index.js                   |  2 +
 controllers/themes/updateTheme.js             | 32 ++++++++++++++
 routes/themes.js                              | 12 +++++-
 5 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 controllers/themes/deleteTheme.js
 create mode 100644 controllers/themes/updateTheme.js

diff --git a/client/src/components/Settings/Themer/ThemeBuilder/ThemeEditor.tsx b/client/src/components/Settings/Themer/ThemeBuilder/ThemeEditor.tsx
index b899049..7a876f5 100644
--- a/client/src/components/Settings/Themer/ThemeBuilder/ThemeEditor.tsx
+++ b/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>
   );
 };
diff --git a/controllers/themes/deleteTheme.js b/controllers/themes/deleteTheme.js
new file mode 100644
index 0000000..668b0e1
--- /dev/null
+++ b/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;
diff --git a/controllers/themes/index.js b/controllers/themes/index.js
index 7ec3b92..b87adb5 100644
--- a/controllers/themes/index.js
+++ b/controllers/themes/index.js
@@ -1,4 +1,6 @@
 module.exports = {
   getThemes: require('./getThemes'),
   addTheme: require('./addTheme'),
+  deleteTheme: require('./deleteTheme'),
+  updateTheme: require('./updateTheme'),
 };
diff --git a/controllers/themes/updateTheme.js b/controllers/themes/updateTheme.js
new file mode 100644
index 0000000..e3a048c
--- /dev/null
+++ b/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;
diff --git a/routes/themes.js b/routes/themes.js
index 42d6b35..5886aae 100644
--- a/routes/themes.js
+++ b/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;