From 14c465080182b4a385f95903543438d43327ee46 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 28 Jul 2023 19:03:29 +1200
Subject: [PATCH] fix: Lint Errors (returning possible null component)

---
 .../sdxl/components/ParamSDXLPromptArea.tsx   |  44 ++--
 .../sdxl/components/SDXLConcatLink.tsx        | 195 +++++++++---------
 2 files changed, 120 insertions(+), 119 deletions(-)

diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
index 233894e280..61719cea3f 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
@@ -13,6 +13,10 @@ export default function ParamSDXLPromptArea() {
     (state: RootState) => state.ui.shouldPinParametersPanel
   );
 
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+
   return (
     <Flex
       sx={{
@@ -20,24 +24,28 @@ export default function ParamSDXLPromptArea() {
         gap: 2,
       }}
     >
-      <Box
-        sx={{
-          position: 'absolute',
-          w: 'full',
-          top: shouldPinParametersPanel ? '119px' : '175px',
-        }}
-      >
-        <SDXLConcatLink />
-      </Box>
-      <Box
-        sx={{
-          position: 'absolute',
-          w: 'full',
-          top: shouldPinParametersPanel ? '263px' : '319px',
-        }}
-      >
-        <SDXLConcatLink />
-      </Box>
+      {shouldConcatSDXLStylePrompt && (
+        <Box
+          sx={{
+            position: 'absolute',
+            w: 'full',
+            top: shouldPinParametersPanel ? '119px' : '175px',
+          }}
+        >
+          <SDXLConcatLink />
+        </Box>
+      )}
+      {shouldConcatSDXLStylePrompt && (
+        <Box
+          sx={{
+            position: 'absolute',
+            w: 'full',
+            top: shouldPinParametersPanel ? '263px' : '319px',
+          }}
+        >
+          <SDXLConcatLink />
+        </Box>
+      )}
       <ParamPositiveConditioning />
       <ParamSDXLConcatButton />
       <ParamSDXLPositiveStyleConditioning />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
index e9c3e0a6ab..c4a7caf1d5 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
@@ -1,112 +1,105 @@
 import { Box, Flex } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
 import { motion } from 'framer-motion';
 import { FaLink } from 'react-icons/fa';
 
 export default function SDXLConcatLink() {
-  const shouldConcatSDXLStylePrompt = useAppSelector(
-    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
-  );
   return (
-    shouldConcatSDXLStylePrompt && (
-      <Flex
+    <Flex
+      sx={{
+        h: 0.5,
+        placeContent: 'center',
+        gap: 2,
+        flexDirection: 'column',
+      }}
+    >
+      <Box
+        as={motion.div}
+        initial={{
+          scaleX: 0,
+          borderRadius: 0,
+          borderWidth: 0,
+          display: 'none',
+        }}
+        animate={{
+          display: ['block', 'block', 'block', 'none'],
+          scaleX: [0, 0.25, 0.5, 1],
+          borderRadius: [0, 0, 0, 3],
+          borderWidth: [0, 3, 3, 0],
+          transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
+        }}
         sx={{
-          h: 0.5,
-          placeContent: 'center',
-          gap: 2,
-          flexDirection: 'column',
+          position: 'absolute',
+          top: '1px',
+          bg: 'none',
+          w: 'full',
+          minH: 2,
+          borderTop: 'none',
+          borderTopRadius: 0,
+          borderColor: 'accent.300',
+          zIndex: 2,
+          _dark: {
+            borderColor: 'accent.600',
+          },
+        }}
+      />
+      <Box
+        as={motion.div}
+        initial={{
+          opacity: 0,
+          scale: 0,
+          rotate: 0,
+        }}
+        animate={{
+          rotate: 360,
+          opacity: [0, 1, 1, 1],
+          scale: [0, 0.75, 1.5, 1],
+          transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] },
+        }}
+        sx={{
+          zIndex: 3,
+          position: 'absolute',
+          left: '48%',
+          top: '3px',
+          p: 1,
+          borderRadius: 4,
+          bg: 'accent.200',
+          _dark: {
+            bg: 'accent.500',
+          },
         }}
       >
-        <Box
-          as={motion.div}
-          initial={{
-            scaleX: 0,
-            borderRadius: 0,
-            borderWidth: 0,
-            display: 'none',
-          }}
-          animate={{
-            display: ['block', 'block', 'block', 'none'],
-            scaleX: [0, 0.25, 0.5, 1],
-            borderRadius: [0, 0, 0, 3],
-            borderWidth: [0, 3, 3, 0],
-            transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
-          }}
-          sx={{
-            position: 'absolute',
-            top: '1px',
-            bg: 'none',
-            w: 'full',
-            minH: 2,
-            borderTop: 'none',
-            borderTopRadius: 0,
-            borderColor: 'accent.300',
-            zIndex: 2,
-            _dark: {
-              borderColor: 'accent.600',
-            },
-          }}
-        />
-        <Box
-          as={motion.div}
-          initial={{
-            opacity: 0,
-            scale: 0,
-            rotate: 0,
-          }}
-          animate={{
-            rotate: 360,
-            opacity: [0, 1, 1, 1],
-            scale: [0, 0.75, 1.5, 1],
-            transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] },
-          }}
-          sx={{
-            zIndex: 3,
-            position: 'absolute',
-            left: '48%',
-            top: '3px',
-            p: 1,
-            borderRadius: 4,
-            bg: 'accent.200',
-            _dark: {
-              bg: 'accent.500',
-            },
-          }}
-        >
-          <FaLink size={12} />
-        </Box>
-        <Box
-          as={motion.div}
-          initial={{
-            scaleX: 0,
-            borderRadius: 0,
-            borderWidth: 0,
-            display: 'none',
-          }}
-          animate={{
-            display: ['block', 'block', 'block', 'none'],
-            scaleX: [0, 0.25, 0.5, 1],
-            borderRadius: [0, 0, 0, 3],
-            borderWidth: [0, 3, 3, 0],
-            transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
-          }}
-          sx={{
-            position: 'absolute',
-            top: '17px',
-            bg: 'none',
-            w: 'full',
-            minH: 2,
-            borderBottom: 'none',
-            borderBottomRadius: 0,
-            borderColor: 'accent.300',
-            zIndex: 2,
-            _dark: {
-              borderColor: 'accent.600',
-            },
-          }}
-        />
-      </Flex>
-    )
+        <FaLink size={12} />
+      </Box>
+      <Box
+        as={motion.div}
+        initial={{
+          scaleX: 0,
+          borderRadius: 0,
+          borderWidth: 0,
+          display: 'none',
+        }}
+        animate={{
+          display: ['block', 'block', 'block', 'none'],
+          scaleX: [0, 0.25, 0.5, 1],
+          borderRadius: [0, 0, 0, 3],
+          borderWidth: [0, 3, 3, 0],
+          transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
+        }}
+        sx={{
+          position: 'absolute',
+          top: '17px',
+          bg: 'none',
+          w: 'full',
+          minH: 2,
+          borderBottom: 'none',
+          borderBottomRadius: 0,
+          borderColor: 'accent.300',
+          zIndex: 2,
+          _dark: {
+            borderColor: 'accent.600',
+          },
+        }}
+      />
+    </Flex>
   );
 }