feat: add real-time updates for children recursively

graasp · Jul 13, 2021 · 762d7d4 · 762d7d4
1 parent 0474da5
commit 762d7d4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/src/components/common/Item.js b/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, {

diff --git a/src/components/common/MainMenu.js b/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}

diff --git a/src/config/queryClient.js b/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,
 };
diff --git a/yarn.lock b/yarn.lock
@@ -1589,7 +1589,7 @@
 
 "@graasp/query-client@git://github.com/graasp/graasp-query-client.git":
  version "0.1.0"
- resolved "git://github.com/graasp/graasp-query-client.git#d799b21e9c9348fd9185593e8883feb6592ccb2f"
+ resolved "git://github.com/graasp/graasp-query-client.git#0fafee61773fe5f451cc3d312e40944b6075d2c9"
  dependencies:
  http-status-codes "2.1.4"
  immutable "4.0.0-rc.12"