Attempt 2?
80% sure this isn't how to use react-helmet.... but it works....
This commit is contained in:
parent
4a27e56e08
commit
6d79ad23a5
10 changed files with 59 additions and 1 deletions
|
@ -1,4 +1,5 @@
|
|||
import React, { lazy, useEffect, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
|
||||
|
@ -61,6 +62,9 @@ export default () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock css={tw`flex`}>
|
||||
<Helmet>
|
||||
<title> {server.name} | Console </title>
|
||||
</Helmet>
|
||||
<div css={tw`w-1/4`}>
|
||||
<TitledGreyBox title={server.name} icon={faServer}>
|
||||
<p css={tw`text-xs uppercase`}>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import getServerBackups from '@/api/server/backups/getServerBackups';
|
||||
import useServer from '@/plugins/useServer';
|
||||
|
@ -18,6 +19,7 @@ export default () => {
|
|||
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(() => {
|
||||
|
@ -37,6 +39,9 @@ export default () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock>
|
||||
<Helmet>
|
||||
<title> {server.name} | Backups</title>
|
||||
</Helmet>
|
||||
<FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
|
||||
{!backups.length ?
|
||||
<p css={tw`text-center text-sm text-neutral-400`}>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import getServerDatabases from '@/api/server/getServerDatabases';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
|
@ -19,6 +20,7 @@ export default () => {
|
|||
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(() => {
|
||||
|
@ -36,6 +38,9 @@ export default () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock>
|
||||
<Helmet>
|
||||
<title> {servername} | Databases </title>
|
||||
</Helmet>
|
||||
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
|
||||
{(!databases.length && loading) ?
|
||||
<Spinner size={'large'} centered/>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
@ -26,6 +27,8 @@ export default () => {
|
|||
const { id } = 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);
|
||||
|
||||
|
@ -42,6 +45,9 @@ export default () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock showFlashKey={'files'}>
|
||||
<Helmet>
|
||||
<title> {servername} | File Manager </title>
|
||||
</Helmet>
|
||||
<FileManagerBreadcrumbs/>
|
||||
{
|
||||
!files ?
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
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';
|
||||
|
@ -28,6 +30,8 @@ const NetworkContainer = () => {
|
|||
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');
|
||||
|
||||
|
@ -61,6 +65,9 @@ const NetworkContainer = () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock showFlashKey={'server:network'}>
|
||||
<Helmet>
|
||||
<title> {servername} | Network </title>
|
||||
</Helmet>
|
||||
{!data ?
|
||||
<Spinner size={'large'} centered/>
|
||||
:
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import getServerSchedules from '@/api/server/schedules/getServerSchedules';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
@ -22,6 +23,7 @@ export default ({ match, history }: RouteComponentProps) => {
|
|||
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(() => {
|
||||
|
@ -37,6 +39,9 @@ export default ({ match, history }: RouteComponentProps) => {
|
|||
|
||||
return (
|
||||
<PageContentBlock>
|
||||
<Helmet>
|
||||
<title> {servername} | Schedules </title>
|
||||
</Helmet>
|
||||
<FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
|
||||
{(!schedules.length && loading) ?
|
||||
<Spinner size={'large'} centered/>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
|
@ -20,6 +21,9 @@ export default () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock>
|
||||
<Helmet>
|
||||
<title> {server.name} | Settings </title>
|
||||
</Helmet>
|
||||
<FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
|
||||
<div css={tw`md:flex`}>
|
||||
<div css={tw`w-full md:flex-1 md:mr-10`}>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
|
@ -17,6 +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 setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers);
|
||||
|
||||
const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
|
||||
|
@ -49,6 +51,9 @@ export default () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock>
|
||||
<Helmet>
|
||||
<title> {servername} | Subusers </title>
|
||||
</Helmet>
|
||||
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
|
||||
{!subusers.length ?
|
||||
<p css={tw`text-center text-sm text-neutral-400`}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue