richie-education 2.25.0-b2.dev176 → 2.25.0-b2.dev183

package/js/api/joanie.spec.ts

@@ -1,7 +1,8 @@
 import fetchMock from 'fetch-mock';
 import { ResourcesQuery } from 'hooks/useResources';
 import { HttpStatusCode } from 'utils/errors/HttpError';
-import { buildApiUrl, getResponseBody } from './joanie';
+import { buildApiUrl } from './joanie';
+import { getResponseBody } from './utils';
 
 describe('api/joanie', () => {
   it('getResponse should handle empty response body', async () => {

package/js/api/joanie.ts

@@ -12,61 +12,11 @@ import queryString from 'query-string';
 import type * as Joanie from 'types/Joanie';
 import { AuthenticationApi } from 'api/authentication';
 import context from 'utils/context';
-import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import { JOANIE_API_VERSION } from 'settings';
 import { ResourcesQuery } from 'hooks/useResources';
 import { ObjectHelper } from 'utils/ObjectHelper';
 import { Maybe } from 'types/utils';
-
-interface CheckStatusOptions {
-  fallbackValue: any;
-  ignoredErrorStatus: (number | HttpStatusCode)[];
-}
-
-export async function getFileFromResponse(response: Response): Promise<File> {
-  const filenameRegex = /filename="(.*)";/;
-  const dispositionHeader = response.headers.get('Content-Disposition');
-  const matches = dispositionHeader?.match(filenameRegex);
-
-  return new File([await response.blob()], matches ? matches[1] : '', {
-    type: response.headers.get('Content-Type') || '',
-  });
-}
-
-export function getResponseBody(response: Response) {
-  if (response.headers.get('Content-Type') === 'application/json') {
-    return response.json();
-  }
-  const fileType = ['application/pdf', 'application/zip'];
-  if (fileType.includes(response.headers.get('Content-Type') || '')) {
-    return new Promise((resolve) => resolve(response));
-  }
-  return response.text();
-}
-
-/*
-  A util to manage Joanie API responses.
-  It parses properly the response according to its `Content-Type`
-  otherwise it throws an `HttpError`.
-
-  `options` arguments accept an array of ignoredErrorStatus. If the response
-  fails with one of this status code, the `fallbackValue` will return and no error will
-  be raised.
-*/
-export function checkStatus(
-  response: Response,
-  options: CheckStatusOptions = { fallbackValue: null, ignoredErrorStatus: [] },
-): Promise<any> {
-  if (response.ok) {
-    return getResponseBody(response);
-  }
-
-  if (options.ignoredErrorStatus.includes(response.status)) {
-    return Promise.resolve(options.fallbackValue);
-  }
-
-  throw new HttpError(response.status, response.statusText);
-}
+import { checkStatus, getFileFromResponse } from './utils';
 
 /*
   Generate default headers used for most of Joanie requests. It defined `Content-Type`

package/js/api/lms/dummy.ts

@@ -6,6 +6,12 @@ import { UnknownEnrollment, OpenEdXEnrollment } from 'types';
 import { location } from 'utils/indirection/window';
 import { CURRENT_JOANIE_DEV_DEMO_USER, RICHIE_USER_TOKEN } from 'settings';
 import { base64Decode } from 'utils/base64Parser';
+import {
+  OpenEdxGender,
+  OpenEdxLanguageIsoCode,
+  OpenEdxLevelOfEducation,
+  OpenEdxApiProfile,
+} from 'types/openEdx';
 
 type JWTPayload = {
   email: string;
@@ -89,6 +95,22 @@ const API = (APIConf: LMSBackend | AuthenticationBackend): APILms => {
         localStorage.removeItem(RICHIE_DUMMY_IS_LOGGED_IN);
       },
       accessToken: () => sessionStorage.getItem(RICHIE_USER_TOKEN),
+      account: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        get: (username: string): Promise<OpenEdxApiProfile> => {
+          return Promise.resolve({
+            username: 'j_do',
+            name: 'John Do',
+            email: 'j.do@whois.net',
+            country: 'fr',
+            level_of_education: OpenEdxLevelOfEducation.MASTER_OR_PROFESSIONNAL_DEGREE,
+            gender: OpenEdxGender.MALE,
+            year_of_birth: '1971',
+            'pref-lang': OpenEdxLanguageIsoCode.ENGLISH,
+            language_proficiencies: [{ code: OpenEdxLanguageIsoCode.ENGLISH }],
+          } as OpenEdxApiProfile);
+        },
+      },
     },
     enrollment: {
       get: async (url: string, user: Nullable<User>) =>

package/js/api/lms/openedx-fonzie.spec.ts

@@ -1,6 +1,7 @@
 import { faker } from '@faker-js/faker';
 import fetchMock from 'fetch-mock';
 import { RICHIE_USER_TOKEN } from 'settings';
+import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 import FonzieAPIInterface from './openedx-fonzie';
 
 jest.mock('utils/context', () => ({
@@ -30,6 +31,25 @@ describe('Fonzie API', () => {
     await expect(api.user.me()).resolves.toEqual(user);
   });
 
+  it('uses its own route to get user profile', async () => {
+    const openEdxApiProfile = OpenEdxApiProfileFactory().one();
+    const { 'pref-lang': language, ...account } = openEdxApiProfile;
+    fetchMock.get(
+      `https://demo.endpoint.api/api/user/v1/accounts/${openEdxApiProfile.username}`,
+      account,
+    );
+    fetchMock.get(
+      `https://demo.endpoint.api/api/user/v1/preferences/${openEdxApiProfile.username}`,
+      {
+        'pref-lang': language,
+      },
+    );
+
+    const api = FonzieAPIInterface(configuration);
+    expect(await api.user.account!.get(openEdxApiProfile.username)).toEqual(openEdxApiProfile);
+    expect(fetchMock.calls()).toHaveLength(2);
+  });
+
   it('is able to retrieve access token within the session storage', () => {
     const accessToken = faker.string.uuid();
     sessionStorage.setItem(RICHIE_USER_TOKEN, accessToken);

package/js/api/lms/openedx-fonzie.ts

@@ -1,6 +1,10 @@
 import { AuthenticationBackend, LMSBackend } from 'types/commonDataProps';
 import { APILms } from 'types/api';
 import { RICHIE_USER_TOKEN } from 'settings';
+import { isHttpError } from 'utils/errors/HttpError';
+import { handle } from 'utils/errors/handle';
+import { OpenEdxApiProfile } from 'types/openEdx';
+import { checkStatus } from 'api/utils';
 import OpenEdxHawthornApiInterface from './openedx-hawthorn';
 
 /**
@@ -24,6 +28,8 @@ const API = (APIConf: AuthenticationBackend | LMSBackend): APILms => {
     routes: {
       user: {
         me: `${APIConf.endpoint}/api/v1.0/user/me`,
+        account: `${APIConf.endpoint}/api/user/v1/accounts/:username`,
+        preferences: `${APIConf.endpoint}/api/user/v1/preferences/:username`,
       },
     },
   };
@@ -36,6 +42,35 @@ const API = (APIConf: AuthenticationBackend | LMSBackend): APILms => {
       accessToken: () => {
         return sessionStorage.getItem(RICHIE_USER_TOKEN);
       },
+      account: {
+        get: async (username: string) => {
+          const options: RequestInit = {
+            credentials: 'include',
+          };
+
+          try {
+            const account = await fetch(
+              APIOptions.routes.user.account.replace(':username', username),
+              options,
+            ).then(checkStatus);
+            const preferences = await fetch(
+              APIOptions.routes.user.preferences.replace(':username', username),
+              options,
+            ).then(checkStatus);
+
+            return {
+              ...account,
+              ...preferences,
+            } as OpenEdxApiProfile;
+          } catch (e) {
+            if (isHttpError(e)) {
+              handle(new Error(`[GET - Account] > ${e.code} - ${e.message}`));
+            }
+
+            throw e;
+          }
+        },
+      },
     },
   };
 };

package/js/api/utils.ts

@@ -0,0 +1,51 @@
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
+
+interface CheckStatusOptions {
+  fallbackValue: any;
+  ignoredErrorStatus: (number | HttpStatusCode)[];
+}
+
+export async function getFileFromResponse(response: Response): Promise<File> {
+  const filenameRegex = /filename="(.*)";/;
+  const dispositionHeader = response.headers.get('Content-Disposition');
+  const matches = dispositionHeader?.match(filenameRegex);
+
+  return new File([await response.blob()], matches ? matches[1] : '', {
+    type: response.headers.get('Content-Type') || '',
+  });
+}
+
+export function getResponseBody(response: Response) {
+  if (response.headers.get('Content-Type') === 'application/json') {
+    return response.json();
+  }
+  const fileType = ['application/pdf', 'application/zip'];
+  if (fileType.includes(response.headers.get('Content-Type') || '')) {
+    return new Promise((resolve) => resolve(response));
+  }
+  return response.text();
+}
+
+/*
+    A util to manage API responses.
+    It parses properly the response according to its `Content-Type`
+    otherwise it throws an `HttpError`.
+
+    `options` arguments accept an array of ignoredErrorStatus. If the response
+    fails with one of this status code, the `fallbackValue` will return and no error will
+    be raised.
+  */
+export function checkStatus(
+  response: Response,
+  options: CheckStatusOptions = { fallbackValue: null, ignoredErrorStatus: [] },
+): Promise<any> {
+  if (response.ok) {
+    return getResponseBody(response);
+  }
+
+  if (options.ignoredErrorStatus.includes(response.status)) {
+    return Promise.resolve(options.fallbackValue);
+  }
+
+  throw new HttpError(response.status, response.statusText);
+}

package/js/components/AddressesManagement/AddressForm/index.tsx

@@ -10,6 +10,7 @@ import Input from 'components/Form/Input';
 import { useAddresses } from 'hooks/useAddresses';
 import type { Address } from 'types/Joanie';
 import { messages as formMessages } from 'components/Form/messages';
+import Form from 'components/Form';
 import validationSchema from './validationSchema';
 
 export interface AddressFormValues extends Omit<Address, 'id' | 'is_main'> {
@@ -60,11 +61,11 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
 
   return (
     <FormProvider {...form}>
-      <form className="form" name="address-form" onSubmit={handleSubmit(onSubmit)} noValidate>
+      <Form name="address-form" onSubmit={handleSubmit(onSubmit)} noValidate>
         <p className="form__required-fields-note">
           <FormattedMessage {...formMessages.formOptionalFieldsText} />
         </p>
-        <div className="form-row">
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -72,8 +73,8 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
             name="title"
             label={intl.formatMessage(messages.titleInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -86,16 +87,16 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
             name="last_name"
             label={intl.formatMessage(messages.last_nameInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             required
             fullWidth
             name="address"
             label={intl.formatMessage(messages.addressInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -109,17 +110,17 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
             name="city"
             label={intl.formatMessage(messages.cityInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <CountrySelectField
             name="country"
             label={intl.formatMessage(messages.countryInputLabel)}
             state={formState.errors.country ? 'error' : 'default'}
           />
-        </div>
+        </Form.Row>
 
         {!address ? (
-          <div className="form-row">
+          <Form.Row>
             <Checkbox
               aria-invalid={!!formState.errors?.save}
               id="save"
@@ -132,7 +133,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
               )}
               {...register('save')}
             />
-          </div>
+          </Form.Row>
         ) : null}
 
         <footer className="form__footer">
@@ -155,7 +156,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
             </Button>
           )}
         </footer>
-      </form>
+      </Form>
     </FormProvider>
   );
 };

package/js/components/Form/Form/index.tsx

@@ -0,0 +1,23 @@
+import c from 'classnames';
+import { PropsWithChildren } from 'react';
+
+interface FormProps
+  extends React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {}
+
+const Form = ({ children, onSubmit, className, name, noValidate = true }: FormProps) => {
+  return (
+    <form className={c('form', className)} name={name} onSubmit={onSubmit} noValidate={noValidate}>
+      {children}
+    </form>
+  );
+};
+
+Form.Row = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
+  return <div className={c('form-row', className)}>{children}</div>;
+};
+
+Form.Footer = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
+  return <div className={c('form-footer', className)}>{children}</div>;
+};
+
+export default Form;

package/js/components/Form/index.ts

@@ -1,5 +1,8 @@
+import Form from './Form';
+
 export { default as Select } from './Select';
 export { CountrySelectField } from './CountrySelectField';
 export { messages } from './messages';
 export * from './utils';
 export * from './ValidationErrors';
+export default Form;

package/js/hooks/useDashboardAddressForm.tsx

@@ -11,6 +11,7 @@ import { messages as formMessages } from 'components/Form/messages';
 import { CountrySelectField } from 'components/Form/CountrySelectField';
 import Input from 'components/Form/Input';
 import { Address } from 'types/Joanie';
+import Form from 'components/Form';
 
 const messages = defineMessages({
   isMainInputLabel: {
@@ -64,19 +65,19 @@ export const useDashboardAddressForm = (address?: Address) => {
 
   const FormView = (
     <FormProvider {...form}>
-      <form className="form" noValidate>
+      <Form noValidate>
         <p className="form__required-fields-note">
           <FormattedMessage {...formMessages.formOptionalFieldsText} />
         </p>
-        <div className="form-row">
+        <Form.Row>
           <Input
             required
             fullWidth
             name="title"
             label={intl.formatMessage(managementMessages.titleInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -90,17 +91,17 @@ export const useDashboardAddressForm = (address?: Address) => {
             name="last_name"
             label={intl.formatMessage(managementMessages.last_nameInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <Input
             required
             fullWidth
             name="address"
             label={intl.formatMessage(managementMessages.addressInputLabel)}
           />
-        </div>
+        </Form.Row>
 
-        <div className="form-row">
+        <Form.Row>
           <Input
             className="form-field"
             required
@@ -114,13 +115,13 @@ export const useDashboardAddressForm = (address?: Address) => {
             name="city"
             label={intl.formatMessage(managementMessages.cityInputLabel)}
           />
-        </div>
-        <div className="form-row">
+        </Form.Row>
+        <Form.Row>
           <CountrySelectField
             name="country"
             label={intl.formatMessage(managementMessages.countryInputLabel)}
           />
-        </div>
+        </Form.Row>
         {!(address && address.is_main) && (
           <Checkbox
             aria-invalid={!!formState.errors?.is_main}
@@ -135,7 +136,7 @@ export const useDashboardAddressForm = (address?: Address) => {
             {...register('is_main')}
           />
         )}
-      </form>
+      </Form>
     </FormProvider>
   );
 

package/js/hooks/useOpenEdxProfile/index.ts

@@ -0,0 +1,45 @@
+import { useCallback, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { AuthenticationApi } from 'api/authentication';
+import { useSessionQuery } from 'utils/react-query/useSessionQuery';
+import { OpenEdxProfile, parseOpenEdxApiProfile } from './utils';
+
+const messages = defineMessages({
+  errorGet: {
+    id: 'hooks.useOpenEdxProfile.errorGet',
+    description: 'Error message shown to the user when openEdx profile fetch request fails.',
+    defaultMessage: 'An error occurred while fetching your profile. Please retry later.',
+  },
+});
+
+interface UseOpenEdxProfileProps {
+  username: string;
+}
+
+const useOpenEdxProfile = ({ username }: UseOpenEdxProfileProps) => {
+  if (!AuthenticationApi) {
+    throw new Error('AuthenticationApi is not defined');
+  }
+
+  if (!AuthenticationApi!.account) {
+    throw new Error('Current AuthenticationApi does not support account request');
+  }
+
+  const intl = useIntl();
+  const [error, setError] = useState<string>();
+
+  const queryFn: () => Promise<OpenEdxProfile> = useCallback(async () => {
+    try {
+      const openEdxApiProfile = await AuthenticationApi!.account!.get(username);
+      return parseOpenEdxApiProfile(intl, openEdxApiProfile);
+    } catch {
+      setError(intl.formatMessage(messages.errorGet));
+    }
+    return Promise.reject();
+  }, [username, AuthenticationApi]);
+
+  const [queryHandler] = useSessionQuery<OpenEdxProfile>(['open-edx-profile'], queryFn);
+  return { data: queryHandler.data, error };
+};
+
+export default useOpenEdxProfile;

package/js/hooks/useOpenEdxProfile/utils/index.spec.ts

@@ -0,0 +1,69 @@
+import { createIntl } from 'react-intl';
+import { faker } from '@faker-js/faker';
+import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
+import { OpenEdxGender, OpenEdxLanguageIsoCode, OpenEdxLevelOfEducation } from 'types/openEdx';
+import { parseOpenEdxApiProfile } from '.';
+
+describe('useOpenEdxProfile > utils', () => {
+  it('parseOpenEdxApiProfile should format values', () => {
+    const profile = parseOpenEdxApiProfile(
+      createIntl({ locale: 'en' }),
+      OpenEdxApiProfileFactory({
+        username: 'John',
+        name: 'Do',
+        email: 'john.do@whereis.net',
+        'pref-lang': OpenEdxLanguageIsoCode.FRENCH,
+        country: 'fr',
+        level_of_education: OpenEdxLevelOfEducation.MASTER_OR_PROFESSIONNAL_DEGREE,
+        gender: OpenEdxGender.MALE,
+        year_of_birth: '01/01/1970',
+        language_proficiencies: [{ code: OpenEdxLanguageIsoCode.ENGLISH }],
+        date_joined: '01/01/1970',
+      }).one(),
+    );
+
+    expect(profile).toStrictEqual({
+      username: 'John',
+      name: 'Do',
+      email: 'john.do@whereis.net',
+      language: 'French',
+      country: 'France',
+      levelOfEducation: 'Master',
+      gender: 'Male',
+      yearOfBirth: '01/01/1970',
+      favoriteLanguage: 'English',
+      dateJoined: '01/01/1970',
+    });
+  });
+
+  it('parseOpenEdxApiProfile should format default values', () => {
+    const profile = parseOpenEdxApiProfile(
+      createIntl({ locale: 'en' }),
+      OpenEdxApiProfileFactory({
+        username: faker.internet.userName(),
+        name: '',
+        email: faker.internet.email(),
+        'pref-lang': undefined,
+        country: null,
+        level_of_education: null,
+        gender: null,
+        year_of_birth: null,
+        language_proficiencies: [],
+        date_joined: Date.toString(),
+      }).one(),
+    );
+
+    expect(profile).toStrictEqual({
+      username: profile.username,
+      name: ' - ',
+      email: profile.email,
+      language: ' - ',
+      country: ' - ',
+      levelOfEducation: ' - ',
+      gender: ' - ',
+      yearOfBirth: ' - ',
+      favoriteLanguage: ' - ',
+      dateJoined: profile.dateJoined,
+    });
+  });
+});