feat!: remove immutable (#141)

graasp · Nov 3, 2023 · cb0eb86 · cb0eb86
1 parent 7134250
commit cb0eb86
Show file tree

Hide file tree

Showing 23 changed files with 2,837 additions and 577 deletions.
diff --git a/cypress/components/mention-parsing.cy.tsx b/cypress/components/mention-parsing.cy.tsx
@@ -1,8 +1,6 @@
 /// <reference types="../support/cypress"/>
 import React from 'react';
 
-import { convertJs } from '@graasp/sdk';
-
 import { LEGACY_MENTION_MARKUP, getMentionMarkupFromMember } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import { dataCyWrapper, messageIdCyWrapper } from '../../src/config/selectors';
@@ -28,9 +26,9 @@ describe('Mention Highlighting', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs([annaMessage, allMessage])}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={[annaMessage, allMessage]}
         useAvatarUrl={fakeHook}
       />,
     );

diff --git a/cypress/components/message-actions.cy.tsx b/cypress/components/message-actions.cy.tsx
@@ -1,8 +1,6 @@
 /// <reference types="../support/cypress" />
 import React from 'react';
 
-import { convertJs } from '@graasp/sdk';
-
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   dataCyWrapper,
@@ -25,9 +23,9 @@ describe('Message actions', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs(CHAT_MESSAGES)}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         useAvatarUrl={fakeHook}
       />,
     );
@@ -53,9 +51,9 @@ describe('Delete action', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs(CHAT_MESSAGES)}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         deleteMessageFunction={deleteMessageSpy}
         useAvatarUrl={fakeHook}
       />,
@@ -79,9 +77,9 @@ describe('Edit action', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs(CHAT_MESSAGES)}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         editMessageFunction={editMessageSpy}
         sendMessageFunction={sendMessageSpy}
         useAvatarUrl={fakeHook}

diff --git a/cypress/components/render-ui.cy.tsx b/cypress/components/render-ui.cy.tsx
@@ -1,8 +1,6 @@
 /// <reference types="../support/cypress" />
 import React from 'react';
 
-import { convertJs } from '@graasp/sdk';
-
 import { v4 } from 'uuid';
 
 import Chatbox from '../../src/components/Chatbox/Chatbox';
@@ -26,9 +24,9 @@ describe('Render Avatar', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs(CHAT_MESSAGES)}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         useAvatarUrl={fakeHook}
       />,
     );
@@ -39,9 +37,9 @@ describe('Render Avatar', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs(CHAT_MESSAGES)}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         useAvatarUrl={fakeHook}
       />,
     );
@@ -55,9 +53,9 @@ describe('Autofocus input field', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs(CHAT_MESSAGES)}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         useAvatarUrl={fakeHook}
       />,
     ).then(() =>
@@ -74,9 +72,9 @@ describe('Messages container', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={convertJs(Object.values(MEMBERS))}
-        messages={convertJs([
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={[
           {
             ...CHAT_MESSAGES[0],
             id: firstId,
@@ -93,7 +91,7 @@ describe('Messages container', () => {
             ...CHAT_MESSAGES[0],
             id: lastId,
           },
-        ])}
+        ]}
         useAvatarUrl={fakeHook}
       />,
     ).then(() => {

diff --git a/cypress/components/send-message.cy.tsx b/cypress/components/send-message.cy.tsx
@@ -1,10 +1,6 @@
 /// <reference types="../support/cypress"/>
 import React from 'react';
 
-import { convertJs } from '@graasp/sdk';
-
-import { List } from 'immutable';
-
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   charCounterCypress,
@@ -30,9 +26,9 @@ describe('Enter text', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         useAvatarUrl={fakeHook}
       />,
     );
@@ -63,9 +59,9 @@ describe('Send message', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         sendMessageFunction={sendMessageSpy}
         useAvatarUrl={fakeHook}
       />,
@@ -82,9 +78,9 @@ describe('Send message', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         sendMessageFunction={sendMessageSpy}
         useAvatarUrl={fakeHook}
       />,
@@ -104,9 +100,9 @@ describe('Message Length', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={convertJs(MEMBERS.ANNA)}
-        members={List(convertJs(Object.values(MEMBERS)))}
-        messages={List(convertJs(CHAT_MESSAGES))}
+        currentMember={MEMBERS.ANNA}
+        members={Object.values(MEMBERS)}
+        messages={CHAT_MESSAGES}
         sendMessageFunction={sendMessageSpy}
         useAvatarUrl={fakeHook}
       />,

diff --git a/cypress/fixtures/chat_messages.ts b/cypress/fixtures/chat_messages.ts
@@ -20,8 +20,8 @@ export const ITEM_CHAT: FolderItemType = {
   extra: { [ItemType.FOLDER]: { childrenOrder: [] } },
   settings: {},
   creator: CURRENT_MEMBER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
 };
 export const MOCK_MESSAGE_BODY = 'This is a message';
 
@@ -32,8 +32,8 @@ export const getMockMessage = ({
   id: v4(),
   item: ITEM_CHAT,
   creator: member,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
   body: message,
 });
 
@@ -42,32 +42,32 @@ export const CHAT_MESSAGES: ChatMessage[] = [
     id: v4(),
     item: ITEM_CHAT,
     creator: CURRENT_MEMBER,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     body: 'Some really long text that is going to be wrapped to the next line i think, we need to test.\nOn multiple lines',
   },
   {
     id: v4(),
     item: ITEM_CHAT,
     creator: MEMBERS.BOB,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     body: 'A lengthy response to the previous message that i think a lot of people will like to read, since it really goes in deep into the topic.\nAnd here also a preview of the next topic.\n\nSigned Bob',
   },
   {
     id: v4(),
     item: ITEM_CHAT,
     creator: MEMBERS.BOB,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     body: 'And here a text with 2\n\nLine breaks',
   },
   {
     id: v4(),
     item: ITEM_CHAT,
     creator: CURRENT_MEMBER,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     body: 'Message',
   },
 ];

diff --git a/cypress/fixtures/item.ts b/cypress/fixtures/item.ts
@@ -1,16 +1,18 @@
-import { Item, ItemType } from '@graasp/sdk';
+import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 
 import { CURRENT_MEMBER } from './members';
 
-export const MOCK_ITEM: Item = {
+export const MOCK_ITEM: DiscriminatedItem = {
   id: 'some-id',
   name: 'my mock item',
   description: 'a description',
   path: 'some-id',
   settings: {},
   creator: CURRENT_MEMBER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
   type: ItemType.FOLDER,
-  extra: {},
+  extra: {
+    folder: { childrenOrder: [] },
+  },
 };
diff --git a/cypress/fixtures/members.ts b/cypress/fixtures/members.ts
@@ -1,24 +1,15 @@
-import { Member, MemberType } from '@graasp/sdk';
+import { Member } from '@graasp/sdk';
 
-const dateNow = new Date().toISOString();
 export const MEMBERS: { [key: string]: Member } = {
   ANNA: {
     id: '0f0a2774-a965-4b97-afb4-bccc3796e060',
     name: 'anna',
     email: '[email protected]',
-    type: MemberType.Individual,
-    extra: {},
-    createdAt: dateNow,
-    updatedAt: dateNow,
   },
   BOB: {
     id: '1f0a2774-a965-4b97-afb4-bccc3796e060',
     name: 'bob',
     email: '[email protected]',
-    type: MemberType.Individual,
-    extra: {},
-    createdAt: dateNow,
-    updatedAt: dateNow,
   },
 };
 

diff --git a/cypress/fixtures/mockHooks.ts b/cypress/fixtures/mockHooks.ts
@@ -1,10 +1,8 @@
 /// <reference types="../cypress"/>
 import { QueryObserverResult } from 'react-query';
 
-import { ChatMention, MentionStatus, convertJs } from '@graasp/sdk';
-import { ChatMentionRecord } from '@graasp/sdk/frontend';
+import { ChatMention, ChatMessage, MentionStatus } from '@graasp/sdk';
 
-import { List } from 'immutable';
 import { v4 } from 'uuid';
 
 import { CHAT_MESSAGES } from './chat_messages';
@@ -31,23 +29,21 @@ export const mockUseAvatar = (): SpyHookType => ({
   name: USE_AVATAR_HOOK_NAME,
 });
 
-export const mockUseMentions = (): QueryObserverResult<
-  List<ChatMentionRecord>
-> => {
-  const defaultMessage = {
+export const mockUseMentions = (): QueryObserverResult<ChatMention[]> => {
+  const defaultMessage: ChatMessage = {
     id: v4(),
     item: MOCK_ITEM,
     creator: MEMBERS.BOB,
     body: 'some message',
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
   };
   const defaultMention: ChatMention = {
     id: '',
     message: defaultMessage,
     member: CURRENT_MEMBER,
-    createdAt: new Date(),
-    updatedAt: new Date(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     status: MentionStatus.Unread,
   };
 
@@ -66,11 +62,8 @@ export const mockUseMentions = (): QueryObserverResult<
     },
   };
 
-  const MEMBER_MENTIONS: List<ChatMentionRecord> = convertJs([
-    CHAT_MENTION_1,
-    CHAT_MENTION_2,
-  ]);
+  const MEMBER_MENTIONS: ChatMention[] = [CHAT_MENTION_1, CHAT_MENTION_2];
   return {
     data: MEMBER_MENTIONS,
-  } as unknown as QueryObserverResult<List<ChatMentionRecord>>;
+  } as unknown as QueryObserverResult<ChatMention[]>;
 };
diff --git a/example/package.json b/example/package.json
@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "@graasp/chatbox": "link:..",
-    "@graasp/query-client": "1.1.4",
+    "@graasp/query-client": "2.0.0",
+    "@graasp/sdk": "2.0.0",
     "@mui/icons-material": "link:../node_modules/@mui/icons-material",
     "@mui/material": "link:../node_modules/@mui/material",
-    "immutable": "link:../node_modules/immutable",
     "react-scripts": "5.0.1",
     "typescript": "5.1.6"
   },