fixup! fixup! ♻️(frontend) replace grommet Select with Cunnigham Select

openfun · Sep 14, 2023 · 7c291c9 · 7c291c9
1 parent f44f591
commit 7c291c9
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 80 deletions.
diff --git a/...ts/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.spec.tsx b/...ts/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor, within } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import {
@@ -47,10 +47,10 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    const button = await screen.findByRole('combobox', {
+    const select = await screen.findByRole('combobox', {
       name: 'Choose the language',
     });
-    expect(within(button).getByText('French')).toBeInTheDocument();
+    expect(select).toHaveValue('French');
   });
 
   it('renders the component with instructor local language unavailable', async () => {
@@ -70,10 +70,10 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    const button = await screen.findByRole('combobox', {
+    const select = await screen.findByRole('combobox', {
       name: 'Choose the language',
     });
-    expect(within(button).getByText('English')).toBeInTheDocument();
+    expect(select).toHaveValue('English');
   });
 
   it('renders the component with some languages already having some subtitles uploaded', async () => {
@@ -104,12 +104,12 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    const button = await screen.findByRole('combobox', {
+    const select = await screen.findByRole('combobox', {
       name: 'Choose the language',
     });
-    expect(within(button).getByText('French')).toBeInTheDocument();
+    expect(select).toHaveValue('French');
 
-    await userEvent.click(button);
+    await userEvent.clear(select);
 
     screen.getByRole('option', { name: 'English' });
     screen.getByRole('option', { name: 'French' });
@@ -147,15 +147,13 @@ describe('<LanguageSelect />', () => {
       }),
     ).not.toBeInTheDocument();
 
-    const button = await screen.findByRole('combobox', {
+    const select = await screen.findByRole('combobox', {
       name: 'Choose the language',
     });
-    expect(
-      within(button).getByText('No language availables'),
-    ).toBeInTheDocument();
+    expect(select).toHaveValue('No language availables');
   });
 
-  it('changes the selected language', async () => {
+  it.only('changes the selected language', async () => {
     render(
       <LanguageSelect
         onChange={onChangeMock}
@@ -172,12 +170,12 @@ describe('<LanguageSelect />', () => {
       }),
     );
 
-    const button = await screen.findByRole('combobox', {
+    const select = await screen.findByRole('combobox', {
       name: 'Choose the language',
     });
-    expect(within(button).getByText('French')).toBeInTheDocument();
-    await userEvent.click(button);
+    expect(select).toHaveValue('French');
+    await userEvent.clear(select);
     await userEvent.click(screen.getByRole('option', { name: 'English' }));
-    expect(within(button).getByText('English')).toBeInTheDocument();
+    expect(select).toHaveValue('English');
   });
 });
diff --git a/...ponents/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.tsx b/...ponents/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/LanguageSelect/index.tsx
@@ -1,6 +1,12 @@
 import { Select } from '@openfun/cunningham-react';
-import { timedTextMode, useTimedTextTrack } from 'lib-components';
-import { useEffect, useMemo, useState } from 'react';
+import { Maybe } from 'lib-common';
+import {
+  CenterLoader,
+  TimedTextTrackState,
+  timedTextMode,
+  useTimedTextTrack,
+} from 'lib-components';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { LanguageChoice } from '@lib-video/types/SelectOptions';
@@ -28,7 +34,7 @@ const messages = defineMessages({
 });
 
 interface LanguageSelectProps {
-  onChange: (selection: LanguageChoice) => void;
+  onChange: (selection?: LanguageChoice) => void;
   timedTextModeWidget: timedTextMode;
   choices?: LanguageChoice[];
 }
@@ -40,17 +46,18 @@ export const LanguageSelect = ({
 }: LanguageSelectProps) => {
   const intl = useIntl();
 
-  const errorLanguageChoice = useMemo(
-    () => ({
-      label: intl.formatMessage(messages.noLanguageAvailableLabel),
-      value: 'error',
+  useEffect(() => {
+    console.log('LanguageSelect mount');
+  }, []);
+
+  const timedTextTrackFn = useCallback(
+    (state: TimedTextTrackState) => ({
+      timedTextTracks: state.getTimedTextTracks(),
     }),
-    [intl],
+    [],
   );
 
-  const { timedTextTracks } = useTimedTextTrack((state) => ({
-    timedTextTracks: state.getTimedTextTracks(),
-  }));
+  const { timedTextTracks } = useTimedTextTrack(timedTextTrackFn);
 
   const availableSelectableLanguages = useMemo(() => {
     const filteredTimedTextTracks = timedTextTracks.filter(
@@ -68,56 +75,73 @@ export const LanguageSelect = ({
     );
   }, [choices, timedTextTracks, timedTextModeWidget]);
 
-  const userLocalAvailableLanguage = useMemo(() => {
-    const userLocalLanguage = intl.locale;
-
-    return availableSelectableLanguages
-      ? availableSelectableLanguages.find((availableLanguage) =>
-          userLocalLanguage.startsWith(availableLanguage.value),
-        )
-      : errorLanguageChoice;
-  }, [availableSelectableLanguages, intl, errorLanguageChoice]);
-
-  const [selectedLanguage, setSelectedLanguage] = useState<{
-    label: string;
-    value: string;
-  }>(
-    userLocalAvailableLanguage ??
-      (availableSelectableLanguages
-        ? availableSelectableLanguages[0]
-        : errorLanguageChoice),
+  const [selectedLanguage, setSelectedLanguage] = useState<Maybe<string>>(
+    availableSelectableLanguages?.[0].value,
   );
 
   useEffect(() => {
-    onChange(selectedLanguage);
-  }, [onChange, selectedLanguage]);
-
-  if (
-    availableSelectableLanguages &&
-    availableSelectableLanguages.length > 0 &&
-    !availableSelectableLanguages.includes(selectedLanguage)
-  ) {
-    setSelectedLanguage(
-      userLocalAvailableLanguage ?? availableSelectableLanguages[0],
+    //console.log('LanguageSelect useEffect', availableSelectableLanguages);
+    const userLocalAvailableLanguage = availableSelectableLanguages?.find(
+      (availableLanguage) => intl.locale.startsWith(availableLanguage.value),
     );
-  }
+
+    console.log(
+      'LanguageSelect userLocalAvailableLanguage',
+      userLocalAvailableLanguage?.value,
+      intl.locale,
+      availableSelectableLanguages,
+    );
+
+    setSelectedLanguage(userLocalAvailableLanguage?.value);
+    onChange(userLocalAvailableLanguage);
+  }, [intl.locale, availableSelectableLanguages, onChange]);
+
+  const handleOnChange = useCallback(
+    (evt: {
+      target: {
+        value: string | number | string[] | undefined;
+      };
+    }) => {
+      console.log(
+        'LanguageSelect handleOnChange',
+        evt.target.value,
+        selectedLanguage,
+        availableSelectableLanguages,
+      );
+      if (selectedLanguage === evt.target.value) {
+        return;
+      }
+
+      const optionSelectedLanguage = availableSelectableLanguages?.find(
+        (lang) => lang.value === evt.target.value,
+      );
+
+      setSelectedLanguage(optionSelectedLanguage?.value);
+      onChange(optionSelectedLanguage);
+    },
+    [availableSelectableLanguages, onChange, selectedLanguage],
+  );
+
+  console.log('LanguageSelect selectedLanguage', selectedLanguage);
 
   return (
-    <Select
-      aria-label={intl.formatMessage(messages.selectLanguageLabel)}
-      label={intl.formatMessage(messages.selectLanguageLabel)}
-      options={availableSelectableLanguages ?? [errorLanguageChoice]}
-      value={selectedLanguage.value}
-      onChange={(evt) => {
-        setSelectedLanguage(
-          availableSelectableLanguages?.find(
-            (lang) => lang.value === evt.target.value,
-          ) ?? errorLanguageChoice,
-        );
-      }}
-      fullWidth
-      clearable={false}
-      text={intl.formatMessage(messages.selectLanguageInfo)}
-    />
+    <Fragment>
+      {availableSelectableLanguages &&
+      availableSelectableLanguages.length !== 0 ? (
+        <Select
+          aria-label={intl.formatMessage(messages.selectLanguageLabel)}
+          label={intl.formatMessage(messages.selectLanguageLabel)}
+          options={availableSelectableLanguages}
+          value={selectedLanguage}
+          onChange={handleOnChange}
+          fullWidth
+          clearable={false}
+          text={intl.formatMessage(messages.selectLanguageInfo)}
+          searchable
+        />
+      ) : (
+        <CenterLoader />
+      )}
+    </Fragment>
   );
 };
diff --git a/...eo/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.spec.tsx b/...eo/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor, within } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import {
@@ -58,6 +58,9 @@ describe('<LocalizedTimedTextTrackUpload />', () => {
     useJwt.setState({
       jwt: 'jsonWebToken',
     });
+  });
+
+  afterEach(() => {
     jest.clearAllMocks();
     fetchMock.restore();
   });
@@ -90,10 +93,10 @@ describe('<LocalizedTimedTextTrackUpload />', () => {
       { intlOptions: { locale: 'fr-FR' } },
     );
 
-    const button = await screen.findByRole('combobox', {
+    const select = await screen.findByRole('combobox', {
       name: 'Choose the language',
     });
-    expect(await within(button).findByText('French')).toBeInTheDocument();
+    await waitFor(() => expect(select).toHaveValue('French'));
     screen.getByText('No uploaded files');
 
     screen.getByRole('button', { name: 'Upload file' });

diff --git a/...b_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.tsx b/...b_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/index.tsx
@@ -1,7 +1,8 @@
 import { Box, Button } from 'grommet';
-import { Nullable } from 'lib-common';
+import { Maybe, Nullable } from 'lib-common';
 import {
   ItemList,
+  TimedTextTrackState,
   formatSizeErrorScale,
   modelName,
   report,
@@ -61,9 +62,15 @@ export const LocalizedTimedTextTrackUpload = ({
   const intl = useIntl();
   const video = useCurrentVideo();
   const { addUpload, resetUpload, uploadManagerState } = useUploadManager();
-  const timedTextTracks = useTimedTextTrack((state) =>
-    state.getTimedTextTracks(),
+
+  const timedTextTrackFn = useCallback(
+    (state: TimedTextTrackState) => ({
+      timedTextTracks: state.getTimedTextTracks(),
+    }),
+    [],
   );
+
+  const { timedTextTracks } = useTimedTextTrack(timedTextTrackFn);
   const filteredTimedTextTracks = timedTextTracks.filter(
     (track) => track.mode === timedTextModeWidget,
   );
@@ -160,7 +167,7 @@ export const LocalizedTimedTextTrackUpload = ({
   ]);
 
   const onChangeLanguageSelect = useCallback(
-    (option: LanguageChoice) => setSelectedLanguage(option),
+    (option: Maybe<LanguageChoice>) => setSelectedLanguage(option || null),
     [],
   );
 
@@ -213,6 +220,7 @@ export const LocalizedTimedTextTrackUpload = ({
         primary
         style={{ height: '50px', fontFamily: 'Roboto-Medium' }}
         title={intl.formatMessage(messages.uploadButtonLabel)}
+        disabled={!selectedLanguage}
       />
     </Box>
   );