Fix rendering when trying to access server from state

Author: DaneEveritt

resources/scripts/components/elements/PageContentBlock.tsx

@@ -4,23 +4,20 @@ import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Helmet } from 'react-helmet';
-import useServer from '@/plugins/useServer';
 
-interface Props {
+export interface PageContentBlockProps {
     title?: string;
     className?: string;
     showFlashKey?: string;
 }
 
-const PageContentBlock: React.FC<Props> = ({ title, showFlashKey, className, children }) => {
-    const { name } = useServer();
-
+const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey, className, children }) => {
     return (
         <CSSTransition timeout={150} classNames={'fade'} appear in>
             <>
-                {!!title &&
+                {title &&
                 <Helmet>
-                    <title>{name} | {title}</title>
+                    <title>{title}</title>
                 </Helmet>
                 }
                 <ContentContainer css={tw`my-10`} className={className}>

resources/scripts/components/elements/ServerContentBlock.tsx

@@ -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;

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

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import tw from 'twin.macro';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import styled from 'styled-components/macro';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import Button from '@/components/elements/Button';
 import Can from '@/components/elements/Can';
@@ -19,6 +17,7 @@ import { Textarea } from '@/components/elements/Input';
 import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
 import { debounce } from 'debounce';
 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 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 ]);
 
     return (
-        <PageContentBlock showFlashKey={'server:network'} title={'Network'}>
+        <ServerContentBlock showFlashKey={'server:network'} title={'Network'}>
             {!data ?
                 <Spinner size={'large'} centered/>
                 :
@@ -109,7 +108,7 @@ const NetworkContainer = () => {
                     </GreyRowBox>
                 ))
             }
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };
 

resources/scripts/components/server/startup/StartupContainer.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import useServer from '@/plugins/useServer';
 import tw from 'twin.macro';
 import VariableBox from '@/components/server/startup/VariableBox';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 const StartupContainer = () => {
     const { invocation, variables } = useServer();
 
     return (
-        <PageContentBlock title={'Startup Settings'} showFlashKey={'server:startup'}>
+        <ServerContentBlock title={'Startup Settings'}>
             <TitledGreyBox title={'Startup Command'}>
                 <div css={tw`px-1 py-2`}>
                     <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`}>
                 {variables.map(variable => <VariableBox key={variable.envVariable} variable={variable}/>)}
             </div>
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };