Migrate react-i18next translate components

scm-ui/ui-components/src/BackendErrorNotification.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import { BackendError } from "./errors";
 import Notification from "./Notification";
 
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   error: BackendError;
-  t: (p: string) => string;
 };
 
 class BackendErrorNotification extends React.Component<Props> {
@@ -122,4 +121,4 @@ class BackendErrorNotification extends React.Component<Props> {
   };
 }
 
-export default translate("plugins")(BackendErrorNotification);
+export default withTranslation("plugins")(BackendErrorNotification);

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import Icon from "./Icon";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
   defaultBranch: Branch;
@@ -15,9 +15,6 @@ type Props = {
   revision: string;
   path: string;
   baseUrl: string;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 const FlexStartNav = styled.nav`
@@ -99,4 +96,4 @@ class Breadcrumb extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(Breadcrumb);
+export default withTranslation("commons")(Breadcrumb);

scm-ui/ui-components/src/DateFromNow.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate, InjectedI18nProps } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { formatDistance, format, parseISO, Locale } from "date-fns";
 import { enUS, de, es } from "date-fns/locale";
 import styled from "styled-components";
@@ -16,7 +16,7 @@ const supportedLocales: LocaleMap = {
   es
 };
 
-type Props = InjectedI18nProps & {
+type Props = WithTranslation & {
   date?: DateInput;
   timeZone?: string;
 
@@ -90,4 +90,4 @@ class DateFromNow extends React.Component<Props> {
   }
 }
 
-export default translate()(DateFromNow);
+export default withTranslation()(DateFromNow);

scm-ui/ui-components/src/ErrorNotification.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { BackendError, ForbiddenError, UnauthorizedError } from "./errors";
 import Notification from "./Notification";
 import BackendErrorNotification from "./BackendErrorNotification";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   error?: Error;
 };
 
@@ -40,4 +39,4 @@ class ErrorNotification extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(ErrorNotification);
+export default withTranslation("commons")(ErrorNotification);

scm-ui/ui-components/src/GroupAutocomplete.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = AutocompleteProps & {
-  // Context props
-  t: (p: string) => string;
-};
-
-class GroupAutocomplete extends React.Component<Props> {
+class GroupAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
   render() {
     const { t } = this.props;
     return (
@@ -23,4 +18,4 @@ class GroupAutocomplete extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(GroupAutocomplete);
+export default withTranslation("commons")(GroupAutocomplete);

scm-ui/ui-components/src/LinkPaginator.tsx

@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection } from "@scm-manager/ui-types";
 import { Button } from "./buttons";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   page: number;
   filter?: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class LinkPaginator extends React.Component<Props> {
@@ -123,4 +120,4 @@ class LinkPaginator extends React.Component<Props> {
     return null;
   }
 }
-export default translate("commons")(LinkPaginator);
+export default withTranslation("commons")(LinkPaginator);

scm-ui/ui-components/src/Loading.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Image from "./Image";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   message?: string;
 };
 
@@ -33,4 +32,4 @@ class Loading extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(Loading);
+export default withTranslation("commons")(Loading);

scm-ui/ui-components/src/Logo.tsx

@@ -1,16 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import Image from "./Image";
 
-type Props = {
-  t: (p: string) => string;
-};
-
-class Logo extends React.Component<Props> {
+class Logo extends React.Component<WithTranslation> {
   render() {
     const { t } = this.props;
     return <Image src="/images/logo.png" alt={t("logo.alt")} />;
   }
 }
 
-export default translate("commons")(Logo);
+export default withTranslation("commons")(Logo);

scm-ui/ui-components/src/Paginator.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection, Link } from "@scm-manager/ui-types";
 import { Button } from "./buttons";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   onPageChange?: (p: string) => void;
-  t: (p: string) => string;
 };
 
 class Paginator extends React.Component<Props> {
@@ -108,4 +107,4 @@ class Paginator extends React.Component<Props> {
     );
   }
 }
-export default translate("commons")(Paginator);
+export default withTranslation("commons")(Paginator);

scm-ui/ui-components/src/StatePaginator.tsx

@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection } from "@scm-manager/ui-types";
 import { Button } from "./index";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   page: number;
   updatePage: (p: number) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class StatePaginator extends React.Component<Props> {
@@ -123,4 +120,4 @@ class StatePaginator extends React.Component<Props> {
     );
   }
 }
-export default translate("commons")(StatePaginator);
+export default withTranslation("commons")(StatePaginator);

scm-ui/ui-components/src/UserAutocomplete.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = AutocompleteProps & {
-  // Context props
-  t: (p: string) => string;
-};
-
-class UserAutocomplete extends React.Component<Props> {
+class UserAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
   render() {
     const { t } = this.props;
     return (
@@ -23,4 +18,4 @@ class UserAutocomplete extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(UserAutocomplete);
+export default withTranslation("commons")(UserAutocomplete);

scm-ui/ui-components/src/config/Configuration.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Links, Link } from "@scm-manager/ui-types";
 import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
 import { FormEvent } from "react";
@@ -10,12 +10,9 @@ type RenderProps = {
   onConfigurationChange: (p1: ConfigurationType, p2: boolean) => void;
 };
 
-type Props = {
+type Props = WithTranslation & {
   link: string;
   render: (props: RenderProps) => any; // ???
-
-  // context props
-  t: (p: string) => string;
 };
 
 type ConfigurationType = {
@@ -190,4 +187,4 @@ class Configuration extends React.Component<Props, State> {
   }
 }
 
-export default translate("config")(Configuration);
+export default withTranslation("config")(Configuration);

scm-ui/ui-components/src/config/ConfigurationBinder.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { binder } from "@scm-manager/ui-extensions";
 import { NavLink } from "../navigation";
 import { Route } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository, Links, Link } from "@scm-manager/ui-types";
 
 type GlobalRouteProps = {
@@ -15,6 +15,8 @@ type RepositoryRouteProps = {
   repository: Repository;
 };
 
+type RepositoryNavProps = WithTranslation & { url: string };
+
 class ConfigurationBinder {
   i18nNamespace = "plugins";
 
@@ -34,7 +36,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const ConfigNavLink = translate(this.i18nNamespace)(({ t }) => {
+    const ConfigNavLink = withTranslation(this.i18nNamespace)(({ t }) => {
       return this.navLink("/admin/settings" + to, labelI18nKey, t);
     });
 
@@ -64,7 +66,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
       return this.navLink(url + to, labelI18nKey, t);
     });
 
@@ -94,7 +96,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
       return this.navLink(url + "/settings" + to, labelI18nKey, t);
     });
 

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -1,14 +1,10 @@
-import React, { ChangeEvent } from "react";
-import { translate } from "react-i18next";
+import React, { ChangeEvent, FormEvent } from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
-import { FormEvent } from "react";
 
-type Props = {
+type Props = WithTranslation & {
   filter: (p: string) => void;
   value?: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -59,4 +55,4 @@ class FilterInput extends React.Component<Props, State> {
   }
 }
 
-export default translate("commons")(FilterInput);
+export default withTranslation("commons")(FilterInput);

scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { DisplayedUser } from "@scm-manager/ui-types";
 import TagGroup from "./TagGroup";
 
-type Props = {
+type Props = WithTranslation & {
   members: string[];
   memberListChanged: (p: string[]) => void;
   label?: string;
   helpText?: string;
-  t: (p: string) => string;
 };
 
 class MemberNameTagGroup extends React.Component<Props> {
@@ -39,4 +38,4 @@ class MemberNameTagGroup extends React.Component<Props> {
   };
 }
 
-export default translate("groups")(MemberNameTagGroup);
+export default withTranslation("groups")(MemberNameTagGroup);

scm-ui/ui-components/src/forms/PasswordConfirmation.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import InputField from "./InputField";
 
 type State = {
@@ -8,11 +8,9 @@ type State = {
   passwordValid: boolean;
   passwordConfirmationFailed: boolean;
 };
-type Props = {
+type Props = WithTranslation & {
   passwordChanged: (p1: string, p2: boolean) => void;
   passwordValidator?: (p: string) => boolean;
-  // Context props
-  t: (p: string) => string;
 };
 
 class PasswordConfirmation extends React.Component<Props, State> {
@@ -106,4 +104,4 @@ class PasswordConfirmation extends React.Component<Props, State> {
   };
 }
 
-export default translate("commons")(PasswordConfirmation);
+export default withTranslation("commons")(PasswordConfirmation);

scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx

@@ -1,11 +1,10 @@
 import React, { ReactNode } from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
 import { Links } from "@scm-manager/ui-types";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   links: Links;
 };
 
@@ -88,4 +87,4 @@ class PrimaryNavigation extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(PrimaryNavigation);
+export default withTranslation("commons")(PrimaryNavigation);

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate, InjectedTranslateProps } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
@@ -10,7 +10,7 @@ import Icon from "../Icon";
 import { File, Hunk as HunkType, DiffObjectProps } from "./DiffTypes";
 
 type Props = DiffObjectProps &
-  InjectedTranslateProps & {
+  WithTranslation & {
     file: File;
     defaultCollapse?: boolean;
   };
@@ -271,4 +271,4 @@ class DiffFile extends React.Component<Props, State> {
   }
 }
 
-export default translate("repos")(DiffFile);
+export default withTranslation("repos")(DiffFile);

scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import { Changeset } from "@scm-manager/ui-types";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetAuthor extends React.Component<Props> {
@@ -50,4 +47,4 @@ class ChangesetAuthor extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetAuthor);
+export default withTranslation("repos")(ChangesetAuthor);

scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx

@@ -2,14 +2,11 @@ import React from "react";
 import { Changeset, Repository } from "@scm-manager/ui-types";
 import { ButtonAddons, Button } from "../../buttons";
 import { createChangesetLink, createSourcesLink } from "./changesets";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetButtonGroup extends React.Component<Props> {
@@ -26,4 +23,4 @@ class ChangesetButtonGroup extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetButtonGroup);
+export default withTranslation("repos")(ChangesetButtonGroup);

scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx

@@ -2,14 +2,11 @@ import React from "react";
 import { Changeset, Link } from "@scm-manager/ui-types";
 import LoadingDiff from "../LoadingDiff";
 import Notification from "../../Notification";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
   defaultCollapse?: boolean;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetDiff extends React.Component<Props> {
@@ -36,4 +33,4 @@ class ChangesetDiff extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetDiff);
+export default withTranslation("repos")(ChangesetDiff);

scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Interpolate, translate } from "react-i18next";
+import { Trans, WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -12,12 +12,9 @@ import ChangesetAuthor from "./ChangesetAuthor";
 import ChangesetTags from "./ChangesetTags";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const Wrapper = styled.div`
@@ -98,10 +95,10 @@ class ChangesetRow extends React.Component<Props> {
                       </ExtensionPoint>
                     </h4>
                     <p className="is-hidden-touch">
-                      <Interpolate i18nKey="changeset.summary" id={changesetId} time={dateFromNow} />
+                      <Trans i18nKey="changeset.summary" values={{ id: changesetId, time: dateFromNow }} />
                     </p>
                     <p className="is-hidden-desktop">
-                      <Interpolate i18nKey="changeset.shortSummary" id={changesetId} time={dateFromNow} />
+                      <Trans i18nKey="changeset.shortSummary" values={{ id: changesetId, time: dateFromNow }} />
                     </p>
                     <AuthorWrapper className="is-size-7">
                       <ChangesetAuthor changeset={changeset} />
@@ -131,4 +128,4 @@ class ChangesetRow extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetRow);
+export default withTranslation("repos")(ChangesetRow);

scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Tag } from "@scm-manager/ui-types";
 import Tooltip from "../../Tooltip";
 import ChangesetTagBase from "./ChangesetTagBase";
 
-type Props = {
+type Props = WithTranslation & {
   tags: Tag[];
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetTagsCollapsed extends React.Component<Props> {
@@ -23,4 +20,4 @@ class ChangesetTagsCollapsed extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetTagsCollapsed);
+export default withTranslation("repos")(ChangesetTagsCollapsed);