Merge pull request #118 from aliceclv/feat/close-tab-on-click

Close job tab on click
felixmosh · Aug 7, 2020 · a58ee5e · a58ee5e
2 parents dbff38a + df99926
commit a58ee5e
Showing 1 changed file with 25 additions and 12 deletions.
diff --git a/src/ui/components/Queue.tsx b/src/ui/components/Queue.tsx
@@ -7,20 +7,32 @@ import { Jobs } from './Jobs'
 type MenuItemProps = {
   status: Status
   count: number
-  onClick: () => void
+  queue: AppQueue
+  selectStatus: (statuses: Record<string, Status>) => void
   selected: boolean
 }
 
-const MenuItem = ({ status, count, onClick, selected }: MenuItemProps) => (
-  <div
-    className={`menu-item ${status} ${selected ? 'selected' : ''} ${
-      count === 0 ? 'off' : 'on'
-    }`}
-    onClick={onClick}
-  >
-    {status !== 'latest' && <b className="count">{count}</b>} {status}
-  </div>
-)
+const MenuItem = ({
+  status,
+  count,
+  queue,
+  selectStatus,
+  selected,
+}: MenuItemProps) => {
+  const selectedStatus = selected ? {} : { [queue.name]: status }
+
+  return (
+    <div
+      className={`menu-item ${status} ${selected ? 'selected' : ''} ${
+        count === 0 ? 'off' : 'on'
+      }`}
+      onClick={() => selectStatus(selectedStatus)}
+    >
+      {status !== 'latest' && <b className="count">{count}</b>} {status}
+    </div>
+  )
+}
+
 const ACTIONABLE_STATUSES = ['failed', 'delayed', 'completed']
 
 interface QueueActionProps {
@@ -107,7 +119,8 @@ export const Queue = ({
           key={`${queue.name}-${status}`}
           status={status}
           count={queue.counts[status]}
-          onClick={() => selectStatus({ [queue.name]: status })}
+          selectStatus={selectStatus}
+          queue={queue}
           selected={selectedStatus === status}
         />
       ))}