Fix rendering when trying to access server from state
This commit is contained in:
parent
813a671571
commit
56475d89bb
|
@ -4,23 +4,20 @@ import { CSSTransition } from 'react-transition-group';
|
||||||
import tw from 'twin.macro';
|
import tw from 'twin.macro';
|
||||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import useServer from '@/plugins/useServer';
|
|
||||||
|
|
||||||
interface Props {
|
export interface PageContentBlockProps {
|
||||||
title?: string;
|
title?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
showFlashKey?: string;
|
showFlashKey?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const PageContentBlock: React.FC<Props> = ({ title, showFlashKey, className, children }) => {
|
const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey, className, children }) => {
|
||||||
const { name } = useServer();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CSSTransition timeout={150} classNames={'fade'} appear in>
|
<CSSTransition timeout={150} classNames={'fade'} appear in>
|
||||||
<>
|
<>
|
||||||
{!!title &&
|
{title &&
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{name} | {title}</title>
|
<title>{title}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
}
|
}
|
||||||
<ContentContainer css={tw`my-10`} className={className}>
|
<ContentContainer css={tw`my-10`} className={className}>
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
import useServer from '@/plugins/useServer';
|
||||||
|
import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface Props extends PageContentBlockProps {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ServerContentBlock: React.FC<Props> = ({ title, children, ...props }) => {
|
||||||
|
const { name } = useServer();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContentBlock title={`${name} | ${title}`} {...props}>
|
||||||
|
{children}
|
||||||
|
</PageContentBlock>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ServerContentBlock;
|
|
@ -1,10 +1,8 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Helmet } from 'react-helmet';
|
|
||||||
import tw from 'twin.macro';
|
import tw from 'twin.macro';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
|
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
|
||||||
import styled from 'styled-components/macro';
|
import styled from 'styled-components/macro';
|
||||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
|
||||||
import GreyRowBox from '@/components/elements/GreyRowBox';
|
import GreyRowBox from '@/components/elements/GreyRowBox';
|
||||||
import Button from '@/components/elements/Button';
|
import Button from '@/components/elements/Button';
|
||||||
import Can from '@/components/elements/Can';
|
import Can from '@/components/elements/Can';
|
||||||
|
@ -19,6 +17,7 @@ import { Textarea } from '@/components/elements/Input';
|
||||||
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
|
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
|
||||||
import { debounce } from 'debounce';
|
import { debounce } from 'debounce';
|
||||||
import InputSpinner from '@/components/elements/InputSpinner';
|
import InputSpinner from '@/components/elements/InputSpinner';
|
||||||
|
import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
||||||
|
|
||||||
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
|
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
|
||||||
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
|
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
|
||||||
|
@ -61,7 +60,7 @@ const NetworkContainer = () => {
|
||||||
}, [ error ]);
|
}, [ error ]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContentBlock showFlashKey={'server:network'} title={'Network'}>
|
<ServerContentBlock showFlashKey={'server:network'} title={'Network'}>
|
||||||
{!data ?
|
{!data ?
|
||||||
<Spinner size={'large'} centered/>
|
<Spinner size={'large'} centered/>
|
||||||
:
|
:
|
||||||
|
@ -109,7 +108,7 @@ const NetworkContainer = () => {
|
||||||
</GreyRowBox>
|
</GreyRowBox>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</PageContentBlock>
|
</ServerContentBlock>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
|
||||||
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||||||
import useServer from '@/plugins/useServer';
|
import useServer from '@/plugins/useServer';
|
||||||
import tw from 'twin.macro';
|
import tw from 'twin.macro';
|
||||||
import VariableBox from '@/components/server/startup/VariableBox';
|
import VariableBox from '@/components/server/startup/VariableBox';
|
||||||
|
import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
||||||
|
|
||||||
const StartupContainer = () => {
|
const StartupContainer = () => {
|
||||||
const { invocation, variables } = useServer();
|
const { invocation, variables } = useServer();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContentBlock title={'Startup Settings'} showFlashKey={'server:startup'}>
|
<ServerContentBlock title={'Startup Settings'}>
|
||||||
<TitledGreyBox title={'Startup Command'}>
|
<TitledGreyBox title={'Startup Command'}>
|
||||||
<div css={tw`px-1 py-2`}>
|
<div css={tw`px-1 py-2`}>
|
||||||
<p css={tw`font-mono bg-neutral-900 rounded py-2 px-4`}>
|
<p css={tw`font-mono bg-neutral-900 rounded py-2 px-4`}>
|
||||||
|
@ -20,7 +20,7 @@ const StartupContainer = () => {
|
||||||
<div css={tw`grid gap-8 grid-cols-2 mt-10`}>
|
<div css={tw`grid gap-8 grid-cols-2 mt-10`}>
|
||||||
{variables.map(variable => <VariableBox key={variable.envVariable} variable={variable}/>)}
|
{variables.map(variable => <VariableBox key={variable.envVariable} variable={variable}/>)}
|
||||||
</div>
|
</div>
|
||||||
</PageContentBlock>
|
</ServerContentBlock>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue