feat: enable document edition

cypress/integration/item/edit/editApp.spec.js

@@ -21,7 +21,7 @@ const newFields = {
 
 describe('Edit App', () => {
   describe('View Page', () => {
-    it.only('edit caption', () => {
+    it('edit caption', () => {
       const { id } = GRAASP_APP_ITEM;
       cy.setUpApi({ items: [GRAASP_APP_ITEM] });
       cy.visit(buildItemPath(id));

cypress/integration/item/edit/editDocument.spec.js

@@ -13,8 +13,16 @@ import {
 } from '../../../fixtures/documents';
 import { EDITED_FIELDS } from '../../../fixtures/items';
 import { GRAASP_LINK_ITEM } from '../../../fixtures/links';
-import { EDIT_ITEM_PAUSE } from '../../../support/constants';
+import {
+  CAPTION_EDIT_PAUSE,
+  EDIT_ITEM_PAUSE,
+} from '../../../support/constants';
 import { editItem } from './utils';
+import {
+  buildEditButtonId,
+  buildSaveButtonId,
+  TEXT_EDITOR_CLASS,
+} from '../../../../src/config/selectors';
 
 const content = 'new text';
 const newFields = {
@@ -59,7 +67,7 @@ describe('Edit Document', () => {
       );
     });
 
-    it('edit in item', () => {
+    it('edit in folder', () => {
       cy.setUpApi({ items: GRAASP_DOCUMENT_ITEMS_FIXTURE });
       const parent = GRAASP_DOCUMENT_PARENT_FOLDER;
       // go to children item
@@ -130,7 +138,7 @@ describe('Edit Document', () => {
       );
     });
 
-    it('edit in item', () => {
+    it('edit in folder', () => {
       cy.setUpApi({ items: GRAASP_DOCUMENT_ITEMS_FIXTURE });
       // go to children item
       const parent = GRAASP_DOCUMENT_PARENT_FOLDER;
@@ -164,4 +172,24 @@ describe('Edit Document', () => {
       );
     });
   });
+
+  describe('View Page', () => {
+    it('edit text', () => {
+      const { id } = GRAASP_DOCUMENT_ITEM;
+      cy.setUpApi({ items: [GRAASP_DOCUMENT_ITEM] });
+      cy.visit(buildItemPath(id));
+
+      const caption = 'new text';
+      cy.wait(CAPTION_EDIT_PAUSE);
+      cy.get(`#${buildEditButtonId(id)}`).click();
+      cy.get(`.${TEXT_EDITOR_CLASS}`).type(`{selectall}${caption}`);
+      cy.get(`#${buildSaveButtonId(id)}`).click();
+
+      cy.wait(`@editItem`).then(({ request: { url: endpointUrl, body } }) => {
+        expect(endpointUrl).to.contain(id);
+        // caption content might be wrapped with html tags
+        expect(getDocumentExtra(body?.extra)?.content).to.contain(caption);
+      });
+    });
+  });
 });

cypress/integration/item/itemLogin/itemLogin.spec.js

@@ -167,7 +167,7 @@ describe('Item Login', () => {
     });
   });
 
-  describe.only('Display Item Login Setting', () => {
+  describe('Display Item Login Setting', () => {
     it('edit item login setting', () => {
       cy.setUpApi(ITEM_LOGIN_ITEMS);
 

package.json

@@ -5,7 +5,7 @@
   "license": "AGPL-3.0-only",
   "dependencies": {
     "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git",
-    "@graasp/ui": "git://github.com/graasp/graasp-ui.git#master",
+    "@graasp/ui": "git://github.com/graasp/graasp-ui.git",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.57",

src/components/common/ItemLoginAuthorization.js

@@ -55,7 +55,7 @@ const ItemLoginAuthorization = () => (ChildComponent) => {
       </>
     );
 
-    if (isMemberLoading || isItemLoginLoading || isItemLoading) {
+    if (isMemberLoading || (isItemLoading && !item)) {
       // get item login if the user is not authenticated and the item is empty
       return <Loader />;
     }
@@ -72,6 +72,11 @@ const ItemLoginAuthorization = () => (ChildComponent) => {
 
     // signed out but can sign in with item login
     if ((!user || user.isEmpty()) && itemLogin && !itemLogin.isEmpty()) {
+      if (isItemLoginLoading && !itemLogin) {
+        // get item login if the user is not authenticated and the item is empty
+        return <Loader />;
+      }
+
       return <ItemLoginScreen />;
     }
 

src/components/item/ItemContent.js

@@ -25,6 +25,7 @@ import { API_HOST } from '../../config/constants';
 import { LayoutContext } from '../context/LayoutContext';
 import FileUploader from '../main/FileUploader';
 import Items from '../main/Items';
+import { buildDocumentExtra, getDocumentExtra } from '../../utils/itemExtra';
 
 const {
   useChildren,
@@ -91,6 +92,14 @@ const ItemContent = ({ item }) => {
     setEditingItemId(null);
   };
 
+  const onSaveDocument = (text) => {
+    // edit item only when description has changed
+    if (text !== getDocumentExtra(item?.get('extra')).content) {
+      editItem({ id: itemId, extra: buildDocumentExtra({ content: text }) });
+    }
+    setEditingItemId(null);
+  };
+
   const saveButtonId = buildSaveButtonId(itemId);
 
   switch (itemType) {
@@ -131,7 +140,17 @@ const ItemContent = ({ item }) => {
         </div>
       );
     case ITEM_TYPES.DOCUMENT:
-      return <DocumentItem id={DOCUMENT_ITEM_TEXT_EDITOR_ID} item={item} />;
+      return (
+        <div className={classes.fileWrapper}>
+          <DocumentItem
+            id={DOCUMENT_ITEM_TEXT_EDITOR_ID}
+            item={item}
+            edit={editingItemId}
+            onSave={onSaveDocument}
+            saveButtonId={saveButtonId}
+          />
+        </div>
+      );
     case ITEM_TYPES.APP:
       return (
         <AppItem

src/components/item/form/DocumentForm.js

@@ -42,6 +42,7 @@ const DocumentForm = ({ onChange, item, updatedProperties }) => {
           onChange={handleOnChange}
           edit
           placeholderText={t('Write something...')}
+          showSaveButton={false}
         />
       </div>
     </>

src/components/main/ItemScreen.js

@@ -1,5 +1,4 @@
-import { Loader } from '@graasp/ui';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useParams } from 'react-router';
 import { hooks } from '../../config/queryClient';
 import ErrorAlert from '../common/ErrorAlert';
@@ -13,13 +12,17 @@ const { useItem } = hooks;
 
 const ItemScreen = () => {
   const { itemId } = useParams();
-  const { data: item, isLoading, isError } = useItem(itemId);
+  const { data: item, isError } = useItem(itemId);
 
-  const { isItemSettingsOpen } = useContext(LayoutContext);
+  const { isItemSettingsOpen, setEditingItemId } = useContext(LayoutContext);
 
-  if (isLoading) {
-    return <Loader />;
-  }
+  useEffect(
+    () => () => {
+      setEditingItemId(null);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   if (!itemId || !item || isError) {
     return <ErrorAlert />;

src/config/constants.js

@@ -126,6 +126,7 @@ export const ITEM_TYPES_WITH_CAPTIONS = [
   ITEM_TYPES.FILE,
   ITEM_TYPES.APP,
   ITEM_TYPES.LINK,
+  ITEM_TYPES.DOCUMENT,
 ];
 
 export const MIN_SCREEN_WIDTH = 1000;

src/config/queryClient.js

@@ -14,6 +14,7 @@ const {
   API_HOST,
   notifier,
   enableWebsocket: true,
+  keepPreviousData: true,
 });
 
 export {