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