fix: enable TS strict mode (#462)

* fix: update UI version

* fix: apply review comments

cypress/e2e/util.ts

@@ -17,7 +17,9 @@ export const fillSignUpLayout = ({
   email?: string;
 }) => {
   cy.get(`#${NAME_SIGN_UP_FIELD_ID}`).clear().type(name);
-  cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).clear().type(email);
+  if (email) {
+    cy.get(`#${EMAIL_SIGN_UP_FIELD_ID}`).clear().type(email);
+  }
 };
 
 export const checkInvitationFields = ({
@@ -38,7 +40,9 @@ export const checkInvitationFields = ({
 };
 
 export const fillSignInByMailLayout = ({ email }: { email?: string }) => {
-  cy.get(`#${EMAIL_SIGN_IN_MAGIC_LINK_FIELD_ID}`).clear().type(email);
+  if (email) {
+    cy.get(`#${EMAIL_SIGN_IN_MAGIC_LINK_FIELD_ID}`).clear().type(email);
+  }
 };
 
 export const submitSignIn = () => {
@@ -57,7 +61,9 @@ export const fillPasswordSignInLayout = ({
   password?: string;
 }) => {
   cy.get(`#${EMAIL_SIGN_IN_FIELD_ID}`).clear().type(email);
-  cy.get(`#${PASSWORD_SIGN_IN_FIELD_ID}`).clear().type(password);
+  if (password) {
+    cy.get(`#${PASSWORD_SIGN_IN_FIELD_ID}`).clear().type(password);
+  }
 };
 
 export const submitPasswordSignIn = () => {

cypress/support/commands.ts

@@ -7,7 +7,7 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-import { Member } from '@graasp/sdk';
+import { CompleteMember, Member } from '@graasp/sdk';
 
 import {
   EMAIL_SIGN_IN_FIELD_ID,
@@ -25,19 +25,15 @@ import {
   submitSignIn,
   submitSignUp,
 } from '../e2e/util';
-import MEMBERS from '../fixtures/members';
-import {
-  mockGetCurrentMember,
-  mockGetMember,
-  mockGetMembers,
-  mockGetStatus,
-} from './server';
+import { mockGetCurrentMember, mockGetStatus } from './server';
 
 // cypress/support/index.ts
 declare global {
   namespace Cypress {
     interface Chainable {
-      setUpApi(args?: { members?: Member[] }): Chainable<JQuery<HTMLElement>>;
+      setUpApi(args?: {
+        currentMember?: CompleteMember | null;
+      }): Chainable<JQuery<HTMLElement>>;
 
       checkErrorTextField(
         id: string,
@@ -75,18 +71,10 @@ declare global {
   }
 }
 
-Cypress.Commands.add(
-  'setUpApi',
-  ({ members = Object.values(MEMBERS) } = {}) => {
-    const cachedMembers = JSON.parse(JSON.stringify(members));
-
-    mockGetMember(cachedMembers);
-    mockGetMembers(cachedMembers);
-
-    mockGetCurrentMember();
-    mockGetStatus();
-  },
-);
+Cypress.Commands.add('setUpApi', ({ currentMember = null } = {}) => {
+  mockGetCurrentMember(currentMember);
+  mockGetStatus();
+});
 
 Cypress.Commands.add('checkErrorTextField', (id, flag) => {
   const existence = flag ? 'not.exist' : 'exist';

cypress/support/server.ts

@@ -1,11 +1,9 @@
 import { StatusCodes } from 'http-status-codes';
 
 import { API_ROUTES } from '@graasp/query-client';
+import { CompleteMember } from '@graasp/sdk';
 
-const { buildGetMemberRoute, buildGetCurrentMemberRoute } = API_ROUTES;
-
-// use simple id format for tests
-export const ID_FORMAT = '(?=.*[0-9])(?=.*[a-zA-Z])([a-z0-9-]+)';
+const { buildGetCurrentMemberRoute } = API_ROUTES;
 
 const API_HOST = Cypress.env('VITE_GRAASP_API_HOST');
 
@@ -16,7 +14,7 @@ export const redirectionReply = {
 };
 
 export const mockGetCurrentMember = (
-  currentMember = null,
+  currentMember: CompleteMember | null = null,
   shouldThrowError = false,
 ) => {
   cy.intercept(
@@ -38,57 +36,6 @@ export const mockGetCurrentMember = (
   ).as('getCurrentMember');
 };
 
-export const mockGetMember = (members) => {
-  cy.intercept(
-    {
-      method: 'get',
-      url: new RegExp(`${API_HOST}/${buildGetMemberRoute(ID_FORMAT)}$`),
-    },
-    ({ url, reply }) => {
-      const memberId = url.slice(API_HOST.length).split('/')[2];
-      const member = members.find(({ id: mId }) => mId === memberId);
-
-      // member does not exist in db
-      if (!member) {
-        return reply({
-          statusCode: StatusCodes.NOT_FOUND,
-        });
-      }
-
-      return reply({
-        body: member,
-        statusCode: StatusCodes.OK,
-      });
-    },
-  ).as('getMember');
-};
-
-export const mockGetMembers = (members) => {
-  cy.intercept(
-    {
-      method: 'get',
-      url: `${API_HOST}/members?id=`,
-    },
-    ({ url, reply }) => {
-      const memberIds = new URLSearchParams(url).getAll('id');
-      const allMembers = (memberIds as string[])?.map((id) =>
-        members.find(({ id: mId }) => mId === id),
-      );
-      // member does not exist in db
-      if (!allMembers) {
-        return reply({
-          statusCode: StatusCodes.NOT_FOUND,
-        });
-      }
-
-      return reply({
-        body: allMembers,
-        statusCode: StatusCodes.OK,
-      });
-    },
-  ).as('getMembers');
-};
-
 export const mockGetStatus = (shouldThrowServerError = false) => {
   cy.intercept(
     {

cypress/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "esModuleInterop": false,
     "target": "ESNext",

package.json

@@ -17,7 +17,7 @@
     "@graasp/sdk": "4.29.1",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.37.1",
-    "@graasp/ui": "5.0.1",
+    "@graasp/ui": "5.2.1",
     "@mui/icons-material": "5.16.7",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.16.7",

src/Root.tsx

@@ -25,7 +25,6 @@ const Content = () => {
       i18n={i18n}
       langs={langs}
       languageSelectSx={{ mb: 2, mr: 2 }}
-      languageSelectLabel={null}
     >
       <CssBaseline />
       {SHOW_NOTIFICATIONS && <ToastContainer stacked />}

src/components/EmailInput.tsx

@@ -61,7 +61,7 @@ const EmailInput: FC<Props> = ({
       variant="outlined"
       value={value}
       error={Boolean(error)}
-      helperText={t(error)}
+      helperText={error && t(error)}
       placeholder={t(
         `${EMAIL_INPUT_PLACEHOLDER}${required ? '_REQUIRED' : ''}`,
       )}

src/components/MagicLinkSuccessContent.tsx

@@ -36,6 +36,11 @@ const MagicLinkSuccessContent = () => {
 
   const email = searchParams.get('email');
 
+  if (!email) {
+    console.error('Missing email query param');
+    return null;
+  }
+
   // used for resend email
   const handleResendEmail = async () => {
     const lowercaseEmail = email.toLowerCase();

src/components/SignUp.tsx

@@ -182,10 +182,13 @@ const SignUp = () => {
             variant="outlined"
             value={name}
             error={Boolean(nameError)}
-            helperText={t(nameError, {
-              min: MIN_USERNAME_LENGTH,
-              max: MAX_USERNAME_LENGTH,
-            })}
+            helperText={
+              nameError &&
+              t(nameError, {
+                min: MIN_USERNAME_LENGTH,
+                max: MAX_USERNAME_LENGTH,
+              })
+            }
             onChange={handleNameOnChange}
             id={NAME_SIGN_UP_FIELD_ID}
             disabled={Boolean(invitation?.name)}

src/components/common/ErrorDisplay.tsx

@@ -3,7 +3,11 @@ import { Alert } from '@mui/material';
 import { useMessagesTranslation } from '../../config/i18n';
 import { getErrorMessage } from '../../config/notifier';
 
-const ErrorDisplay = ({ error }: { error: Error }): JSX.Element | false => {
+const ErrorDisplay = ({
+  error,
+}: {
+  error: Error | null;
+}): JSX.Element | false => {
   const { t: translateMessages } = useMessagesTranslation();
 
   if (error) {

src/components/common/PasswordInput.tsx

@@ -13,7 +13,7 @@ const { PASSWORD_INPUT_PLACEHOLDER } = AUTH;
 type Props = {
   id: string;
   value: string;
-  error: string;
+  error: string | null;
   onKeyDown: (e: any) => void;
   onChange: (e: any) => void;
 };
@@ -49,7 +49,7 @@ const PasswordInput = ({ id, value, error, onKeyDown, onChange }: Props) => {
       variant="outlined"
       value={value}
       error={Boolean(error)}
-      helperText={t(error)}
+      helperText={error && t(error)}
       placeholder={t(PASSWORD_INPUT_PLACEHOLDER)}
       onChange={onChange}
       id={id}

src/config/notifier.ts

@@ -14,11 +14,8 @@ const {
   signInWithPasswordRoutine,
 } = routines;
 
-export const getErrorMessage = (
-  error: Parameters<Notifier>[0]['payload']['error'],
-) => {
-  // eslint-disable-next-line no-console
-  console.log(error);
+type PayloadError = NonNullable<Parameters<Notifier>[0]['payload']>['error'];
+export const getErrorMessage = (error: PayloadError) => {
   if (error instanceof AxiosError) {
     if (error.isAxiosError) {
       // response might not be present if there is a network error
@@ -47,7 +44,7 @@ const notifier: Notifier = (args) => {
     case signUpRoutine.FAILURE:
     case signInWithPasswordRoutine.FAILURE:
     case getInvitationRoutine.FAILURE: {
-      message = getErrorMessage(payload.error);
+      message = getErrorMessage(payload?.error);
       break;
     }
     case signInRoutine.SUCCESS:

src/context/RecaptchaContext.tsx

@@ -36,16 +36,18 @@ export const RecaptchaProvider = ({ children, siteKey }: Props) => {
           console.debug('No recaptcha key set-up, using mock value');
           resolve(MOCK_RECAPTCHA_TOKEN);
         }
-        resolve(undefined);
+        resolve('error-recaptcha-not-present');
       } else {
-        window.grecaptcha.ready(async () => {
+        window.grecaptcha.ready?.(async () => {
           try {
             const token = await window.grecaptcha.execute(siteKey, { action });
             resolve(token);
           } catch (err) {
-            // if we are in dev and the error is that tge client id is not set, we resolve to a mock value
+            // if we are in dev and the error is that the client id is not set, we resolve to a mock value
             if (
-              err.toString().includes('Invalid reCAPTCHA client id') &&
+              err instanceof Error &&
+              (err.toString().includes('Invalid reCAPTCHA client id') ||
+                err.toString().includes('No reCAPTCHA clients exist')) &&
               import.meta.env.DEV
             ) {
               console.debug('No recaptcha key set-up, using mock value');

src/hooks/mobile.tsx

@@ -12,8 +12,14 @@ const enum MobileSearchParams {
 export const useMobileAppLogin = () => {
   const [searchParams] = useSearchParams();
   const challenge = searchParams.get(MobileSearchParams.CHALLENGE);
+  if (challenge) {
+    return {
+      isMobile: true as const,
+      challenge,
+    };
+  }
   return {
-    isMobile: challenge !== undefined && challenge !== null,
+    isMobile: false as const,
     challenge,
   };
 };

tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "target": "es2016",
+    "target": "esnext",
     "module": "esnext",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "strict": false,
+    "strict": true,
     "skipLibCheck": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": false,

yarn.lock

@@ -2412,9 +2412,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:5.0.1":
-  version: 5.0.1
-  resolution: "@graasp/ui@npm:5.0.1"
+"@graasp/ui@npm:5.2.1":
+  version: 5.2.1
+  resolution: "@graasp/ui@npm:5.2.1"
   dependencies:
     http-status-codes: "npm:2.3.0"
     interweave: "npm:13.1.0"
@@ -2437,13 +2437,13 @@ __metadata:
     "@mui/material": ~5.14.0 || ~5.15.0 || ~5.16.0
     i18next: ^22.4.15 || ^23.0.0
     katex: 0.16.11
-    lucide-react: ^0.417.0 || ^0.429.0 || ^0.436.0 || ^0.439.0 || ^0.441.0
+    lucide-react: ^0.417.0 || ^0.429.0 || ^0.436.0 || ^0.439.0 || ^0.441.0 || ^0.446.0
     react: ^18.0.0
     react-dom: ^18.0.0
     react-i18next: ^13.0.0 || ^14.0.0 || ^15.0.0
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
-  checksum: 10/2acc246b741493ea17178f37d1fb8cc6d3120a6fc90b46bbe5b911e9c3cd37d51d80546c981652ff7a59cccd26ea10f7499e543d0ba8722de5ee456e6c162186
+  checksum: 10/35c2596b5e5cdee10224e6f65a846278653428a0aeaef48ff8a00c92326be0e20596d8c438d21247d6b1d554aa72497f2481b6e9b6483a023126eb5c1f196bf6
   languageName: node
   linkType: hard
 
@@ -6932,7 +6932,7 @@ __metadata:
     "@graasp/sdk": "npm:4.29.1"
     "@graasp/stylis-plugin-rtl": "npm:2.2.0"
     "@graasp/translations": "npm:1.37.1"
-    "@graasp/ui": "npm:5.0.1"
+    "@graasp/ui": "npm:5.2.1"
     "@mui/icons-material": "npm:5.16.7"
     "@mui/lab": "npm:5.0.0-alpha.170"
     "@mui/material": "npm:5.16.7"