From b572f19d2c69558f75292d3d0be124a3c2dc6b0d Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Mon, 5 Jul 2021 18:08:31 -0400
Subject: [PATCH] refactor: modify server page to allow different types of
 display depending on user input

---
 striker-ui/pages/server/[uuid].tsx | 36 ++++++++++++++++++------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/striker-ui/pages/server/[uuid].tsx b/striker-ui/pages/server/[uuid].tsx
index 04ddc3d3..8d934f79 100644
--- a/striker-ui/pages/server/[uuid].tsx
+++ b/striker-ui/pages/server/[uuid].tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,7 +7,7 @@ import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import CPU from '../../components/CPU';
 import Memory from '../../components/Memory';
 import Resource from '../../components/Resource';
-import Display from '../../components/Display';
+import { FullSize, Preview } from '../../components/Display';
 import Header from '../../components/Header';
 import Domain from '../../components/Domain';
 
@@ -42,6 +43,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const Server = (): JSX.Element => {
+  const [previewMode] = useState<boolean>(true);
   const classes = useStyles();
 
   const router = useRouter();
@@ -54,21 +56,27 @@ const Server = (): JSX.Element => {
   return (
     <>
       <Header />
-      {typeof uuid === 'string' && data && (
-        <Box className={classes.container}>
-          <Box className={classes.child}>
-            <CPU />
-            <Memory />
+      {typeof uuid === 'string' &&
+        data &&
+        (previewMode ? (
+          <Box className={classes.container}>
+            <Box className={classes.child}>
+              <Preview />
+              <CPU />
+              <Memory />
+            </Box>
+            <Box flexGrow={1} className={classes.server}>
+              <Domain />
+            </Box>
+            <Box className={classes.child}>
+              <Resource resource={data} />
+            </Box>
           </Box>
-          <Box flexGrow={1} className={classes.server}>
-            <Display />
-            <Domain />
+        ) : (
+          <Box className={classes.container}>
+            <FullSize />
           </Box>
-          <Box className={classes.child}>
-            <Resource resource={data} />
-          </Box>
-        </Box>
-      )}
+        ))}
     </>
   );
 };