Titles on index / account pages

Also changed to use  `const { ..., name: serverName } = useServer();` where feasible

Author: notAreYouScared

resources/scripts/components/dashboard/AccountApiContainer.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import ContentBox from '@/components/elements/ContentBox';
 import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
 import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
@@ -7,7 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faKey, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import deleteApiKey from '@/api/account/deleteApiKey';
-import { Actions, useStoreActions } from 'easy-peasy';
+import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { httpErrorToHuman } from '@/api/http';
@@ -21,6 +22,7 @@ export default () => {
     const [ keys, setKeys ] = useState<ApiKey[]>([]);
     const [ loading, setLoading ] = useState(true);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
 
     useEffect(() => {
         clearFlashes('account');
@@ -49,6 +51,9 @@ export default () => {
 
     return (
         <PageContentBlock>
+            <Helmet>
+                <title> {name} | API</title>
+            </Helmet>
             <FlashMessageRender byKey={'account'} css={tw`mb-4`}/>
             <div css={tw`flex`}>
                 <ContentBox title={'Create API Key'} css={tw`flex-1`}>

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Helmet } from 'react-helmet';
+import { ApplicationStore } from '@/state';
 import ContentBox from '@/components/elements/ContentBox';
 import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
 import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
@@ -7,6 +9,7 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import { breakpoint } from '@/theme';
 import styled from 'styled-components/macro';
+import { useStoreState } from 'easy-peasy';
 
 const Container = styled.div`
     ${tw`flex flex-wrap my-10`};
@@ -25,8 +28,12 @@ const Container = styled.div`
 `;
 
 export default () => {
+    const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
     return (
         <PageContentBlock>
+            <Helmet>
+                <title> {name} | Account Overview</title>
+            </Helmet>
             <Container>
                 <ContentBox title={'Update Password'} showFlashes={'account:password'}>
                     <UpdatePasswordForm/>

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { Server } from '@/api/server/getServer';
+import { ApplicationStore } from '@/state';
 import getServers from '@/api/getServers';
 import ServerRow from '@/components/dashboard/ServerRow';
 import Spinner from '@/components/elements/Spinner';
@@ -18,6 +20,7 @@ export default () => {
     const [ page, setPage ] = useState(1);
     const { rootAdmin } = useStoreState(state => state.user.data!);
     const [ showOnlyAdmin, setShowOnlyAdmin ] = usePersistedState('show_all_servers', false);
+    const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
 
     const { data: servers, error } = useSWR<PaginatedResult<Server>>(
         [ '/api/client/servers', showOnlyAdmin, page ],
@@ -31,6 +34,9 @@ export default () => {
 
     return (
         <PageContentBlock showFlashKey={'dashboard'}>
+            <Helmet>
+                <title> {name} | Dashboard</title>
+            </Helmet>
             {rootAdmin &&
             <div css={tw`mb-2 flex justify-end items-center`}>
                 <p css={tw`uppercase text-xs text-neutral-400 mr-2`}>

resources/scripts/components/server/backups/BackupContainer.tsx

@@ -14,12 +14,11 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 
 export default () => {
-    const { uuid, featureLimits } = useServer();
+    const { uuid, featureLimits, name: serverName } = useServer();
     const { addError, clearFlashes } = useFlash();
     const [ loading, setLoading ] = useState(true);
 
     const backups = ServerContext.useStoreState(state => state.backups.data);
-    const server = ServerContext.useStoreState(state => state.server.data!);
     const setBackups = ServerContext.useStoreActions(actions => actions.backups.setBackups);
 
     useEffect(() => {
@@ -40,7 +39,7 @@ export default () => {
     return (
         <PageContentBlock>
             <Helmet>
-                <title> {server.name} | Backups</title>
+                <title> {serverName} | Backups</title>
             </Helmet>
             <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
             {!backups.length ?

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -15,12 +15,11 @@ import tw from 'twin.macro';
 import Fade from '@/components/elements/Fade';
 
 export default () => {
-    const { uuid, featureLimits } = useServer();
+    const { uuid, featureLimits, name: serverName } = useServer();
     const { addError, clearFlashes } = useFlash();
     const [ loading, setLoading ] = useState(true);
 
     const databases = ServerContext.useStoreState(state => state.databases.data);
-    const servername = ServerContext.useStoreState(state => state.server.data.name);
     const setDatabases = ServerContext.useStoreActions(state => state.databases.setDatabases);
 
     useEffect(() => {
@@ -39,7 +38,7 @@ export default () => {
     return (
         <PageContentBlock>
             <Helmet>
-                <title> {servername} | Databases </title>
+                <title> {serverName} | Databases </title>
             </Helmet>
             <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
             {(!databases.length && loading) ?

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -24,11 +24,10 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
 };
 
 export default () => {
-    const { id } = useServer();
+    const { id, name: serverName } = useServer();
     const { hash } = useLocation();
     const { data: files, error, mutate } = useFileManagerSwr();
 
-    const servername = ServerContext.useStoreState(state => state.server.data.name);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
     const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
 
@@ -46,7 +45,7 @@ export default () => {
     return (
         <PageContentBlock showFlashKey={'files'}>
             <Helmet>
-                <title> {servername} | File Manager </title>
+                <title> {serverName} | File Manager </title>
             </Helmet>
             <FileManagerBreadcrumbs/>
             {

resources/scripts/components/server/network/NetworkContainer.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { ServerContext } from '@/state/server';
 import tw from 'twin.macro';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
@@ -25,13 +24,11 @@ const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 const NetworkContainer = () => {
-    const { uuid, allocations } = useServer();
+    const { uuid, allocations, name: serverName } = useServer();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const [ loading, setLoading ] = useState<false | number>(false);
     const { data, error, mutate } = useSWR<Allocation[]>(uuid, key => getServerAllocations(key), { initialData: allocations });
 
-    const servername = ServerContext.useStoreState(state => state.server.data.name);
-
     const setPrimaryAllocation = (id: number) => {
         clearFlashes('server:network');
 
@@ -66,7 +63,7 @@ const NetworkContainer = () => {
     return (
         <PageContentBlock showFlashKey={'server:network'}>
             <Helmet>
-                <title> {servername} | Network </title>
+                <title> {serverName} | Network </title>
             </Helmet>
             {!data ?
                 <Spinner size={'large'} centered/>

resources/scripts/components/server/schedules/ScheduleContainer.tsx

@@ -17,13 +17,12 @@ import GreyRowBox from '@/components/elements/GreyRowBox';
 import Button from '@/components/elements/Button';
 
 export default ({ match, history }: RouteComponentProps) => {
-    const { uuid } = useServer();
+    const { uuid, name: serverName } = useServer();
     const { clearFlashes, addError } = useFlash();
     const [ loading, setLoading ] = useState(true);
     const [ visible, setVisible ] = useState(false);
 
     const schedules = ServerContext.useStoreState(state => state.schedules.data);
-    const servername = ServerContext.useStoreState(state => state.server.data.name);
     const setSchedules = ServerContext.useStoreActions(actions => actions.schedules.setSchedules);
 
     useEffect(() => {
@@ -40,7 +39,7 @@ export default ({ match, history }: RouteComponentProps) => {
     return (
         <PageContentBlock>
             <Helmet>
-                <title> {servername} | Schedules </title>
+                <title> {serverName} | Schedules </title>
             </Helmet>
             <FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
             {(!schedules.length && loading) ?

resources/scripts/components/server/users/UsersContainer.tsx

@@ -18,7 +18,7 @@ export default () => {
 
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const subusers = ServerContext.useStoreState(state => state.subusers.data);
-    const servername = ServerContext.useStoreState(state => state.server.data.name);
+    const servername = ServerContext.useStoreState(state => state.server.data!.name);
     const setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers);
 
     const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);