chore: Missing translation hooks in settings sidebar

app/components/Sidebar/Settings.js

@@ -1,5 +1,5 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import {
   DocumentIcon,
   EmailIcon,
@@ -13,11 +13,9 @@ import {
   ExpandedIcon,
 } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
-import type { RouterHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import styled from "styled-components";
-import AuthStore from "stores/AuthStore";
-import PoliciesStore from "stores/PoliciesStore";
 import Flex from "components/Flex";
 import Scrollable from "components/Scrollable";
 
@@ -30,29 +28,22 @@ import Version from "./components/Version";
 import SlackIcon from "./icons/Slack";
 import ZapierIcon from "./icons/Zapier";
 import env from "env";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useStores from "hooks/useStores";
 
 const isHosted = env.DEPLOYMENT === "hosted";
 
-type Props = {
+function SettingsSidebar() {
-  history: RouterHistory,
+  const { t } = useTranslation();
-  policies: PoliciesStore,
+  const history = useHistory();
-  auth: AuthStore,
+  const team = useCurrentTeam();
-  t: TFunction,
+  const { policies } = useStores();
-};
-
-@observer
-class SettingsSidebar extends React.Component<Props> {
-  returnToDashboard = () => {
-    this.props.history.push("/home");
-  };
-
-  render() {
-    const { policies, t, auth } = this.props;
-    const { team } = auth;
-    if (!team) return null;
-
   const can = policies.abilities(team.id);
 
+  const returnToDashboard = React.useCallback(() => {
+    history.push("/home");
+  }, [history]);
+
   return (
     <Sidebar>
       <HeaderBlock
@@ -63,13 +54,13 @@ class SettingsSidebar extends React.Component<Props> {
         }
         teamName={team.name}
         logoUrl={team.avatarUrl}
-          onClick={this.returnToDashboard}
+        onClick={returnToDashboard}
       />
 
       <Flex auto column>
         <Scrollable shadow>
           <Section>
-              <Header>Account</Header>
+            <Header>{t("Account")}</Header>
             <SidebarLink
               to="/settings"
               icon={<ProfileIcon color="currentColor" />}
@@ -87,7 +78,7 @@ class SettingsSidebar extends React.Component<Props> {
             />
           </Section>
           <Section>
-              <Header>Team</Header>
+            <Header>{t("Team")}</Header>
             {can.update && (
               <SidebarLink
                 to="/settings/details"
@@ -154,7 +145,6 @@ class SettingsSidebar extends React.Component<Props> {
       </Flex>
     </Sidebar>
   );
-  }
 }
 
 const BackIcon = styled(ExpandedIcon)`
@@ -166,6 +156,4 @@ const ReturnToApp = styled(Flex)`
   height: 16px;
 `;
 
-export default withTranslation()<SettingsSidebar>(
+export default observer(SettingsSidebar);
-  inject("auth", "policies")(SettingsSidebar)
-);

app/hooks/useCurrentTeam.js

@@ -0,0 +1,9 @@
+// @flow
+import invariant from "invariant";
+import useStores from "./useStores";
+
+export default function useCurrentTeam() {
+  const { auth } = useStores();
+  invariant(auth.team, "team required");
+  return auth.team;
+}