refactor to remove useEffect

hyparam · Dec 12, 2024 · ae9b162 · ae9b162
1 parent bb5cc1c
commit ae9b162
Showing 1 changed file with 25 additions and 26 deletions.
diff --git a/packages/components/src/components/Layout.tsx b/packages/components/src/components/Layout.tsx
@@ -21,42 +21,17 @@ interface LayoutProps {
  * @param props.title - page title
  */
 export default function Layout({ children, className, progress, error, title }: LayoutProps) {
-  const [showError, setShowError] = useState(false)
-  const errorMessage = error?.toString()
-  if (error) console.error(error)
-
-  // Reset error visibility when error prop changes
-  useEffect(() => {
-    if (error) {
-      setShowError(true)
-      console.error(error)
-    } else {
-      setShowError(false)
-    }
-  }, [error])
-
   // Update title
   useEffect(() => {
     document.title = title ? `${title} - hyperparam` : 'hyperparam'
   }, [title])
-
   return <main className='main'>
     <Sidebar />
     <div className='content-container'>
       <div className={cn('content', className)}>
         {children}
       </div>
-      <div className={cn('error-bar', showError && 'show-error')}>
-        <div className='error-content'>
-          <span>{errorMessage}</span>
-          <button
-            aria-label='Close error message'
-            className='close-button'
-            onClick={() => { setShowError(false) }}>
-            &times;
-          </button>
-        </div>
-      </div>
+      <ErrorBar error={error}></ErrorBar>
     </div>
     {progress !== undefined && progress < 1 &&
       <div className={'progress-bar'} role='progressbar'>
@@ -75,3 +50,27 @@ function Sidebar() {
 export function Spinner({ className }: { className: string }) {
   return <div className={cn('spinner', className)}></div>
 }
+
+function ErrorBar({ error }: { error?: Error }) {
+  const [showError, setShowError] = useState(error !== undefined)
+  const [prevError, setPrevError] = useState(error)
+
+  if (error) console.error(error)
+  /// Reset error visibility when error prop changes
+  if (error !== prevError) {
+    setPrevError(error)
+    setShowError(error !== undefined)
+  }
+
+  return <div className={cn('error-bar', showError && 'show-error')}>
+    <div className='error-content'>
+      <span>{error?.toString()}</span>
+      <button
+        aria-label='Close error message'
+        className='close-button'
+        onClick={() => { setShowError(false) }}>
+      &times;
+      </button>
+    </div>
+  </div>
+}