From 25b64cc3b041fc18b807f9551d9e8de3b269b1da Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Wed, 11 Jan 2023 21:45:31 -0600
Subject: [PATCH] lint(gui): add component keys, remove some arrow fns

---
 gui/src/components/ImageCard.tsx    |  20 +++--
 gui/src/components/ImageHistory.tsx |   4 +-
 gui/src/components/OnnxWeb.tsx      | 118 ++++++++++++++--------------
 3 files changed, 73 insertions(+), 69 deletions(-)

diff --git a/gui/src/components/ImageCard.tsx b/gui/src/components/ImageCard.tsx
index d6401d86..abfeea73 100644
--- a/gui/src/components/ImageCard.tsx
+++ b/gui/src/components/ImageCard.tsx
@@ -11,7 +11,7 @@ export interface ImageCardProps {
   onDelete?: (key: ApiResponse) => void;
 }
 
-export function GridItem(props: {xs: number; children: React.ReactNode}) {
+export function GridItem(props: { xs: number; children: React.ReactNode }) {
   return <Grid item xs={props.xs}>
     <Paper elevation={0} sx={{ padding: 1 }}>{props.children}</Paper>
   </Grid>;
@@ -21,6 +21,16 @@ export function ImageCard(props: ImageCardProps) {
   const { value } = props;
   const { params, output } = value;
 
+  function deleteImage() {
+    if (doesExist(props.onDelete)) {
+      props.onDelete(value);
+    }
+  }
+
+  function downloadImage() {
+    window.open(output, '_blank');
+  }
+
   return <Card sx={{ maxWidth: params.width }} elevation={2}>
     <CardMedia sx={{ height: params.height }}
       component='img'
@@ -37,16 +47,12 @@ export function ImageCard(props: ImageCardProps) {
           <GridItem xs={8}>Scheduler: {params.scheduler}</GridItem>
           <GridItem xs={12}>{params.prompt}</GridItem>
           <GridItem xs={2}>
-            <Button onClick={() => window.open(output, '_blank')}>
+            <Button onClick={downloadImage}>
               <Download />
             </Button>
           </GridItem>
           <GridItem xs={2}>
-            <Button onClick={() => {
-              if (doesExist(props.onDelete)) {
-                props.onDelete(value);
-              }
-            }}>
+            <Button onClick={deleteImage}>
               <Delete />
             </Button>
           </GridItem>
diff --git a/gui/src/components/ImageHistory.tsx b/gui/src/components/ImageHistory.tsx
index 2d135990..ff27a677 100644
--- a/gui/src/components/ImageHistory.tsx
+++ b/gui/src/components/ImageHistory.tsx
@@ -16,7 +16,7 @@ export function ImageHistory() {
   const children = [];
 
   if (state.history.loading) {
-    children.push(<LoadingCard height={512} width={512} />); // TODO: get dimensions from config
+    children.push(<LoadingCard key='loading' height={512} width={512} />); // TODO: get dimensions from config
   }
 
   function removeHistory(image: ApiResponse) {
@@ -24,7 +24,7 @@ export function ImageHistory() {
   }
 
   if (images.length > 0) {
-    children.push(...images.map((item) => <ImageCard value={item} onDelete={removeHistory} />));
+    children.push(...images.map((item) => <ImageCard key={item.output} value={item} onDelete={removeHistory} />));
   } else {
     if (state.history.loading === false) {
       children.push(<div>No results. Press Generate.</div>);
diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx
index eb970ad5..21af00ca 100644
--- a/gui/src/components/OnnxWeb.tsx
+++ b/gui/src/components/OnnxWeb.tsx
@@ -38,66 +38,64 @@ export function OnnxWeb(props: OnnxWebProps) {
   });
 
   return (
-    <div>
-      <Container>
-        <Box sx={{ my: 4 }}>
-          <Typography variant='h3' gutterBottom>
-            ONNX Web
-          </Typography>
+    <Container>
+      <Box sx={{ my: 4 }}>
+        <Typography variant='h3' gutterBottom>
+          ONNX Web
+        </Typography>
+      </Box>
+      <Box sx={{ mx: 4, my: 4 }}>
+        <Stack direction='row' spacing={2}>
+          <QueryList
+            id='models'
+            labels={MODEL_LABELS}
+            name='Model'
+            result={models}
+            value={model}
+            onChange={(value) => {
+              setModel(value);
+            }}
+          />
+          <QueryList
+            id='platforms'
+            labels={PLATFORM_LABELS}
+            name='Platform'
+            result={platforms}
+            value={platform}
+            onChange={(value) => {
+              setPlatform(value);
+            }}
+          />
+        </Stack>
+      </Box>
+      <TabContext value={tab}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <TabList onChange={(_e, idx) => {
+            setTab(idx);
+          }}>
+            <Tab label='txt2img' value='txt2img' />
+            <Tab label='img2img' value='img2img' />
+            <Tab label='inpaint' value='inpaint' />
+            <Tab label='settings' value='settings' />
+          </TabList>
         </Box>
-        <Box sx={{ mx: 4, my: 4 }}>
-          <Stack direction='row' spacing={2}>
-            <QueryList
-              id='models'
-              labels={MODEL_LABELS}
-              name='Model'
-              result={models}
-              value={model}
-              onChange={(value) => {
-                setModel(value);
-              }}
-            />
-            <QueryList
-              id='platforms'
-              labels={PLATFORM_LABELS}
-              name='Platform'
-              result={platforms}
-              value={platform}
-              onChange={(value) => {
-                setPlatform(value);
-              }}
-            />
-          </Stack>
-        </Box>
-        <TabContext value={tab}>
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <TabList onChange={(_e, idx) => {
-              setTab(idx);
-            }}>
-              <Tab label='txt2img' value='txt2img' />
-              <Tab label='img2img' value='img2img' />
-              <Tab label='inpaint' value='inpaint' />
-              <Tab label='settings' value='settings' />
-            </TabList>
-          </Box>
-          <TabPanel value='txt2img'>
-            <Txt2Img config={config} model={model} platform={platform} />
-          </TabPanel>
-          <TabPanel value='img2img'>
-            <Img2Img config={config} model={model} platform={platform} />
-          </TabPanel>
-          <TabPanel value='inpaint'>
-            <Inpaint config={config} model={model} platform={platform} />
-          </TabPanel>
-          <TabPanel value='settings'>
-            <Settings config={config} />
-          </TabPanel>
-        </TabContext>
-        <Divider variant='middle' />
-        <Box sx={{ mx: 4, my: 4 }}>
-          <ImageHistory />
-        </Box>
-      </Container>
-    </div>
+        <TabPanel value='txt2img'>
+          <Txt2Img config={config} model={model} platform={platform} />
+        </TabPanel>
+        <TabPanel value='img2img'>
+          <Img2Img config={config} model={model} platform={platform} />
+        </TabPanel>
+        <TabPanel value='inpaint'>
+          <Inpaint config={config} model={model} platform={platform} />
+        </TabPanel>
+        <TabPanel value='settings'>
+          <Settings config={config} />
+        </TabPanel>
+      </TabContext>
+      <Divider variant='middle' />
+      <Box sx={{ mx: 4, my: 4 }}>
+        <ImageHistory />
+      </Box>
+    </Container>
   );
 }