fix: send only necessary properties when editing

graasp · Jun 4, 2021 · eb26682 · eb26682
1 parent 4143c57
commit eb26682
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 53 deletions.
diff --git a/cypress/support/commands/item.js b/cypress/support/commands/item.js
@@ -63,9 +63,11 @@ Cypress.Commands.add('fillTreeModal', (toItemPath) => {
 Cypress.Commands.add(
   'fillBaseItemModal',
   ({ name = '', description = '' }, { confirm = true } = {}) => {
-    cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).clear().type(name);
+    cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).type(`{selectall}${name}`);
 
-    cy.get(`#${ITEM_FORM_DESCRIPTION_INPUT_ID}`).clear().type(description);
+    cy.get(`#${ITEM_FORM_DESCRIPTION_INPUT_ID}`).type(
+      `{selectall}${description}`,
+    );
 
     if (confirm) {
       cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
@@ -78,7 +80,7 @@ Cypress.Commands.add(
   ({ name = '', extra = {}, description = '' }, { confirm = true } = {}) => {
     cy.fillBaseItemModal({ name, description }, { confirm: false });
 
-    cy.get(`#${ITEM_FORM_IMAGE_INPUT_ID}`).clear().type(extra.image);
+    cy.get(`#${ITEM_FORM_IMAGE_INPUT_ID}`).type(`{selectall}${extra.image}`);
 
     if (confirm) {
       cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
@@ -89,9 +91,9 @@ Cypress.Commands.add(
 Cypress.Commands.add(
   'fillLinkModal',
   ({ extra = {} }, { confirm = true } = {}) => {
-    cy.get(`#${ITEM_FORM_LINK_INPUT_ID}`)
-      .clear()
-      .type(getEmbeddedLinkExtra(extra)?.url);
+    cy.get(`#${ITEM_FORM_LINK_INPUT_ID}`).type(
+      `{selectall}${getEmbeddedLinkExtra(extra)?.url}`,
+    );
 
     if (confirm) {
       cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
@@ -104,9 +106,9 @@ Cypress.Commands.add(
   ({ name = '', description = '', extra = {} }, { confirm = true } = {}) => {
     cy.fillBaseItemModal({ name, description }, { confirm: false });
 
-    cy.get(ITEM_FORM_DOCUMENT_TEXT_SELECTOR)
-      .clear()
-      .type(getDocumentExtra(extra)?.content);
+    cy.get(ITEM_FORM_DOCUMENT_TEXT_SELECTOR).type(
+      `{selectall}${getDocumentExtra(extra)?.content}`,
+    );
 
     if (confirm) {
       cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
@@ -119,7 +121,9 @@ Cypress.Commands.add(
   ({ name = '', description = '', extra = {} }, { confirm = true } = {}) => {
     cy.fillBaseItemModal({ name, description }, { confirm: false });
 
-    cy.get(`#${ITEM_FORM_APP_URL_ID}`).clear().type(getAppExtra(extra)?.url);
+    cy.get(`#${ITEM_FORM_APP_URL_ID}`).type(
+      `{selectall}${getAppExtra(extra)?.url}`,
+    );
 
     if (confirm) {
       cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();

diff --git a/src/components/context/EditItemModalContext.js b/src/components/context/EditItemModalContext.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
@@ -8,7 +8,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import { makeStyles } from '@material-ui/core';
 import PropTypes from 'prop-types';
 import { useMutation } from 'react-query';
-import SpaceForm from '../item/form/SpaceForm';
+import FolderForm from '../item/form/FolderForm';
 import { ITEM_FORM_CONFIRM_BUTTON_ID } from '../../config/selectors';
 import { ITEM_TYPES } from '../../enums';
 import BaseItemForm from '../item/form/BaseItemForm';
@@ -27,16 +27,14 @@ const useStyles = makeStyles(() => ({
 const EditItemModalProvider = ({ children }) => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const [updatedItem, setUpdatedItem] = useState(null);
   const mutation = useMutation(EDIT_ITEM_MUTATION_KEY);
 
+  // updated properties are separated from the original item
+  // so only necessary properties are sent when editing
+  const [updatedProperties, setUpdatedItem] = useState({});
   const [open, setOpen] = useState(false);
   const [item, setItem] = useState(null);
 
-  useEffect(() => {
-    setUpdatedItem(item);
-  }, [item, setUpdatedItem]);
-
   const openModal = (newItem) => {
     setOpen(true);
     setItem(newItem);
@@ -48,22 +46,41 @@ const EditItemModalProvider = ({ children }) => {
   };
 
   const submit = () => {
-    mutation.mutate(updatedItem);
+    // add id to changed properties
+    mutation.mutate({ id: item.id, ...updatedProperties });
     onClose();
   };
 
   const renderForm = () => {
-    switch (updatedItem?.type) {
+    switch (item?.type) {
       case ITEM_TYPES.DOCUMENT:
-        return <DocumentForm onChange={setUpdatedItem} item={updatedItem} />;
+        return (
+          <DocumentForm
+            onChange={setUpdatedItem}
+            item={item}
+            updatedProperties={updatedProperties}
+          />
+        );
       case ITEM_TYPES.FOLDER:
-        return <SpaceForm onChange={setUpdatedItem} item={updatedItem} />;
+        return (
+          <FolderForm
+            onChange={setUpdatedItem}
+            item={item}
+            updatedProperties={updatedProperties}
+          />
+        );
       case ITEM_TYPES.FILE:
       case ITEM_TYPES.S3_FILE:
       case ITEM_TYPES.LINK:
       case ITEM_TYPES.SHORTCUT:
       case ITEM_TYPES.APP:
-        return <BaseItemForm onChange={setUpdatedItem} item={updatedItem} />;
+        return (
+          <BaseItemForm
+            onChange={setUpdatedItem}
+            item={item}
+            updatedProperties={updatedProperties}
+          />
+        );
       default:
         return null;
     }

diff --git a/src/components/item/form/BaseItemForm.js b/src/components/item/form/BaseItemForm.js
@@ -14,16 +14,16 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BaseForm = ({ onChange, item }) => {
+const BaseForm = ({ onChange, item, updatedProperties }) => {
   const { t } = useTranslation();
   const classes = useStyles();
 
   const handleNameInput = (event) => {
-    onChange({ ...item, name: event.target.value });
+    onChange({ ...updatedProperties, name: event.target.value });
   };
 
   const handleDescriptionInput = (event) => {
-    onChange({ ...item, description: event.target.value });
+    onChange({ ...updatedProperties, description: event.target.value });
   };
 
   return (
@@ -33,15 +33,15 @@ const BaseForm = ({ onChange, item }) => {
         margin="dense"
         id={ITEM_FORM_NAME_INPUT_ID}
         label={t('Name')}
-        value={item?.name}
+        value={updatedProperties?.name || item?.name}
         onChange={handleNameInput}
         className={classes.shortInputField}
       />
       <TextField
         id={ITEM_FORM_DESCRIPTION_INPUT_ID}
         margin="dense"
         label={t('Description')}
-        value={item?.description}
+        value={updatedProperties?.description || item?.description}
         onChange={handleDescriptionInput}
         rows={4}
         rowsMax={4}
@@ -52,6 +52,10 @@ const BaseForm = ({ onChange, item }) => {
 };
 
 BaseForm.propTypes = {
+  updatedProperties: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+  }),
   onChange: PropTypes.string.isRequired,
   item: PropTypes.shape({
     name: PropTypes.string,
@@ -64,4 +68,8 @@ BaseForm.propTypes = {
   }).isRequired,
 };
 
+BaseForm.defaultProps = {
+  updatedProperties: {},
+};
+
 export default BaseForm;
diff --git a/src/components/item/form/DocumentForm.js b/src/components/item/form/DocumentForm.js
@@ -12,21 +12,27 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const DocumentForm = ({ onChange, item }) => {
+const DocumentForm = ({ onChange, item, updatedProperties }) => {
   const classes = useStyles();
 
   const handleOnChange = (content) => {
     onChange({
-      ...item,
+      ...updatedProperties,
       extra: buildDocumentExtra({ content }),
     });
   };
 
-  const value = getDocumentExtra(item?.extra)?.content;
+  const value =
+    getDocumentExtra(updatedProperties?.extra)?.content ||
+    getDocumentExtra(item?.extra)?.content;
 
   return (
     <>
-      <BaseForm onChange={onChange} item={item} />
+      <BaseForm
+        onChange={onChange}
+        item={item}
+        updatedProperties={updatedProperties}
+      />
       <div className={classes.textEditorWrapper}>
         <TextEditor
           id={ITEM_FORM_DOCUMENT_TEXT_ID}
@@ -43,6 +49,9 @@ DocumentForm.propTypes = {
   item: PropTypes.shape({
     extra: PropTypes.shape({}),
   }).isRequired,
+  updatedProperties: PropTypes.shape({
+    extra: PropTypes.shape({}),
+  }).isRequired,
 };
 
 export default DocumentForm;
diff --git a/src/components/item/form/SpaceForm.js → src/components/item/form/FolderForm.js b/src/components/item/form/SpaceForm.js → src/components/item/form/FolderForm.js
@@ -5,30 +5,39 @@ import TextField from '@material-ui/core/TextField';
 import { ITEM_FORM_IMAGE_INPUT_ID } from '../../../config/selectors';
 import BaseItemForm from './BaseItemForm';
 
-const ItemForm = ({ onChange, item }) => {
+const FolderForm = ({ onChange, item, updatedProperties }) => {
   const { t } = useTranslation();
 
   const handleImageUrlInput = (event) => {
-    onChange({ ...item, extra: { image: event.target.value } });
+    onChange({ ...updatedProperties, extra: { image: event.target.value } });
   };
 
   return (
     <>
-      <BaseItemForm onChange={onChange} item={item} />
+      <BaseItemForm
+        onChange={onChange}
+        item={item}
+        updatedProperties={updatedProperties}
+      />
 
       <TextField
         id={ITEM_FORM_IMAGE_INPUT_ID}
         margin="dense"
         label={t('Image (URL)')}
-        value={item?.extra?.image}
+        value={updatedProperties?.extra?.image || item?.extra?.image}
         onChange={handleImageUrlInput}
         fullWidth
       />
     </>
   );
 };
 
-ItemForm.propTypes = {
+FolderForm.propTypes = {
+  updatedProperties: PropTypes.shape({
+    extra: PropTypes.shape({
+      image: PropTypes.string,
+    }),
+  }),
   onChange: PropTypes.func.isRequired,
   classes: PropTypes.shape({
     shortInputField: PropTypes.string.isRequired,
@@ -45,8 +54,9 @@ ItemForm.propTypes = {
   }),
 };
 
-ItemForm.defaultProps = {
+FolderForm.defaultProps = {
   item: {},
+  updatedProperties: {},
 };
 
-export default ItemForm;
+export default FolderForm;