fix: update esm dependencies (#527)

* fix: update dependencies

* fix: use fixed deps

* fix: issues

* fix: use react-query v4

* fix: update translations for tests

* fix: update tags

* fix: make PR changes for translations

cypress/e2e/allCollections/allCollections.cy.ts

@@ -1,7 +1,7 @@
 import { CategoryType } from '@graasp/sdk';
 import { namespaces } from '@graasp/translations';
 
-import i18n from '../../../src/config/i18n';
+import { i18nConfig } from '../../../src/config/i18n';
 import { ALL_COLLECTIONS_ROUTE } from '../../../src/config/routes';
 import {
   ALL_COLLECTIONS_GRID_ID,
@@ -18,6 +18,8 @@ import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { PUBLISHED_ITEMS } from '../../fixtures/items';
 import { getRootPublishedItems } from '../../support/utils';
 
+const i18n = i18nConfig();
+
 buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
   describe(`All Collections Page for ${
     environment.currentMember?.name ?? 'signed out user'

cypress/e2e/collection/tags.cy.ts

@@ -2,10 +2,7 @@ import { buildCollectionRoute } from '../../../src/config/routes';
 import { SUMMARY_TAGS_CONTAINER_ID } from '../../../src/config/selectors';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { PUBLISHED_ITEMS } from '../../fixtures/items';
-import {
-  COLLECTION_LOADING_TIME,
-  SIGNED_OUT_USER,
-} from '../../support/constants';
+import { SIGNED_OUT_USER } from '../../support/constants';
 
 describe('Tags in Summary', { defaultCommandTimeout: 10000 }, () => {
   buildPublicAndPrivateEnvironments().forEach((environment) => {
@@ -29,7 +26,6 @@ describe('Tags in Summary', { defaultCommandTimeout: 10000 }, () => {
 
       const item = PUBLISHED_ITEMS[2];
       cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
 
       cy.get(`#${SUMMARY_TAGS_CONTAINER_ID}`).should('not.exist');
     });

cypress/e2e/home/home.cy.ts

@@ -1,4 +1,4 @@
-import i18n from '../../../src/config/i18n';
+import { i18nConfig } from '../../../src/config/i18n';
 import { HOME_ROUTE } from '../../../src/config/routes';
 import {
   GRAASP_SELECTION_TITLE_ID,
@@ -11,6 +11,8 @@ import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { GRAASPER_ITEMS } from '../../fixtures/items';
 import { SIGNED_OUT_USER } from '../../support/constants';
 
+const i18n = i18nConfig();
+
 describe('Home Page', () => {
   buildPublicAndPrivateEnvironments().forEach((environment) => {
     describe(`Home Layout for ${

cypress/fixtures/items.ts

@@ -1,7 +1,7 @@
 import {
-  DEFAULT_LANG,
+  DiscriminatedItem,
+  FolderItemFactory,
   FolderItemType,
-  Item,
   ItemTagType,
   ItemType,
   PermissionLevel,
@@ -11,19 +11,16 @@ import { MockItem } from '../support/types';
 import { SAMPLE_CATEGORIES } from './categories';
 import { CURRENT_USER, MEMBERS } from './members';
 
-export const DEFAULT_FOLDER_ITEM: FolderItemType = {
-  id: '',
+export const DEFAULT_FOLDER_ITEM: FolderItemType = FolderItemFactory({
   name: 'parent public item',
   description: 'Some description',
-  settings: {},
   path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
   createdAt: '2023-02-27T18:20:09.732Z',
   updatedAt: '2023-02-28T18:20:09.732Z',
   extra: { [ItemType.FOLDER]: { childrenOrder: [] } },
-  lang: DEFAULT_LANG,
   creator: CURRENT_USER,
   type: ItemType.FOLDER,
-};
+});
 
 export const PUBLISHED_ITEMS: MockItem[] = [
   {
@@ -335,7 +332,7 @@ export const getNumberOfOwnPublishedItems = (memberId: string) =>
     ({ path, creator }) => !path.includes('.') && creator?.id === memberId,
   ).length;
 
-export const builderMeilisearchResults = (items: Item[]) => ({
+export const builderMeilisearchResults = (items: DiscriminatedItem[]) => ({
   results: [
     {
       hits: items.map((i) => ({ ...i, _formatted: i })),

cypress/support/server.ts

@@ -517,7 +517,7 @@ export const mockSearch = (
 ) => {
   cy.intercept(
     {
-      method: HttpMethod.POST,
+      method: HttpMethod.Post,
       url: new RegExp(`${API_HOST}/${SEARCH_PUBLISHED_ITEMS_ROUTE}`),
     },
     ({ reply, body }) => {
@@ -565,7 +565,7 @@ export const mockGetLikedItems = (
 export const mockGetPublishItemInformations = (items: MockItem[]): void => {
   cy.intercept(
     {
-      method: HttpMethod.GET,
+      method: HttpMethod.Get,
       url: new RegExp(
         `${API_HOST}/${buildGetItemPublishedInformationRoute(ID_FORMAT)}`,
       ),

cypress/tsconfig.json

@@ -1,18 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "es5",
-      "dom",
-      "ES2021.String"
-    ],
-    "types": [
-      "cypress",
-      "node"
-    ],
+    "target": "esnext",
+    "lib": ["es5", "dom", "ES2021.String"],
+    "types": ["cypress", "node"],
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
     "strict": true
   },
-  "include": [
-    "**/*.ts"
-  ]
+  "include": ["**/*.ts"]
 }

package.json

@@ -33,22 +33,22 @@
     "@emotion/react": "11.11.3",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "2.6.0",
-    "@graasp/sdk": "3.7.0",
-    "@graasp/translations": "1.23.0",
-    "@graasp/ui": "4.7.0",
-    "@mui/icons-material": "5.15.8",
+    "@graasp/query-client": "github:graasp/graasp-query-client#use-conditional-export",
+    "@graasp/sdk": "4.0.1",
+    "@graasp/translations": "1.25.2",
+    "@graasp/ui": "github:graasp/graasp-ui#use-query-4",
+    "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.140",
-    "@mui/material": "5.15.8",
-    "@sentry/nextjs": "7.100.1",
+    "@mui/material": "5.15.11",
+    "@sentry/nextjs": "7.102.1",
     "@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",
     "date-fns": "3.3.1",
     "eslint-config-next": "14.1.0",
     "http-status-codes": "2.3.0",
-    "i18next": "23.7.16",
+    "i18next": "23.10.0",
     "interweave": "13.1.0",
     "katex": "0.16.9",
     "lodash.groupby": "4.6.0",
@@ -60,33 +60,33 @@
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
     "react-helmet": "6.1.0",
-    "react-i18next": "13.5.0",
+    "react-i18next": "14.0.5",
     "react-quill": "2.0.0",
-    "react-router-dom": "6.22.0",
+    "react-router-dom": "6.22.1",
     "react-toastify": "10.0.4",
     "social-links": "1.14.0",
     "stylis": "4.3.1",
     "stylis-plugin-rtl": "2.1.1",
     "uuid": "9.0.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "18.6.0",
-    "@commitlint/config-conventional": "18.6.0",
-    "@cypress/code-coverage": "3.12.20",
-    "@types/katex": "^0",
+    "@commitlint/cli": "18.6.1",
+    "@commitlint/config-conventional": "18.6.2",
+    "@cypress/code-coverage": "3.12.26",
+    "@types/katex": "^0.16.7",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.truncate": "4.4.9",
-    "@types/node": "20.11.16",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.18",
+    "@types/node": "20.11.20",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "@types/react-helmet": "6.1.11",
     "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "7.1.0",
     "concurrently": "8.2.2",
-    "cypress": "13.6.4",
+    "cypress": "13.6.6",
     "env-cmd": "10.1.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.1.0",
@@ -96,10 +96,9 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-app": "6.2.2",
-    "husky": "9.0.10",
+    "husky": "9.0.11",
     "nyc": "15.1.0",
     "prettier": "3.2.5",
-    "qs": "6.11.2",
     "react-query": "3.39.3",
     "standard-version": "9.5.0",
     "typescript": "5.3.3",
@@ -110,9 +109,5 @@
       "pages/api/__coverage__.js"
     ]
   },
-  "resolutions": {
-    "@graasp/sdk": "3.7.0",
-    "@graasp/query-client": "2.6.0"
-  },
   "packageManager": "yarn@4.1.0"
 }

src/components/collection/CopyLinkButton.tsx

@@ -4,7 +4,7 @@ import CodeIcon from '@mui/icons-material/Code';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
-import { DiscriminatedItem, Triggers } from '@graasp/sdk';
+import { ActionTriggers, DiscriminatedItem } from '@graasp/sdk';
 
 import { useLibraryTranslation } from '../../config/i18n';
 import notifier, {
@@ -24,7 +24,10 @@ export const useEmbedAction = (itemId?: DiscriminatedItem['id']) => {
     copyToClipboard(link, {
       onSuccess: () => {
         if (itemId) {
-          triggerAction({ itemId, payload: { type: Triggers.ItemEmbed } });
+          triggerAction({
+            itemId,
+            payload: { type: ActionTriggers.ItemEmbed },
+          });
         }
 
         notifier({

src/components/collection/summary/Summary.tsx

@@ -42,7 +42,7 @@ export const getParentsIdsFromPath = (
 
 type SummaryProps = {
   collection?: DiscriminatedItem;
-  publishedRoot?: ItemPublished;
+  publishedRoot?: ItemPublished | null;
   isLoading: boolean;
   totalViews: number;
 };

src/components/common/TranslationWrapper.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 
 import { getLangCookie } from '@graasp/sdk';
 
-import i18n from '../../config/i18n';
+import { appI18n } from '../../config/i18n';
 import { QueryClientContext } from '../QueryClientContext';
 
 type Props = {
@@ -18,11 +18,11 @@ const TranslationWrapper = ({ children }: Props): JSX.Element => {
     // change language
     const lang = member?.extra?.lang ?? getLangCookie();
     if (lang) {
-      i18n.changeLanguage(lang);
+      appI18n.changeLanguage(lang);
     }
   }, [member]);
 
-  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+  return <I18nextProvider i18n={appI18n}>{children}</I18nextProvider>;
 };
 
 export default TranslationWrapper;

src/config/i18n.ts

@@ -8,20 +8,24 @@ import en from '../langs/en.json';
 import fr from '../langs/fr.json';
 import it from '../langs/it.json';
 
-const i18n = buildI18n().use(initReactI18next);
-i18n.use(initReactI18next);
-
 export const LIBRARY_NAMESPACE = 'library';
-i18n.addResourceBundle('ar', LIBRARY_NAMESPACE, ar);
-i18n.addResourceBundle('de', LIBRARY_NAMESPACE, de);
-i18n.addResourceBundle('en', LIBRARY_NAMESPACE, en);
-i18n.addResourceBundle('fr', LIBRARY_NAMESPACE, fr);
-i18n.addResourceBundle('it', LIBRARY_NAMESPACE, it);
 
-i18n.setDefaultNamespace(LIBRARY_NAMESPACE);
+export const i18nConfig = () => {
+  const i18n = buildI18n().use(initReactI18next);
+  i18n.use(initReactI18next);
+
+  i18n.addResourceBundle('ar', LIBRARY_NAMESPACE, ar);
+  i18n.addResourceBundle('de', LIBRARY_NAMESPACE, de);
+  i18n.addResourceBundle('en', LIBRARY_NAMESPACE, en);
+  i18n.addResourceBundle('fr', LIBRARY_NAMESPACE, fr);
+  i18n.addResourceBundle('it', LIBRARY_NAMESPACE, it);
+
+  i18n.setDefaultNamespace(LIBRARY_NAMESPACE);
+  return i18n;
+};
+
 export const useLibraryTranslation = () => useTranslation(LIBRARY_NAMESPACE);
 export const useCommonTranslation = () => useTranslation(namespaces.common);
 export const useCategoriesTranslation = () =>
   useTranslation(namespaces.categories);
-
-export default i18n;
+export const appI18n = i18nConfig();

src/config/notifier.tsx

@@ -8,10 +8,11 @@ import { FAILURE_MESSAGES, SUCCESS_MESSAGES } from '@graasp/translations';
 import ToastrWithLink from '../components/common/ToastrWithLink';
 import LIBRARY from '../langs/constants';
 import { SHOW_NOTIFICATIONS } from './env';
-import i18n from './i18n';
+import { appI18n } from './i18n';
 import { buildPlayerViewItemRoute } from './paths';
 
-const t = (value: string) => i18n.t(value, { ns: 'messages' });
+const t = (value: string) => appI18n.t(value, { ns: 'messages' });
+const libraryT = (value: string) => appI18n.t(value);
 
 export const COPY_RESOURCE_LINK_TO_CLIPBOARD = {
   SUCCESS: 'success',
@@ -53,15 +54,15 @@ const notifier: Notifier = ({ type, payload }) => {
             (payload?.newItem as DiscriminatedItem | undefined)?.id,
           )}
           text={t(SUCCESS_MESSAGES.COPY_ITEM)}
-          linkText={i18n.t(LIBRARY.COPY_ITEM_TOASTR_LINK)}
+          linkText={libraryT(LIBRARY.COPY_ITEM_TOASTR_LINK)}
         />,
       );
       break;
     case COPY_RESOURCE_LINK_TO_CLIPBOARD.SUCCESS:
-      toast.success(i18n.t(LIBRARY.COPY_LINK_SUCCESS_MESSAGE));
+      toast.success(libraryT(LIBRARY.COPY_LINK_SUCCESS_MESSAGE));
       break;
     case COPY_RESOURCE_LINK_TO_CLIPBOARD.FAILURE:
-      toast.error(i18n.t(LIBRARY.COPY_LINK_FAILURE_MESSAGE));
+      toast.error(libraryT(LIBRARY.COPY_LINK_FAILURE_MESSAGE));
       break;
     default:
   }