fix: adapt types to use sdk instead of query-client

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.4.cjs
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

cypress/components/mention-parsing.cy.tsx

@@ -1,3 +1,4 @@
+/// <reference types="../support/cypress"/>
 import React from 'react';
 
 import { convertJs } from '@graasp/sdk';
@@ -8,7 +9,6 @@ import Chatbox, {
 } from '../../src';
 import { dataCyWrapper, messageIdCyWrapper } from '../../src/config/selectors';
 import { ALL_MEMBERS_DISPLAY, ALL_MEMBERS_MEMBER } from '../../src/constants';
-import { ImmutableMember } from '../../src/types';
 import { CHAT_ID, getMockMessage } from '../fixtures/chat_messages';
 import { MEMBERS } from '../fixtures/members';
 import { mockUseAvatar } from '../fixtures/mockHooks';
@@ -30,7 +30,7 @@ describe('Mention Highlighting', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs([annaMessage, allMessage])}
         useAvatarHook={fakeHook}

cypress/components/message-actions.cy.tsx

@@ -1,9 +1,8 @@
-/// <reference types="../cypress"/>
+/// <reference types="../support/cypress" />
 import React from 'react';
 
 import { convertJs } from '@graasp/sdk';
 
-import { ImmutableMember } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   dataCyWrapper,
@@ -26,7 +25,7 @@ describe('Message actions', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
@@ -54,7 +53,7 @@ describe('Delete action', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs(CHAT_MESSAGES)}
         deleteMessageFunction={deleteMessageSpy}
@@ -80,7 +79,7 @@ describe('Edit action', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs(CHAT_MESSAGES)}
         editMessageFunction={editMessageSpy}

cypress/components/render-ui.cy.tsx

@@ -1,11 +1,10 @@
-/// <reference types="../cypress"/>
+/// <reference types="../support/cypress" />
 import { v4 } from 'uuid';
 
 import React from 'react';
 
 import { convertJs } from '@graasp/sdk';
 
-import { ImmutableMember } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   dataCyWrapper,
@@ -27,7 +26,7 @@ describe('Render Avatar', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
@@ -40,7 +39,7 @@ describe('Render Avatar', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
@@ -56,7 +55,7 @@ describe('Autofocus input field', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs(CHAT_MESSAGES)}
         useAvatarHook={fakeHook}
@@ -75,7 +74,7 @@ describe('Messages container', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={convertJs(Object.values(MEMBERS))}
         messages={convertJs([
           {

cypress/components/send-message.cy.tsx

@@ -1,11 +1,10 @@
-/// <reference types="../cypress"/>
+/// <reference types="../support/cypress"/>
 import { List } from 'immutable';
 
 import React from 'react';
 
 import { convertJs } from '@graasp/sdk';
 
-import { ImmutableMember } from '../../src';
 import Chatbox from '../../src/components/Chatbox/Chatbox';
 import {
   charCounterCypress,
@@ -31,7 +30,7 @@ describe('Enter text', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={List(convertJs(Object.values(MEMBERS)))}
         messages={List(convertJs(CHAT_MESSAGES))}
         useAvatarHook={fakeHook}
@@ -64,7 +63,7 @@ describe('Send message', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={List(convertJs(Object.values(MEMBERS)))}
         messages={List(convertJs(CHAT_MESSAGES))}
         sendMessageFunction={sendMessageSpy}
@@ -83,7 +82,7 @@ describe('Send message', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={List(convertJs(Object.values(MEMBERS)))}
         messages={List(convertJs(CHAT_MESSAGES))}
         sendMessageFunction={sendMessageSpy}
@@ -105,7 +104,7 @@ describe('Message Length', () => {
     cy.mount(
       <Chatbox
         chatId={CHAT_ID}
-        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        currentMember={convertJs(MEMBERS.ANNA)}
         members={List(convertJs(Object.values(MEMBERS)))}
         messages={List(convertJs(CHAT_MESSAGES))}
         sendMessageFunction={sendMessageSpy}

cypress/fixtures/mockHooks.ts

@@ -1,20 +1,15 @@
 /// <reference types="../cypress"/>
-import { List, Record } from 'immutable';
+import { List } from 'immutable';
 import { v4 } from 'uuid';
 
 import { QueryObserverResult } from 'react-query';
 
+import { Member, MemberType, MentionStatus, convertJs } from '@graasp/sdk';
 import {
   ChatMention,
-  ChatMentionRecord,
-  Member,
-  MemberExtra,
-  MemberExtraRecord,
-  MemberMentions,
   MemberMentionsRecord,
   MemberRecord,
-} from '@graasp/query-client/dist/types';
-import { MentionStatus } from '@graasp/sdk';
+} from '@graasp/sdk/frontend';
 
 import { CHAT_MESSAGES } from './chat_messages';
 import { CURRENT_MEMBER, MEMBERS } from './members';
@@ -53,50 +48,41 @@ export const mockUseMentions =
       status: MentionStatus.UNREAD,
     };
 
-    const createMention: Record.Factory<ChatMention> = Record(defaultMention);
-    const CHAT_MENTION_1: ChatMentionRecord = createMention({
+    const CHAT_MENTION_1: ChatMention = {
+      ...defaultMention,
       id: v4(),
       creator: MEMBERS.BOB.id,
       messageId: CHAT_MESSAGES[0].id,
-    });
-    const CHAT_MENTION_2: ChatMentionRecord = createMention({
+    };
+    const CHAT_MENTION_2: ChatMention = {
+      ...defaultMention,
       id: v4(),
       creator: MEMBERS.ANNA.id,
       messageId: CHAT_MESSAGES[1].id,
-    });
-
-    const defaultMemberMentionsValues: MemberMentions = {
-      memberId: '',
-      mentions: List([]),
     };
 
-    const createMockMemberMentions: Record.Factory<MemberMentions> = Record(
-      defaultMemberMentionsValues,
-    );
-    const MEMBER_MENTIONS: MemberMentionsRecord = createMockMemberMentions({
+    const MEMBER_MENTIONS: MemberMentionsRecord = convertJs({
       memberId: CURRENT_MEMBER.id,
-      mentions: List([CHAT_MENTION_1, CHAT_MENTION_2]),
+      mentions: [CHAT_MENTION_1, CHAT_MENTION_2],
     });
     return {
       data: MEMBER_MENTIONS,
     } as unknown as QueryObserverResult<MemberMentionsRecord>;
   };
 
 export const mockUseMembers = (): QueryObserverResult<List<MemberRecord>> => {
-  const defaultMemberExtra: MemberExtra = {
-    hasAvatar: false,
-  };
-  const createMemberExtra: Record.Factory<MemberExtra> =
-    Record(defaultMemberExtra);
-  const extra: MemberExtraRecord = createMemberExtra();
   const defaultMember: Member = {
     id: '',
     name: '',
-    extra,
+    extra: {},
+    type: MemberType.Individual,
     email: '[email protected]',
+    createdAt: 'somedate',
+    updatedAt: 'someotherDate',
   };
 
-  const createMember: Record.Factory<Member> = Record(defaultMember);
+  const createMember = (member: Partial<Member>): MemberRecord =>
+    convertJs({ ...defaultMember, ...member });
 
   return {
     data: List([

cypress/support/commands.ts

@@ -1,4 +1,4 @@
-/// <reference types="../cypress" />
+/// <reference types="./cypress" />
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite

cypress/tsconfig.json

@@ -2,8 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],
-    "types": ["cypress", "node"],
-    "esModuleInterop": true
+    "types": ["cypress", "node"]
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "support/cypress.d.ts"]
 }

example/src/components/ChatboxTest.tsx

@@ -16,7 +16,7 @@ import {
 
 import { MentionButton } from '@graasp/chatbox';
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { ChatMention } from '@graasp/query-client/dist/types';
+import { ChatMention } from '@graasp/sdk/frontend';
 import buildI18n, { namespaces } from '@graasp/translations';
 
 import {

example/src/components/ChatboxWrapper.tsx

@@ -1,12 +1,13 @@
 import { FC } from 'react';
 
-import Chatbox, { AvatarHookType, ImmutableMember } from '@graasp/chatbox';
+import Chatbox, { AvatarHookType } from '@graasp/chatbox';
 import { MUTATION_KEYS } from '@graasp/query-client';
-import {
-  PartialChatMessage,
-  PartialNewChatMessage,
-} from '@graasp/query-client/dist/types';
 
+import {
+  DeleteMessageFunctionType,
+  EditMessageFunctionType,
+  SendMessageFunctionType,
+} from '../../../src/types';
 import { DEFAULT_LANG } from '../config/constants';
 import { hooks, useMutation } from '../config/queryClient';
 
@@ -35,23 +36,14 @@ const ChatboxWrapper: FC<Props> = ({
     (memberships?.size && memberships?.map((m) => m.memberId)?.toArray()) || [];
   const members = hooks.useMembers(memberIds).data;
 
-  const member = new ImmutableMember(currentMember);
+  const member = currentMember;
 
-  const {
-    mutate: sendMessage,
-  }: { mutate: (message: PartialNewChatMessage) => void } = useMutation(
-    MUTATION_KEYS.POST_ITEM_CHAT_MESSAGE,
-  );
-  const {
-    mutate: deleteMessage,
-  }: { mutate: (message: PartialChatMessage) => void } = useMutation(
-    MUTATION_KEYS.DELETE_ITEM_CHAT_MESSAGE,
-  );
-  const {
-    mutate: editMessage,
-  }: { mutate: (message: PartialChatMessage) => void } = useMutation(
-    MUTATION_KEYS.PATCH_ITEM_CHAT_MESSAGE,
-  );
+  const { mutate: sendMessage }: { mutate: SendMessageFunctionType } =
+    useMutation(MUTATION_KEYS.POST_ITEM_CHAT_MESSAGE);
+  const { mutate: deleteMessage }: { mutate: DeleteMessageFunctionType } =
+    useMutation(MUTATION_KEYS.DELETE_ITEM_CHAT_MESSAGE);
+  const { mutate: editMessage }: { mutate: EditMessageFunctionType } =
+    useMutation(MUTATION_KEYS.PATCH_ITEM_CHAT_MESSAGE);
 
   return (
     <Chatbox

package.json

@@ -30,6 +30,8 @@
     "prepack": "yarn build",
     "prepare": "yarn prepack",
     "lint": "eslint .",
+    "type-check": "tsc --noEmit",
+    "check": "yarn prettier:check && yarn lint && yarn type-check",
     "prettier:check": "prettier --check \"{src,example}/**/*.{js,ts,tsx}\"",
     "prettier:write": "prettier --write \"{src,example,cypress}/**/*.{js,ts,tsx}\"",
     "pretest": "cd example && yarn",
@@ -52,22 +54,25 @@
   "dependencies": {
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
-    "@graasp/translations": "1.3.0",
-    "@graasp/ui": "0.7.1",
+    "@graasp/query-client": "0.2.0",
+    "@graasp/sdk": "0.4.1",
+    "@graasp/translations": "1.4.0",
+    "@graasp/ui": "0.10.5",
     "clsx": "1.2.1",
     "i18next": "21.8.1",
-    "immutable": "4.1.0",
+    "immutable": "4.2.4",
     "lodash.truncate": "4.4.2",
     "moment": "2.29.4",
     "prism-react-renderer": "1.3.5",
     "react-csv": "2.2.2",
     "react-i18next": "12.0.0",
     "react-markdown": "8.0.3",
     "react-mentions": "4.4.7",
-    "react-query": "3.39.2",
+    "react-query": "3.39.3",
     "react-router-dom": "6.3.0",
     "remark-breaks": "3.0.2",
-    "remark-gfm": "3.0.1"
+    "remark-gfm": "3.0.1",
+    "tsc-alias": "1.8.2"
   },
   "browserslist": [
     "last 1 Chrome version"
@@ -79,7 +84,6 @@
     "@cypress/react": "7.0.2",
     "@cypress/webpack-dev-server": "3.2.3",
     "@graasp/query-client": "0.1.2",
-    "@graasp/sdk": "0.2.0",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.117",
     "@mui/material": "5.11.6",
@@ -122,18 +126,18 @@
     "rollup-jest": "1.1.3",
     "rollup-plugin-import-css": "3.0.3",
     "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-tsc-alias": "1.1.2",
     "standard-version": "9.5.0",
     "ts-loader": "9.3.1",
     "tslib": "2.3.1",
-    "typescript": "4.9.4"
+    "typescript": "4.9.5"
   },
   "resolutions": {
     "@types/react": "17.0.2",
-    "immutable": "4.1.0",
-    "react-query": "3.39.2"
+    "immutable": "4.2.4"
   },
   "files": [
     "dist"
   ],
-  "packageManager": "yarn@3.2.4"
+  "packageManager": "yarn@3.4.1"
 }