From 12974ab01b8e84bd3fd9dc6ff9c6a812ecb0cb8b Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 23 Jun 2021 15:27:46 +0200 Subject: [PATCH] Upload custom icon on client --- Dockerfile | 2 +- Dockerfile.multiarch | 2 +- .../Apps/AppForm/AppForm.module.css | 7 ++ .../src/components/Apps/AppForm/AppForm.tsx | 90 ++++++++++++++----- client/src/store/actions/app.ts | 8 +- controllers/apps.js | 1 - 6 files changed, 81 insertions(+), 29 deletions(-) create mode 100644 client/src/components/Apps/AppForm/AppForm.module.css diff --git a/Dockerfile b/Dockerfile index 95ddea4..ac2a11a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -10,7 +10,7 @@ RUN npm install --production COPY . . -RUN mkdir -p ./public ./data \ +RUN mkdir -p ./public ./data ./data/uploads \ && cd ./client \ && npm install --production \ && npm run build \ diff --git a/Dockerfile.multiarch b/Dockerfile.multiarch index 808b815..c379e7b 100644 --- a/Dockerfile.multiarch +++ b/Dockerfile.multiarch @@ -11,7 +11,7 @@ RUN apk --no-cache --virtual build-dependencies add python make g++ \ COPY . . -RUN mkdir -p ./public ./data \ +RUN mkdir -p ./public ./data ./data/uploads \ && cd ./client \ && npm install --production \ && npm run build \ diff --git a/client/src/components/Apps/AppForm/AppForm.module.css b/client/src/components/Apps/AppForm/AppForm.module.css new file mode 100644 index 0000000..66b15a0 --- /dev/null +++ b/client/src/components/Apps/AppForm/AppForm.module.css @@ -0,0 +1,7 @@ +.Switch { + text-decoration: underline; +} + +.Switch:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/client/src/components/Apps/AppForm/AppForm.tsx b/client/src/components/Apps/AppForm/AppForm.tsx index e9c7beb..61d2023 100644 --- a/client/src/components/Apps/AppForm/AppForm.tsx +++ b/client/src/components/Apps/AppForm/AppForm.tsx @@ -3,18 +3,23 @@ import { connect } from 'react-redux'; import { addApp, updateApp } from '../../../store/actions'; import { App, NewApp } from '../../../interfaces'; +import classes from './AppForm.module.css'; + import ModalForm from '../../UI/Forms/ModalForm/ModalForm'; import InputGroup from '../../UI/Forms/InputGroup/InputGroup'; import Button from '../../UI/Buttons/Button/Button'; +import axios from 'axios'; interface ComponentProps { modalHandler: () => void; - addApp: (formData: NewApp) => any; + addApp: (formData: NewApp | FormData) => any; updateApp: (id: number, formData: NewApp) => any; app?: App; } const AppForm = (props: ComponentProps): JSX.Element => { + const [useCustomIcon, toggleUseCustomIcon] = useState(true); + const [customIcon, setCustomIcon] = useState(null); const [formData, setFormData] = useState({ name: '', url: '', @@ -52,11 +57,27 @@ const AppForm = (props: ComponentProps): JSX.Element => { }) } + const fileChangeHandler = (e: ChangeEvent): void => { + if (e.target.files) { + setCustomIcon(e.target.files[0]); + } + } + const formSubmitHandler = (e: SyntheticEvent): void => { e.preventDefault(); if (!props.app) { - props.addApp(formData); + if (customIcon) { + const data = new FormData(); + data.append('icon', customIcon); + + data.append('name', formData.name); + data.append('url', formData.url); + + props.addApp(data); + } else { + props.addApp(formData); + } } else { props.updateApp(props.app.id, formData); props.modalHandler(); @@ -108,26 +129,51 @@ const AppForm = (props: ComponentProps): JSX.Element => { - - - inputChangeHandler(e)} - /> - - Use icon name from MDI. - - {' '}Click here for reference - - - + {!useCustomIcon + // use mdi icon + ? ( + + inputChangeHandler(e)} + /> + + Use icon name from MDI. + + {' '}Click here for reference + + + toggleUseCustomIcon(!useCustomIcon)} + className={classes.Switch}> + Switch to custom icon upload + + ) + // upload custom icon + : ( + + fileChangeHandler(e)} + accept='.jpg,.jpeg,.png' + /> + toggleUseCustomIcon(!useCustomIcon)} + className={classes.Switch}> + Switch to MDI + + ) + } {!props.app ? : diff --git a/client/src/store/actions/app.ts b/client/src/store/actions/app.ts index 97db1c7..3a8e7d5 100644 --- a/client/src/store/actions/app.ts +++ b/client/src/store/actions/app.ts @@ -61,7 +61,7 @@ export interface AddAppAction { payload: App; } -export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => { +export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => { try { const res = await axios.post>('/api/apps', formData); @@ -69,7 +69,7 @@ export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => { type: ActionTypes.createNotification, payload: { title: 'Success', - message: `App ${formData.name} added` + message: `App added` } }) @@ -116,7 +116,7 @@ export interface UpdateAppAction { payload: App; } -export const updateApp = (id: number, formData: NewApp) => async (dispatch: Dispatch) => { +export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => { try { const res = await axios.put>(`/api/apps/${id}`, formData); @@ -124,7 +124,7 @@ export const updateApp = (id: number, formData: NewApp) => async (dispatch: Disp type: ActionTypes.createNotification, payload: { title: 'Success', - message: `App ${formData.name} updated` + message: `App updated` } }) diff --git a/controllers/apps.js b/controllers/apps.js index 267daa3..238c66b 100644 --- a/controllers/apps.js +++ b/controllers/apps.js @@ -17,7 +17,6 @@ exports.createApp = asyncWrapper(async (req, res, next) => { let _body = { ...req.body }; if (req.file) { - console.log(req.file.filename) _body.icon = req.file.filename; }