fix: remove unused file URL fetch

cypress/e2e/builder/fixtures/files.ts

@@ -32,6 +32,7 @@ export const IMAGE_ITEM_DEFAULT: FileItemForTest = {
       mimetype: 'image/png',
       altText: 'myAltText',
       content: '',
+      url: MOCK_IMAGE_URL,
     }),
   }),
   // for testing: creating needs a fixture, reading needs an url
@@ -59,6 +60,7 @@ export const IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH: FileItemForTest = {
       mimetype: 'image/png',
       altText: 'myAltText',
       content: '',
+      url: MOCK_IMAGE_URL,
     }),
   }),
   // for testing: creating needs a fixture, reading needs an url
@@ -84,6 +86,7 @@ export const VIDEO_ITEM_DEFAULT: FileItemForTest = {
       mimetype: MimeTypes.Video.MP4,
       altText: 'myAltText',
       content: '',
+      url: MOCK_VIDEO_URL,
     }),
   }),
   // for testing: creating needs a fixture, reading needs an url
@@ -109,6 +112,7 @@ export const PDF_ITEM_DEFAULT: FileItemForTest = {
       mimetype: MimeTypes.PDF,
       altText: 'myAltText',
       content: '',
+      url: MOCK_PDF_URL,
     }),
   }),
   // for testing: creating needs a fixture, reading needs an url

cypress/fixtures/files.ts

@@ -22,6 +22,7 @@ export const IMAGE_ITEM_DEFAULT: FileItem & { readFilepath: string } = {
     size: 32439,
     mimetype: MimeTypes.Image.PNG,
     content: '',
+    url: MOCK_IMAGE_URL,
   }),
   // for testing
   readFilepath: MOCK_IMAGE_URL,
@@ -46,6 +47,7 @@ export const VIDEO_ITEM_DEFAULT: FileItem & { readFilepath: string } = {
     size: 52345,
     mimetype: MimeTypes.Video.MP4,
     content: '',
+    url: MOCK_VIDEO_URL,
   }),
   // for testing
   readFilepath: MOCK_VIDEO_URL,
@@ -70,6 +72,7 @@ export const PDF_ITEM_DEFAULT: FileItem & { readFilepath: string } = {
     size: 54321,
     mimetype: MimeTypes.PDF,
     content: '',
+    url: MOCK_PDF_URL,
   }),
   // for testing
   readFilepath: MOCK_PDF_URL,
@@ -93,6 +96,7 @@ export const IMAGE_ITEM_S3 = PackedFileItemFactory(
       size: 32439,
       mimetype: MimeTypes.Image.PNG,
       content: '',
+      url: MOCK_IMAGE_URL,
     }),
     settings: {
       isPinned: false,
@@ -119,6 +123,7 @@ export const VIDEO_ITEM_S3 = PackedFileItemFactory(
       size: 52345,
       mimetype: MimeTypes.Video.MP4,
       content: '',
+      url: MOCK_VIDEO_URL,
     }),
     settings: {
       isPinned: false,
@@ -140,6 +145,7 @@ export const PDF_ITEM_S3 = PackedFileItemFactory(
       size: 54321,
       mimetype: MimeTypes.PDF,
       content: '',
+      url: MOCK_PDF_URL,
     }),
     settings: {
       isPinned: false,

cypress/fixtures/useCases/staticElectricity.ts

@@ -174,6 +174,7 @@ export const STATIC_ELECTRICITY: {
           // encoding: '7bit',
           mimetype: 'image/jpeg',
           content: '',
+          url: MOCK_IMAGE_URL,
         }),
       }),
       readFilepath: MOCK_IMAGE_URL,

package.json

@@ -20,7 +20,7 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@fontsource-variable/nunito": "5.2.7",
-    "@graasp/sdk": "5.18.1",
+    "@graasp/sdk": "5.18.2",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@lexical/link": "0.33.1",
     "@lexical/react": "0.33.1",

src/modules/builder/components/item/ItemContent.tsx

@@ -26,7 +26,6 @@ import type {
   AppItem as AppItemType,
   DocumentItem as DocumentItemType,
   EtherpadItem as EtherpadItemType,
-  FileItem as FileItemType,
   H5pItem as H5PItemType,
   EmbeddedLinkItem as LinkItemType,
   PackedItem,
@@ -53,7 +52,7 @@ import { SettingVariant } from './settings/settingTypes';
 
 const ITEM_DEFAULT_HEIGHT = '70vh';
 
-const { useFileContentUrl, useEtherpad } = hooks;
+const { useEtherpad } = hooks;
 
 const StyledContainer = styled(Container)(() => ({
   flexGrow: 1,
@@ -62,8 +61,12 @@ const StyledContainer = styled(Container)(() => ({
 /**
  * Helper component to render typed file items
  */
-const FileContent = ({ item }: { item: FileItemType }): JSX.Element | null => {
-  const { data: fileUrl, isLoading, isError } = useFileContentUrl(item.id);
+const FileContent = ({
+  item,
+}: {
+  item: Extract<PackedItem, { type: 'file' }>;
+}): JSX.Element => {
+  const fileUrl = item.extra.file.url;
 
   if (fileUrl) {
     return (
@@ -84,15 +87,7 @@ const FileContent = ({ item }: { item: FileItemType }): JSX.Element | null => {
     );
   }
 
-  if (isLoading) {
-    return <Skeleton height="50vh" />;
-  }
-
-  if (isError) {
-    return <ErrorAlert id={ITEM_SCREEN_ERROR_ALERT_ID} />;
-  }
-
-  return null;
+  return <ErrorAlert id={ITEM_SCREEN_ERROR_ALERT_ID} />;
 };
 
 /**

src/modules/player/item/Item.tsx

@@ -39,7 +39,6 @@ import type {
   AppItem as AppItemType,
   DocumentItem as DocumentItemType,
   EtherpadItem as EtherpadItemType,
-  FileItem as FileItemType,
   H5pItem as H5PItemType,
   EmbeddedLinkItem as LinkItemType,
   PackedItem,
@@ -74,13 +73,7 @@ const PDF_VIEWER_LINK = buildPdfViewerURL(GRAASP_ASSETS_URL);
 // use a bit less of the height because of the header and some margin
 const SCREEN_MAX_HEIGHT = window.innerHeight * 0.8;
 
-const {
-  useEtherpad,
-  useItem,
-  useChildren,
-  useFileContentUrl,
-  useChildrenPaginated,
-} = hooks;
+const { useEtherpad, useItem, useChildren, useChildrenPaginated } = hooks;
 
 type EtherpadContentProps = {
   item: EtherpadItemType;
@@ -123,16 +116,11 @@ const EtherpadContent = ({ item }: EtherpadContentProps) => {
 };
 
 type FileContentProps = {
-  item: FileItemType;
+  item: Extract<PackedItem, { type: 'file' }>;
 };
 const FileContent = ({ item }: FileContentProps) => {
   const { t } = useTranslation(NS.Common);
-  // fetch file content if type is file
-  const {
-    data: fileUrl,
-    isPending: isFileContentPending,
-    isError: isFileError,
-  } = useFileContentUrl(item.id);
+  const fileUrl = item.extra.file.url;
   const { triggerAction, onCollapse } = useCollapseAction(item.id);
 
   const onDownloadClick = useCallback(() => {
@@ -143,36 +131,22 @@ const FileContent = ({ item }: FileContentProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item.id]);
 
-  if (item) {
-    return (
-      <FileItem
-        id={buildFileId(item.id)}
-        item={item}
-        fileUrl={fileUrl}
-        maxHeight={SCREEN_MAX_HEIGHT}
-        showCollapse={item.settings?.isCollapsible}
-        pdfViewerLink={PDF_VIEWER_LINK?.toString()}
-        onClick={onDownloadClick}
-        onCollapse={onCollapse}
-      />
-    );
-  }
-
-  if (isFileContentPending) {
-    return (
-      <ItemSkeleton
-        itemType={'file'}
-        isChildren={false}
-        screenMaxHeight={SCREEN_MAX_HEIGHT}
-      />
-    );
-  }
-
-  if (isFileError) {
-    console.error(isFileError);
+  if (!fileUrl) {
+    return <Alert severity="error">{t('ERRORS.UNEXPECTED')}</Alert>;
   }
 
-  return <Alert severity="error">{t('ERRORS.UNEXPECTED')}</Alert>;
+  return (
+    <FileItem
+      id={buildFileId(item.id)}
+      item={item}
+      fileUrl={fileUrl}
+      maxHeight={SCREEN_MAX_HEIGHT}
+      showCollapse={item.settings?.isCollapsible}
+      pdfViewerLink={PDF_VIEWER_LINK?.toString()}
+      onClick={onDownloadClick}
+      onCollapse={onCollapse}
+    />
+  );
 };
 
 const LinkContent = ({ item }: { item: LinkItemType }): JSX.Element => {

src/openapi/client/types.gen.ts

@@ -504,6 +504,7 @@ export type FileItem = {
             path: string;
             mimetype: string;
             size: number;
+            url?: string;
             /**
              * alternative text of the file if it is an image
              */