Merge pull request #120 from Einstore/pr/page-title

add title to all pages

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) => {

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) => {

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) => {

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 }))
 	}

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 />

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">

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 = () => {

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)
 		})
 	}
 

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)

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 = () => {

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
+}