diff options
author | Ricardo Cino <ricardo@cino.io> | 2022-07-07 09:31:50 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-07 09:31:50 +0200 |
commit | 71c52373f81cace664047edd19d9d289f45a4dff (patch) | |
tree | 69b3f1d45a8b3f1ceab9497ea3c96e9dc18e3166 /src/components/settings/navigation | |
parent | 6.0.0-nightly.91 [skip ci] (diff) | |
download | ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.gz ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.zst ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.zip |
chore: Mobx & React-Router upgrade (#406)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/settings/navigation')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.jsx (renamed from src/components/settings/navigation/SettingsNavigation.js) | 96 |
1 files changed, 60 insertions, 36 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.jsx index ad1cef1e4..bbbe8d888 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.jsx | |||
@@ -2,10 +2,10 @@ import { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl } from 'react-intl'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { RouterStore } from 'mobx-react-router'; | 5 | import { RouterStore } from '@superwf/mobx-react-router'; |
6 | 6 | ||
7 | import { NavLink } from 'react-router-dom'; | ||
7 | import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; | 8 | import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; |
8 | import Link from '../../ui/Link'; | ||
9 | import UIStore from '../../../stores/UIStore'; | 9 | import UIStore from '../../../stores/UIStore'; |
10 | import SettingsStore from '../../../stores/SettingsStore'; | 10 | import SettingsStore from '../../../stores/SettingsStore'; |
11 | import UserStore from '../../../stores/UserStore'; | 11 | import UserStore from '../../../stores/UserStore'; |
@@ -90,70 +90,94 @@ class SettingsNavigation extends Component { | |||
90 | 90 | ||
91 | return ( | 91 | return ( |
92 | <div className="settings-navigation"> | 92 | <div className="settings-navigation"> |
93 | <Link | 93 | <NavLink |
94 | to="/settings/recipes" | 94 | to="/settings/recipes" |
95 | className="settings-navigation__link" | 95 | className={({ isActive }) => |
96 | activeClassName="is-active" | 96 | isActive |
97 | ? 'settings-navigation__link is-active' | ||
98 | : 'settings-navigation__link' | ||
99 | } | ||
97 | > | 100 | > |
98 | {intl.formatMessage(messages.availableServices)} | 101 | {intl.formatMessage(messages.availableServices)} |
99 | </Link> | 102 | </NavLink> |
100 | <Link | 103 | <NavLink |
101 | to="/settings/services" | 104 | to="/settings/services" |
102 | className="settings-navigation__link" | 105 | className={({ isActive }) => |
103 | activeClassName="is-active" | 106 | isActive |
107 | ? 'settings-navigation__link is-active' | ||
108 | : 'settings-navigation__link' | ||
109 | } | ||
104 | > | 110 | > |
105 | {intl.formatMessage(messages.yourServices)}{' '} | 111 | {intl.formatMessage(messages.yourServices)}{' '} |
106 | <span className="badge">{serviceCount}</span> | 112 | <span className="badge">{serviceCount}</span> |
107 | </Link> | 113 | </NavLink> |
108 | <Link | 114 | <NavLink |
109 | to="/settings/workspaces" | 115 | to="/settings/workspaces" |
110 | className="settings-navigation__link" | 116 | className={({ isActive }) => |
111 | activeClassName="is-active" | 117 | isActive |
118 | ? 'settings-navigation__link is-active' | ||
119 | : 'settings-navigation__link' | ||
120 | } | ||
112 | > | 121 | > |
113 | {intl.formatMessage(messages.yourWorkspaces)}{' '} | 122 | {intl.formatMessage(messages.yourWorkspaces)}{' '} |
114 | <span className="badge">{workspaceCount}</span> | 123 | <span className="badge">{workspaceCount}</span> |
115 | </Link> | 124 | </NavLink> |
116 | {!isUsingWithoutAccount && ( | 125 | {!isUsingWithoutAccount && ( |
117 | <Link | 126 | <NavLink |
118 | to="/settings/user" | 127 | to="/settings/user" |
119 | className="settings-navigation__link" | 128 | className={({ isActive }) => |
120 | activeClassName="is-active" | 129 | isActive |
130 | ? 'settings-navigation__link is-active' | ||
131 | : 'settings-navigation__link' | ||
132 | } | ||
121 | > | 133 | > |
122 | {intl.formatMessage(messages.account)} | 134 | {intl.formatMessage(messages.account)} |
123 | </Link> | 135 | </NavLink> |
124 | )} | 136 | )} |
125 | {isUsingFranzServer && ( | 137 | {isUsingFranzServer && ( |
126 | <Link | 138 | <NavLink |
127 | to="/settings/team" | 139 | to="/settings/team" |
128 | className="settings-navigation__link" | 140 | className={({ isActive }) => |
129 | activeClassName="is-active" | 141 | isActive |
142 | ? 'settings-navigation__link is-active' | ||
143 | : 'settings-navigation__link' | ||
144 | } | ||
130 | > | 145 | > |
131 | {intl.formatMessage(messages.team)} | 146 | {intl.formatMessage(messages.team)} |
132 | </Link> | 147 | </NavLink> |
133 | )} | 148 | )} |
134 | <Link | 149 | <NavLink |
135 | to="/settings/app" | 150 | to="/settings/app" |
136 | className="settings-navigation__link" | 151 | className={({ isActive }) => |
137 | activeClassName="is-active" | 152 | isActive |
153 | ? 'settings-navigation__link is-active' | ||
154 | : 'settings-navigation__link' | ||
155 | } | ||
138 | > | 156 | > |
139 | {intl.formatMessage(globalMessages.settings)} | 157 | {intl.formatMessage(globalMessages.settings)} |
140 | {stores.settings.app.automaticUpdates && (stores.ui.showServicesUpdatedInfoBar || | 158 | {stores.settings.app.automaticUpdates && |
141 | (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE || | 159 | (stores.ui.showServicesUpdatedInfoBar || |
142 | stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED)) && ( | 160 | stores.app.updateStatus === |
143 | <span className="update-available">•</span> | 161 | stores.app.updateStatusTypes.AVAILABLE || |
144 | )} | 162 | stores.app.updateStatus === |
145 | </Link> | 163 | stores.app.updateStatusTypes.DOWNLOADED) && ( |
146 | <Link | 164 | <span className="update-available">•</span> |
165 | )} | ||
166 | </NavLink> | ||
167 | <NavLink | ||
147 | to="/settings/support" | 168 | to="/settings/support" |
148 | className="settings-navigation__link" | 169 | className={({ isActive }) => |
149 | activeClassName="is-active" | 170 | isActive |
171 | ? 'settings-navigation__link is-active' | ||
172 | : 'settings-navigation__link' | ||
173 | } | ||
150 | > | 174 | > |
151 | {intl.formatMessage(messages.supportFerdium)} | 175 | {intl.formatMessage(messages.supportFerdium)} |
152 | </Link> | 176 | </NavLink> |
153 | <span className="settings-navigation__expander" /> | 177 | <span className="settings-navigation__expander" /> |
154 | <button | 178 | <button |
155 | type="button" | 179 | type="button" |
156 | to='/auth/logout' | 180 | to="/auth/logout" |
157 | className="settings-navigation__link" | 181 | className="settings-navigation__link" |
158 | onClick={this.handleLogout.bind(this)} | 182 | onClick={this.handleLogout.bind(this)} |
159 | > | 183 | > |