Moved entityInUpdate to app state. It applies for apps, categories and bookmarks

client/src/components/Apps/AppForm/AppForm.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
-import { useDispatch } from 'react-redux';
-import { App, NewApp } from '../../../interfaces';
+import { useDispatch, useSelector } from 'react-redux';
+import { NewApp } from '../../../interfaces';
 
 import classes from './AppForm.module.css';
 
@@ -8,29 +8,34 @@ import { ModalForm, InputGroup, Button } from '../../UI';
 import { inputHandler, newAppTemplate } from '../../../utility';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
+import { State } from '../../../store/reducers';
 
 interface Props {
   modalHandler: () => void;
-  app?: App;
 }
 
-export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
+export const AppForm = ({ modalHandler }: Props): JSX.Element => {
+  const { appInUpdate } = useSelector((state: State) => state.apps);
+
   const dispatch = useDispatch();
-  const { addApp, updateApp } = bindActionCreators(actionCreators, dispatch);
+  const { addApp, updateApp, setEditApp } = bindActionCreators(
+    actionCreators,
+    dispatch
+  );
 
   const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [formData, setFormData] = useState<NewApp>(newAppTemplate);
 
   useEffect(() => {
-    if (app) {
+    if (appInUpdate) {
       setFormData({
-        ...app,
+        ...appInUpdate,
       });
     } else {
       setFormData(newAppTemplate);
     }
-  }, [app]);
+  }, [appInUpdate]);
 
   const inputChangeHandler = (
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
@@ -66,7 +71,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
       return data;
     };
 
-    if (!app) {
+    if (!appInUpdate) {
       if (customIcon) {
         const data = createFormData();
         addApp(data);
@@ -76,14 +81,15 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
     } else {
       if (customIcon) {
         const data = createFormData();
-        updateApp(app.id, data);
+        updateApp(appInUpdate.id, data);
       } else {
-        updateApp(app.id, formData);
+        updateApp(appInUpdate.id, formData);
         modalHandler();
       }
     }
 
     setFormData(newAppTemplate);
+    setEditApp(null);
   };
 
   return (
@@ -182,7 +188,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
         </select>
       </InputGroup>
 
-      {!app ? (
+      {!appInUpdate ? (
         <Button>Add new application</Button>
       ) : (
         <Button>Update application</Button>

client/src/components/Apps/Apps.tsx

@@ -19,7 +19,6 @@ import { AppForm } from './AppForm/AppForm';
 import { AppTable } from './AppTable/AppTable';
 
 // Utils
-import { appTemplate } from '../../utility';
 import { State } from '../../store/reducers';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../store';
@@ -37,7 +36,7 @@ export const Apps = (props: Props): JSX.Element => {
 
   // Get Redux action creators
   const dispatch = useDispatch();
-  const { getApps } = bindActionCreators(actionCreators, dispatch);
+  const { getApps, setEditApp } = bindActionCreators(actionCreators, dispatch);
 
   // Load apps if array is empty
   useEffect(() => {
@@ -49,8 +48,6 @@ export const Apps = (props: Props): JSX.Element => {
   // Form
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [showTable, setShowTable] = useState(false);
-  const [isInUpdate, setIsInUpdate] = useState(false);
-  const [appInUpdate, setAppInUpdate] = useState<App>(appTemplate);
 
   // Observe if user is authenticated -> set default view if not
   useEffect(() => {
@@ -63,28 +60,21 @@ export const Apps = (props: Props): JSX.Element => {
   // Form actions
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
-    setIsInUpdate(false);
   };
 
   const toggleEdit = (): void => {
     setShowTable(!showTable);
-    setIsInUpdate(false);
   };
 
   const openFormForUpdating = (app: App): void => {
-    setAppInUpdate(app);
-    setIsInUpdate(true);
+    setEditApp(app);
     setModalIsOpen(true);
   };
 
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}>
-        {!isInUpdate ? (
-          <AppForm modalHandler={toggleModal} />
-        ) : (
-          <AppForm modalHandler={toggleModal} app={appInUpdate} />
-        )}
+        <AppForm modalHandler={toggleModal} />
       </Modal>
 
       <Headline
@@ -94,7 +84,14 @@ export const Apps = (props: Props): JSX.Element => {
 
       {isAuthenticated && (
         <div className={classes.ActionsContainer}>
-          <ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
+          <ActionButton
+            name="Add"
+            icon="mdiPlusBox"
+            handler={() => {
+              setEditApp(null);
+              toggleModal();
+            }}
+          />
           <ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
         </div>
       )}