Two changes: refactor to remove useEffect, and report CSS changes to …

…demo (#129) * refactor to remove useEffect * report CSS changes to the components demo
hyparam · Dec 12, 2024 · 8c04054 · 8c04054
1 parent bb5cc1c
commit 8c04054
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 27 deletions.
diff --git a/packages/components/demo/styles.css b/packages/components/demo/styles.css
@@ -170,15 +170,51 @@ main {
   padding: 0;
   background-color: #dd111199;
   font-family: monospace;
-  overflow-y: auto;
+  overflow: hidden;
   transition: max-height 0.3s;
   white-space: pre-wrap;
 }
 .show-error {
   max-height: 30%;
+}
+.error-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 100%;
+  overflow-y: auto;
   padding: 10px;
 }
 
+/* error bar close button */
+.close-button,
+.close-button:active,
+.close-button:focus,
+.close-button:focus-visible,
+.close-button:hover {
+  background: none;
+  border: none;
+  border-radius: 4px;
+  padding: 0 8px;
+  cursor: pointer;
+  color: #333;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+button.close-button:active {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+button.close-button:focus {
+  background-color: rgba(0, 0, 0, 0.1);
+  outline: 2px solid #a44;
+}
+button.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
 /* file list */
 .file-list {
   flex: 1;

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>
+}