feat: trigger un/collapse action (#829)

* feat: trigger un/collapse action * feat: update packages
graasp · Aug 7, 2024 · 536a0c0 · 536a0c0
1 parent 7ca3cc0
commit 536a0c0
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 372 deletions.
diff --git a/package.json b/package.json
@@ -38,9 +38,9 @@
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.1.0",
     "@graasp/query-client": "3.16.0",
-    "@graasp/sdk": "4.20.0",
+    "@graasp/sdk": "4.23.0",
     "@graasp/translations": "1.32.0",
-    "@graasp/ui": "4.21.0",
+    "@graasp/ui": "4.24.0",
     "@mui/icons-material": "5.16.4",
     "@mui/lab": "5.0.0-alpha.172",
     "@mui/material": "5.16.4",

diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx
@@ -133,6 +133,15 @@ const FileContent = ({ item }: FileContentProps) => {
   } = useFileContentUrl(item.id);
   const { mutate: triggerAction } = mutations.usePostItemAction();
 
+  const onCollapse = (c: boolean) => {
+    triggerAction({
+      itemId: item.id,
+      payload: {
+        type: c ? ActionTriggers.CollapseItem : ActionTriggers.UnCollapseItem,
+      },
+    });
+  };
+
   const onDownloadClick = useCallback(() => {
     triggerAction({
       itemId: item.id,
@@ -168,6 +177,7 @@ const FileContent = ({ item }: FileContentProps) => {
       showCollapse={item.settings?.isCollapsible}
       pdfViewerLink={PDF_VIEWER_LINK}
       onClick={onDownloadClick}
+      onCollapse={onCollapse}
     />
   );
 };
@@ -184,6 +194,15 @@ const LinkContent = ({ item }: { item: LinkItemType }): JSX.Element => {
     });
   };
 
+  const onCollapse = (c: boolean) => {
+    triggerAction({
+      itemId: item.id,
+      payload: {
+        type: c ? ActionTriggers.CollapseItem : ActionTriggers.UnCollapseItem,
+      },
+    });
+  };
+
   return (
     <Box id={buildLinkItemId(item.id)}>
       <LinkItem
@@ -196,21 +215,35 @@ const LinkContent = ({ item }: { item: LinkItemType }): JSX.Element => {
         showIframe={item.settings?.showLinkIframe}
         showCollapse={item.settings?.isCollapsible}
         onClick={handleLinkClick}
+        onCollapse={onCollapse}
       />
     </Box>
   );
 };
 
-const DocumentContent = ({ item }: { item: DocumentItemType }): JSX.Element => (
-  <DocumentItem
-    id={buildDocumentId(item.id)}
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    showTitle={item.settings?.showTitle}
-    item={{ ...item, name: item.displayName }}
-    showCollapse={item.settings?.isCollapsible}
-  />
-);
+const DocumentContent = ({ item }: { item: DocumentItemType }): JSX.Element => {
+  const { mutate: triggerAction } = mutations.usePostItemAction();
+
+  const onCollapse = (c: boolean) => {
+    triggerAction({
+      itemId: item.id,
+      payload: {
+        type: c ? ActionTriggers.CollapseItem : ActionTriggers.UnCollapseItem,
+      },
+    });
+  };
+  return (
+    <DocumentItem
+      id={buildDocumentId(item.id)}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      showTitle={item.settings?.showTitle}
+      item={{ ...item, name: item.displayName }}
+      showCollapse={item.settings?.isCollapsible}
+      onCollapse={onCollapse}
+    />
+  );
+};
 
 const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
   const {
@@ -219,7 +252,16 @@ const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
     isSuccess: isSuccessMember,
   } = useCurrentMemberContext();
   const { t: translateMessage } = useMessagesTranslation();
+  const { mutate: triggerAction } = mutations.usePostItemAction();
 
+  const onCollapse = (c: boolean) => {
+    triggerAction({
+      itemId: item.id,
+      payload: {
+        type: c ? ActionTriggers.CollapseItem : ActionTriggers.UnCollapseItem,
+      },
+    });
+  };
   if (member || isSuccessMember)
     return (
       <AppItem
@@ -240,6 +282,7 @@ const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
           itemId: item.id,
         }}
         showCollapse={item.settings?.isCollapsible}
+        onCollapse={onCollapse}
       />
     );
 
@@ -258,6 +301,8 @@ const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
 
 const H5PContent = ({ item }: { item: H5PItemType }): JSX.Element => {
   const { t: translateMessage } = useMessagesTranslation();
+  const { mutate: triggerAction } = mutations.usePostItemAction();
+
   const contentId = item?.extra?.h5p?.contentId;
   if (!contentId) {
     return (
@@ -266,6 +311,14 @@ const H5PContent = ({ item }: { item: H5PItemType }): JSX.Element => {
       </Alert>
     );
   }
+  const onCollapse = (c: boolean) => {
+    triggerAction({
+      itemId: item.id,
+      payload: {
+        type: c ? ActionTriggers.CollapseItem : ActionTriggers.UnCollapseItem,
+      },
+    });
+  };
 
   return (
     <H5PItem
@@ -274,6 +327,7 @@ const H5PContent = ({ item }: { item: H5PItemType }): JSX.Element => {
       contentId={contentId}
       integrationUrl={H5P_INTEGRATION_URL}
       showCollapse={item.settings?.isCollapsible}
+      onCollapse={onCollapse}
     />
   );
 };