lint(gui): add component keys, remove some arrow fns

gui/src/components/ImageCard.tsx

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

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

gui/src/components/OnnxWeb.tsx

@@ -38,7 +38,6 @@ export function OnnxWeb(props: OnnxWebProps) {
   });
 
   return (
-    <div>
     <Container>
       <Box sx={{ my: 4 }}>
         <Typography variant='h3' gutterBottom>
@@ -98,6 +97,5 @@ export function OnnxWeb(props: OnnxWebProps) {
         <ImageHistory />
       </Box>
     </Container>
-    </div>
   );
 }