Skip to content

Commit 836b2e3

Browse files
tommoortommoor
committed
chore: Missing translation hooks in settings sidebar
1 parent 24ecaa8 commit 836b2e3

File tree

2 files changed

+111
-114
lines changed

2 files changed

+111
-114
lines changed

‎app/components/Sidebar/Settings.js

+102-114
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @flow
2-
import { observer, inject } from "mobx-react";
2+
import { observer } from "mobx-react";
33
import {
44
DocumentIcon,
55
EmailIcon,
@@ -13,11 +13,9 @@ import {
1313
ExpandedIcon,
1414
} from "outline-icons";
1515
import * as React from "react";
16-
import { withTranslation, type TFunction } from "react-i18next";
17-
import type { RouterHistory } from "react-router-dom";
16+
import { useTranslation } from "react-i18next";
17+
import { useHistory } from "react-router-dom";
1818
import styled from "styled-components";
19-
import AuthStore from "stores/AuthStore";
20-
import PoliciesStore from "stores/PoliciesStore";
2119
import Flex from "components/Flex";
2220
import Scrollable from "components/Scrollable";
2321

@@ -30,131 +28,123 @@ import Version from "./components/Version";
3028
import SlackIcon from "./icons/Slack";
3129
import ZapierIcon from "./icons/Zapier";
3230
import env from "env";
31+
import useCurrentTeam from "hooks/useCurrentTeam";
32+
import useStores from "hooks/useStores";
3333

3434
const isHosted = env.DEPLOYMENT === "hosted";
3535

36-
type Props = {
37-
history: RouterHistory,
38-
policies: PoliciesStore,
39-
auth: AuthStore,
40-
t: TFunction,
41-
};
36+
function SettingsSidebar() {
37+
const { t } = useTranslation();
38+
const history = useHistory();
39+
const team = useCurrentTeam();
40+
const { policies } = useStores();
41+
const can = policies.abilities(team.id);
4242

43-
@observer
44-
class SettingsSidebar extends React.Component<Props> {
45-
returnToDashboard = () => {
46-
this.props.history.push("/home");
47-
};
43+
const returnToDashboard = React.useCallback(() => {
44+
history.push("/home");
45+
}, [history]);
4846

49-
render() {
50-
const { policies, t, auth } = this.props;
51-
const { team } = auth;
52-
if (!team) return null;
47+
return (
48+
<Sidebar>
49+
<HeaderBlock
50+
subheading={
51+
<ReturnToApp align="center">
52+
<BackIcon color="currentColor" /> {t("Return to App")}
53+
</ReturnToApp>
54+
}
55+
teamName={team.name}
56+
logoUrl={team.avatarUrl}
57+
onClick={returnToDashboard}
58+
/>
5359

54-
const can = policies.abilities(team.id);
55-
56-
return (
57-
<Sidebar>
58-
<HeaderBlock
59-
subheading={
60-
<ReturnToApp align="center">
61-
<BackIcon color="currentColor" /> {t("Return to App")}
62-
</ReturnToApp>
63-
}
64-
teamName={team.name}
65-
logoUrl={team.avatarUrl}
66-
onClick={this.returnToDashboard}
67-
/>
68-
69-
<Flex auto column>
70-
<Scrollable shadow>
71-
<Section>
72-
<Header>Account</Header>
60+
<Flex auto column>
61+
<Scrollable shadow>
62+
<Section>
63+
<Header>{t("Account")}</Header>
64+
<SidebarLink
65+
to="/settings"
66+
icon={<ProfileIcon color="currentColor" />}
67+
label={t("Profile")}
68+
/>
69+
<SidebarLink
70+
to="/settings/notifications"
71+
icon={<EmailIcon color="currentColor" />}
72+
label={t("Notifications")}
73+
/>
74+
<SidebarLink
75+
to="/settings/tokens"
76+
icon={<CodeIcon color="currentColor" />}
77+
label={t("API Tokens")}
78+
/>
79+
</Section>
80+
<Section>
81+
<Header>{t("Team")}</Header>
82+
{can.update && (
7383
<SidebarLink
74-
to="/settings"
75-
icon={<ProfileIcon color="currentColor" />}
76-
label={t("Profile")}
84+
to="/settings/details"
85+
icon={<TeamIcon color="currentColor" />}
86+
label={t("Details")}
7787
/>
88+
)}
89+
{can.update && (
7890
<SidebarLink
79-
to="/settings/notifications"
80-
icon={<EmailIcon color="currentColor" />}
81-
label={t("Notifications")}
91+
to="/settings/security"
92+
icon={<PadlockIcon color="currentColor" />}
93+
label={t("Security")}
8294
/>
95+
)}
96+
<SidebarLink
97+
to="/settings/people"
98+
icon={<UserIcon color="currentColor" />}
99+
exact={false}
100+
label={t("People")}
101+
/>
102+
<SidebarLink
103+
to="/settings/groups"
104+
icon={<GroupIcon color="currentColor" />}
105+
exact={false}
106+
label={t("Groups")}
107+
/>
108+
<SidebarLink
109+
to="/settings/shares"
110+
icon={<LinkIcon color="currentColor" />}
111+
label={t("Share Links")}
112+
/>
113+
{can.export && (
83114
<SidebarLink
84-
to="/settings/tokens"
85-
icon={<CodeIcon color="currentColor" />}
86-
label={t("API Tokens")}
115+
to="/settings/export"
116+
icon={<DocumentIcon color="currentColor" />}
117+
label={t("Export Data")}
87118
/>
88-
</Section>
119+
)}
120+
</Section>
121+
{can.update && (
89122
<Section>
90-
<Header>Team</Header>
91-
{can.update && (
92-
<SidebarLink
93-
to="/settings/details"
94-
icon={<TeamIcon color="currentColor" />}
95-
label={t("Details")}
96-
/>
97-
)}
98-
{can.update && (
99-
<SidebarLink
100-
to="/settings/security"
101-
icon={<PadlockIcon color="currentColor" />}
102-
label={t("Security")}
103-
/>
104-
)}
105-
<SidebarLink
106-
to="/settings/people"
107-
icon={<UserIcon color="currentColor" />}
108-
exact={false}
109-
label={t("People")}
110-
/>
123+
<Header>{t("Integrations")}</Header>
111124
<SidebarLink
112-
to="/settings/groups"
113-
icon={<GroupIcon color="currentColor" />}
114-
exact={false}
115-
label={t("Groups")}
125+
to="/settings/integrations/slack"
126+
icon={<SlackIcon color="currentColor" />}
127+
label="Slack"
116128
/>
117-
<SidebarLink
118-
to="/settings/shares"
119-
icon={<LinkIcon color="currentColor" />}
120-
label={t("Share Links")}
121-
/>
122-
{can.export && (
129+
{isHosted && (
123130
<SidebarLink
124-
to="/settings/export"
125-
icon={<DocumentIcon color="currentColor" />}
126-
label={t("Export Data")}
131+
to="/settings/integrations/zapier"
132+
icon={<ZapierIcon color="currentColor" />}
133+
label="Zapier"
127134
/>
128135
)}
129136
</Section>
130-
{can.update && (
131-
<Section>
132-
<Header>{t("Integrations")}</Header>
133-
<SidebarLink
134-
to="/settings/integrations/slack"
135-
icon={<SlackIcon color="currentColor" />}
136-
label="Slack"
137-
/>
138-
{isHosted && (
139-
<SidebarLink
140-
to="/settings/integrations/zapier"
141-
icon={<ZapierIcon color="currentColor" />}
142-
label="Zapier"
143-
/>
144-
)}
145-
</Section>
146-
)}
147-
{can.update && !isHosted && (
148-
<Section>
149-
<Header>{t("Installation")}</Header>
150-
<Version />
151-
</Section>
152-
)}
153-
</Scrollable>
154-
</Flex>
155-
</Sidebar>
156-
);
157-
}
137+
)}
138+
{can.update && !isHosted && (
139+
<Section>
140+
<Header>{t("Installation")}</Header>
141+
<Version />
142+
</Section>
143+
)}
144+
</Scrollable>
145+
</Flex>
146+
</Sidebar>
147+
);
158148
}
159149

160150
const BackIcon = styled(ExpandedIcon)`
@@ -166,6 +156,4 @@ const ReturnToApp = styled(Flex)`
166156
height: 16px;
167157
`;
168158

169-
export default withTranslation()<SettingsSidebar>(
170-
inject("auth", "policies")(SettingsSidebar)
171-
);
159+
export default observer(SettingsSidebar);

‎app/hooks/useCurrentTeam.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// @flow
2+
import invariant from "invariant";
3+
import useStores from "./useStores";
4+
5+
export default function useCurrentTeam() {
6+
const { auth } = useStores();
7+
invariant(auth.team, "team required");
8+
return auth.team;
9+
}

0 commit comments

Comments
 (0)