From dfad0c4724ee382e9babee8fc59fa943a0e7c22c Mon Sep 17 00:00:00 2001
From: Vaso <vaclav.oppelt@keyup.eu>
Date: Mon, 15 Jul 2019 13:06:04 +0200
Subject: [PATCH] add title to all pages
---
src/App.tsx | 7 +------
src/components/AddApiKey.tsx | 2 ++
src/components/ApiKeys.tsx | 2 ++
src/components/Overview.tsx | 5 +++++
src/parts/Auth.tsx | 8 ++++++++
src/parts/SystemSettings.tsx | 7 ++++++-
src/parts/account.js | 2 ++
src/parts/appBuilds.js | 2 ++
src/parts/appDetail.js | 2 ++
src/parts/team.js | 2 ++
src/utils/pageTitle.ts | 12 ++++++++++++
11 files changed, 44 insertions(+), 7 deletions(-)
create mode 100644 src/utils/pageTitle.ts
diff --git a/src/App.tsx b/src/App.tsx
index 70e081e..f46eed8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -142,10 +142,7 @@ export class EinstoreApp extends React.Component<{}, AppState> {
componentDidMount() {
this.mounted = true
- const name = localStorage.getItem('serverName')
- if (name) {
- document.title = name
- }
+
if (window.Einstore) {
this.refreshServer()
if (this.state.token && this.state.authToken) {
@@ -169,8 +166,6 @@ export class EinstoreApp extends React.Component<{}, AppState> {
window.Einstore.server().then((server: any) => {
if (this.mounted) {
this.setState({ server })
- document.title = server.name
- localStorage.setItem('serverName', server.name)
}
})
window.Einstore.serverSettingsPlain().then((settings: any) => {
diff --git a/src/components/AddApiKey.tsx b/src/components/AddApiKey.tsx
index 647d238..7a9a7dc 100644
--- a/src/components/AddApiKey.tsx
+++ b/src/components/AddApiKey.tsx
@@ -10,6 +10,7 @@ import find from 'lodash-es/find'
import Select from 'react-select'
import IconBack from 'shapes/back'
import showMessage from '../utils/showMessage'
+import pageTitle from "../utils/pageTitle";
interface AddApiKeysProps {
teamId?: string
@@ -74,6 +75,7 @@ export default class AddApiKeys extends Component<AddApiKeysProps, AddApiKeysSta
componentDidMount() {
window.Einstore.teams().then((teams) => this.setState({ teams }))
+ pageTitle('Add new API key')
}
handleChangeTeam = (value: string) => {
diff --git a/src/components/ApiKeys.tsx b/src/components/ApiKeys.tsx
index 1e16d8e..b8b9134 100644
--- a/src/components/ApiKeys.tsx
+++ b/src/components/ApiKeys.tsx
@@ -12,6 +12,7 @@ import prettyDate from '../utils/prettyDate'
import { ApiKeyType, apiKeyTypePairs } from '../api/types/ApiKeyType'
import { Link } from '@reach/router'
import IconPlus from 'shapes/plus'
+import pageTitle from "../utils/pageTitle";
const apiKeyTypeClassnames = {
[ApiKeyType.UPLOAD]: 'apiKey-type-round-label-upload',
@@ -129,6 +130,7 @@ export default class ApiKeys extends Component<ApiKeysProps, ApiKeysState> {
componentDidMount() {
this.refresh()
+ pageTitle('API keys')
}
handleDeleteKey = (id: string) => {
diff --git a/src/components/Overview.tsx b/src/components/Overview.tsx
index 6adfb09..f57ca3a 100644
--- a/src/components/Overview.tsx
+++ b/src/components/Overview.tsx
@@ -19,6 +19,7 @@ import LoadMore from '../ui/LoadMore'
import IconPlus from 'shapes/plus'
import PlatformIcon from 'ui/PlatformIcon'
import * as browserStorage from '../utils/browserStorage'
+import pageTitle from '../utils/pageTitle'
export enum SortDirection {
ASC = 'asc',
@@ -179,6 +180,10 @@ export default class Overview extends Component<OverviewProps, OverviewState> {
refreshKey: 1,
}
+ componentDidMount(): void {
+ pageTitle('Dashboard')
+ }
+
refresh = () => {
this.setState((state) => ({ ...state, refreshKey: state.refreshKey + 1 }))
}
diff --git a/src/parts/Auth.tsx b/src/parts/Auth.tsx
index 4c371bb..8afacae 100644
--- a/src/parts/Auth.tsx
+++ b/src/parts/Auth.tsx
@@ -16,6 +16,7 @@ import Form, { exportValidationSchema, FormControl, ValuesObject } from 'ui/Form
import * as Yup from 'yup'
import getBaseUrl from 'utils/getBaseUrl'
import showMessage from "../utils/showMessage";
+import pageTitle from "../utils/pageTitle";
export enum AuthView {
RESET_PASSWORD = 'reset-password',
@@ -422,42 +423,49 @@ export class AuthRoute extends React.Component<RouteComponentProps<AuthRouteProp
render() {
switch (this.props.view) {
case AuthView.LOGIN:
+ pageTitle('Login')
return (
<div className={cn('auth', 'view-' + this.props.view)}>
<Login onSuccess={this.props.onLogin} />
</div>
)
case AuthView.REGISTRATION:
+ pageTitle('Registration')
return (
<div className={cn('auth', 'view-' + this.props.view)}>
<Registration onSuccess={this.props.onRegister} />
</div>
)
case AuthView.REGISTRATION_OK:
+ pageTitle('Thank you')
return (
<div className={cn('auth', 'view-' + this.props.view)}>
<RegistrationOk />
</div>
)
case AuthView.REGISTRATION_FINISH:
+ pageTitle('Thank you')
return (
<div className={cn('auth', 'view-' + this.props.view)}>
<RegistrationFinish />
</div>
)
case AuthView.RESET_PASSWORD:
+ pageTitle('Password reset')
return (
<div className={cn('auth', 'view-' + this.props.view)}>
<ResetPassword onSuccess={this.props.onResetPassword} />
</div>
)
case AuthView.SET_PASSWORD:
+ pageTitle('Set password')
return (
<div className={cn('auth', 'view-' + this.props.view)}>
<SetPassword />
</div>
)
case AuthView.INVITE_FINISH:
+ pageTitle('Invite')
return (
<div className={cn('auth', 'view-' + this.props.view)}>
<InviteFinish />
diff --git a/src/parts/SystemSettings.tsx b/src/parts/SystemSettings.tsx
index d9e9506..63f88e1 100644
--- a/src/parts/SystemSettings.tsx
+++ b/src/parts/SystemSettings.tsx
@@ -3,6 +3,7 @@ import './systemSettings.sass'
import Button from '../components/button'
import previewFileImage from '../utils/previewFileImage'
import IconField from 'ui/IconField'
+import pageTitle from "../utils/pageTitle";
function TemplatorUpdate() {
const [isWorking, setIsWorking] = useState(false)
@@ -167,7 +168,11 @@ class SystemConfigsForm extends React.Component {
}
}
-export default class AddTeam extends React.Component {
+export default class SystemSettings extends React.Component {
+ componentDidMount(): void {
+ pageTitle('System settings')
+ }
+
render() {
return (
<div className="sheet">
diff --git a/src/parts/account.js b/src/parts/account.js
index dca5ccb..de43d7b 100644
--- a/src/parts/account.js
+++ b/src/parts/account.js
@@ -4,6 +4,7 @@ import Gravatar from '../components/Gravatar'
import './account.sass'
import './page.sass'
import showMessage from "../utils/showMessage";
+import pageTitle from "../utils/pageTitle";
export default class Account extends Component {
state = {
@@ -16,6 +17,7 @@ export default class Account extends Component {
window.Einstore.me().then((me) => {
this.setState({ old: me, form: { ...me } })
})
+ pageTitle('My profile')
}
getFormValues = () => {
diff --git a/src/parts/appBuilds.js b/src/parts/appBuilds.js
index b78dfc3..e11e93e 100644
--- a/src/parts/appBuilds.js
+++ b/src/parts/appBuilds.js
@@ -10,6 +10,7 @@ import IconTrash from '../shapes/trash'
import usure from '../utils/usure'
import { navigate } from '@reach/router'
import CardItem from '../components/cardItem'
+import pageTitle from "../utils/pageTitle";
export default class AppBuilds extends Component {
state = {
@@ -21,6 +22,7 @@ export default class AppBuilds extends Component {
this.setState({
build: result[0],
})
+ pageTitle(this.state.build.name)
})
}
diff --git a/src/parts/appDetail.js b/src/parts/appDetail.js
index a53b943..efc8770 100644
--- a/src/parts/appDetail.js
+++ b/src/parts/appDetail.js
@@ -7,6 +7,7 @@ import './page.sass'
import IconTrash from '../shapes/trash'
import usure from '../utils/usure'
import { navigate } from '@reach/router'
+import pageTitle from "../utils/pageTitle";
export default class AppDetail extends Component {
state = {
@@ -32,6 +33,7 @@ export default class AppDetail extends Component {
...result,
loaded: true,
})
+ pageTitle(this.state.name)
})
.catch((error) => {
console.log(error)
diff --git a/src/parts/team.js b/src/parts/team.js
index 672a5e2..8fc1db6 100644
--- a/src/parts/team.js
+++ b/src/parts/team.js
@@ -11,6 +11,7 @@ import IconInfo from '../shapes/info'
import usure from '../utils/usure'
import getBaseUrl from 'utils/getBaseUrl'
import showMessage from "../utils/showMessage";
+import pageTitle from "../utils/pageTitle";
export default class Team extends Component {
state = {
@@ -35,6 +36,7 @@ export default class Team extends Component {
componentDidMount() {
window.Einstore.teams().then((teams) => this.setState({ teams }))
this.refreshUsers()
+ pageTitle('Team & members')
}
refreshUsers = () => {
diff --git a/src/utils/pageTitle.ts b/src/utils/pageTitle.ts
new file mode 100644
index 0000000..f566e2e
--- /dev/null
+++ b/src/utils/pageTitle.ts
@@ -0,0 +1,12 @@
+import * as browserStorage from './browserStorage'
+
+export default function pageTitle(pageName?: string): void {
+ const serverName = browserStorage.get('serverName')
+ let title = pageName ? pageName + ' | ' : ''
+
+ if(serverName.length > 0){
+ title += serverName
+ }
+
+ document.title = title
+}