fix: use new query client and update dependency versions (#686)

* refactor: fix for new queryclient

* refactor: update query client and types

* fix: update packages and cleanup

---------

Co-authored-by: spaenleh <[email protected]>

cypress/e2e/item/chatbox/chatbox.cy.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { WebSocket } from '@graasp/plugin-websockets/test/mock-client';
+import { MockWebSocket } from '@graasp/query-client';
 
 import { buildItemPath } from '../../../../src/config/paths';
 import {
@@ -27,7 +26,7 @@ describe('Chatbox Scenarios', () => {
   let client;
 
   beforeEach(() => {
-    client = new WebSocket();
+    client = new MockWebSocket();
   });
 
   it('Send messages in chatbox', () => {

cypress/e2e/ws/item.cy.ts

@@ -0,0 +1,140 @@
+import { MockWebSocket } from '@graasp/query-client';
+
+import { SHARED_ITEMS_PATH, buildItemPath } from '../../../src/config/paths';
+import { buildItemsTableRowIdAttribute } from '../../../src/config/selectors';
+import { SAMPLE_ITEMS } from '../../fixtures/items';
+import { CURRENT_USER } from '../../fixtures/members';
+import { WEBSOCKETS_DELAY_TIME } from '../../support/constants';
+
+// paramaterized before, to be called in each test or in beforeEach
+function beforeWs(visitRoute, sampleData, wsClientStub) {
+  cy.setUpApi(sampleData);
+  cy.visit(visitRoute, {
+    onBeforeLoad: (win) => {
+      cy.stub(win, 'WebSocket', () => wsClientStub);
+    },
+  });
+}
+
+describe('Websocket interactions', () => {
+  let client;
+
+  beforeEach(() => {
+    client = new MockWebSocket();
+  });
+
+  describe('sharedWith me items updates', () => {
+    it('displays sharedWith create update', () => {
+      beforeWs(SHARED_ITEMS_PATH, { items: [] }, client);
+
+      cy.wait(WEBSOCKETS_DELAY_TIME);
+
+      const item = SAMPLE_ITEMS.items[0];
+      cy.wait('@getSharedItems').then(() => {
+        // send mock sharedItem create update
+        client.receive({
+          realm: 'notif',
+          type: 'update',
+          topic: 'item/member',
+          channel: CURRENT_USER.id,
+          body: {
+            kind: 'shared',
+            op: 'create',
+            item,
+          },
+        });
+      });
+
+      cy.wait(WEBSOCKETS_DELAY_TIME);
+
+      // assert item is in list
+      cy.get(buildItemsTableRowIdAttribute(item.id)).should('exist');
+    });
+
+    it('displays sharedWith delete update', () => {
+      // create items that do not belong to current user
+      const items = SAMPLE_ITEMS.items.map((i) => ({
+        ...i,
+        creator: 'someoneElse',
+      }));
+      const item = items[0];
+      beforeWs(SHARED_ITEMS_PATH, { items }, client);
+
+      cy.get(buildItemsTableRowIdAttribute(item.id)).then(() => {
+        // send mock sharedItem delete update
+        client.receive({
+          realm: 'notif',
+          type: 'update',
+          topic: 'item/member',
+          channel: CURRENT_USER.id,
+          body: {
+            kind: 'shared',
+            op: 'delete',
+            item,
+          },
+        });
+      });
+
+      cy.wait(WEBSOCKETS_DELAY_TIME);
+      // assert item is not in list anymore
+      cy.get(buildItemsTableRowIdAttribute(item.id)).should('not.exist');
+    });
+  });
+
+  describe('childItem updates', () => {
+    const { id } = SAMPLE_ITEMS.items[0];
+
+    beforeEach(() => {
+      beforeWs(buildItemPath(id), SAMPLE_ITEMS, client);
+
+      // should get children
+      cy.wait('@getChildren').then(({ response: { body } }) => {
+        // check item is created and displayed
+        for (const item of body) {
+          cy.get(buildItemsTableRowIdAttribute(item.id)).should('exist');
+        }
+      });
+    });
+
+    it('displays childItem create update', () => {
+      const item = { ...SAMPLE_ITEMS.items[0], id: 'child0' };
+      // send mock childItem create update
+      client.receive({
+        realm: 'notif',
+        type: 'update',
+        topic: 'item',
+        channel: id,
+        body: {
+          kind: 'child',
+          op: 'create',
+          item,
+        },
+      });
+
+      cy.wait(WEBSOCKETS_DELAY_TIME);
+      // assert item is in list
+      cy.get(buildItemsTableRowIdAttribute(item.id)).should('exist');
+    });
+
+    it('displays childItem delete update', () => {
+      // this item MUST be a child of id above
+      const item = SAMPLE_ITEMS.items[2];
+      // send mock childItem delete update
+      client.receive({
+        realm: 'notif',
+        type: 'update',
+        topic: 'item',
+        channel: id,
+        body: {
+          kind: 'child',
+          op: 'delete',
+          item,
+        },
+      });
+
+      cy.wait(WEBSOCKETS_DELAY_TIME);
+      // assert item is not in list
+      cy.get(buildItemsTableRowIdAttribute(item.id)).should('not.exist');
+    });
+  });
+});

package.json

@@ -12,16 +12,16 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@graasp/chatbox": "2.0.0-rc.1",
-    "@graasp/query-client": "1.0.1",
-    "@graasp/sdk": "1.1.0",
+    "@graasp/chatbox": "2.0.0",
+    "@graasp/query-client": "1.1.3",
+    "@graasp/sdk": "1.1.1",
     "@graasp/translations": "1.15.0",
-    "@graasp/ui": "3.2.0",
+    "@graasp/ui": "3.2.1",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "5.13.5",
-    "@sentry/react": "7.56.0",
-    "@sentry/tracing": "7.56.0",
+    "@sentry/react": "7.57.0",
+    "@sentry/tracing": "7.57.0",
     "@uppy/core": "3.2.1",
     "@uppy/dashboard": "3.4.1",
     "@uppy/drag-drop": "3.0.2",
@@ -99,8 +99,6 @@
     "@commitlint/config-conventional": "17.6.5",
     "@cypress/code-coverage": "3.10.7",
     "@cypress/instrument-cra": "1.4.0",
-    "@graasp/plugin-websockets": "1.0.0",
-    "@graasp/websockets": "github:graasp/graasp-websockets.git",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -147,7 +145,6 @@
     "nth-check": "2.1.1",
     "react-error-overlay": "6.0.11",
     "@types/react": "17.0.62",
-    "@graasp/sdk": "1.1.0",
     "@svgr/webpack": "8.0.1"
   },
   "packageManager": "[email protected]"

src/components/item/sharing/CsvInputParser.tsx

@@ -97,7 +97,7 @@ const CsvInputParser = ({ item }: Props): JSX.Element => {
     if (isError) {
       return (
         <Alert id={SHARE_ITEM_FROM_CSV_ALERT_ERROR_ID} severity="error">
-          {translateBuilder(error as string)}
+          {translateBuilder(error.message)}
         </Alert>
       );
     }

src/components/item/sharing/ItemMembershipsTable.tsx

@@ -74,7 +74,7 @@ const ItemMembershipsTable = ({
   const { mutate: shareItem } = mutations.usePostItemMembership();
 
   const onDelete = ({ instance }: { instance: ItemMembership }) => {
-    deleteItemMembership({ id: instance.id });
+    deleteItemMembership({ id: instance.id, itemId: item.id });
   };
 
   // never changes, so we can use useMemo
@@ -99,6 +99,7 @@ const ItemMembershipsTable = ({
         editItemMembership({
           id: instance.id,
           permission: value,
+          itemId: item.id,
         });
       },
       createFunction: ({

src/config/queryClient.ts

@@ -5,6 +5,7 @@ import notifier from './notifier';
 
 const {
   queryClient,
+  useQueryClient,
   QueryClientProvider,
   hooks,
   ReactQueryDevtools,
@@ -25,6 +26,7 @@ const {
 
 export {
   queryClient,
+  useQueryClient,
   QueryClientProvider,
   hooks,
   mutations,

src/utils/member.ts

@@ -1,16 +1,7 @@
-import { List } from 'immutable';
-import { validate } from 'uuid';
-
 import { Member } from '@graasp/sdk';
-import { MemberRecord } from '@graasp/sdk/frontend';
-
-export const isMemberIdValid = (memberId: string): boolean =>
-  validate(memberId?.trim());
 
+// eslint-disable-next-line import/prefer-default-export
 export const getMemberById = (
   members: Member[],
   id: string,
 ): Member | undefined => members.find(({ id: thisId }) => id === thisId);
-
-export const getFavoriteItems = (member?: MemberRecord): List<string> =>
-  member?.extra?.favoriteItems || List();