fix: update esm deps (#306)

* fix: update dependencies

* fix: tests

* fix: update lockfile

* fix: update query-client

* fix: use fixed deps

* fix: use query-v4

* fix: remove build options in tsconfig

* fix: update deps

.gitignore

@@ -28,7 +28,7 @@ cypress/screenshots
 cypress/videos
 /.nyc_output
 /coverage
-
+cypress/downloads/
 
 # jetbrains
 .idea

.yarnrc.yml

@@ -8,4 +8,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

cypress/e2e/SignUp.cy.ts

@@ -1,5 +1,4 @@
 import { StatusCodes } from 'http-status-codes';
-import qs from 'qs';
 
 import { API_ROUTES } from '@graasp/query-client';
 
@@ -45,12 +44,9 @@ describe('Name and Email Validation', () => {
         reply(invitation);
       },
     );
-    cy.visit(
-      `${SIGN_UP_PATH}${qs.stringify(
-        { invitationId: invitation.id },
-        { addQueryPrefix: true },
-      )}`,
-    );
+    const search = new URLSearchParams();
+    search.set('invitationId', invitation.id);
+    cy.visit(`${SIGN_UP_PATH}?${search.toString()}`);
     checkInvitationFields(invitation);
   });
 
@@ -60,12 +56,9 @@ describe('Name and Email Validation', () => {
       email: 'email',
     };
     cy.intercept(API_ROUTES.buildGetInvitationRoute(invitation.id), invitation);
-    cy.visit(
-      `${SIGN_UP_PATH}${qs.stringify(
-        { invitationId: invitation.id },
-        { addQueryPrefix: true },
-      )}`,
-    );
+    const search = new URLSearchParams();
+    search.set('invitationId', invitation.id);
+    cy.visit(`${SIGN_UP_PATH}?${search.toString()}`);
     checkInvitationFields(invitation);
   });
 
@@ -78,12 +71,9 @@ describe('Name and Email Validation', () => {
       statusCode: 404,
       body: '404 Not Found!',
     });
-    cy.visit(
-      `${SIGN_UP_PATH}${qs.stringify(
-        { invitationId: invitation.id },
-        { addQueryPrefix: true },
-      )}`,
-    );
+    const search = new URLSearchParams();
+    search.set('invitationId', invitation.id);
+    cy.visit(`${SIGN_UP_PATH}?${search.toString()}`);
     cy.get(`#${SIGN_UP_BUTTON_ID}`).should('be.visible');
   });
 });

cypress/fixtures/members.ts

@@ -1,10 +1,11 @@
-import { Member, MemberType } from '@graasp/sdk';
+import { CompleteMember, MemberType, Password } from '@graasp/sdk';
 
 export const MEMBERS: {
-  [name: string]: Member & {
+  [name: string]: CompleteMember & {
     nameValid?: boolean;
     emailValid?: boolean;
     passwordValid?: boolean;
+    password?: Password;
   };
 } = {
   GRAASP: {

cypress/support/server.ts

@@ -1,5 +1,4 @@
 import { StatusCodes } from 'http-status-codes';
-import qs from 'qs';
 
 import { API_ROUTES } from '@graasp/query-client';
 
@@ -70,10 +69,7 @@ export const mockGetMembers = (members) => {
       url: `${API_HOST}/members?id=`,
     },
     ({ url, reply }) => {
-      let { id: memberIds } = qs.parse(url.slice(url.indexOf('?') + 1));
-      if (typeof memberIds === 'string') {
-        memberIds = [memberIds];
-      }
+      const memberIds = new URLSearchParams(url).getAll('id');
       const allMembers = (memberIds as string[])?.map((id) =>
         members.find(({ id: mId }) => mId === id),
       );

cypress/tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
-    "target": "es5",
+    "esModuleInterop": false,
+    "target": "ESNext",
     "lib": ["es5", "dom"],
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node"],
+    "moduleResolution": "Bundler"
   },
   "include": ["**/*.ts"]
 }

package.json

@@ -13,24 +13,24 @@
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "2.4.2",
-    "@graasp/sdk": "3.3.0",
-    "@graasp/translations": "1.22.1",
-    "@graasp/ui": "4.1.1",
-    "@mui/icons-material": "5.14.19",
+    "@graasp/query-client": "2.7.1",
+    "@graasp/sdk": "4.0.1",
+    "@graasp/translations": "1.25.2",
+    "@graasp/ui": "4.8.3",
+    "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.152",
-    "@mui/material": "5.14.19",
-    "@sentry/react": "7.93.0",
+    "@mui/material": "5.15.11",
+    "@sentry/react": "7.103.0",
     "http-status-codes": "2.3.0",
-    "qs": "6.11.2",
+    "i18next": "23.10.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
-    "react-i18next": "13.5.0",
-    "react-router": "6.20.1",
-    "react-router-dom": "6.20.1",
-    "react-toastify": "9.1.3",
-    "stylis": "4.3.0",
+    "react-i18next": "14.0.5",
+    "react-router": "6.22.1",
+    "react-router-dom": "6.22.1",
+    "react-toastify": "10.0.4",
+    "stylis": "4.3.1",
     "stylis-plugin-rtl": "2.1.1",
     "validator": "13.11.0"
   },
@@ -75,40 +75,42 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "18.4.4",
-    "@commitlint/config-conventional": "18.4.4",
-    "@cypress/code-coverage": "3.12.13",
-    "@testing-library/jest-dom": "6.2.0",
-    "@testing-library/react": "14.1.2",
-    "@testing-library/user-event": "14.5.1",
+    "@commitlint/cli": "18.6.1",
+    "@commitlint/config-conventional": "18.6.2",
+    "@cypress/code-coverage": "3.12.26",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@testing-library/user-event": "14.5.2",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/jest": "29.5.11",
-    "@types/node": "20.11.5",
-    "@types/qs": "6.9.10",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "18.2.17",
+    "@types/node": "20.11.20",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "18.2.19",
     "@types/react-router-dom": "5.3.3",
-    "@types/validator": "13.11.7",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@types/validator": "13.11.9",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "7.1.0",
     "@vitejs/plugin-react": "4.2.1",
     "concurrently": "8.2.2",
-    "cypress": "13.6.1",
+    "cypress": "13.6.6",
+    "cypress-vite": "1.5.0",
     "env-cmd": "10.1.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-import-resolver-typescript": "3.6.1",
-    "husky": "8.0.3",
+    "husky": "9.0.11",
     "istanbul-lib-coverage": "3.2.2",
     "nyc": "15.1.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "rollup-plugin-visualizer": "5.12.0",
     "standard-version": "9.5.0",
     "typescript": "5.3.3",
-    "vite": "5.0.6",
-    "vite-plugin-checker": "0.6.2",
+    "vite": "5.1.4",
+    "vite-plugin-checker": "0.6.4",
     "vite-plugin-istanbul": "5.0.0"
   },
-  "packageManager": "[email protected]"
+  "resolutions": {
+    "@graasp/query-client": "github:graasp/graasp-query-client#use-conditional-export"
+  },
+  "packageManager": "[email protected]"
 }

src/components/Redirection.tsx

@@ -16,7 +16,7 @@ const Redirection: FC<Props> = ({ children }) => {
   const redirect = useRedirection();
 
   if (member) {
-    redirectToSavedUrl(GRAASP_BUILDER_HOST);
+    redirectToSavedUrl(window, GRAASP_BUILDER_HOST);
 
     return (
       <RedirectionContent link={redirect.url ?? getUrlForRedirection() ?? ''} />

src/components/SignUp.tsx

@@ -54,7 +54,7 @@ const SignUp = () => {
   const {
     data: invitation,
     isSuccess,
-    isLoading,
+    isInitialLoading,
   } = hooks.useInvitation(searchParams.get('invitationId') || undefined);
 
   useEffect(() => {
@@ -66,7 +66,7 @@ const SignUp = () => {
   }, [invitation, isSuccess]);
 
   // loading invitation
-  if (isLoading) {
+  if (isInitialLoading) {
     return <Loader />;
   }
 

src/config/queryClient.ts

@@ -11,11 +11,8 @@ const {
   mutations,
 } = configureQueryClient({
   API_HOST,
-  // avoid refetching when same data are closely fetched
   defaultQueryOptions: {
     keepPreviousData: true,
-    staleTime: 1000, // ms
-    cacheTime: 1000,
   },
   notifier,
   DOMAIN,

tsconfig.json

@@ -11,7 +11,7 @@
     "checkJs": false,
     "allowSyntheticDefaultImports": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

vite.config.ts

@@ -16,7 +16,7 @@ const config = ({ mode }: { mode: string }): UserConfigExport => {
       port: parseInt(process.env.VITE_PORT || '3001', 10),
       open: true,
       watch: {
-        ignored: ['**/coverage/**'],
+        ignored: ['**/coverage/**', 'cypress/downloads/**'],
       },
     },
     preview: {