refactor: replace ternaries with early returns for better readability

exuanbo · Dec 11, 2023 · e3e66a1 · e3e66a1
1 parent 2319714
commit e3e66a1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 18 deletions.
diff --git a/src/app/ReloadPrompt.tsx b/src/app/ReloadPrompt.tsx
@@ -33,19 +33,27 @@ const ReloadPrompt = (): JSX.Element | null => {
     setNeedReload(false)
   }
 
-  return isReloading ? (
-    <div className="bg-white flex bg-opacity-80 inset-0 z-10 fixed justify-center items-center">
-      <Spinner className="animate-spin" width="1.5rem" />
-    </div>
-  ) : needReload ? (
-    <div className="border rounded space-y-2 bg-light-100 shadow py-2 px-4 right-4 bottom-4 fixed">
-      <div>New version is available</div>
-      <div className="space-x-2">
-        <PromptButton onClick={handleClickReload}>Reload</PromptButton>
-        <PromptButton onClick={handleClickClose}>Close</PromptButton>
+  if (isReloading) {
+    return (
+      <div className="bg-white flex bg-opacity-80 inset-0 z-10 fixed justify-center items-center">
+        <Spinner className="animate-spin" width="1.5rem" />
       </div>
-    </div>
-  ) : null
+    )
+  }
+
+  if (needReload) {
+    return (
+      <div className="border rounded space-y-2 bg-light-100 shadow py-2 px-4 right-4 bottom-4 fixed">
+        <div>New version is available</div>
+        <div className="space-x-2">
+          <PromptButton onClick={handleClickReload}>Reload</PromptButton>
+          <PromptButton onClick={handleClickClose}>Close</PromptButton>
+        </div>
+      </div>
+    )
+  }
+
+  return null
 }
 
 export default ReloadPrompt
diff --git a/src/features/io/SevenSegmentDisplay.tsx b/src/features/io/SevenSegmentDisplay.tsx
@@ -171,7 +171,11 @@ const SevenSegmentDisplay = (): JSX.Element | null => {
     return subscribeOutputData(updateDataFrom)
   }, [subscribeOutputData])
 
-  return isVisible ? (
+  if (!isVisible) {
+    return null
+  }
+
+  return (
     <DeviceCard name="Seven-segment Display" onClose={toggleVisible}>
       <svg viewBox="0 0 320 300" width="320" xmlns="http://www.w3.org/2000/svg">
         <g>
@@ -192,7 +196,7 @@ const SevenSegmentDisplay = (): JSX.Element | null => {
         </g>
       </svg>
     </DeviceCard>
-  ) : null
+  )
 }
 
 export default SevenSegmentDisplay
diff --git a/src/features/io/TrafficLights.tsx b/src/features/io/TrafficLights.tsx
@@ -63,7 +63,11 @@ const lightColors = ['red', 'yellow', 'lime'] as const
 const TrafficLights = (): JSX.Element | null => {
   const { data, isVisible, toggleVisible } = useIoDevice(IoDeviceName.TrafficLights)
 
-  return isVisible ? (
+  if (!isVisible) {
+    return null
+  }
+
+  return (
     <DeviceCard name="Traffic Lights" onClose={toggleVisible}>
       <svg viewBox="0 0 312 240" width="312" xmlns="http://www.w3.org/2000/svg">
         <g>
@@ -95,7 +99,7 @@ const TrafficLights = (): JSX.Element | null => {
         </g>
       </svg>
     </DeviceCard>
-  ) : null
+  )
 }
 
 export default TrafficLights
diff --git a/src/features/io/VisualDisplayUnit.tsx b/src/features/io/VisualDisplayUnit.tsx
@@ -28,7 +28,11 @@ const VisualDisplayUnit = (): JSX.Element | null => {
     )
   }, [])
 
-  return isVisible ? (
+  if (!isVisible) {
+    return null
+  }
+
+  return (
     <DeviceCard
       className="flex flex-col space-y-1"
       name="Visual Display Unit"
@@ -43,7 +47,7 @@ const VisualDisplayUnit = (): JSX.Element | null => {
         </div>
       ))}
     </DeviceCard>
-  ) : null
+  )
 }
 
 export default VisualDisplayUnit