Merge pull request #14 from graasp/13/ws-children-updates

#13 feat: add real-time updates for children recursively

README.md

@@ -8,20 +8,20 @@
 
 ```
 REACT_APP_API_HOST=http://localhost:3000
-PORT=3111
+PORT=3112
 REACT_APP_SHOW_NOTIFICATIONS=true
 REACT_APP_AUTHENTICATION_HOST=http://localhost:3001
 ```
 
-4. Run `yarn start`. The client should be accessible at `localhost:3111`
+4. Run `yarn start`. The client should be accessible at `localhost:3112`
 
 ## Testing
 
 Set the following environnement variables in `.env.test`
 
 ```
 REACT_APP_API_HOST=http://localhost:3000
-PORT=3111
+PORT=3112
 REACT_APP_SHOW_NOTIFICATIONS=false
 REACT_APP_NODE_ENV=test
 ```

cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:3000",
+  "baseUrl": "http://localhost:3112",
   "video": false,
   "retries": {
     "runMode": 2

cypress/integration/ws.spec.js

@@ -0,0 +1,90 @@
+import { WebSocket } from '@graasp/websockets/test/mock-client';
+import { buildMainPath } from '../../src/config/paths';
+import {
+  buildFolderButtonId,
+  FOLDER_NAME_TITLE_CLASS,
+} from '../../src/config/selectors';
+import { FOLDER_WITH_SUBFOLDER_ITEM } from '../fixtures/items';
+import { CURRENT_USER } from '../fixtures/members';
+import { expectFolderButtonLayout } from '../support/integrationUtils';
+import { mockGetChildren, mockGetItem } from '../support/server';
+
+function beforeWs(visitRoute, wsClientStub) {
+  cy.visit(visitRoute, {
+    onBeforeLoad: (win) => {
+      cy.stub(win, 'WebSocket', () => wsClientStub);
+    },
+  });
+}
+
+describe('Websocket interactions', () => {
+  let client;
+  const { items } = FOLDER_WITH_SUBFOLDER_ITEM;
+  const newChild = {
+    ...FOLDER_WITH_SUBFOLDER_ITEM.items[1],
+    id: 'deadbeef-aaaa-bbbb-cccc-0242ac130002',
+    name: 'newChild',
+  };
+
+  beforeEach(() => {
+    client = new WebSocket();
+    mockGetItem({ items, currentMember: CURRENT_USER }, false);
+    mockGetChildren(items);
+  });
+
+  it('Displays create child update', () => {
+    const parent = FOLDER_WITH_SUBFOLDER_ITEM.items[0];
+    beforeWs(buildMainPath({ rootId: parent.id, id: null }), client);
+
+    cy.get(`.${FOLDER_NAME_TITLE_CLASS}`)
+      .should('contain', parent.name)
+      .then(() => {
+        expectFolderButtonLayout(FOLDER_WITH_SUBFOLDER_ITEM.items[1]);
+
+        // also add to mock data to avoid error while refetching
+        items.push(newChild);
+        // receive create update for subfolder
+        client.receive({
+          realm: 'notif',
+          type: 'update',
+          channel: parent.id,
+          body: {
+            entity: 'item',
+            kind: 'childItem',
+            op: 'create',
+            value: newChild,
+          },
+        });
+
+        expectFolderButtonLayout(newChild);
+      });
+  });
+
+  it('Displays remove child update', () => {
+    const parent = FOLDER_WITH_SUBFOLDER_ITEM.items[0];
+    beforeWs(buildMainPath({ rootId: parent.id, id: null }), client);
+
+    // button should exist
+    cy.get(`#${buildFolderButtonId(newChild.id)}`)
+      .should('exist')
+      .then(() => {
+        expectFolderButtonLayout(FOLDER_WITH_SUBFOLDER_ITEM.items[1]);
+
+        // receive remove update for subfolder
+        client.receive({
+          realm: 'notif',
+          type: 'update',
+          channel: parent.id,
+          body: {
+            entity: 'item',
+            kind: 'childItem',
+            op: 'delete',
+            value: newChild,
+          },
+        });
+
+        // button should be removed
+        cy.get(`#${buildFolderButtonId(newChild.id)}`).should('not.exist');
+      });
+  });
+});

package.json

@@ -67,6 +67,7 @@
     ]
   },
   "devDependencies": {
+    "@graasp/websockets": "git://github.com/graasp/graasp-websockets.git",
     "@commitlint/cli": "12.1.1",
     "@commitlint/config-conventional": "12.1.1",
     "@cypress/code-coverage": "3.9.6",

src/components/common/Item.js

@@ -11,7 +11,7 @@ import {
 import Alert from '@material-ui/lab/Alert';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import { hooks } from '../../config/queryClient';
+import { hooks, ws } from '../../config/queryClient';
 import { ITEM_TYPES } from '../../enums';
 import FolderButton from './FolderButton';
 import {
@@ -38,9 +38,11 @@ const Item = ({ id, isChildren }) => {
   const { data: item, isLoading, isError } = useItem(id);
 
   // fetch children if item is folder
+  const isFolder = Boolean(item?.get('type') === ITEM_TYPES.FOLDER);
   const { data: children, isLoading: isChildrenLoading } = useChildren(id, {
-    enabled: Boolean(item?.get('type') === ITEM_TYPES.FOLDER),
+    enabled: isFolder,
   });
+  ws.hooks.useChildrenUpdates(isFolder ? id : null);
 
   // fetch file content if type is file
   const { data: content, isError: isFileError } = useFileContent(id, {

src/components/common/MainMenu.js

@@ -8,7 +8,7 @@ import {
   Loader,
 } from '@graasp/ui';
 import { buildTreeItemClass, MAIN_MENU_ID } from '../../config/selectors';
-import { hooks } from '../../config/queryClient';
+import { hooks, ws } from '../../config/queryClient';
 import { ITEM_TYPES } from '../../enums';
 
 const { useItem, useChildren } = hooks;
@@ -23,13 +23,18 @@ const MainMenu = () => {
     isLoading: rootItemIsLoading,
     isError: rootItemIsError,
   } = useItem(rootId);
+
+  const isFolder = Boolean(
+    rootItem && rootItem.get('type') === ITEM_TYPES.FOLDER,
+  );
   const {
     data: children,
     isLoading,
     isError: childrenIsError,
   } = useChildren(rootId, {
-    enabled: Boolean(rootItem && rootItem.get('type') === ITEM_TYPES.FOLDER),
+    enabled: isFolder,
   });
+  ws.hooks.useChildrenUpdates(isFolder ? rootId : null);
 
   // display nothing when no item is defined
   if (!rootId) {
@@ -44,13 +49,19 @@ const MainMenu = () => {
     return <Alert severity="error">{t('An unexpected error occured.')}</Alert>;
   }
 
+  const useChildrenWithUpdates = (childId, ...args) => {
+    const ret = useChildren(childId, ...args);
+    ws.hooks.useChildrenUpdates(childId);
+    return ret;
+  };
+
   return (
     <GraaspMainMenu id={MAIN_MENU_ID}>
       <DynamicTreeView
         rootLabel={rootItem.get('name')}
         rootId={rootId}
         useItem={useItem}
-        useChildren={useChildren}
+        useChildren={useChildrenWithUpdates}
         buildTreeItemClass={(nodeId) => buildTreeItemClass(nodeId)}
         initialExpendedItems={[rootId]}
         showCheckbox={false}

src/config/queryClient.js

@@ -6,16 +6,19 @@ const {
   queryClient,
   QueryClientProvider,
   hooks,
+  ws,
   useMutation,
   ReactQueryDevtools,
 } = configureQueryClient({
   API_HOST,
   notifier,
+  enableWebsocket: true,
 });
 export {
   queryClient,
   QueryClientProvider,
   hooks,
+  ws,
   useMutation,
   ReactQueryDevtools,
 };