Skip to content

Commit

Permalink
fix: fix filters losing focus
Browse files Browse the repository at this point in the history
  • Loading branch information
@fanSte8
fanSte8 committed Feb 22, 2022
1 parent 7f632ed commit b49cba0
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 82 deletions.
26 changes: 5 additions & 21 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
65 changes: 4 additions & 61 deletions client/src/components/JobFilters.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -28,9 +16,7 @@ const JobFilters: React.FC = () => {
setProperty: setJobProperty,
value: jobValue,
setValue: setJobValue,
status: jobStatus,
setStatus: setJobStatus,
jobListUpdatedAt,
refreshInterval,
setRefreshInterval,
} = useJobsListContext();
Expand All @@ -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),
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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={{
Expand All @@ -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={{
Expand All @@ -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={{
Expand All @@ -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>
);
};
Expand Down
66 changes: 66 additions & 0 deletions client/src/components/Overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit b49cba0

Please sign in to comment.