fix: types usages

package.json

@@ -7,7 +7,8 @@
     "Juan Carlos Farah",
     "Kim Lan Phan Hoang",
     "Abdallah Al Chami",
-    "Alexandre Chau"
+    "Alexandre Chau",
+    "Basile Spaenlehauer"
   ],
   "workspaces": [
     "example"

src/DynamicTreeView/CustomTreeItem.tsx

@@ -7,7 +7,7 @@ import Skeleton from '@mui/material/Skeleton';
 import React, { FC } from 'react';
 import type { UseQueryResult } from 'react-query';
 
-import { ImmutableItem, ItemRecord } from '../types';
+import { ImmutableItemFactory, ItemRecord } from '../types';
 import { getParentsIdsFromPath } from '../utils/utils';
 import TreeItemLabel from './TreeItemLabel';
 
@@ -123,7 +123,7 @@ const CustomTreeItem: FC<CustomItemTreeProps> = ({
     }
 
     const filteredChildren = children?.filter((item) =>
-      showItemFilter?.(new ImmutableItem(item)),
+      showItemFilter?.(ImmutableItemFactory(item)),
     );
 
     if (!filteredChildren?.size) {

src/items/AppItem.stories.tsx

@@ -4,9 +4,9 @@ import { within } from '@storybook/testing-library';
 
 import React from 'react';
 
-import { ItemType } from '@graasp/sdk';
+import { AppItemExtra, ItemType } from '@graasp/sdk';
 
-import { ImmutableItem } from '../types';
+import { ImmutableItemFactory } from '../types';
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import AppItem from './AppItem';
 
@@ -34,8 +34,7 @@ const Template: ComponentStory<typeof AppItem> = (args) => (
 
 export const Example = Template.bind({});
 Example.args = {
-  // @ts-expect-error incomplete item
-  item: new ImmutableItem({
+  item: ImmutableItemFactory<AppItemExtra>({
     name: 'my app',
     id: 'item-id',
     description: 'item-description',

src/items/AppItem.tsx

@@ -5,16 +5,15 @@ import Skeleton from '@mui/material/Skeleton';
 
 import React, { Component } from 'react';
 
-import { Item } from '@graasp/sdk';
+import { AppItemExtra, Item, getAppExtra } from '@graasp/sdk';
 
 import {
   APP_DEFAULT_HEIGHT,
   APP_ITEM_WIDTH,
   DEFAULT_PERMISSION,
   SCREEN_MAX_HEIGHT,
 } from '../constants';
-import type { AppItemExtra, MemberRecord, UUID } from '../types';
-import { getAppExtra } from '../utils/itemExtra';
+import type { MemberRecord, UUID } from '../types';
 import withCaption from './withCaption';
 import withResizing, { StyledIFrame } from './withResizing';
 

src/items/DocumentItem.stories.tsx

@@ -1,16 +1,15 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { RecordOf } from 'immutable';
 
 import React from 'react';
 
-import { Item, ItemType } from '@graasp/sdk';
+import { DocumentItemExtra, ItemType } from '@graasp/sdk';
 
 import TextEditor from '../TextEditor';
-import { DocumentItemExtra, ImmutableItem } from '../types';
+import { ImmutableItemFactory } from '../types';
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import DocumentItem from './DocumentItem';
 
-const item = new ImmutableItem({
+const item = ImmutableItemFactory<DocumentItemExtra>({
   id: 'item-id',
   name: 'item-name',
   type: ItemType.DOCUMENT,
@@ -24,7 +23,7 @@ const item = new ImmutableItem({
   createdAt: 'createdAt',
   updatedAt: 'updatedAt',
   description: 'my document description',
-}) as RecordOf<Item<DocumentItemExtra>>;
+});
 
 export default {
   title: 'Items/DocumentItem',

src/items/DocumentItem.tsx

@@ -4,11 +4,9 @@ import { Typography } from '@mui/material';
 
 import React, { FC } from 'react';
 
-import { Item } from '@graasp/sdk';
+import { DocumentItemExtra, Item, getDocumentExtra } from '@graasp/sdk';
 
 import TextEditor from '../TextEditor';
-import type { DocumentItemExtra } from '../types';
-import { getDocumentExtra } from '../utils/itemExtra';
 
 export interface DocumentItemProps {
   cancelButtonId?: string;

src/items/FileItem.stories.tsx

@@ -3,10 +3,10 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import React from 'react';
 
-import { ItemType } from '@graasp/sdk';
+import { ItemType, LocalFileItemExtra } from '@graasp/sdk';
 
 import { MIME_TYPES } from '../constants';
-import { ImmutableItem } from '../types';
+import { ImmutableItemFactory } from '../types';
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import FileItem from './FileItem';
 
@@ -37,12 +37,12 @@ Image.loaders = [
   }),
 ];
 Image.args = {
-  item: new ImmutableItem({
+  item: ImmutableItemFactory<LocalFileItemExtra>({
     id: 'my-id',
     name: 'my item name',
     extra: {
       [ItemType.LOCAL_FILE]: {
-        url: 'https://picsum.photos/100',
+        path: 'https://picsum.photos/100',
         mimetype: MIME_TYPES.IMAGE[0],
         name: 'original file name',
       },

src/items/FileItem.tsx

@@ -6,16 +6,21 @@ import Skeleton from '@mui/material/Skeleton';
 
 import React, { FC, useEffect, useState } from 'react';
 
-import { Item, UnknownExtra } from '@graasp/sdk';
+import {
+  Item,
+  LocalFileItemExtra,
+  S3FileItemExtra,
+  UnknownExtra,
+  getFileExtra,
+  getS3FileExtra,
+} from '@graasp/sdk';
 
 import {
   MIME_TYPES,
   SCREEN_MAX_HEIGHT,
   UNEXPECTED_ERROR_MESSAGE,
 } from '../constants';
 import { ERRORS } from '../enums';
-import { FileItemExtra, S3FileItemExtra } from '../types';
-import { getFileExtra, getS3FileExtra } from '../utils/itemExtra';
 import DownloadButtonFileItem from './DownloadButtonFileItem';
 import FileAudio from './FileAudio';
 import FileImage from './FileImage';
@@ -69,7 +74,7 @@ const FileItem: FC<FileItemProps> = ({
 }) => {
   const [url, setUrl] = useState<string>();
   const extra =
-    getFileExtra(item.extra as FileItemExtra) ??
+    getFileExtra(item.extra as LocalFileItemExtra) ??
     getS3FileExtra(item.extra as S3FileItemExtra);
   const { mimetype, name: originalFileName } = extra ?? {};
   const name = item.name;

src/items/FilePdf.tsx

@@ -2,11 +2,7 @@ import { SxProps, styled } from '@mui/material';
 
 import React, { FC, ReactEventHandler, useRef, useState } from 'react';
 
-import {
-  GRAASP_ASSETS_PROTOCOL,
-  ITEM_MAX_HEIGHT,
-  PDF_VIEWER_LINK,
-} from '../constants';
+import { ITEM_MAX_HEIGHT } from '../constants';
 
 interface FilePdfProps {
   id?: string;
@@ -47,9 +43,11 @@ const FilePdf: FC<FilePdfProps> = ({
     }
   };
 
-  const urlWithPdfViewer = `${GRAASP_ASSETS_PROTOCOL}${PDF_VIEWER_LINK}${encodeURIComponent(
-    url,
-  )}`;
+  // use custom pdf viewer if defined
+  let urlWithPdfViewer = url;
+  if (pdfViewerLink) {
+    urlWithPdfViewer = `${pdfViewerLink}${encodeURIComponent(url)}`;
+  }
 
   return (
     <StyledEmbed

src/items/LinkItem.stories.tsx

@@ -1,35 +1,33 @@
 import { expect } from '@storybook/jest';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import { RecordOf } from 'immutable';
 
 import React from 'react';
 
-import { Item, ItemType } from '@graasp/sdk';
+import { EmbeddedLinkItemExtra, ItemType } from '@graasp/sdk';
 
-import {
-  EmbeddedLinkItemExtra,
-  ImmutableItem,
-  ImmutableMember,
-} from '../types';
+import { ImmutableItemFactory, ImmutableMember } from '../types';
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import LinkItem from './LinkItem';
 
-const item = new ImmutableItem({
+const item = ImmutableItemFactory<EmbeddedLinkItemExtra>({
   id: 'item-id',
   name: 'item-name',
   type: ItemType.LINK,
   path: 'item_id',
   extra: {
     [ItemType.LINK]: {
+      thumbnails: [],
+      html: '',
       url: 'https://graasp.org',
+      icons: [],
     },
   },
   creator: 'creator',
   createdAt: 'createdAt',
   updatedAt: 'updatedAt',
   description: 'my link description',
-}) as RecordOf<Item<EmbeddedLinkItemExtra>>;
+});
 
 export default {
   title: 'Items/LinkItem',

src/items/LinkItem.tsx

@@ -6,12 +6,16 @@ import Alert from '@mui/material/Alert';
 
 import React, { FC, Fragment, useRef, useState } from 'react';
 
-import { Item, redirect } from '@graasp/sdk';
+import {
+  EmbeddedLinkItemExtra,
+  Item,
+  getEmbeddedLinkExtra,
+  redirect,
+} from '@graasp/sdk';
 
 import Button from '../buttons/Button';
 import { ITEM_MAX_HEIGHT } from '../constants';
-import type { EmbeddedLinkItemExtra, MemberRecord } from '../types';
-import { getEmbeddedLinkExtra } from '../utils/itemExtra';
+import { MemberRecord } from '../types';
 import withCaption from './withCaption';
 import withResizing, { StyledIFrame } from './withResizing';
 

src/items/S3FileItem.tsx

@@ -5,13 +5,11 @@ import Alert from '@mui/material/Alert';
 
 import React, { useEffect, useState } from 'react';
 
-import { Item } from '@graasp/sdk';
+import { Item, S3FileItemExtra, getS3FileExtra } from '@graasp/sdk';
 
 import Loader from '../Loader';
 import { MIME_TYPES, UNEXPECTED_ERROR_MESSAGE } from '../constants';
 import { ERRORS } from '../enums';
-import type { S3FileItemExtra } from '../types';
-import { getS3FileExtra } from '../utils/itemExtra';
 import DownloadButtonFileItem from './DownloadButtonFileItem';
 import FileAudio from './FileAudio';
 import FileImage from './FileImage';

src/types.ts

@@ -1,6 +1,13 @@
 import { Record, RecordOf } from 'immutable';
 
-import { Context, Item, ItemType, Member, MemberType } from '@graasp/sdk';
+import {
+  Context,
+  Item,
+  ItemType,
+  Member,
+  MemberType,
+  UnknownExtra,
+} from '@graasp/sdk';
 
 export type UUID = string;
 
@@ -27,66 +34,21 @@ export class ImmutableMember extends Record<Member>({
   type: MemberType.Individual,
 }) {}
 
-export class ImmutableItem extends Record<Item>({
-  id: '',
-  name: '',
-  path: '',
-  description: '',
-  extra: {},
-  settings: {},
-  type: ItemType.FOLDER,
-  creator: '',
-  createdAt: '',
-  updatedAt: '',
-}) {}
-
-// // we use any instead of immutable List otherwise it cannot extends UnknownExtra
-// export type EmbeddedLinkItemExtraProp = {
-//   thumbnails: any; //List<string>;
-//   html: string;
-//   url: string;
-//   icons: any; //List<string>;
-// };
-
-// export interface EmbeddedLinkItemExtra extends UnknownExtra {
-//   embeddedLink: EmbeddedLinkItemExtraProp;
-// }
-
-// // todo: add path and move this to sdk
-// export type S3FileItemExtraProp = {
-//   mimetype: string;
-//   name: string;
-// };
-
-// export interface S3FileItemExtra extends UnknownExtra {
-//   s3File: S3FileItemExtraProp;
-// }
-
-// export type FileItemProp = {
-//   mimetype: string;
-//   name: string;
-// };
-
-// export interface FileItemExtra extends UnknownExtra {
-//   file: FileItemProp;
-// }
-
-// export type DocumentItemExtraProp = {
-//   content: string;
-// };
-
-// export interface DocumentItemExtra extends UnknownExtra {
-//   document: DocumentItemExtraProp;
-// }
-
-// export type AppItemExtraProp = {
-//   url: string;
-//   settings: UnknownExtra;
-// };
-
-// export interface AppItemExtra extends UnknownExtra {
-//   app: AppItemExtraProp;
-// }
+export const ImmutableItemFactory = <T extends UnknownExtra>(
+  arg: Partial<Item<T>>,
+): RecordOf<Item<T>> =>
+  Record<Item<T>>({
+    id: '',
+    name: '',
+    path: '',
+    description: '',
+    extra: {} as T,
+    settings: {},
+    type: ItemType.FOLDER,
+    creator: '',
+    createdAt: '',
+    updatedAt: '',
+  })(arg);
 
 export enum Variant {
   TEXT = 'text',

yarn.lock

@@ -2559,7 +2559,7 @@ __metadata:
 
 "@graasp/sdk@github:graasp/graasp-sdk#62-upstream-types":
   version: 0.1.0
-  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=894597cd04657db088f7199fe7180436dfab386b"
+  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=4e52f357d1b23c4f1b2beb28657f5df44559f0e3"
   dependencies:
     "@fastify/secure-session": 5.2.0
     aws-sdk: 2.1111.0
@@ -2570,7 +2570,7 @@ __metadata:
     qs: 6.11.0
     slonik: 28.1.1
     uuid: 8.3.2
-  checksum: 95fc724808f859f2fd0ef638c6a86c4fb933fec910bb8923f8e28fb950fd23b4f484f3f27803979b4ce7461ff00051af5920b8481610247f309fb761ee28b852
+  checksum: be6e8d76a17765a56f27b8d741be153ef904c5da347a103975eae6a296051ea882fccb93eff5c9caa5f2bff21640f79a61478411bee0c3c2f5875c5d38ee490d
   languageName: node
   linkType: hard