fix: item status and query invalidation (#626)

graasp · May 9, 2023 · 5bc43ab · 5bc43ab
1 parent 64659bc
commit 5bc43ab
Show file tree

Hide file tree

Showing 4 changed files with 668 additions and 639 deletions.
diff --git a/src/components/common/HideButton.tsx b/src/components/common/HideButton.tsx
@@ -5,7 +5,9 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
 
-import { MUTATION_KEYS } from '@graasp/query-client';
+import { useQueryClient } from 'react-query';
+
+import { DATA_KEYS, MUTATION_KEYS } from '@graasp/query-client';
 import { DiscriminatedItem } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 import { ActionButton, ActionButtonVariant } from '@graasp/ui';
@@ -32,14 +34,24 @@ const HideButton = ({
   const { t: translateBuilder } = useBuilderTranslation();
 
   const { data: tags } = hooks.useItemTags(item.id);
+  const queryClient = useQueryClient();
   const addTag = useMutation<unknown, unknown, { id: string; tagId: string }>(
     MUTATION_KEYS.POST_ITEM_TAG,
+    {
+      onSuccess: async () => {
+        await queryClient.invalidateQueries(DATA_KEYS.itemTagsKeys.many());
+      },
+    },
   );
   const removeTag = useMutation<
     unknown,
     unknown,
     { id: string; tagId: string }
-  >(MUTATION_KEYS.DELETE_ITEM_TAG);
+  >(MUTATION_KEYS.DELETE_ITEM_TAG, {
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(DATA_KEYS.itemTagsKeys.many());
+    },
+  });
   const hiddenTag = tags
     ?.filter(({ tagId }) => tagId === HIDDEN_ITEM_TAG_ID)
     ?.first();

diff --git a/src/components/table/BadgesCellRenderer.tsx b/src/components/table/BadgesCellRenderer.tsx
@@ -21,6 +21,15 @@ type ItemStatuses = {
   isPublished: boolean;
 };
 
+const DEFAULT_ITEM_STATUSES: ItemStatuses = {
+  showChatbox: false,
+  isPinned: false,
+  isCollapsible: false,
+  isHidden: false,
+  isPublic: false,
+  isPublished: false,
+};
+
 export type ItemsStatuses = { [key: ItemRecord['id']]: ItemStatuses };
 
 export const useItemsStatuses = ({
@@ -33,12 +42,12 @@ export const useItemsStatuses = ({
   tagList: List<TagRecord>;
 }): ItemsStatuses =>
   items.reduce((acc, r, idx) => {
-    const itemTags = itemsTags?.[idx];
-    const {
-      showChatbox = false,
-      isPinned = false,
-      isCollapsible = false,
-    } = { ...r.settings };
+    const itemTags = itemsTags?.get(idx);
+    const { showChatbox, isPinned, isCollapsible } = {
+      ...DEFAULT_ITEM_STATUSES,
+      // the settings are an immutable
+      ...r.settings?.toJS(),
+    };
     const isHidden = isItemHidden({ tags: tagList, itemTags });
     const isPublic = isItemPublic({ tags: tagList, itemTags });
     const isPublished = isItemPublished({ tags: tagList, itemTags });
@@ -68,7 +77,8 @@ const BadgesCellRenderer = ({
 }: Props): ((arg: ChildCompProps) => JSX.Element) => {
   const ChildComponent = ({ data: item }: ChildCompProps) => {
     const { t } = useBuilderTranslation();
-    const itemStatuses = itemsStatuses[item.id];
+    // this is useful because the item.id we are looking for may not be present and the itemStatuses will be undefined
+    const itemStatuses = itemsStatuses[item.id] || DEFAULT_ITEM_STATUSES;
     const {
       showChatbox,
       isPinned,

diff --git a/src/config/notifier.ts b/src/config/notifier.ts
@@ -1,6 +1,6 @@
 import { toast } from 'react-toastify';
 
-import { routines } from '@graasp/query-client';
+import { Notifier, routines } from '@graasp/query-client';
 import buildI18n, { FAILURE_MESSAGES } from '@graasp/translations';
 
 import {
@@ -66,13 +66,13 @@ const {
   shareItemRoutine,
 } = routines;
 
-export default ({
+const notifier: Notifier = ({
   type,
   payload,
 }: {
   type: string;
   payload: Payload;
-}): void => {
+}) => {
   let message = null;
   switch (type) {
     // error messages
@@ -173,3 +173,4 @@ export default ({
     toast.success(i18n.t(message));
   }
 };
+export default notifier;