fix: remove qs dependency (#1041)

* fix: remove qs dependency

* fix: update deps

cypress/e2e/item/create/createShortcut.cy.ts

@@ -1,7 +1,5 @@
 import { ItemType, buildShortcutExtra } from '@graasp/sdk';
 
-import * as qs from 'qs';
-
 import { HOME_PATH } from '../../../../src/config/paths';
 import {
   ITEM_MENU_SHORTCUT_BUTTON_CLASS,
@@ -66,7 +64,9 @@ const checkCreateShortcutRequest = ({
     expect(body.type).to.eql(ItemType.SHORTCUT);
 
     if (toItemId) {
-      expect(url).to.include(qs.stringify({ parentId: toItemId }));
+      const search = new URLSearchParams();
+      search.set('parentId', toItemId);
+      expect(url).to.include(search.toString());
     } else {
       expect(url).to.not.include('parentId');
       cy.wait('@getAccessibleItems');

cypress/support/server.ts

@@ -21,7 +21,6 @@ import {
 import { FAILURE_MESSAGES } from '@graasp/translations';
 
 import { StatusCodes } from 'http-status-codes';
-import * as qs from 'qs';
 import { v4 as uuidv4, v4 } from 'uuid';
 
 import { SETTINGS } from '../../src/config/constants';
@@ -274,8 +273,6 @@ export const mockDeleteItems = (
       url: new RegExp(`${API_HOST}/${buildDeleteItemsRoute([])}`),
     },
     ({ reply }) => {
-      // const ids = qs.parse(url.slice(url.indexOf('?') + 1)).id;
-
       if (shouldThrowError) {
         return reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
       }
@@ -297,14 +294,7 @@ export const mockRecycleItems = (
       url: new RegExp(`${API_HOST}/${ITEMS_ROUTE}/recycle\\?id\\=`),
       query: { id: new RegExp(ID_FORMAT) },
     },
-    ({ url, reply }) => {
-      let ids = qs.parse(url.slice(url.indexOf('?') + 1)).id as
-        | string
-        | string[];
-      if (!Array.isArray(ids)) {
-        ids = [ids];
-      }
-
+    ({ reply }) => {
       if (shouldThrowError) {
         return reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
       }
@@ -327,21 +317,13 @@ export const mockRestoreItems = (
       url: new RegExp(`${API_HOST}/${ITEMS_ROUTE}/restore\\?id\\=`),
       query: { id: new RegExp(ID_FORMAT) },
     },
-    ({ url, reply }) => {
-      let ids = qs.parse(url.slice(url.indexOf('?') + 1)).id as
-        | string
-        | string[];
-      if (!Array.isArray(ids)) {
-        ids = [ids];
-      }
-
+    ({ reply }) => {
       if (shouldThrowError) {
         return reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
       }
 
       return reply({
         statusCode: StatusCodes.ACCEPTED,
-        // body: ids.map((id) => getItemById(items, id)),
       });
     },
   ).as('restoreItems');
@@ -405,10 +387,8 @@ export const mockGetItems = ({
       url: new RegExp(`${API_HOST}/${ITEMS_ROUTE}\\?id\\=`),
     },
     ({ url, reply }) => {
-      let itemIds = qs.parse(url.slice(url.indexOf('?') + 1)).id as string[];
-      if (!Array.isArray(itemIds)) {
-        itemIds = [itemIds];
-      }
+      const search = new URL(url).searchParams;
+      const itemIds = search.getAll('id');
       const result: {
         data: { [key: string]: ItemForTest };
         errors: { statusCode: number }[];
@@ -719,10 +699,7 @@ export const mockGetMembers = (members: Member[]): void => {
       url: `${API_HOST}/${buildGetMembersRoute([''])}*`,
     },
     ({ url, reply }) => {
-      let memberIds = qs.parse(url.slice(url.indexOf('?') + 1)).id as string[];
-      if (!Array.isArray(memberIds)) {
-        memberIds = [memberIds];
-      }
+      const memberIds = new URL(url).searchParams.getAll('id');
 
       const result: {
         data: { [key: string]: Member };
@@ -766,11 +743,7 @@ export const mockGetMembersBy = (
         return reply({ statusCode: StatusCodes.BAD_REQUEST });
       }
 
-      const querystrings = url.split('?')[1];
-      let emails = qs.parse(querystrings).email as string[];
-      if (!Array.isArray(emails)) {
-        emails = [emails];
-      }
+      const emails = new URL(url).searchParams.getAll('email');
 
       // TODO
       const result: {
@@ -871,7 +844,7 @@ export const mockDefaultDownloadFile = (
 
       const id = url.slice(API_HOST.length).split('/')[2];
       const { readFilepath } = items.find(({ id: thisId }) => id === thisId);
-      const { replyUrl } = qs.parse(url.slice(url.indexOf('?') + 1));
+      const replyUrl = new URL(url).searchParams.get('replyUrl');
 
       // either return the file url or the fixture data
       // info: we don't test fixture data anymore since the frontend uses url only
@@ -1080,7 +1053,7 @@ export const mockGetItemMembershipsForItem = (
       ),
     },
     ({ reply, url }) => {
-      const itemId = qs.parse(url.slice(url.indexOf('?') + 1)).itemId as string;
+      const itemId = new URL(url).searchParams.get('itemId');
       const selectedItems = items.filter(({ id }) => itemId.includes(id));
       // todo: use reduce
       const result: {
@@ -1173,11 +1146,8 @@ export const mockGetItemsTags = (items: ItemForTest[]): void => {
       url: `${API_HOST}/items/tags?id=*`,
     },
     ({ reply, url }) => {
-      let { id: ids } = qs.parse(url.split('?')[1]);
-      if (typeof ids === 'string') {
-        ids = [ids];
-      }
-      const result = (ids as string[])?.map(
+      const ids = new URL(url).searchParams.getAll('id');
+      const result = ids.map(
         (itemId) =>
           items.find(({ id }) => id === itemId)?.tags || [
             { statusCode: StatusCodes.NOT_FOUND },
@@ -1575,7 +1545,6 @@ export const mockGetAvatarUrl = (
 
       const [link] = url.split('?');
       const id = link.slice(API_HOST.length).split('/')[2];
-      // const { size } = qs.parse(querystrings);
 
       const { thumbnails } =
         members.find(({ id: thisId }) => id === thisId) ?? {};
@@ -1926,11 +1895,7 @@ export const mockGetManyPublishItemInformations = (
       url: new RegExp(`${API_HOST}/items/collections/informations`),
     },
     ({ reply, url }) => {
-      let itemIds = qs.parse(url.slice(url.indexOf('?') + 1))
-        .itemId as string[];
-      if (!Array.isArray(itemIds)) {
-        itemIds = [itemIds];
-      }
+      const itemIds = new URL(url).searchParams.getAll('itemId');
       const completeItems = items.filter((i) => itemIds.includes(i.id));
 
       const result = {

cypress/tsconfig.json

@@ -6,8 +6,8 @@
     "types": ["cypress", "node", "vite/client"],
     "strictNullChecks": false,
     "strict": true,
-    "sourceMap": false,
+    "sourceMap": false
   },
   "include": ["**/*.ts", "cypress.d.ts"],
-  "exclude": ["coverage", ".nyc_output"],
+  "exclude": ["coverage", ".nyc_output"]
 }

package.json

@@ -23,7 +23,7 @@
     "@graasp/query-client": "2.7.1",
     "@graasp/sdk": "4.0.1",
     "@graasp/translations": "1.25.2",
-    "@graasp/ui": "4.8.3",
+    "@graasp/ui": "4.8.4",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",
@@ -43,14 +43,13 @@
     "http-status-codes": "2.3.0",
     "i18next": "23.10.0",
     "katex": "0.16.9",
-    "leaflet-geosearch": "3.11.0",
+    "leaflet-geosearch": "3.11.1",
     "lodash.debounce": "4.0.8",
     "lodash.groupby": "4.6.0",
     "lodash.isequal": "4.5.0",
     "lodash.partition": "4.6.0",
     "lodash.truncate": "4.4.2",
     "papaparse": "5.4.1",
-    "qs": "6.11.2",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",
     "react-csv": "2.2.2",
@@ -107,9 +106,9 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "18.6.1",
-    "@commitlint/config-conventional": "18.6.2",
-    "@cypress/code-coverage": "3.12.20",
+    "@commitlint/cli": "19.0.3",
+    "@commitlint/config-conventional": "19.0.3",
+    "@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",
@@ -120,22 +119,21 @@
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.partition": "4.6.9",
     "@types/lodash.truncate": "4.4.9",
-    "@types/node": "20.11.16",
+    "@types/node": "20.11.23",
     "@types/papaparse": "5.3.14",
-    "@types/qs": "6.9.11",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.61",
     "@types/react-csv": "1.1.10",
-    "@types/react-dom": "18.2.18",
-    "@types/uuid": "9.0.7",
-    "@types/validator": "13.11.8",
+    "@types/react-dom": "18.2.19",
+    "@types/uuid": "9.0.8",
+    "@types/validator": "13.11.9",
     "@typescript-eslint/eslint-plugin": "7.1.0",
     "@typescript-eslint/parser": "7.1.0",
-    "@vitejs/plugin-react": "4.2.0",
+    "@vitejs/plugin-react": "4.2.1",
     "concurrently": "8.2.2",
     "cypress": "13.6.6",
     "cypress-localstorage-commands": "2.2.5",
     "env-cmd": "10.1.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
@@ -145,10 +143,10 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "9.0.11",
     "nyc": "15.1.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "typescript": "5.3.3",
-    "vite": "5.1.3",
-    "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]"