feat: use query 4 (#221)

* fix: use react-query v4

* fix: use dependencies in test

cypress/fixtures/mockHooks.ts

@@ -1,8 +1,7 @@
 /// <reference types="../cypress"/>
-import { QueryObserverResult } from 'react-query';
-
 import { ChatMention, ChatMessage, MentionStatus } from '@graasp/sdk';
 
+import { QueryObserverResult } from '@tanstack/react-query';
 import { v4 } from 'uuid';
 
 import { CHAT_MESSAGES } from './chat_messages';

package.json

@@ -17,13 +17,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     }
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build:vite": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "type-check": "tsc --noEmit",
     "check": "yarn prettier:check && yarn lint && yarn type-check",
@@ -37,29 +38,23 @@
     "cypress:ci": "cypress run --component"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@graasp/sdk": "^4.0.1",
-    "@graasp/translations": "^1.25.1",
-    "@graasp/ui": "^4.8.1",
-    "@mui/icons-material": "^5.15.11",
-    "@mui/material": "^5.15.11",
-    "cypress": "^13.6.6",
-    "date-fns": "^3.3.1",
     "lodash.groupby": "^4.6.0",
     "prism-react-renderer": "^2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.5",
     "react-markdown": "^9.0.1",
     "react-mentions": "^4.4.10",
-    "react-query": "^3.39.3",
-    "react-router-dom": "^6.22.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@graasp/sdk": "^4.0.1",
+    "@graasp/translations": "^1.25.1",
+    "@graasp/ui": "^4.8.1",
+    "@mui/icons-material": "^5.15.11",
     "@mui/lab": "^5.0.0-alpha.157",
+    "@mui/material": "^5.15.11",
+    "@tanstack/react-query": "4.36.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.truncate": "^4.4.9",
@@ -70,12 +65,18 @@
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
+    "cypress": "^13.6.6",
+    "date-fns": "^3.3.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "i18next": "23.10.0",
     "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.5",
+    "react-router-dom": "^6.22.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "stylis-plugin-rtl": "^2.1.1",
     "tsc-alias": "^1.8.8",
@@ -90,9 +91,10 @@
     "@graasp/sdk": "*",
     "@graasp/translations": "*",
     "@graasp/ui": "*",
-    "@mui/icons-material": "^5.11.11",
+    "@mui/icons-material": "^5",
     "@mui/lab": "^5.0.0-alpha.121",
-    "@mui/material": "^5.11.11",
+    "@mui/material": "^5",
+    "@tanstack/react-query": "^4",
     "date-fns": "^3.2.0",
     "i18next": "^23.7.0",
     "react": "*",

src/components/Mentions/MentionButton.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import { UseQueryResult } from 'react-query';
 
 import { Notifications } from '@mui/icons-material';
 import { Badge, BadgeProps, IconButton, SvgIconProps } from '@mui/material';
 
 import { ChatMention, MentionStatus } from '@graasp/sdk';
 
+import { UseQueryResult } from '@tanstack/react-query';
+
 import { mentionButtonCypress } from '@/config/selectors.js';
 
 import MentionsDialog from './MentionsDialog.js';

src/types.ts

@@ -1,12 +1,12 @@
-import { UseQueryResult } from 'react-query';
-
 import {
   DeleteChatMessageParamType,
   Member,
   PatchChatMessageParamType,
   PostChatMessageParamType,
 } from '@graasp/sdk';
 
+import { UseQueryResult } from '@tanstack/react-query';
+
 export type AvatarHookType = (args: {
   id?: string;
   size?: string;