fix: fix edit modal content and navigation (#1499)

* fix: fix edit modal content and navigation

* refactor: remove only

* refactor: apply PR requested changes

cypress/e2e/item/edit/editFolder.cy.ts

@@ -3,7 +3,10 @@ import { PackedFolderItemFactory } from '@graasp/sdk';
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
   EDIT_ITEM_BUTTON_CLASS,
+  EDIT_ITEM_MODAL_CANCEL_BUTTON_ID,
+  FOLDER_FORM_DESCRIPTION_ID,
   ITEM_FORM_CONFIRM_BUTTON_ID,
+  ITEM_FORM_NAME_INPUT_ID,
   buildItemsGridMoreButtonSelector,
 } from '../../../../src/config/selectors';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
@@ -94,4 +97,31 @@ describe('Edit Folder', () => {
       },
     );
   });
+
+  // navigating from parent to child might not update info since the item folder component is the same
+  it('edit 2 folders should display the correct data', () => {
+    const parentItem = PackedFolderItemFactory();
+    const itemToEdit = PackedFolderItemFactory({
+      parentItem,
+      description: 'first description',
+    });
+    cy.setUpApi({ items: [parentItem, itemToEdit] });
+
+    // go to parent item
+    cy.visit(buildItemPath(parentItem.id));
+
+    // open edit
+    cy.get(`.${EDIT_ITEM_BUTTON_CLASS}`).click();
+    cy.get(`#${EDIT_ITEM_MODAL_CANCEL_BUTTON_ID}`).click();
+
+    // go to child
+    cy.goToItemInCard(itemToEdit.id);
+
+    cy.get(`.${EDIT_ITEM_BUTTON_CLASS}`).click();
+    cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).should('have.value', itemToEdit.name);
+    cy.get(`#${FOLDER_FORM_DESCRIPTION_ID} p`).should(
+      'contain',
+      itemToEdit.description,
+    );
+  });
 });

cypress/support/server.ts

@@ -1012,15 +1012,9 @@ export const mockGetItemLoginSchemaType = (items: ItemForTest[]): void => {
       const itemId = url.slice(API_HOST.length).split('/')[2];
       const item = items.find(({ id }) => itemId === id);
 
-      const type = item?.itemLoginSchema?.type;
-      if (!type) {
-        return reply({
-          statusCode: StatusCodes.NOT_FOUND,
-        });
-      }
-
+      // if no item login schema is defined, the backend returns null
       return reply({
-        body: type,
+        body: item?.itemLoginSchema?.type ?? null,
         statusCode: StatusCodes.OK,
       });
     },

src/components/item/edit/EditModal.tsx

@@ -1,4 +1,4 @@
-import { ComponentType as CT, useState } from 'react';
+import { ComponentType as CT, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import {
@@ -57,6 +57,12 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
   // so only necessary properties are sent when editing
   const [updatedItem, setUpdatedItem] = useState<DiscriminatedItem>(item);
 
+  useEffect(() => {
+    if (item.id !== updatedItem.id) {
+      setUpdatedItem(item);
+    }
+  }, [item, updatedItem.id]);
+
   const ComponentType = ((): EditModalContentType => {
     switch (item.type) {
       case ItemType.DOCUMENT:

src/components/layout/Navigation.tsx

@@ -31,14 +31,11 @@ const Navigator = (): JSX.Element | null => {
   const { pathname } = useLocation();
   const { data: currentMember } = useCurrentMember();
   const { data: item, isLoading: isItemLoading } = useItem(itemId);
-  const itemPath = item?.path;
 
   const { pathname: location } = useLocation();
 
   const { data: parents, isLoading: areParentsLoading } = useParents({
     id: itemId,
-    path: itemPath,
-    enabled: !!itemPath,
   });
 
   if (isItemLoading || areParentsLoading) {

src/components/pages/item/ItemScreen.tsx

@@ -7,7 +7,6 @@ import { OutletType } from './type';
 
 const ItemPage = (): JSX.Element => {
   const { item } = useOutletContext<OutletType>();
-
   return (
     <ItemMain item={item}>
       <ItemContent />