refactor: extract sticky header from jobPage & queuePage

felixmosh · Aug 9, 2023 · b185014 · b185014
1 parent e866635
commit b185014
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 31 deletions.
diff --git a/.../src/pages/QueuePage/QueuePage.module.css → ...ents/StickyHeader/StickyHeader.module.css b/.../src/pages/QueuePage/QueuePage.module.css → ...ents/StickyHeader/StickyHeader.module.css
diff --git a/packages/ui/src/components/StickyHeader/StickyHeader.tsx b/packages/ui/src/components/StickyHeader/StickyHeader.tsx
@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+import s from './StickyHeader.module.css';
+
+export const StickyHeader = ({
+  actions,
+  children,
+}: PropsWithChildren<{ actions: React.ReactElement }>) => (
+  <div className={s.stickyHeader}>
+    {children}
+    {!!actions && <div className={s.actionContainer}>{actions}</div>}
+  </div>
+);
diff --git a/packages/ui/src/pages/JobPage/JobPage.tsx b/packages/ui/src/pages/JobPage/JobPage.tsx
@@ -4,10 +4,10 @@ import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { ArrowLeftIcon } from '../../components/Icons/ArrowLeft';
 import { JobCard } from '../../components/JobCard/JobCard';
+import { StickyHeader } from '../../components/StickyHeader/StickyHeader';
 import { useJob } from '../../hooks/useJob';
 import { useSelectedStatuses } from '../../hooks/useSelectedStatuses';
 import { links } from '../../utils/links';
-import s from '../QueuePage/QueuePage.module.css';
 import buttonS from '../../components/Button/Button.module.css';
 
 export const JobPage = ({ queue }: { queue: AppQueue | null }) => {
@@ -32,17 +32,19 @@ export const JobPage = ({ queue }: { queue: AppQueue | null }) => {
 
   return (
     <section>
-      <div className={s.stickyHeader}>
-        <div className={s.actionContainer}>
-          <Link
-            className={cn(buttonS.button, buttonS.default)}
-            to={links.queuePage(queue.name, selectedStatuses)}
-          >
-            <ArrowLeftIcon />
-          </Link>
-          <div>Status: {status.toLocaleUpperCase()}</div>
-        </div>
-      </div>
+      <StickyHeader
+        actions={
+          <>
+            <Link
+              className={cn(buttonS.button, buttonS.default)}
+              to={links.queuePage(queue.name, selectedStatuses)}
+            >
+              <ArrowLeftIcon />
+            </Link>
+            <div>Status: {status.toLocaleUpperCase()}</div>
+          </>
+        }
+      />
       <JobCard
         key={job.id}
         job={job}

diff --git a/packages/ui/src/pages/QueuePage/QueuePage.tsx b/packages/ui/src/pages/QueuePage/QueuePage.tsx
@@ -5,12 +5,12 @@ import { JobCard } from '../../components/JobCard/JobCard';
 import { Pagination } from '../../components/Pagination/Pagination';
 import { QueueActions } from '../../components/QueueActions/QueueActions';
 import { StatusMenu } from '../../components/StatusMenu/StatusMenu';
+import { StickyHeader } from '../../components/StickyHeader/StickyHeader';
 import { useActiveQueue } from '../../hooks/useActiveQueue';
 import { useJob } from '../../hooks/useJob';
 import { useQueues } from '../../hooks/useQueues';
 import { useSelectedStatuses } from '../../hooks/useSelectedStatuses';
 import { links } from '../../utils/links';
-import s from './QueuePage.module.css';
 
 export const QueuePage = () => {
   const selectedStatus = useSelectedStatuses();
@@ -28,25 +28,28 @@ export const QueuePage = () => {
 
   return (
     <section>
-      <div className={s.stickyHeader}>
+      <StickyHeader
+        actions={
+          <>
+            <div>
+              {queue.jobs.length > 0 && !queue.readOnlyMode && (
+                <QueueActions
+                  queue={queue}
+                  actions={actions}
+                  status={selectedStatus[queue.name]}
+                  allowRetries={
+                    (selectedStatus[queue.name] == 'failed' || queue.allowCompletedRetries) &&
+                    queue.allowRetries
+                  }
+                />
+              )}
+            </div>
+            <Pagination pageCount={queue.pagination.pageCount} />
+          </>
+        }
+      >
         <StatusMenu queue={queue} actions={actions} />
-        <div className={s.actionContainer}>
-          <div>
-            {queue.jobs.length > 0 && !queue.readOnlyMode && (
-              <QueueActions
-                queue={queue}
-                actions={actions}
-                status={selectedStatus[queue.name]}
-                allowRetries={
-                  (selectedStatus[queue.name] == 'failed' || queue.allowCompletedRetries) &&
-                  queue.allowRetries
-                }
-              />
-            )}
-          </div>
-          <Pagination pageCount={queue.pagination.pageCount} />
-        </div>
-      </div>
+      </StickyHeader>
       {queue.jobs.map((job) => (
         <JobCard
           key={job.id}