feat: remove immutable

cypress/e2e/collection/summary.cy.ts

@@ -15,7 +15,7 @@ import {
 } from '../../../src/config/selectors';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { PUBLISHED_ITEMS } from '../../fixtures/items';
-import { MEMBERS } from '../../fixtures/members';
+import { COMPLETE_MEMBERS, MEMBERS } from '../../fixtures/members';
 
 describe('Collection Summary', () => {
   buildPublicAndPrivateEnvironments().forEach((environment) => {
@@ -26,7 +26,7 @@ describe('Collection Summary', () => {
       cy.visit(buildCollectionRoute(item.id));
 
       // current member
-      const member = Object.values(MEMBERS).find(
+      const member = Object.values(COMPLETE_MEMBERS).find(
         ({ name }) => name === environment.currentMember?.name,
       );
 
@@ -51,25 +51,23 @@ describe('Collection Summary', () => {
       if (item.createdAt) {
         cy.get(`#${SUMMARY_CREATED_AT_CONTAINER_ID}`).should(
           'contain',
-          DateTime.fromMillis(item.createdAt.getTime()).toLocaleString(
-            DateTime.DATE_FULL,
-            {
-              locale: member?.extra?.lang || DEFAULT_LANG,
-            },
-          ),
+          DateTime.fromMillis(
+            new Date(item.createdAt).getTime(),
+          ).toLocaleString(DateTime.DATE_FULL, {
+            locale: member?.extra?.lang || DEFAULT_LANG,
+          }),
         );
       }
 
       // last update
       if (item.updatedAt) {
         cy.get(`#${SUMMARY_LAST_UPDATE_CONTAINER_ID}`).should(
           'contain',
-          DateTime.fromMillis(item.updatedAt.getTime()).toLocaleString(
-            DateTime.DATE_FULL,
-            {
-              locale: member?.extra?.lang || DEFAULT_LANG,
-            },
-          ),
+          DateTime.fromMillis(
+            new Date(item.updatedAt).getTime(),
+          ).toLocaleString(DateTime.DATE_FULL, {
+            locale: member?.extra?.lang || DEFAULT_LANG,
+          }),
         );
       }
 

cypress/fixtures/items.ts

@@ -16,8 +16,8 @@ export const DEFAULT_FOLDER_ITEM: FolderItemType = {
   description: 'Some description',
   settings: {},
   path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
-  createdAt: new Date(Date.parse('2023-02-27T18:20:09.732Z')),
-  updatedAt: new Date(Date.parse('2023-02-28T18:20:09.732Z')),
+  createdAt: '2023-02-27T18:20:09.732Z',
+  updatedAt: '2023-02-28T18:20:09.732Z',
   extra: { [ItemType.FOLDER]: { childrenOrder: [] } },
   creator: CURRENT_USER,
   type: ItemType.FOLDER,
@@ -29,8 +29,8 @@ export const PUBLISHED_ITEMS: MockItem[] = [
     id: 'ecafbd2a-5688-11eb-ae93-0242ac130002',
     name: 'parent of public item1',
     path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
-    createdAt: new Date(Date.parse('2023-02-27T18:20:09.732Z')),
-    updatedAt: new Date(Date.parse('2023-02-28T18:20:09.732Z')),
+    createdAt: '2023-02-27T18:20:09.732Z',
+    updatedAt: '2023-02-28T18:20:09.732Z',
     settings: {
       tags: ['one-tag', 'two-tag'],
       ccLicenseAdaption: 'CC BY-NC-ND',
@@ -75,8 +75,8 @@ export const PUBLISHED_ITEMS: MockItem[] = [
     id: 'bdf09f5a-5688-11eb-ae93-0242ac130004',
     name: 'child of public item1',
     path: 'ecafbd2a_5688_11eb_ae93_0242ac130002.fdf09f5a_5688_11eb_ae93_0242ac130004.bdf09f5a_5688_11eb_ae93_0242ac130004',
-    createdAt: new Date(Date.parse('2023-02-27T18:20:09.732Z')),
-    updatedAt: new Date(Date.parse('2023-02-28T18:20:09.732Z')),
+    createdAt: '2023-02-27T18:20:09.732Z',
+    updatedAt: '2023-02-28T18:20:09.732Z',
     // info available only from meilisearch
     isPublishedRoot: false,
     publishedInfo: {
@@ -108,8 +108,8 @@ export const PUBLISHED_ITEMS: MockItem[] = [
     id: 'fdf09f5a-5688-11eb-ae93-0242ac130004',
     name: 'public item1',
     path: 'ecafbd2a_5688_11eb_ae93_0242ac130002.fdf09f5a_5688_11eb_ae93_0242ac130004',
-    createdAt: new Date(Date.parse('2023-01-27T18:20:09.732Z')),
-    updatedAt: new Date(Date.parse('2023-01-28T18:20:09.732Z')),
+    createdAt: '2023-01-27T18:20:09.732Z',
+    updatedAt: '2023-01-28T18:20:09.732Z',
     // info available only from meilisearch
     isPublishedRoot: false,
     publishedInfo: {
@@ -149,8 +149,8 @@ export const PUBLISHED_ITEMS: MockItem[] = [
     id: 'egafbd2a-5688-11eb-ae93-0242ac130002',
     name: 'independant item',
     path: 'egafbd2a_5688_11eb_ae93_0242ac130002',
-    createdAt: new Date(Date.parse('2023-02-27T18:20:09.732Z')),
-    updatedAt: new Date(Date.parse('2023-02-28T18:20:09.732Z')),
+    createdAt: '2023-02-27T18:20:09.732Z',
+    updatedAt: '2023-02-28T18:20:09.732Z',
     // info available only from meilisearch
     isPublishedRoot: true,
     publishedInfo: {
@@ -202,8 +202,8 @@ export const PUBLISHED_ITEMS: MockItem[] = [
     id: 'ecafcc2c-5688-11eb-ae93-0242ac130002',
     name: 'Item Without Licence',
     path: 'ecafcc2c_5688_11eb_ae93_0242ac130002',
-    createdAt: new Date(Date.parse('2023-02-27T18:20:09.732Z')),
-    updatedAt: new Date(Date.parse('2023-02-28T18:20:09.732Z')),
+    createdAt: '2023-02-27T18:20:09.732Z',
+    updatedAt: '2023-02-28T18:20:09.732Z',
     creator: MEMBERS.BOB,
     settings: {
       tags: ['one-tag', 'two-tag'],

cypress/fixtures/members.ts

@@ -1,4 +1,4 @@
-import { MemberType } from '@graasp/sdk';
+import { CompleteMember, MemberType } from '@graasp/sdk';
 
 import { MockMember } from '../support/types';
 
@@ -9,73 +9,70 @@ export const MEMBERS: { [key: string]: MockMember } = {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130002',
     name: 'anna',
     email: '[email protected]',
-    createdAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    updatedAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    type: MemberType.Individual,
-    extra: {
-      lang: 'fr',
-    },
   },
   BOB: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130004',
     name: 'bob',
     email: '[email protected]',
-    createdAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    updatedAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    type: MemberType.Individual,
-    extra: { lang: 'en' },
     thumbnail:
       'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Pedro_Luro_edit.jpg/210px-Pedro_Luro_edit.jpg',
   },
   CEDRIC: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130006',
     name: 'cedric',
     email: '[email protected]',
-    createdAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    updatedAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    type: MemberType.Individual,
-    extra: {},
     thumbnail:
       'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Domesticated_goose_head%2C_Chaguaramal%2C_Venezuela.jpg/320px-Domesticated_goose_head%2C_Chaguaramal%2C_Venezuela.jpg',
   },
   DAVID: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130062',
     name: 'david',
     email: '[email protected]',
-    createdAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    updatedAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    type: MemberType.Individual,
-    extra: { lang: 'en' },
   },
   EVAN: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130022',
     name: 'evan',
     email: '[email protected]',
-    createdAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    updatedAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    type: MemberType.Individual,
-    extra: { lang: 'en' },
     thumbnail:
       'https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Children_playing_on_the_beach.jpg/320px-Children_playing_on_the_beach.jpg',
   },
   FANNY: {
     id: 'ecafbd2a-5642-31fb-ae93-0242ac130012',
     name: 'fanny',
     email: '[email protected]',
-    createdAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    updatedAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    type: MemberType.Individual,
-    extra: {},
   },
   GRAASPER: {
     id: GRAASPER_ID,
     name: 'graasper',
     email: '[email protected]',
-    createdAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
-    updatedAt: new Date(Date.parse('2021-04-13 14:56:34.749946')),
+  },
+};
+
+export const COMPLETE_MEMBERS: {
+  [key: string]: CompleteMember & { thumbnail?: string };
+} = {
+  ANNA: {
+    id: 'ecafbd2a-5642-31fb-ae93-0242ac130002',
+    name: 'anna',
+    email: '[email protected]',
+    createdAt: '2021-04-13 14:56:34.749946',
+    updatedAt: '2021-04-13 14:56:34.749946',
     type: MemberType.Individual,
-    extra: {},
+    extra: {
+      lang: 'fr',
+    },
+  },
+  BOB: {
+    id: 'ecafbd2a-5642-31fb-ae93-0242ac130004',
+    name: 'bob',
+    email: '[email protected]',
+    createdAt: '2021-04-13 14:56:34.749946',
+    updatedAt: '2021-04-13 14:56:34.749946',
+    type: MemberType.Individual,
+    extra: { lang: 'en' },
+    thumbnail:
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Pedro_Luro_edit.jpg/210px-Pedro_Luro_edit.jpg',
   },
 };
 
-export const CURRENT_USER = MEMBERS.ANNA;
+export const CURRENT_USER = COMPLETE_MEMBERS.ANNA;

cypress/support/cypress.ts

@@ -1,6 +1,6 @@
-import { Category, ItemLike } from '@graasp/sdk';
+import { Category } from '@graasp/sdk';
 
-import { MockItem, MockMember } from './types';
+import { MockItem, MockItemLike, MockMember } from './types';
 
 declare global {
   namespace Cypress {
@@ -15,7 +15,7 @@ declare global {
         getItemCategoriesError?: boolean;
         searchResultItems?: MockItem[];
         searchError?: boolean;
-        itemLikes?: ItemLike[];
+        itemLikes?: MockItemLike[];
         getLikedItemsError?: boolean;
         getItemError?: boolean;
         getTagsError?: boolean;

cypress/support/types.ts

@@ -9,7 +9,7 @@ import {
   PermissionLevel,
 } from '@graasp/sdk';
 
-export type MockItemLike = Omit<ItemLike, 'createdAt'>;
+export type MockItemLike = Omit<ItemLike, 'createdAt'> & { creator: Member };
 export type MockItemCategory = Omit<ItemCategory, 'createdAt' | 'creator'>;
 export type MockMember = Member & { thumbnail?: string };
 export type MockItemMembership = Omit<

package.json

@@ -33,10 +33,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "https://github.com/graasp/graasp-query-client.git#main",
-    "@graasp/sdk": "1.9.1",
-    "@graasp/translations": "1.19.1",
-    "@graasp/ui": "3.5.4",
+    "@graasp/query-client": "github:graasp/graasp-query-client#433-remove-immutable",
+    "@graasp/sdk": "github:graasp/graasp-sdk#remove-frontend",
+    "@graasp/translations": "1.19.2",
+    "@graasp/ui": "github:graasp/graasp-ui#remove-immutable",
     "@mui/icons-material": "5.14.3",
     "@mui/lab": "5.0.0-alpha.140",
     "@mui/material": "5.14.5",
@@ -47,9 +47,9 @@
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
     "http-status-codes": "2.2.0",
     "i18next": "23.4.6",
-    "immutable": "4.3.2",
     "interweave": "13.1.0",
     "lodash": "4.17.21",
+    "lodash.groupby": "4.6.0",
     "lodash.isobject": "3.0.2",
     "lodash.isstring": "4.0.1",
     "lodash.truncate": "4.4.2",
@@ -72,6 +72,7 @@
     "@commitlint/cli": "17.7.2",
     "@commitlint/config-conventional": "17.7.0",
     "@cypress/code-coverage": "3.11.0",
+    "@types/lodash.groupby": "4.6.8",
     "@types/lodash.truncate": "4.4.7",
     "@types/luxon": "3.3.2",
     "@types/node": "18.17.19",
@@ -104,8 +105,7 @@
   },
   "resolutions": {
     "@types/react": "17.0.66",
-    "@graasp/sdk": "1.9.1",
-    "immutable": "4.3.4"
+    "@graasp/sdk": "github:graasp/graasp-sdk#remove-frontend"
   },
   "nyc": {
     "exclude": [

pages/all-collections.tsx

@@ -26,11 +26,12 @@ AllCollectionsPage.propTypes = {
 };
 
 export async function getServerSideProps() {
-  const { queryClient, dehydrate } = configureQueryClient(QUERY_CLIENT_OPTIONS);
+  const { queryClient, dehydrate, axios } =
+    configureQueryClient(QUERY_CLIENT_OPTIONS);
 
   await queryClient.prefetchQuery(['items', 'collections', 'all'], () =>
-    Api.getAllPublishedItems({}, QUERY_CLIENT_OPTIONS).then((data) =>
-      JSON.parse(JSON.stringify(data)),
+    Api.getAllPublishedItems({}, { ...QUERY_CLIENT_OPTIONS, axios }).then(
+      (data) => JSON.parse(JSON.stringify(data)),
     ),
   );
 

pages/collections/[id].tsx

@@ -33,11 +33,12 @@ export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
   params,
 }) => {
   const id = params?.id;
-  const { queryClient, dehydrate } = configureQueryClient(QUERY_CLIENT_OPTIONS);
+  const { queryClient, dehydrate, axios } =
+    configureQueryClient(QUERY_CLIENT_OPTIONS);
   if (id) {
     // prefetch data in query client
     await queryClient.prefetchQuery(DATA_KEYS.buildItemKey(id), () =>
-      Api.getItem(id, QUERY_CLIENT_OPTIONS).then((data) =>
+      Api.getItem(id, { ...QUERY_CLIENT_OPTIONS, axios }).then((data) =>
         JSON.parse(JSON.stringify(data)),
       ),
     );

pages/index.tsx

@@ -17,15 +17,18 @@ const HomePage = ({
 );
 
 export async function getServerSideProps() {
-  const { queryClient, dehydrate } = configureQueryClient(QUERY_CLIENT_OPTIONS);
+  const { queryClient, dehydrate, axios } =
+    configureQueryClient(QUERY_CLIENT_OPTIONS);
 
   // todo: can't use DATA_KEYS.buildPublishedItemsKey which returns undefined when no categoryIds are passed in
   await queryClient.prefetchQuery(['items', 'collections', 'all'], () =>
-    Api.getAllPublishedItems({}, QUERY_CLIENT_OPTIONS).then((data) => {
-      // todo: this is a hack to resolve the date serializing issue
-      // deserialization of dates should happen later in the pipeline so we ge the raw api response here
-      return JSON.parse(JSON.stringify(data));
-    }),
+    Api.getAllPublishedItems({}, { ...QUERY_CLIENT_OPTIONS, axios }).then(
+      (data) => {
+        // todo: this is a hack to resolve the date serializing issue
+        // deserialization of dates should happen later in the pipeline so we ge the raw api response here
+        return JSON.parse(JSON.stringify(data));
+      },
+    ),
   );
   // Pass data to the page via props
   return { props: { dehydratedState: dehydrate(queryClient) } };

pages/my-list.tsx

@@ -17,11 +17,12 @@ const MyListPage = ({
 );
 
 export async function getServerSideProps() {
-  const { queryClient, dehydrate } = configureQueryClient(QUERY_CLIENT_OPTIONS);
+  const { queryClient, dehydrate, axios } =
+    configureQueryClient(QUERY_CLIENT_OPTIONS);
 
   await queryClient.prefetchQuery(['items', 'collections', 'all'], () =>
-    Api.getAllPublishedItems({}, QUERY_CLIENT_OPTIONS).then((data) =>
-      JSON.parse(JSON.stringify(data)),
+    Api.getAllPublishedItems({}, { ...QUERY_CLIENT_OPTIONS, axios }).then(
+      (data) => JSON.parse(JSON.stringify(data)),
     ),
   );
 

src/components/QueryClientContext.tsx

@@ -1,11 +1,8 @@
-import { isImmutable } from 'immutable';
-
 import React from 'react';
 import { DehydratedState } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
 import { configureQueryClient } from '@graasp/query-client';
-import { convertJs, parseStringToDate } from '@graasp/sdk';
 
 import { QUERY_CLIENT_OPTIONS } from '../config/queryClient';
 
@@ -21,16 +18,6 @@ const QueryClientProvider = ({ children, dehydratedState }: Props) => {
   const value = configureQueryClient(QUERY_CLIENT_OPTIONS);
   const { QueryClientProvider: Provider, queryClient, Hydrate } = value;
 
-  // transform queryclient data into immutable data
-  // we can't pass immutable from server
-  dehydratedState?.queries?.forEach((query) => {
-    if (!isImmutable(query.state.data)) {
-      const deserializedData = parseStringToDate(query.state.data);
-      // eslint-disable-next-line no-param-reassign
-      query.state.data = convertJs(deserializedData);
-    }
-  });
-
   return (
     <QueryClientContext.Provider value={value}>
       <Provider client={queryClient}>