feat: add tanstack router (#375)

* feat: use tanstack-router * chore: setup fixed versions in package usign npmrc * fix: add zod and login logic for external pages * fix: move to tanstack * fix: lockfile issues * fix: type issues * fix: package.json scripts with regex * fix: tests * fix: add language select and support languages * chore: cleanup * fix: update tests * fix: make changes to AuthContext * fix: email translation improvement * fix: apply review comments * fix: auth context lang and not found naming link * fix: dependencies
graasp · Oct 30, 2024 · 0fa02ff · 0fa02ff
1 parent e07780b
commit 0fa02ff
Show file tree

Hide file tree

Showing 68 changed files with 2,961 additions and 1,781 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+save-prefix=""
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+src/routeTree.gen.ts
diff --git a/cypress/e2e/homePage.cy.ts b/cypress/e2e/homePage.cy.ts
@@ -1,26 +1,26 @@
 import { API_ROUTES } from '@graasp/query-client';
-import { HttpMethod, formatDate } from '@graasp/sdk';
+import { HttpMethod } from '@graasp/sdk';
 
+import { formatDistanceToNow } from 'date-fns';
 import { StatusCodes } from 'http-status-codes';
 
 import i18n from '../../src/config/i18n';
+import { ACCOUNT_HOME_PATH } from '../../src/config/paths';
 import {
   AVATAR_UPLOAD_ICON_ID,
   AVATAR_UPLOAD_INPUT_ID,
   CARD_TIP_ID,
   CROP_MODAL_CONFIRM_BUTTON_ID,
-  LOGIN_REQUIRED_BUTTON_ID,
-  LOGIN_REQUIRED_TEXT_ID,
   MEMBER_AVATAR_IMAGE_ID,
   MEMBER_CREATED_AT_ID,
   MEMBER_USERNAME_DISPLAY_ID,
 } from '../../src/config/selectors';
+import { getLocalForDateFns } from '../../src/langs/utils';
 import { BOB, MEMBER_WITH_AVATAR } from '../fixtures/members';
 import {
   AVATAR_LINK,
   THUMBNAIL_MEDIUM_PATH,
 } from '../fixtures/thumbnails/links';
-import { SIGN_IN_PATH } from '../support/server';
 import { ID_FORMAT, MemberForTest } from '../support/utils';
 
 const { buildGetCurrentMemberRoute, buildUploadAvatarRoute } = API_ROUTES;
@@ -78,7 +78,7 @@ describe('Upload Avatar', () => {
   beforeEach(() => {
     helpers = new TestHelper({ currentMember: BOB });
     helpers.setupServer();
-    cy.visit('/');
+    cy.visit(ACCOUNT_HOME_PATH);
   });
 
   it('Upload a new thumbnail', () => {
@@ -104,7 +104,7 @@ describe('Upload Avatar', () => {
 describe('Image is not set', () => {
   beforeEach(() => {
     cy.setUpApi({ currentMember: BOB });
-    cy.visit('/');
+    cy.visit(ACCOUNT_HOME_PATH);
   });
 
   it('Image is not set', () => {
@@ -122,7 +122,7 @@ describe('Check member info', () => {
     cy.setUpApi({
       currentMember: MEMBER_WITH_AVATAR,
     });
-    cy.visit('/');
+    cy.visit(ACCOUNT_HOME_PATH);
     cy.wait('@getCurrentMember');
   });
 
@@ -140,24 +140,9 @@ describe('Check member info', () => {
       MEMBER_WITH_AVATAR.name,
     );
     // displays the correct creation date
-    const formattedDate = formatDate(MEMBER_WITH_AVATAR.createdAt, {
-      locale: i18n.language,
+    const formattedDate = formatDistanceToNow(MEMBER_WITH_AVATAR.createdAt, {
+      locale: getLocalForDateFns(i18n.language),
     });
     cy.get(`#${MEMBER_CREATED_AT_ID}`).should('contain', formattedDate);
   });
 });
-
-describe('Redirect when not logged in', () => {
-  beforeEach(() => {
-    cy.setUpApi({ currentMember: null });
-    cy.visit('/');
-  });
-
-  it('redirects to the login page when not logged in', () => {
-    cy.wait('@getCurrentMember');
-    cy.get(`#${LOGIN_REQUIRED_TEXT_ID}`).should('be.visible');
-    cy.get(`#${LOGIN_REQUIRED_BUTTON_ID}`).click();
-    cy.wait('@signInRedirection');
-    cy.url().should('contain', `${SIGN_IN_PATH}?url=`);
-  });
-});
diff --git a/cypress/e2e/notFoundPage.cy.ts b/cypress/e2e/notFoundPage.cy.ts
@@ -1,5 +1,5 @@
 import {
-  GO_TO_HOME_LINK_ID,
+  GO_TO_LANDING_ID,
   NOT_FOUND_MESSAGE_ID,
   NOT_FOUND_TEXT_ID,
 } from '../../src/config/selectors';
@@ -20,7 +20,7 @@ describe('404 Page Test', () => {
   });
 
   it('should navigate to the home page when clicking "Go to Home"', () => {
-    cy.get(`#${GO_TO_HOME_LINK_ID}`).click();
+    cy.get(`#${GO_TO_LANDING_ID}`).click();
 
     // Check if the URL is the home page
     cy.url().should('eq', `${Cypress.config().baseUrl}/`);

diff --git a/cypress/e2e/redirection.cy.ts b/cypress/e2e/redirection.cy.ts
@@ -0,0 +1,21 @@
+import { ACCOUNT_HOME_PATH } from '../../src/config/paths';
+import {
+  LOGIN_REQUIRED_BUTTON_ID,
+  LOGIN_REQUIRED_TEXT_ID,
+} from '../../src/config/selectors';
+import { SIGN_IN_PATH } from '../support/server';
+
+describe('Redirect when not logged in', () => {
+  beforeEach(() => {
+    cy.setUpApi({ currentMember: null });
+    cy.visit(ACCOUNT_HOME_PATH);
+  });
+
+  it('redirects to the login page when not logged in', () => {
+    cy.wait('@getCurrentMember');
+    cy.get(`#${LOGIN_REQUIRED_TEXT_ID}`).should('be.visible');
+    cy.get(`#${LOGIN_REQUIRED_BUTTON_ID}`).click();
+    cy.wait('@signInRedirection');
+    cy.url().should('contain', `${SIGN_IN_PATH}?url=`);
+  });
+});
diff --git a/cypress/e2e/settings/deleteMember.cy.ts b/cypress/e2e/settings/deleteMember.cy.ts
@@ -1,4 +1,4 @@
-import { SETTINGS_PATH } from '../../../src/config/paths';
+import { ACCOUNT_SETTINGS_PATH } from '../../../src/config/paths';
 import {
   DELETE_MEMBER_BUTTON_ID,
   DELETE_MEMBER_DIALOG_CONFIRMATION_BUTTON_ID,
@@ -14,10 +14,12 @@ describe('Current Member', () => {
     cy.setUpApi({
       currentMember: CURRENT_MEMBER,
     });
-    cy.visit(SETTINGS_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
     cy.wait('@getCurrentMember');
 
-    cy.get(`#${DELETE_MEMBER_SECTION_ID}`).should('be.visible');
+    cy.get(`#${DELETE_MEMBER_SECTION_ID}`)
+      .scrollIntoView()
+      .should('be.visible');
     cy.get(`#${DELETE_MEMBER_BUTTON_ID}`).click();
     cy.get(`#${DELETE_MEMBER_DIALOG_TITLE_ID}`).should('be.visible');
     cy.get(`#${DELETE_MEMBER_DIALOG_CONFIRMATION_FIELD_ID}`).type('delete');
@@ -31,7 +33,7 @@ describe('Unauthenticated member', () => {
     cy.setUpApi({
       currentMember: null,
     });
-    cy.visit(SETTINGS_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
 
     // there is no authenticated user, we expect the login text to be displayed
     cy.get(`#${LOGIN_REQUIRED_TEXT_ID}`).should('be.visible');

diff --git a/cypress/e2e/settings/exportData.cy.ts b/cypress/e2e/settings/exportData.cy.ts
@@ -1,11 +1,11 @@
-import { SETTINGS_PATH } from '../../../src/config/paths';
+import { ACCOUNT_SETTINGS_PATH } from '../../../src/config/paths';
 import { EXPORT_DATA_BUTTON_ID } from '../../../src/config/selectors';
 import { CURRENT_MEMBER } from '../../fixtures/members';
 
 describe('Check exporting data', () => {
   beforeEach(() => {
     cy.setUpApi({ currentMember: CURRENT_MEMBER });
-    cy.visit(SETTINGS_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
   });
   it('should disable the export button after clicking it', () => {
     cy.get(`#${EXPORT_DATA_BUTTON_ID}`).should('be.enabled');

diff --git a/cypress/e2e/profile/password.cy.ts → cypress/e2e/settings/password.cy.ts b/cypress/e2e/profile/password.cy.ts → cypress/e2e/settings/password.cy.ts
@@ -1,7 +1,7 @@
 import { FAILURE_MESSAGES, namespaces } from '@graasp/translations';
 
 import i18n, { ACCOUNT_NAMESPACE } from '../../../src/config/i18n';
-import { PROFILE_PATH } from '../../../src/config/paths';
+import { ACCOUNT_SETTINGS_PATH } from '../../../src/config/paths';
 import {
   PASSWORD_CREATE_CONTAINER_ID,
   PASSWORD_DISPLAY_CONTAINER_ID,
@@ -49,7 +49,7 @@ describe('Create new password', () => {
       currentMember: BOB,
       hasPassword: false,
     });
-    cy.visit(PROFILE_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
     cy.wait('@getCurrentMember');
 
     i18n.changeLanguage(BOB.extra.lang);
@@ -140,7 +140,7 @@ describe('Create new password - network error', () => {
       hasPassword: false,
       createPasswordError: true,
     });
-    cy.visit(PROFILE_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
     cy.wait('@getCurrentMember');
 
     i18n.changeLanguage(BOB.extra.lang);
@@ -170,7 +170,7 @@ describe('Update password', () => {
       currentMember: BOB,
       hasPassword: true,
     });
-    cy.visit(PROFILE_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
     cy.wait('@getCurrentMember');
 
     i18n.changeLanguage(BOB.extra.lang);
@@ -288,7 +288,7 @@ describe('Update password - network error', () => {
       hasPassword: true,
       updatePasswordError: true,
     });
-    cy.visit(PROFILE_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
     cy.wait('@getCurrentMember');
 
     i18n.changeLanguage(BOB.extra.lang);

diff --git a/...ess/e2e/profile/personalInformation.cy.ts → ...ss/e2e/settings/personalInformation.cy.ts b/...ess/e2e/profile/personalInformation.cy.ts → ...ss/e2e/settings/personalInformation.cy.ts
@@ -1,4 +1,4 @@
-import { PROFILE_PATH } from '../../../src/config/paths';
+import { ACCOUNT_SETTINGS_PATH } from '../../../src/config/paths';
 import {
   PERSONAL_INFO_CANCEL_BUTTON_ID,
   PERSONAL_INFO_DISPLAY_CONTAINER_ID,
@@ -22,7 +22,7 @@ describe('Display personal information', () => {
     cy.setUpApi({
       currentMember: BOB,
     });
-    cy.visit(PROFILE_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
     cy.wait('@getCurrentMember');
     cy.wait('@getOwnProfile');
   });
@@ -42,7 +42,7 @@ describe('Edit personal information', () => {
   describe('Username', () => {
     beforeEach(() => {
       cy.setUpApi({ currentMember: BOB });
-      cy.visit(PROFILE_PATH);
+      cy.visit(ACCOUNT_SETTINGS_PATH);
       cy.get(`#${PERSONAL_INFO_EDIT_BUTTON_ID}`).click();
     });
 
@@ -71,8 +71,11 @@ describe('Edit personal information', () => {
 
       // The save button should be disabled and the helper text should display the message
       cy.get(`#${PERSONAL_INFO_SAVE_BUTTON_ID}`).should('be.disabled');
-      cy.get('[id$=-helper-text]').should('have.text', 'User name must not contain " ", ", <, >, ^, %, \\');
-    })
+      cy.get('[id$=-helper-text]').should(
+        'have.text',
+        'User name must not contain " ", ", <, >, ^, %, \\',
+      );
+    });
 
     it('Valid username can be saved', () => {
       const validUsername = 'validUsername';
@@ -105,7 +108,7 @@ describe('Edit personal information', () => {
   describe('Email', () => {
     beforeEach(() => {
       cy.setUpApi({ currentMember: BOB });
-      cy.visit(PROFILE_PATH);
+      cy.visit(ACCOUNT_SETTINGS_PATH);
       cy.get(`#${PERSONAL_INFO_EDIT_BUTTON_ID}`).click();
     });
 

diff --git a/cypress/e2e/settings/preferences.cy.ts b/cypress/e2e/settings/preferences.cy.ts
@@ -1,7 +1,7 @@
 import { EmailFrequency } from '@graasp/sdk';
 import { langs } from '@graasp/translations';
 
-import { SETTINGS_PATH } from '../../../src/config/paths';
+import { ACCOUNT_SETTINGS_PATH } from '../../../src/config/paths';
 import {
   PREFERENCES_ANALYTICS_SWITCH_ID,
   PREFERENCES_CANCEL_BUTTON_ID,
@@ -30,7 +30,7 @@ describe('Display preferences', () => {
           cy.setUpApi({
             currentMember,
           });
-          cy.visit(SETTINGS_PATH);
+          cy.visit(ACCOUNT_SETTINGS_PATH);
           cy.wait('@getCurrentMember');
 
           // displays the correct member language
@@ -62,7 +62,7 @@ describe('Display preferences', () => {
         cy.setUpApi({
           currentMember,
         });
-        cy.visit(SETTINGS_PATH);
+        cy.visit(ACCOUNT_SETTINGS_PATH);
         cy.wait('@getCurrentMember');
         cy.get(`#${PREFERENCES_EMAIL_FREQUENCY_ID}`).should(
           'contain',
@@ -86,7 +86,7 @@ describe('Display preferences', () => {
         cy.setUpApi({
           currentMember,
         });
-        cy.visit(SETTINGS_PATH);
+        cy.visit(ACCOUNT_SETTINGS_PATH);
         cy.wait('@getCurrentMember');
 
         cy.get(`#${PREFERENCES_ANALYTICS_SWITCH_ID}`).should(
@@ -119,7 +119,7 @@ describe('Edit preferences', () => {
           extra: { ...CURRENT_MEMBER.extra, lang: 'en' },
         },
       });
-      cy.visit(SETTINGS_PATH);
+      cy.visit(ACCOUNT_SETTINGS_PATH);
       cy.wait('@getCurrentMember');
       cy.get(`#${PREFERENCES_EDIT_BUTTON_ID}`).click();
       cy.get(`#${PREFERENCES_EDIT_CONTAINER_ID}`).should('be.visible');
@@ -143,7 +143,7 @@ describe('Edit preferences', () => {
             enableSaveActions,
           },
         });
-        cy.visit(SETTINGS_PATH);
+        cy.visit(ACCOUNT_SETTINGS_PATH);
         cy.wait('@getCurrentMember');
         cy.wait('@getCurrentMemberAvatarUrl');
         cy.get(`#${PREFERENCES_EDIT_BUTTON_ID}`).click();
@@ -180,7 +180,7 @@ describe('Edit preferences', () => {
             },
           },
         });
-        cy.visit(SETTINGS_PATH);
+        cy.visit(ACCOUNT_SETTINGS_PATH);
         cy.wait('@getCurrentMember');
         cy.get(`#${PREFERENCES_EDIT_BUTTON_ID}`).click();
 
@@ -200,7 +200,7 @@ describe('Edit preferences', () => {
       cy.setUpApi({
         currentMember: BOB,
       });
-      cy.visit(SETTINGS_PATH);
+      cy.visit(ACCOUNT_SETTINGS_PATH);
       cy.wait('@getCurrentMember');
       cy.get(`#${PREFERENCES_EDIT_BUTTON_ID}`).click();
     });

diff --git a/cypress/e2e/profile/publicProfile.cy.ts → cypress/e2e/settings/publicProfile.cy.ts b/cypress/e2e/profile/publicProfile.cy.ts → cypress/e2e/settings/publicProfile.cy.ts
@@ -1,4 +1,4 @@
-import { PROFILE_PATH } from '../../../src/config/paths';
+import { ACCOUNT_SETTINGS_PATH } from '../../../src/config/paths';
 import {
   PUBLIC_PROFILE_BIO_ID,
   PUBLIC_PROFILE_EDIT_BUTTON_ID,
@@ -29,7 +29,7 @@ describe('Display public profile', () => {
         currentMember: BOB,
         currentProfile: MEMBER_PUBLIC_PROFILE,
       });
-      cy.visit(PROFILE_PATH);
+      cy.visit(ACCOUNT_SETTINGS_PATH);
       cy.wait('@getOwnProfile');
     });
 
@@ -84,7 +84,7 @@ describe('Display public profile', () => {
         currentMember: BOB,
         currentProfile: MEMBER_EMPTY_PUBLIC_PROFILE,
       });
-      cy.visit(PROFILE_PATH);
+      cy.visit(ACCOUNT_SETTINGS_PATH);
       cy.wait('@getOwnProfile');
     });
 
@@ -122,7 +122,7 @@ describe('Edit public profile', () => {
       currentMember: BOB,
       currentProfile: MEMBER_PUBLIC_PROFILE,
     });
-    cy.visit(PROFILE_PATH);
+    cy.visit(ACCOUNT_SETTINGS_PATH);
     cy.wait('@getCurrentMember');
     cy.wait('@getOwnProfile');
     cy.get(`#${PUBLIC_PROFILE_EDIT_BUTTON_ID}`).click();

diff --git a/cypress/e2e/storage.cy.ts b/cypress/e2e/storage.cy.ts
@@ -1,7 +1,7 @@
 import { formatDate, formatFileSize } from '@graasp/sdk';
 
 import i18n from '../../src/config/i18n';
-import { STORAGE_PATH } from '../../src/config/paths';
+import { ACCOUNT_STORAGE_PATH } from '../../src/config/paths';
 import {
   MEMBER_STORAGE_FILE_NAME_ID,
   MEMBER_STORAGE_FILE_SIZE_ID,
@@ -19,7 +19,7 @@ describe('Storage', () => {
   it('Display storage interface', () => {
     const storageAmountInBytes = 698789;
     cy.setUpApi({ currentMember: CURRENT_MEMBER, storageAmountInBytes });
-    cy.visit(STORAGE_PATH);
+    cy.visit(ACCOUNT_STORAGE_PATH);
     cy.wait('@getCurrentMemberStorage');
     cy.get(`#${STORAGE_BAR_LABEL_ID}`).should(
       'contain',
@@ -34,7 +34,7 @@ describe('Storage files', () => {
       currentMember: CURRENT_MEMBER,
       files: MEMBER_STORAGE_ITEM_RESPONSE,
     });
-    cy.visit(STORAGE_PATH);
+    cy.visit(ACCOUNT_STORAGE_PATH);
     cy.wait('@getMemberStorageFiles');
   });