avoid nested ternary and use props for default iconColor state

xylabs · Jan 18, 2024 · 2b31174 · 2b31174
1 parent 17ee058
commit 2b31174
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/packages/invertible-theme/src/Buttons/DarkModeIconButton.tsx b/packages/invertible-theme/src/Buttons/DarkModeIconButton.tsx
@@ -25,13 +25,19 @@ export const DarkModeIconButton: React.FC<DarkModeIconButtonProps> = ({
   toggleMode,
   ...props
 }) => {
-  const [iconColor, setIconColor] = useState<iconColor>('inherit')
-  const [iconColorIsSet, setIconColorIsSet] = useState(false)
   const darkModeIconColor = defaultDarkModeColor ?? 'inherit'
   const lightModeIconColor = defaultLightModeColor ?? 'inherit'
+  const [iconColor, setIconColor] = useState<iconColor>(darkMode ? defaultDarkModeColor : defaultLightModeColor)
+  const [iconColorIsSet, setIconColorIsSet] = useState(false)
 
   const handleHover = () => {
-    setIconColor(darkMode ? (iconColorIsSet ? darkModeIconColor : 'info') : iconColorIsSet ? lightModeIconColor : 'warning')
+    setIconColor(() => {
+      if (darkMode) {
+        return iconColorIsSet ? darkModeIconColor : 'info'
+      } else {
+        return iconColorIsSet ? lightModeIconColor : 'warning'
+      }
+    })
     setIconColorIsSet(!iconColorIsSet)
   }