feat: integrate websockets updates (#802)

feat: use item feedback updates

.github/workflows/cypress.yml

@@ -46,7 +46,6 @@ jobs:
           VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
 
-
       #  use the Cypress GitHub Action to run Cypress tests within the chrome browser
       - name: Cypress run
         uses: cypress-io/github-action@v5

package.json

@@ -17,15 +17,14 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.1",
-    "@graasp/query-client": "1.8.2",
-    "@graasp/sdk": "1.6.0",
+    "@graasp/query-client": "1.11.0",
+    "@graasp/sdk": "1.8.0",
     "@graasp/translations": "1.19.2",
-    "@graasp/ui": "3.5.3",
+    "@graasp/ui": "3.5.4",
     "@mui/icons-material": "5.14.13",
     "@mui/lab": "5.0.0-alpha.148",
     "@mui/material": "5.14.13",
-    "@sentry/react": "7.66.0",
-    "@sentry/tracing": "7.66.0",
+    "@sentry/react": "7.73.0",
     "@uppy/core": "3.3.1",
     "@uppy/dashboard": "3.4.2",
     "@uppy/drag-drop": "3.0.2",
@@ -41,7 +40,7 @@
     "date-fns": "2.30.0",
     "filesize": "10.0.12",
     "http-status-codes": "2.2.0",
-    "immutable": "4.3.2",
+    "immutable": "4.3.4",
     "katex": "0.16.8",
     "lodash.groupby": "4.6.0",
     "lodash.partition": "4.6.0",
@@ -116,7 +115,7 @@
     "@types/node": "18.17.12",
     "@types/papaparse": "5.3.8",
     "@types/qs": "6.9.7",
-    "@types/react": "18.2.22",
+    "@types/react": "18.2.23",
     "@types/react-csv": "1.1.3",
     "@types/react-dom": "18.2.7",
     "@types/uuid": "9.0.2",

src/components/App.tsx

@@ -18,6 +18,7 @@ import {
   SHARED_ITEMS_PATH,
   buildItemPath,
 } from '../config/paths';
+import { hooks } from '../config/queryClient';
 import RecycleBinScreen from './RecycleBinScreen';
 import SharedItems from './SharedItems';
 import { useCurrentUserContext } from './context/CurrentUserContext';
@@ -28,10 +29,15 @@ import PublishedItems from './main/PublishedItems';
 import Redirect from './main/Redirect';
 import MemberProfileScreen from './member/MemberProfileScreen';
 
+const { useItemFeedbackUpdates } = hooks;
+
 const App = (): JSX.Element => {
   const { pathname } = useLocation();
   const { data: currentMember, isLoading } = useCurrentUserContext();
 
+  // registers the item updates through websockets
+  useItemFeedbackUpdates?.(currentMember?.id);
+
   if (isLoading) {
     return <CustomInitialLoader />;
   }

src/components/RecycleBinScreen.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 
-import { ItemRecord } from '@graasp/sdk/frontend';
 import { Loader } from '@graasp/ui';
 
 import { List } from 'immutable';
@@ -52,11 +51,7 @@ const ToolbarActions = ({ selectedIds }: ToolbarActionsProps): JSX.Element => (
 
 const RecycleBinLoadableContent = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    data: recycledEntries,
-    isLoading,
-    isError,
-  } = hooks.useRecycledItemsData();
+  const { data: recycledItems, isLoading, isError } = hooks.useRecycledItems();
   if (isError) {
     return <ErrorAlert />;
   }
@@ -72,7 +67,7 @@ const RecycleBinLoadableContent = (): JSX.Element => {
         id={RECYCLED_ITEMS_ID}
         clickable={false}
         title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
-        items={recycledEntries?.map(({ item }) => item as ItemRecord) ?? List()}
+        items={recycledItems ?? List()}
         actions={RowActions}
         ToolbarActions={ToolbarActions}
         showThumbnails={false}