From b49cba03c1e70c78ca6f2167998134871c5c6545 Mon Sep 17 00:00:00 2001
From: Stefan <stefanmitov8@gmail.com>
Date: Tue, 22 Feb 2022 09:08:56 +0200
Subject: [PATCH] fix: fix filters losing focus

---
 client/src/App.tsx                   | 26 +++--------
 client/src/components/JobFilters.tsx | 65 ++-------------------------
 client/src/components/Overview.tsx   | 66 ++++++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 82 deletions(-)
 create mode 100644 client/src/components/Overview.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 55e312e..93c85ab 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -2,36 +2,20 @@ import Footer from 'src/components/Footer';
 import Header from 'src/components/Header';
 import JobsTable from 'src/components/JobsTable';
 import Logo from './svgs/Logo';
-import { useJobsListContext } from 'src/hooks/useJobsListContext';
 
 const App = () => {
-  const { data, error } = useJobsListContext();
-
-  if (!data && !error) return null;
-
-  if (error) {
-    return (
-      <div className="m-4 text-xl text-error">
-        <p>An error has occurred!</p>
-        <p>Error message: {error.message}</p>
-      </div>
-    );
-  }
-
   return (
     <div className="max-w-screen-xl mx-auto">
       <div className="flex flex-col items-center justify-between py-8 mb-16 space-y-4">
-        <a href="/" className="flex items-center self-start space-x-2 ">
+        <div className="flex items-center self-start space-x-2">
           <Logo className="w-16 h-16" />
           <h1 className="text-3xl font-bold select-none">Agenda Admin</h1>
-        </a>
+        </div>
         <Header />
         <JobsTable />
-        {data && data[0].jobs.length === 0 && (
-          <div className="p-4 m-4">
-            <span>No data found.</span>
-          </div>
-        )}
+        <div className="p-4 m-4">
+          <span>No data found.</span>
+        </div>
         <Footer />
       </div>
     </div>
diff --git a/client/src/components/JobFilters.tsx b/client/src/components/JobFilters.tsx
index fd1c26d..ec51d28 100644
--- a/client/src/components/JobFilters.tsx
+++ b/client/src/components/JobFilters.tsx
@@ -1,25 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import InputField from './InputField';
-import { JOB_COLORS } from 'src/constants';
 import JobNamesAutocomplete from './JobNamesAutocomplete';
-import { StatusType } from 'src/types';
-import { abbreviateNumber } from 'src/utils/formatter';
-import cx from 'classnames';
 import { debounce } from 'lodash';
 import { useJobsListContext } from 'src/hooks/useJobsListContext';
-import { useJobsOverview } from 'src/hooks/useJobsOverview';
+import Overview from './Overview';
 
 const DEBOUNCE_DELAY = 500;
 
-const STATUS_BUTTONS: StatusType[] = [
-  'scheduled',
-  'queued',
-  'running',
-  'completed',
-  'failed',
-];
-
 const JobFilters: React.FC = () => {
   const {
     name: jobName,
@@ -28,9 +16,7 @@ const JobFilters: React.FC = () => {
     setProperty: setJobProperty,
     value: jobValue,
     setValue: setJobValue,
-    status: jobStatus,
     setStatus: setJobStatus,
-    jobListUpdatedAt,
     refreshInterval,
     setRefreshInterval,
   } = useJobsListContext();
@@ -40,19 +26,10 @@ const JobFilters: React.FC = () => {
   const [value, setValue] = useState('');
   const [refreshRate, setRefreshRate] = useState(refreshInterval);
 
-  const { data, mutate: refreshOverview } = useJobsOverview({
-    name: jobName,
-    property: jobProperty,
-    value: jobValue,
-  });
-
   useEffect(() => setTerm(jobName), [jobName]);
   useEffect(() => setProperty(jobProperty), [jobProperty]);
   useEffect(() => setValue(jobValue), [jobValue]);
   useEffect(() => setRefreshRate(refreshInterval), [refreshInterval]);
-  useEffect(() => {
-    refreshOverview();
-  }, [refreshOverview, jobListUpdatedAt]);
 
   const debouncedSetJobProperty = useMemo(
     () => debounce(setJobProperty, DEBOUNCE_DELAY),
@@ -83,12 +60,6 @@ const JobFilters: React.FC = () => {
     [debouncedSetJobValue]
   );
 
-  const handleStatusSelect = useCallback(
-    (btnStatus: StatusType) => () =>
-      setJobStatus(jobStatus !== btnStatus ? btnStatus : ''),
-    [jobStatus, setJobStatus]
-  );
-
   const debouncedSetRefreshInterval = useMemo(
     () =>
       debounce((i: number) => {
@@ -147,7 +118,7 @@ const JobFilters: React.FC = () => {
           <label className="label">Form Value</label>
           <div className="flex flex-row">
             <InputField
-              className="rounded-r-none input input-bordered"
+              className="rounded-r-none"
               showButton={!!property}
               onClear={() => setJobProperty('')}
               inputProps={{
@@ -162,7 +133,7 @@ const JobFilters: React.FC = () => {
               =
             </span>
             <InputField
-              className="rounded-l-none input input-bordered"
+              className="rounded-l-none"
               showButton={!!value}
               onClear={() => setJobValue('')}
               inputProps={{
@@ -178,7 +149,6 @@ const JobFilters: React.FC = () => {
         <div className="flex-1 form-control">
           <label className="label">Refresh Interval (seconds)</label>
           <InputField
-            className="input input-bordered"
             showButton={false}
             onClear={() => null}
             inputProps={{
@@ -191,38 +161,11 @@ const JobFilters: React.FC = () => {
             }}
           />
         </div>
-        <div className="flex-1" />
         <button className="btn btn-ghost" onClick={handleClearFilters}>
           Clear Filters
         </button>
       </div>
-      {
-        <div className="flex w-full overflow-hidden rounded-box tabs">
-          {STATUS_BUTTONS.map((name) => (
-            <a
-              key={name}
-              className={cx(
-                'tab h-16 transition-colors duration-200 flex-1',
-                JOB_COLORS[name],
-                {
-                  'bg-opacity-25': jobStatus && jobStatus !== name,
-                  'tab-active bg-opacity-100': jobStatus === name,
-                }
-              )}
-              onClick={handleStatusSelect(name)}
-            >
-              <div className="flex flex-col text-primary-content">
-                <span className="text-3xl font-bold">
-                  {abbreviateNumber(
-                    data && data.data.length ? data.data[0][name] : 0
-                  )}
-                </span>
-                <span className="text-sm">{name}</span>
-              </div>
-            </a>
-          ))}
-        </div>
-      }
+      <Overview />
     </div>
   );
 };
diff --git a/client/src/components/Overview.tsx b/client/src/components/Overview.tsx
new file mode 100644
index 0000000..8117190
--- /dev/null
+++ b/client/src/components/Overview.tsx
@@ -0,0 +1,66 @@
+import { useCallback, useEffect } from 'react';
+import { JOB_COLORS } from 'src/constants';
+import { abbreviateNumber } from 'src/utils/formatter';
+import cx from 'classnames';
+import { StatusType } from 'src/types';
+import { useJobsListContext } from 'src/hooks/useJobsListContext';
+import { useJobsOverview } from 'src/hooks/useJobsOverview';
+
+const STATUS_BUTTONS: StatusType[] = [
+  'scheduled',
+  'queued',
+  'running',
+  'completed',
+  'failed',
+];
+
+const Overview = () => {
+  const { name, property, value, status, setStatus, jobListUpdatedAt } =
+    useJobsListContext();
+
+  const { data, mutate: refreshOverview } = useJobsOverview({
+    name,
+    property,
+    value,
+  });
+
+  useEffect(() => {
+    refreshOverview();
+  }, [refreshOverview, jobListUpdatedAt]);
+
+  const handleStatusSelect = useCallback(
+    (btnStatus: StatusType) => () =>
+      setStatus(status !== btnStatus ? btnStatus : ''),
+    [status, setStatus]
+  );
+
+  return (
+    <div className="flex w-full overflow-hidden rounded-box tabs">
+      {STATUS_BUTTONS.map((name) => (
+        <a
+          key={name}
+          className={cx(
+            'tab h-16 transition-colors duration-200 flex-1',
+            JOB_COLORS[name],
+            {
+              'bg-opacity-25': status && status !== name,
+              'tab-active bg-opacity-100': status === name,
+            }
+          )}
+          onClick={handleStatusSelect(name)}
+        >
+          <div className="flex flex-col text-primary-content">
+            <span className="text-3xl font-bold">
+              {abbreviateNumber(
+                data && data.data.length ? data.data[0][name] : 0
+              )}
+            </span>
+            <span className="text-sm">{name}</span>
+          </div>
+        </a>
+      ))}
+    </div>
+  );
+};
+
+export default Overview;