diff options
Diffstat (limited to 'src/components/settings/navigation/SettingsNavigation.tsx')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.tsx | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.tsx b/src/components/settings/navigation/SettingsNavigation.tsx new file mode 100644 index 000000000..95c69027c --- /dev/null +++ b/src/components/settings/navigation/SettingsNavigation.tsx | |||
@@ -0,0 +1,203 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { NavLink } from 'react-router-dom'; | ||
5 | import { StoresProps } from '../../../@types/ferdium-components.types'; | ||
6 | import { | ||
7 | LOCAL_SERVER, | ||
8 | LIVE_FERDIUM_API, | ||
9 | LIVE_FRANZ_API, | ||
10 | } from '../../../config'; | ||
11 | import globalMessages from '../../../i18n/globalMessages'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | availableServices: { | ||
15 | id: 'settings.navigation.availableServices', | ||
16 | defaultMessage: 'Available services', | ||
17 | }, | ||
18 | yourServices: { | ||
19 | id: 'settings.navigation.yourServices', | ||
20 | defaultMessage: 'Your services', | ||
21 | }, | ||
22 | yourWorkspaces: { | ||
23 | id: 'settings.navigation.yourWorkspaces', | ||
24 | defaultMessage: 'Your workspaces', | ||
25 | }, | ||
26 | account: { | ||
27 | id: 'settings.navigation.account', | ||
28 | defaultMessage: 'Account', | ||
29 | }, | ||
30 | team: { | ||
31 | id: 'settings.navigation.team', | ||
32 | defaultMessage: 'Manage Team', | ||
33 | }, | ||
34 | releaseNotes: { | ||
35 | id: 'settings.navigation.releaseNotes', | ||
36 | defaultMessage: 'Release Notes', | ||
37 | }, | ||
38 | supportFerdium: { | ||
39 | id: 'settings.navigation.supportFerdium', | ||
40 | defaultMessage: 'About Ferdium', | ||
41 | }, | ||
42 | logout: { | ||
43 | id: 'settings.navigation.logout', | ||
44 | defaultMessage: 'Logout', | ||
45 | }, | ||
46 | }); | ||
47 | |||
48 | interface IProps extends Partial<StoresProps>, WrappedComponentProps { | ||
49 | serviceCount: number; | ||
50 | workspaceCount: number; | ||
51 | } | ||
52 | |||
53 | @inject('stores', 'actions') | ||
54 | @observer | ||
55 | class SettingsNavigation extends Component<IProps> { | ||
56 | constructor(props: IProps) { | ||
57 | super(props); | ||
58 | } | ||
59 | |||
60 | handleLogout(): void { | ||
61 | const isUsingWithoutAccount = | ||
62 | this.props.stores!.settings.app.server === LOCAL_SERVER; | ||
63 | |||
64 | // Remove current auth token | ||
65 | localStorage.removeItem('authToken'); | ||
66 | |||
67 | if (isUsingWithoutAccount) { | ||
68 | // Reset server back to Ferdium API | ||
69 | this.props.actions!.settings.update({ | ||
70 | type: 'app', | ||
71 | data: { | ||
72 | server: LIVE_FERDIUM_API, | ||
73 | }, | ||
74 | }); | ||
75 | } | ||
76 | this.props.stores!.user.isLoggingOut = true; | ||
77 | |||
78 | this.props.stores!.router.push('/auth/welcome'); | ||
79 | |||
80 | // Reload Ferdium, otherwise many settings won't sync correctly with the server | ||
81 | // after logging into another account | ||
82 | window.location.reload(); | ||
83 | } | ||
84 | |||
85 | render() { | ||
86 | const { serviceCount, workspaceCount, stores, intl } = this.props; | ||
87 | const isUsingWithoutAccount = stores!.settings.app.server === LOCAL_SERVER; | ||
88 | const isUsingFranzServer = stores!.settings.app.server === LIVE_FRANZ_API; | ||
89 | |||
90 | return ( | ||
91 | <div className="settings-navigation"> | ||
92 | <NavLink | ||
93 | to="/settings/recipes" | ||
94 | className={({ isActive }) => | ||
95 | isActive | ||
96 | ? 'settings-navigation__link is-active' | ||
97 | : 'settings-navigation__link' | ||
98 | } | ||
99 | > | ||
100 | {intl.formatMessage(messages.availableServices)} | ||
101 | </NavLink> | ||
102 | <NavLink | ||
103 | to="/settings/services" | ||
104 | className={({ isActive }) => | ||
105 | isActive | ||
106 | ? 'settings-navigation__link is-active' | ||
107 | : 'settings-navigation__link' | ||
108 | } | ||
109 | > | ||
110 | {intl.formatMessage(messages.yourServices)}{' '} | ||
111 | <span className="badge">{serviceCount}</span> | ||
112 | </NavLink> | ||
113 | <NavLink | ||
114 | to="/settings/workspaces" | ||
115 | className={({ isActive }) => | ||
116 | isActive | ||
117 | ? 'settings-navigation__link is-active' | ||
118 | : 'settings-navigation__link' | ||
119 | } | ||
120 | > | ||
121 | {intl.formatMessage(messages.yourWorkspaces)}{' '} | ||
122 | <span className="badge">{workspaceCount}</span> | ||
123 | </NavLink> | ||
124 | {!isUsingWithoutAccount && ( | ||
125 | <NavLink | ||
126 | to="/settings/user" | ||
127 | className={({ isActive }) => | ||
128 | isActive | ||
129 | ? 'settings-navigation__link is-active' | ||
130 | : 'settings-navigation__link' | ||
131 | } | ||
132 | > | ||
133 | {intl.formatMessage(messages.account)} | ||
134 | </NavLink> | ||
135 | )} | ||
136 | {isUsingFranzServer && ( | ||
137 | <NavLink | ||
138 | to="/settings/team" | ||
139 | className={({ isActive }) => | ||
140 | isActive | ||
141 | ? 'settings-navigation__link is-active' | ||
142 | : 'settings-navigation__link' | ||
143 | } | ||
144 | > | ||
145 | {intl.formatMessage(messages.team)} | ||
146 | </NavLink> | ||
147 | )} | ||
148 | <NavLink | ||
149 | to="/settings/app" | ||
150 | className={({ isActive }) => | ||
151 | isActive | ||
152 | ? 'settings-navigation__link is-active' | ||
153 | : 'settings-navigation__link' | ||
154 | } | ||
155 | > | ||
156 | {intl.formatMessage(globalMessages.settings)} | ||
157 | {stores!.settings.app.automaticUpdates && | ||
158 | (stores!.ui.showServicesUpdatedInfoBar || | ||
159 | stores!.app.updateStatus === | ||
160 | stores!.app.updateStatusTypes.AVAILABLE || | ||
161 | stores!.app.updateStatus === | ||
162 | stores!.app.updateStatusTypes.DOWNLOADED) && ( | ||
163 | <span className="update-available">•</span> | ||
164 | )} | ||
165 | </NavLink> | ||
166 | <NavLink | ||
167 | to="/settings/releasenotes" | ||
168 | className={({ isActive }) => | ||
169 | isActive | ||
170 | ? 'settings-navigation__link is-active' | ||
171 | : 'settings-navigation__link' | ||
172 | } | ||
173 | > | ||
174 | {intl.formatMessage(messages.releaseNotes)} | ||
175 | </NavLink> | ||
176 | <NavLink | ||
177 | to="/settings/support" | ||
178 | className={({ isActive }) => | ||
179 | isActive | ||
180 | ? 'settings-navigation__link is-active' | ||
181 | : 'settings-navigation__link' | ||
182 | } | ||
183 | > | ||
184 | {intl.formatMessage(messages.supportFerdium)} | ||
185 | </NavLink> | ||
186 | <span className="settings-navigation__expander" /> | ||
187 | <button | ||
188 | type="button" | ||
189 | // @ts-ignore | ||
190 | to="/auth/logout" // TODO - [TS DEBT] Need to check if button take this prop | ||
191 | className="settings-navigation__link" | ||
192 | onClick={this.handleLogout.bind(this)} | ||
193 | > | ||
194 | {!isUsingWithoutAccount | ||
195 | ? intl.formatMessage(messages.logout) | ||
196 | : 'Exit session'} | ||
197 | </button> | ||
198 | </div> | ||
199 | ); | ||
200 | } | ||
201 | } | ||
202 | |||
203 | export default injectIntl(SettingsNavigation); | ||