From df99ef5c3d1cb32ea7ea0dfb823c631bc1602fce Mon Sep 17 00:00:00 2001
From: kim <kim.phanhoang@epfl.ch>
Date: Mon, 1 Jul 2024 13:41:03 +0200
Subject: [PATCH] refactor: update

---
 package.json                          |   2 +-
 src/components/file/FileUploader.tsx  |   3 +-
 src/components/item/FolderContent.tsx |   5 +-
 src/components/main/ItemCard.tsx      | 144 --------------------------
 yarn.lock                             |  10 +-
 5 files changed, 10 insertions(+), 154 deletions(-)
 delete mode 100644 src/components/main/ItemCard.tsx

diff --git a/package.json b/package.json
index 81faab3ce..84a76d805 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@emotion/styled": "11.11.5",
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.16.0",
-    "@graasp/query-client": "3.14.0",
+    "@graasp/query-client": "3.15.0",
     "@graasp/sdk": "4.15.1",
     "@graasp/translations": "1.31.0",
     "@graasp/ui": "github:graasp/graasp-ui#dnd-table-1",
diff --git a/src/components/file/FileUploader.tsx b/src/components/file/FileUploader.tsx
index a988f7bfc..d0ffe6a02 100644
--- a/src/components/file/FileUploader.tsx
+++ b/src/components/file/FileUploader.tsx
@@ -92,7 +92,8 @@ const FileUploader = ({
             onDrop([...e.target.files]);
           }
         }}
-        loading={isLoading && Math.ceil(totalProgress * 100)}
+        isLoading={isLoading}
+        uploadProgress={Math.ceil(totalProgress * 100)}
         multiple
         onDrop={onDrop}
         error={error}
diff --git a/src/components/item/FolderContent.tsx b/src/components/item/FolderContent.tsx
index dd850c594..7826b569f 100644
--- a/src/components/item/FolderContent.tsx
+++ b/src/components/item/FolderContent.tsx
@@ -86,13 +86,12 @@ const FolderContent = ({ item }: { item: PackedItem }): JSX.Element => {
           </Stack>
         </Stack>
         <FolderDescription itemId={item.id} />
-        {mode === ItemLayoutMode.Map && (
+        {mode === ItemLayoutMode.Map ? (
           <>
             <ModeButton />
             <DesktopMap parentId={item.id} />
           </>
-        )}
-        {mode !== ItemLayoutMode.Map && (
+        ) : (
           <>
             <Stack
               alignItems="space-between"
diff --git a/src/components/main/ItemCard.tsx b/src/components/main/ItemCard.tsx
deleted file mode 100644
index d32f4c7d6..000000000
--- a/src/components/main/ItemCard.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
-
-import { Box } from '@mui/material';
-
-import {
-  ItemType,
-  PackedItem,
-  PermissionLevel,
-  PermissionLevelCompare,
-  ThumbnailSize,
-} from '@graasp/sdk';
-import { Card as GraaspCard, ItemIcon, Thumbnail } from '@graasp/ui';
-
-import truncate from 'lodash.truncate';
-
-import { DESCRIPTION_MAX_LENGTH } from '../../config/constants';
-import { buildItemPath } from '../../config/paths';
-import { hooks } from '../../config/queryClient';
-import { buildItemCard, buildItemLink } from '../../config/selectors';
-import { stripHtml } from '../../utils/item';
-import BookmarkButton from '../common/BookmarkButton';
-import EditButton from '../common/EditButton';
-import { useCurrentUserContext } from '../context/CurrentUserContext';
-import BadgesCellRenderer, { ItemsStatuses } from '../table/Badges';
-import DownloadButton from './DownloadButton';
-import ItemMenu from './ItemMenu';
-
-const NameWrapper = ({ id, style }: { id: string; style: CSSProperties }) => {
-  const [searchParams] = useSearchParams();
-  const NameComponent = ({
-    children,
-  }: PropsWithChildren<unknown>): JSX.Element => (
-    <Link
-      to={{ pathname: buildItemPath(id), search: searchParams.toString() }}
-      id={buildItemLink(id)}
-      style={style}
-    >
-      {children}
-    </Link>
-  );
-  return NameComponent;
-};
-
-type Props = {
-  item: PackedItem;
-  itemsStatuses?: ItemsStatuses;
-  canMove?: boolean;
-};
-
-const ItemComponent = ({
-  item,
-  itemsStatuses,
-  canMove = true,
-}: Props): JSX.Element => {
-  const { id, name } = item;
-  const { data: thumbnailUrl, isLoading } = hooks.useItemThumbnailUrl({
-    id,
-    size: ThumbnailSize.Medium,
-  });
-
-  const alt = name;
-  const defaultValueComponent = (
-    <Box
-      height="100%"
-      width="100%"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      bgcolor="#E4DFFF"
-    >
-      <ItemIcon size="3rem" color="#5050D1" type={item.type} alt={item.name} />
-    </Box>
-  );
-
-  const linkUrl =
-    item.type === ItemType.LINK
-      ? item?.extra?.[ItemType.LINK]?.thumbnails?.[0]
-      : undefined;
-
-  const ThumbnailComponent = (
-    <Thumbnail
-      id={item.id}
-      isLoading={isLoading}
-      url={thumbnailUrl ?? linkUrl}
-      alt={alt}
-      defaultComponent={defaultValueComponent}
-      sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
-    />
-  );
-
-  const { data: member } = useCurrentUserContext();
-
-  const canWrite = item.permission
-    ? PermissionLevelCompare.gte(item.permission, PermissionLevel.Write)
-    : false;
-  const canAdmin = item.permission
-    ? PermissionLevelCompare.gte(item.permission, PermissionLevel.Admin)
-    : false;
-
-  const Actions = (
-    <>
-      {canWrite && <EditButton item={item} />}
-      {((member && member.id) || itemsStatuses?.[item.id]?.isPublic) && (
-        <DownloadButton id={item.id} name={item.name} />
-      )}
-      {member && member.id && <BookmarkButton size="medium" item={item} />}
-    </>
-  );
-  // here we use the same component as the table this is why it is instantiated a bit weirdly
-  const Badges = BadgesCellRenderer({ itemsStatuses });
-
-  return (
-    <GraaspCard
-      description={truncate(stripHtml(item.description || ''), {
-        length: DESCRIPTION_MAX_LENGTH,
-      })}
-      fullWidth
-      Actions={Actions}
-      Badges={<Badges data={item} />}
-      name={item.name}
-      creator={item.creator?.name}
-      ItemMenu={
-        <ItemMenu
-          item={item}
-          canWrite={canWrite}
-          canAdmin={canAdmin}
-          canMove={canMove}
-        />
-      }
-      Thumbnail={ThumbnailComponent}
-      cardId={buildItemCard(item.id)}
-      NameWrapper={NameWrapper({
-        id: item.id,
-        style: {
-          textDecoration: 'none',
-          color: 'inherit',
-        },
-      })}
-    />
-  );
-};
-
-export default ItemComponent;
diff --git a/yarn.lock b/yarn.lock
index 51d49e81d..6cd6c49f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1536,9 +1536,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@npm:3.14.0":
-  version: 3.14.0
-  resolution: "@graasp/query-client@npm:3.14.0"
+"@graasp/query-client@npm:3.15.0":
+  version: 3.15.0
+  resolution: "@graasp/query-client@npm:3.15.0"
   dependencies:
     "@tanstack/react-query": "npm:4.36.1"
     "@tanstack/react-query-devtools": "npm:4.36.1"
@@ -1549,7 +1549,7 @@ __metadata:
     "@graasp/sdk": ^4.0.0
     "@graasp/translations": "*"
     react: ^18.0.0
-  checksum: 10/2d47d8de6092572ccc525e54b6d78a7d34095e1da6e44de60a126e13c48b604040e24a372f858583f1cc30a0387992474d3dbb917bead4423cd14df98b26e556
+  checksum: 10/4a1c2a745dc924a6857f55e29ecc533593e8335ba9c6daadf46ceb81f88d060c98b62f4d06f41e212e3dab865ac7b752c6d2fc9a2e3b4f8502c6cbf8b3249b76
   languageName: node
   linkType: hard
 
@@ -7545,7 +7545,7 @@ __metadata:
     "@emotion/styled": "npm:11.11.5"
     "@graasp/chatbox": "npm:3.1.0"
     "@graasp/map": "npm:1.16.0"
-    "@graasp/query-client": "npm:3.14.0"
+    "@graasp/query-client": "npm:3.15.0"
     "@graasp/sdk": "npm:4.15.1"
     "@graasp/translations": "npm:1.31.0"
     "@graasp/ui": "github:graasp/graasp-ui#dnd-table-1"