diff --git a/client/src/components/Apps/AppForm/AppForm.tsx b/client/src/components/Apps/AppForm/AppForm.tsx index cea768e..f46c7e7 100644 --- a/client/src/components/Apps/AppForm/AppForm.tsx +++ b/client/src/components/Apps/AppForm/AppForm.tsx @@ -1,7 +1,7 @@ -import { useState, ChangeEvent, SyntheticEvent } from 'react'; +import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react'; import { connect } from 'react-redux'; -import { addApp } from '../../../store/actions'; -import { NewApp } from '../../../interfaces/App'; +import { addApp, updateApp } from '../../../store/actions'; +import { App, NewApp } from '../../../interfaces/App'; import classes from './AppForm.module.css'; import Icon from '../../UI/Icons/Icon/Icon'; @@ -9,6 +9,8 @@ import Icon from '../../UI/Icons/Icon/Icon'; interface ComponentProps { modalHandler: Function; addApp: (formData: NewApp) => any; + updateApp: (id: number, formData: NewApp) => any; + app?: App; } const AppForm = (props: ComponentProps): JSX.Element => { @@ -18,6 +20,17 @@ const AppForm = (props: ComponentProps): JSX.Element => { icon: '' }); + useEffect(() => { + if (props.app) { + console.log('app'); + setFormData({ + name: props.app.name, + url: props.app.url, + icon: props.app.icon + }) + } + }, [props.app]) + const _modalHandler = () => { props.modalHandler(); } @@ -31,7 +44,14 @@ const AppForm = (props: ComponentProps): JSX.Element => { const formSubmitHandler = (e: SyntheticEvent): void => { e.preventDefault(); - props.addApp(formData); + + if (!props.app) { + props.addApp(formData); + } else { + props.updateApp(props.app.id, formData); + props.modalHandler(); + } + setFormData({ name: '', url: '', @@ -90,10 +110,13 @@ const AppForm = (props: ComponentProps): JSX.Element => { - + {!props.app + ? + : + } ) } -export default connect(null, { addApp })(AppForm); \ No newline at end of file +export default connect(null, { addApp, updateApp })(AppForm); \ No newline at end of file diff --git a/client/src/components/Apps/AppTable/AppTable.tsx b/client/src/components/Apps/AppTable/AppTable.tsx index 4f72237..072da58 100644 --- a/client/src/components/Apps/AppTable/AppTable.tsx +++ b/client/src/components/Apps/AppTable/AppTable.tsx @@ -9,6 +9,7 @@ interface ComponentProps { apps: App[]; pinApp: (id: number, isPinned: boolean) => void; deleteApp: (id: number) => void; + updateAppHandler: (app: App) => void; } const AppTable = (props: ComponentProps): JSX.Element => { @@ -44,7 +45,11 @@ const AppTable = (props: ComponentProps): JSX.Element => { onClick={() => deleteAppHandler(app)}> -
+
props.updateAppHandler(app)}> + +
props.pinApp(app.id, app.isPinned)}> {app.isPinned? : }
diff --git a/client/src/components/Apps/Apps.tsx b/client/src/components/Apps/Apps.tsx index 4921497..e79696c 100644 --- a/client/src/components/Apps/Apps.tsx +++ b/client/src/components/Apps/Apps.tsx @@ -34,6 +34,16 @@ interface ComponentProps { const Apps = (props: ComponentProps): JSX.Element => { const [modalIsOpen, setModalIsOpen] = useState(false); const [isInEdit, setIsInEdit] = useState(false); + const [isInUpdate, setIsInUpdate] = useState(false); + const [appInUpdate, setAppInUpdate] = useState({ + name: 'string', + url: 'string', + icon: 'string', + isPinned: false, + id: 0, + createdAt: new Date(), + updatedAt: new Date() + }) useEffect(() => { if (props.apps.length === 0) { @@ -43,16 +53,27 @@ const Apps = (props: ComponentProps): JSX.Element => { const toggleModal = (): void => { setModalIsOpen(!modalIsOpen); + setIsInUpdate(false); } const toggleEdit = (): void => { setIsInEdit(!isInEdit); + setIsInUpdate(false); + } + + const toggleUpdate = (app: App): void => { + setAppInUpdate(app); + setIsInUpdate(true); + setModalIsOpen(true); } return ( - + {!isInUpdate + ? + : + } { ? props.apps.length > 0 ? :

You don't have any applications. You can a new one from /application menu

- : ) + : ) }
diff --git a/client/src/store/actions/actionTypes.ts b/client/src/store/actions/actionTypes.ts index 5336541..31016e5 100644 --- a/client/src/store/actions/actionTypes.ts +++ b/client/src/store/actions/actionTypes.ts @@ -3,7 +3,8 @@ import { SetThemeAction, PinAppAction, AddAppAction, - DeleteAppAction + DeleteAppAction, + UpdateAppAction } from './'; export enum ActionTypes { @@ -14,7 +15,8 @@ export enum ActionTypes { pinApp = 'PIN_APP', addApp = 'ADD_APP', addAppSuccess = 'ADD_APP_SUCCESS', - deleteApp = 'DELETE_APP' + deleteApp = 'DELETE_APP', + updateApp = 'UPDATE_APP' } -export type Action = GetAppsAction | SetThemeAction | PinAppAction | AddAppAction | DeleteAppAction; \ No newline at end of file +export type Action = GetAppsAction | SetThemeAction | PinAppAction | AddAppAction | DeleteAppAction | UpdateAppAction; \ No newline at end of file diff --git a/client/src/store/actions/app.ts b/client/src/store/actions/app.ts index 9732a39..d66f325 100644 --- a/client/src/store/actions/app.ts +++ b/client/src/store/actions/app.ts @@ -81,4 +81,22 @@ export const deleteApp = (id: number) => async (dispatch: Dispatch) => { } catch (err) { console.log(err); } +} + +export interface UpdateAppAction { + type: ActionTypes.updateApp; + payload: App; +} + +export const updateApp = (id: number, formData: NewApp) => async (dispatch: Dispatch) => { + try { + const res = await axios.put>(`/api/apps/${id}`, formData); + + dispatch({ + type: ActionTypes.updateApp, + payload: res.data.data + }) + } catch (err) { + console.log(err); + } } \ No newline at end of file diff --git a/client/src/store/reducers/app.ts b/client/src/store/reducers/app.ts index 36c93e7..f3afc57 100644 --- a/client/src/store/reducers/app.ts +++ b/client/src/store/reducers/app.ts @@ -69,6 +69,22 @@ const deleteApp = (state: State, action: Action): State => { } } +const updateApp = (state: State, action: Action): State => { + const tmpApps = [...state.apps]; + const appInUpdate = tmpApps.find((app: App) => app.id === action.payload.id); + + if (appInUpdate) { + appInUpdate.name = action.payload.name; + appInUpdate.url = action.payload.url; + appInUpdate.icon = action.payload.icon; + } + + return { + ...state, + apps: tmpApps + } +} + const appReducer = (state = initialState, action: Action) => { switch (action.type) { case ActionTypes.getApps: return getApps(state, action); @@ -77,6 +93,7 @@ const appReducer = (state = initialState, action: Action) => { case ActionTypes.pinApp: return pinApp(state, action); case ActionTypes.addAppSuccess: return addAppSuccess(state, action); case ActionTypes.deleteApp: return deleteApp(state, action); + case ActionTypes.updateApp: return updateApp(state, action); default: return state; } }