fix(deps): update dependencies and adapt for new query-client

example/package.json

@@ -11,12 +11,12 @@
   },
   "dependencies": {
     "@graasp/chatbox": "link:..",
-    "@graasp/query-client": "github:graasp/graasp-query-client#typeorm",
+    "@graasp/query-client": "github:graasp/graasp-query-client#use-query-client",
     "@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": "4.9.4"
+    "typescript": "4.9.5"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "7.8.3",
@@ -26,7 +26,7 @@
     "@types/react-dom": "link:../node_modules/@types/react-dom",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-i18next": "12.0.0"
+    "react-i18next": "12.3.1"
   },
   "browserslist": {
     "production": [

example/src/components/ChatboxTest.tsx

@@ -15,16 +15,14 @@ import {
 } from '@mui/material';
 
 import { MentionButton } from '@graasp/chatbox';
-import { MUTATION_KEYS } from '@graasp/query-client';
-import { ChatMention } from '@graasp/sdk';
 import buildI18n, { namespaces } from '@graasp/translations';
 
 import {
   DEFAULT_CHAT_ID,
   DEFAULT_LANG,
   GRAASP_PANEL_WIDTH,
 } from '../config/constants';
-import { hooks, useMutation } from '../config/queryClient';
+import { hooks, mutations } from '../config/queryClient';
 import ChatboxWrapper from './ChatboxWrapper';
 
 const TextInputControl = styled(FormControlLabel)({
@@ -77,29 +75,16 @@ const ChatboxTest: FC = () => {
   const memberId = currentMember?.get('id') as string;
 
   // mutations to handle the mentions
-  const { mutate: patchMentionMutate } = useMutation<
-    ChatMention,
-    unknown,
-    { memberId: string; id: string; status: string }
-  >(MUTATION_KEYS.PATCH_MENTION);
+  const { mutate: patchMentionMutate } = mutations.usePatchMention();
   const patchMentionFunction = (args: { id: string; status: string }): void =>
     patchMentionMutate({ memberId, ...args });
 
-  const { mutate: deleteMentionMutate } = useMutation<
-    ChatMention,
-    unknown,
-    { memberId: string; mentionId: string }
-  >(MUTATION_KEYS.DELETE_MENTION);
+  const { mutate: deleteMentionMutate } = mutations.useDeleteMention();
   const deleteMentionFunction = (mentionId: string): void =>
-    deleteMentionMutate({ memberId, mentionId });
+    deleteMentionMutate(mentionId);
 
-  const { mutate: clearAllMentionsMutate } = useMutation<
-    ChatMention[],
-    unknown,
-    { memberId: string }
-  >(MUTATION_KEYS.CLEAR_MENTIONS);
-  const clearAllMentionsFunction = (): void =>
-    clearAllMentionsMutate({ memberId });
+  const { mutate: clearAllMentionsMutate } = mutations.useClearMentions();
+  const clearAllMentionsFunction = (): void => clearAllMentionsMutate();
 
   // adapt the width of the chatbox to simulate the width used on Graasp
   const onChangePanelWidth = (
@@ -194,11 +179,7 @@ const ChatboxTest: FC = () => {
           />
         </TestContainer>
         <ChatboxContainer>
-          <ChatboxWrapper
-            chatId={chatId}
-            lang={lang}
-            showAdminTools={showTools}
-          />
+          <ChatboxWrapper chatId={chatId} showAdminTools={showTools} />
         </ChatboxContainer>
       </Container>
     </I18nextProvider>

example/src/components/ChatboxWrapper.tsx

@@ -1,74 +1,57 @@
-import { FC } from 'react';
-
-import { MUTATION_KEYS } from '@graasp/query-client';
 import { Member, MemberType, convertJs } from '@graasp/sdk';
 
 import { v4 } from 'uuid';
 
 import Chatbox, { AvatarHookType } from '../../../src';
-import {
-  DeleteMessageFunctionType,
-  EditMessageFunctionType,
-  SendMessageFunctionType,
-} from '../../../src/types';
-import { DEFAULT_LANG } from '../config/constants';
-import { hooks, useMutation } from '../config/queryClient';
+import { hooks, mutations } from '../config/queryClient';
 
 type Props = {
   chatId: string;
-  lang?: string;
   showHeader?: boolean;
   showAdminTools?: boolean;
 };
 
-const ChatboxWrapper: FC<Props> = ({
+const ChatboxWrapper = ({
   chatId,
-  lang = DEFAULT_LANG,
   showHeader = false,
   showAdminTools = false,
-}) => {
+}: Props): JSX.Element => {
   // use hooks
   const { data: currentMember } = hooks.useCurrentMember();
-  const { data: chat } = hooks.useItemChat(chatId);
-  // get chat messages
-  const chatMessages = chat?.messages;
-
+  const { data: chatMessages } = hooks.useItemChat(chatId);
   const { data: memberships } = hooks.useItemMemberships(chatId);
 
   const memberIds: string[] =
-    (memberships?.size && memberships?.map((m) => m.memberId)?.toArray()) || [];
-  const members = hooks.useMembers(memberIds).data;
+    (memberships?.size && memberships?.map((m) => m.member.id)?.toArray()) ||
+    [];
+  const { data: members } = hooks.useMembers(memberIds);
   const defaultCurrentMember: Member = {
     id: v4(),
     name: 'default-member',
     email: 'default-email',
     type: MemberType.Individual,
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString(),
+    createdAt: new Date(),
+    updatedAt: new Date(),
     extra: {},
   };
   const member = currentMember || convertJs(defaultCurrentMember);
 
-  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);
+  const { mutate: sendMessage } = mutations.usePostItemChatMessage();
+  const { mutate: deleteMessage } = mutations.useDeleteItemChatMessage();
+  const { mutate: editMessage } = mutations.usePatchItemChatMessage();
 
   return (
     <Chatbox
-      lang={lang}
       chatId={chatId}
       showHeader={showHeader}
       showAdminTools={showAdminTools}
       currentMember={member}
-      members={members}
+      members={members?.data?.toSeq()?.toList()}
       messages={chatMessages}
       sendMessageFunction={sendMessage}
       deleteMessageFunction={deleteMessage}
       editMessageFunction={editMessage}
-      useAvatarHook={hooks.useAvatar as AvatarHookType}
+      useAvatarUrl={hooks.useAvatar as AvatarHookType}
     />
   );
 };

example/src/config/queryClient.js → example/src/config/queryClient.ts

@@ -4,9 +4,10 @@ import { API_HOST } from './constants';
 
 const {
   queryClient,
+  useQueryClient,
   QueryClientProvider,
   hooks,
-  useMutation,
+  mutations,
   ReactQueryDevtools,
 } = configureQueryClient({
   API_HOST,
@@ -23,8 +24,9 @@ const {
 
 export {
   queryClient,
+  useQueryClient,
   QueryClientProvider,
   hooks,
-  useMutation,
+  mutations,
   ReactQueryDevtools,
 };

example/tsconfig.json

@@ -12,7 +12,6 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "allowSyntheticDefaultImports": true,

package.json

@@ -48,10 +48,10 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@graasp/query-client": "^1.0.0",
-    "@graasp/sdk": "^1.0.0",
-    "@graasp/translations": "^1.13.0",
-    "@graasp/ui": "^3.0.0",
+    "@graasp/query-client": "*",
+    "@graasp/sdk": "^1.1.0",
+    "@graasp/translations": "^1.15.0",
+    "@graasp/ui": "^3.2.0",
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.11",
@@ -65,44 +65,44 @@
     "lodash.truncate": "4.4.2",
     "moment": "2.29.4",
     "prism-react-renderer": "1.3.5",
-    "react-markdown": "8.0.5",
-    "react-mentions": "4.4.7",
+    "react-markdown": "8.0.7",
+    "react-mentions": "4.4.9",
     "react-query": "3.39.3",
-    "remark-breaks": "3.0.2",
+    "remark-breaks": "3.0.3",
     "remark-gfm": "3.0.1",
     "tsc-alias": "1.8.2"
   },
   "browserslist": [
     "last 1 Chrome version"
   ],
   "devDependencies": {
-    "@commitlint/cli": "17.4.4",
-    "@commitlint/config-conventional": "17.4.4",
+    "@commitlint/cli": "17.6.6",
+    "@commitlint/config-conventional": "17.6.6",
     "@cypress/instrument-cra": "1.4.0",
-    "@cypress/react": "7.0.2",
-    "@emotion/react": "11.10.6",
-    "@emotion/styled": "11.10.6",
-    "@graasp/query-client": "1.0.0-rc1",
-    "@graasp/sdk": "1.0.0-rc1",
-    "@graasp/translations": "1.13.0",
-    "@graasp/ui": "3.0.0-rc1",
-    "@mui/icons-material": "5.11.11",
-    "@mui/lab": "5.0.0-alpha.121",
-    "@mui/material": "5.11.11",
-    "@trivago/prettier-plugin-sort-imports": "3.2.0",
-    "@types/jest": "27.4.0",
+    "@cypress/react": "7.0.3",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@graasp/query-client": "github:graasp/graasp-query-client#use-query-client",
+    "@graasp/sdk": "1.1.0",
+    "@graasp/translations": "1.15.0",
+    "@graasp/ui": "3.2.0",
+    "@mui/icons-material": "5.11.16",
+    "@mui/lab": "5.0.0-alpha.134",
+    "@mui/material": "5.13.6",
+    "@trivago/prettier-plugin-sort-imports": "4.1.1",
+    "@types/jest": "27.5.2",
     "@types/lodash.truncate": "4.4.7",
     "@types/material-ui": "0.21.12",
     "@types/node": "17.0.24",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.11",
     "@types/react-mentions": "4.1.8",
-    "@types/uuid": "9.0.0",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
-    "@typescript-eslint/parser": "5.49.0",
+    "@types/uuid": "9.0.2",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "@vitejs/plugin-react": "3.1.0",
     "cross-env": "7.0.3",
-    "cypress": "12.9.0",
+    "cypress": "12.16.0",
     "env-cmd": "10.1.0",
     "eslint": "8.23.0",
     "eslint-config-prettier": "8.3.0",
@@ -113,26 +113,27 @@
     "eslint-plugin-promise": "5.2.0",
     "eslint-plugin-react": "7.30.1",
     "husky": "8.0.3",
-    "i18next": "21.8.1",
+    "i18next": "21.10.0",
     "immutable": "4.3.0",
-    "prettier": "2.8.4",
+    "prettier": "2.8.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-i18next": "12.0.0",
-    "react-router-dom": "6.10.0",
+    "react-i18next": "12.3.1",
+    "react-router-dom": "6.14.0",
     "react-scripts": "5.0.1",
     "rimraf": "3.0.2",
     "rollup": "2.77.0",
     "rollup-plugin-visualizer": "5.9.0",
     "ts-loader": "9.3.1",
     "tslib": "2.5.0",
     "typescript": "4.9.5",
-    "vite": "4.2.1",
-    "vite-plugin-dts": "2.1.0"
+    "vite": "4.3.9",
+    "vite-plugin-dts": "2.3.0"
   },
   "resolutions": {
     "@types/react": "17.0.2",
-    "immutable": "4.3.0"
+    "immutable": "4.3.0",
+    "@graasp/sdk": "1.1.0"
   },
   "packageManager": "[email protected]"
 }

renovate.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["github>graasp/renovate-config"]
+}