Remove uses of withTranslation() with empty arguments.

After cleaning up the withTranslation() arguments, remove all instances of withTranslation() that have no arguments. Also refactors several props types so they no longer have to be extended with WithTranslation.
chairemobilite · Dec 3, 2024 · 5447da4 · 5447da4
1 parent aa098e9
commit 5447da4
Show file tree

Hide file tree

Showing 36 changed files with 102 additions and 194 deletions.
diff --git a/packages/chaire-lib-frontend/src/components/dashboard/BottomPanel.tsx b/packages/chaire-lib-frontend/src/components/dashboard/BottomPanel.tsx
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 
 import { Contribution, LayoutSectionProps } from '../../services/dashboard/DashboardContribution';
 
@@ -32,4 +31,4 @@ const BottomPanel: React.FunctionComponent<BottomPanelProps> = ({ contributions,
     return <section id="tr__bottom-panel">{contributionElements}</section>;
 };
 
-export default withTranslation()(BottomPanel);
+export default BottomPanel;
diff --git a/packages/chaire-lib-frontend/src/components/dashboard/FullSizePanel.tsx b/packages/chaire-lib-frontend/src/components/dashboard/FullSizePanel.tsx
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 
 import { Contribution, LayoutSectionProps } from '../../services/dashboard/DashboardContribution';
 
@@ -38,4 +37,4 @@ const FullSizePanel: React.FunctionComponent<FullSizePanelProps> = ({
     return <section id="tr__full-size-panel">{contributionElements}</section>;
 };
 
-export default withTranslation()(FullSizePanel);
+export default FullSizePanel;
diff --git a/packages/chaire-lib-frontend/src/components/dashboard/MenuBar.tsx b/packages/chaire-lib-frontend/src/components/dashboard/MenuBar.tsx
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 
 import { Contribution, LayoutSectionProps } from '../../services/dashboard/DashboardContribution';
 
@@ -31,4 +30,4 @@ const MenuBar: React.FunctionComponent<MenuBarProps> = ({ contributions, ...prop
     return <nav id="tr__left-menu">{contributionElements}</nav>;
 };
 
-export default withTranslation()(MenuBar);
+export default MenuBar;
diff --git a/packages/chaire-lib-frontend/src/components/dashboard/RightPanel.tsx b/packages/chaire-lib-frontend/src/components/dashboard/RightPanel.tsx
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 
 import { Contribution, LayoutSectionProps, PanelSectionProps } from '../../services/dashboard/DashboardContribution';
 import ErrorBoundary from '../pageParts/ErrorBoundary';
@@ -47,4 +46,4 @@ const RightPanel: React.FunctionComponent<RightPanelProps> = ({ contributions, .
     );
 };
 
-export default withTranslation()(RightPanel);
+export default RightPanel;
diff --git a/packages/chaire-lib-frontend/src/components/dashboard/Toolbar.tsx b/packages/chaire-lib-frontend/src/components/dashboard/Toolbar.tsx
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 
 import { Contribution, LayoutSectionProps } from '../../services/dashboard/DashboardContribution';
 import NotificationArea from './NotificationArea';
@@ -37,4 +36,4 @@ const Toolbar: React.FunctionComponent<MenuBarProps> = ({ contributions, ...prop
     );
 };
 
-export default withTranslation()(Toolbar);
+export default Toolbar;
diff --git a/...e-lib-frontend/src/components/dashboard/__tests__/__snapshots__/BottomPanel.test.tsx.snap b/...e-lib-frontend/src/components/dashboard/__tests__/__snapshots__/BottomPanel.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Active section change 1`] = `
-<withI18nextTranslation(BottomPanel)
+<BottomPanel
   activeSection="test"
   contributions={
     [
@@ -25,49 +25,21 @@ exports[`Active section change 1`] = `
     ]
   }
 >
-  <BottomPanel
-    activeSection="test"
-    contributions={
-      [
-        {
-          "create": [Function],
-          "id": "testBottomPanel",
-          "placement": "bottomPanel",
-          "section": "test",
-        },
-        {
-          "create": [Function],
-          "id": "mainBottomPanel",
-          "placement": "bottomPanel",
-        },
-        {
-          "create": [Function],
-          "id": "fooBottomPanel",
-          "placement": "bottomPanel",
-          "section": "foo",
-        },
-      ]
-    }
-    i18n={{}}
-    t={[Function]}
-    tReady={false}
+  <section
+    id="tr__bottom-panel"
   >
-    <section
-      id="tr__bottom-panel"
-    >
-      <div>
-        test
-      </div>
-      <div>
-        Should always be there
-      </div>
-    </section>
-  </BottomPanel>
-</withI18nextTranslation(BottomPanel)>
+    <div>
+      test
+    </div>
+    <div>
+      Should always be there
+    </div>
+  </section>
+</BottomPanel>
 `;
 
 exports[`Active section change 2`] = `
-<withI18nextTranslation(BottomPanel)
+<BottomPanel
   activeSection="other"
   contributions={
     [
@@ -91,42 +63,14 @@ exports[`Active section change 2`] = `
     ]
   }
 >
-  <BottomPanel
-    activeSection="other"
-    contributions={
-      [
-        {
-          "create": [Function],
-          "id": "testBottomPanel",
-          "placement": "bottomPanel",
-          "section": "test",
-        },
-        {
-          "create": [Function],
-          "id": "mainBottomPanel",
-          "placement": "bottomPanel",
-        },
-        {
-          "create": [Function],
-          "id": "fooBottomPanel",
-          "placement": "bottomPanel",
-          "section": "foo",
-        },
-      ]
-    }
-    i18n={{}}
-    t={[Function]}
-    tReady={false}
+  <section
+    id="tr__bottom-panel"
   >
-    <section
-      id="tr__bottom-panel"
-    >
-      <div>
-        Should always be there
-      </div>
-    </section>
-  </BottomPanel>
-</withI18nextTranslation(BottomPanel)>
+    <div>
+      Should always be there
+    </div>
+  </section>
+</BottomPanel>
 `;
 
 exports[`One active section with contribution 1`] = `
@@ -151,9 +95,6 @@ exports[`One active section with contribution and props 1`] = `
   </div>
   <div
     activeSection="foo"
-    i18n={{}}
-    t={[Function]}
-    tReady={false}
   >
     Foo section, with props
   </div>

diff --git a/packages/chaire-lib-frontend/src/components/forms/auth/anonymous/AnonymousLogin.tsx b/packages/chaire-lib-frontend/src/components/forms/auth/anonymous/AnonymousLogin.tsx
@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
-import { withTranslation, WithTranslation } from 'react-i18next';
 import { History, Location } from 'history';
 
 import { startAnonymousLogin } from '../../../../actions/Auth';
@@ -19,9 +18,7 @@ export interface AnonymousLoginProps {
     login?: boolean;
 }
 
-export const AnonymousLogin: React.FunctionComponent<AnonymousLoginProps & WithTranslation> = (
-    props: AnonymousLoginProps & WithTranslation
-) => {
+export const AnonymousLogin: React.FunctionComponent<AnonymousLoginProps> = (props: AnonymousLoginProps) => {
     React.useEffect(() => {
         props.startAnonymousLogin();
     }, []);
@@ -37,4 +34,4 @@ const mapDispatchToProps = (dispatch, props: Omit<AnonymousLoginProps, 'startAno
         dispatch(startAnonymousLogin(props.history, props.location, callback))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(AnonymousLogin));
+export default connect(mapStateToProps, mapDispatchToProps)(AnonymousLogin);
diff --git a/packages/chaire-lib-frontend/src/components/pageParts/CollectionDownloadButtons.tsx b/packages/chaire-lib-frontend/src/components/pageParts/CollectionDownloadButtons.tsx
@@ -8,13 +8,12 @@ import React from 'react';
 import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
 import moment from 'moment';
 import { unparse } from 'papaparse';
-import { withTranslation, WithTranslation } from 'react-i18next';
 
 import Button from '../input/Button';
 import DownloadsUtils from '../../services/DownloadsService';
 import GenericCollection from 'chaire-lib-common/lib/utils/objects/GenericCollection';
 
-export interface CollectionDownloadButtonsProps extends WithTranslation {
+export interface CollectionDownloadButtonsProps {
     collection: GenericCollection<any>;
 }
 
@@ -120,4 +119,4 @@ const CollectionDownloadButtons = function (props: CollectionDownloadButtonsProp
     );
 };
 
-export default withTranslation()(CollectionDownloadButtons);
+export default CollectionDownloadButtons;
diff --git a/packages/chaire-lib-frontend/src/components/pageParts/Header.tsx b/packages/chaire-lib-frontend/src/components/pageParts/Header.tsx
@@ -17,27 +17,25 @@ import appConfiguration, { UserMenuItem } from '../../config/application.config'
 import { History } from 'history';
 import { CliUser } from 'chaire-lib-common/lib/services/user/userType';
 
-export interface HeaderProps extends WithTranslation {
+interface HeaderProps {
     user: CliUser;
     path: any;
     startLogout: () => void;
     appName: string;
     history: History;
 }
 
-interface UserProps {
+interface UserProps extends WithTranslation {
     user: CliUser;
 }
 
-interface UserMenuButtonProps {
+interface UserMenuButtonProps extends WithTranslation {
     menuItem: UserMenuItem;
     modalOpenedCallback: (isOpened: boolean) => void;
     closeMenu: () => void;
 }
 
-const UserMenuButton: React.FunctionComponent<UserMenuButtonProps & WithTranslation> = (
-    props: UserMenuButtonProps & WithTranslation
-) => {
+const UserMenuButton: React.FunctionComponent<UserMenuButtonProps> = (props: UserMenuButtonProps) => {
     const [modalIsOpened, setModalIsOpened] = React.useState(false);
     const toggleModal = (opened: boolean) => {
         setModalIsOpened(opened);
@@ -82,7 +80,7 @@ interface UserMenuProps {
     closeMenu: () => void;
 }
 
-const UserMenu: React.FunctionComponent<UserMenuProps & WithTranslation> = (props: UserMenuProps & WithTranslation) => {
+const UserMenu: React.FunctionComponent<UserMenuProps> = (props: UserMenuProps) => {
     const [hasModalOpened, setHasModalOpened] = React.useState(false);
     React.useLayoutEffect(() => {
         function handleClickOutside(event) {
@@ -115,9 +113,8 @@ const UserMenu: React.FunctionComponent<UserMenuProps & WithTranslation> = (prop
         </div>
     );
 };
-const TranslatableUserMenu = withTranslation()(UserMenu);
 
-const User: React.FunctionComponent<UserProps & WithTranslation> = (props: UserProps & WithTranslation) => {
+const User: React.FunctionComponent<UserProps> = (props: UserProps) => {
     const [display, setDisplay] = React.useState('none');
     const wrapperRef = React.useRef(null);
     return (
@@ -134,15 +131,15 @@ const User: React.FunctionComponent<UserProps & WithTranslation> = (props: UserP
                 {props.user.username || props.user.email || props.t('menu:User')}
             </button>
             {display !== 'none' && (
-                <TranslatableUserMenu wrapperRef={wrapperRef} user={props.user} closeMenu={() => setDisplay('none')} />
+                <UserMenu wrapperRef={wrapperRef} user={props.user} closeMenu={() => setDisplay('none')} />
             )}
         </li>
     );
 };
 
 const TranslatableUser = withTranslation('menu')(User);
 
-const Header: React.FunctionComponent<HeaderProps> = (props: HeaderProps) => {
+const Header: React.FunctionComponent<HeaderProps & WithTranslation> = (props: HeaderProps & WithTranslation) => {
     const appTitle = config.appTitle;
     const title = config.title[props.i18n.language];
     return (

diff --git a/packages/chaire-lib-frontend/src/components/pages/admin/UsersPage.tsx b/packages/chaire-lib-frontend/src/components/pages/admin/UsersPage.tsx
@@ -5,12 +5,11 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation, WithTranslation } from 'react-i18next';
 import { History } from 'history';
 import Loadable from 'react-loadable';
 import Loader from 'react-spinners/HashLoader';
 
-export interface UsersPageProps extends WithTranslation {
+export interface UsersPageProps {
     isAuthenticated: boolean;
     history: History;
     // TODO Type the user
@@ -44,4 +43,4 @@ class UsersPage extends React.Component<UsersPageProps> {
     }
 }
 
-export default withTranslation()(UsersPage);
+export default UsersPage;
diff --git a/packages/chaire-lib-frontend/src/services/dashboard/DashboardContribution.ts b/packages/chaire-lib-frontend/src/services/dashboard/DashboardContribution.ts
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { WithTranslation } from 'react-i18next';
 
 /** These are various locations in the layout where a widget can be drawn.
  *
@@ -23,7 +22,7 @@ export type layoutPieces = 'menu' | 'toolbar' | 'primarySidebar' | 'secondarySid
  * @interface LayoutSectionProps
  * @extends {WithTranslation}
  */
-export interface LayoutSectionProps extends WithTranslation {
+export interface LayoutSectionProps {
     activeSection: string;
     key?: string;
 }

diff --git a/packages/transition-frontend/src/components/dashboard/TransitionBottomPanel.tsx b/packages/transition-frontend/src/components/dashboard/TransitionBottomPanel.tsx
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 
 import TransitPathNodesList from '../forms/path/TransitPathNodeList';
 import serviceLocator from 'chaire-lib-common/lib/utils/ServiceLocator';
@@ -32,4 +31,4 @@ const BottomPanel: React.FunctionComponent<LayoutSectionProps> = (props: LayoutS
     return <React.Fragment>{path.path && <TransitPathNodesList selectedPath={path.path} />}</React.Fragment>;
 };
 
-export default withTranslation()(BottomPanel);
+export default BottomPanel;
diff --git a/packages/transition-frontend/src/components/dashboard/TransitionDashboard.tsx b/packages/transition-frontend/src/components/dashboard/TransitionDashboard.tsx
@@ -323,14 +323,7 @@ class Dashboard extends React.Component<DashboardProps, DashboardState> {
         const Map = this.props.mainMap;
 
         const mapComponent = (
-            <Map
-                i18n={this.props.i18n}
-                t={this.props.t}
-                tReady={this.props.tReady}
-                center={mapCenter}
-                zoom={mapZoom}
-                activeSection={this.state.activeSection}
-            >
+            <Map center={mapCenter} zoom={mapZoom} activeSection={this.state.activeSection}>
                 {this.state.showFullSizePanel && (
                     <FullSizePanel
                         activeSection={this.state.activeSection}

diff --git a/packages/transition-frontend/src/components/dashboard/TransitionFullSizePanel.tsx b/packages/transition-frontend/src/components/dashboard/TransitionFullSizePanel.tsx
@@ -5,7 +5,6 @@
  * License text available at https://opensource.org/licenses/MIT
  */
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 
 import serviceLocator from 'chaire-lib-common/lib/utils/ServiceLocator';
 import { LayoutSectionProps } from 'chaire-lib-frontend/lib/services/dashboard/DashboardContribution';
@@ -56,4 +55,4 @@ const FullSizePanel: React.FunctionComponent<LayoutSectionProps> = (props: Layou
     );
 };
 
-export default withTranslation()(FullSizePanel);
+export default FullSizePanel;