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

This commit is contained in:
Paweł Malak 2022-03-25 11:33:42 +01:00
parent bd96f6ca50
commit ad92de141b
5 changed files with 107 additions and 3 deletions

View file

@ -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 { interface Props {
modalHandler: () => void; modalHandler: () => void;
} }
export const ThemeEditor = (props: Props): JSX.Element => { 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 ( return (
<ModalForm formHandler={() => {}} modalHandler={props.modalHandler}> <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> </ModalForm>
); );
}; };

View file

@ -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;

View file

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

View file

@ -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;

View file

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