Reformat the code

felixmosh · May 28, 2021 · 866a401 · 866a401
1 parent 043474a
commit 866a401
Show file tree

Hide file tree

Showing 19 changed files with 39 additions and 136 deletions.
diff --git a/packages/ui/src/components/App.tsx b/packages/ui/src/components/App.tsx
@@ -15,9 +15,7 @@ export const App = ({ api }: { api: Api }) => {
 
   return (
     <>
-      <Header>
-        {state.data?.stats && <RedisStats stats={state.data?.stats} />}
-      </Header>
+      <Header>{state.data?.stats && <RedisStats stats={state.data?.stats} />}</Header>
       <main>
         <div>
           {state.loading ? (
@@ -28,16 +26,10 @@ export const App = ({ api }: { api: Api }) => {
                 path="/queue/:name"
                 render={({ match: { params } }) => {
                   const currentQueueName = decodeURIComponent(params.name);
-                  const queue = state.data?.queues.find(
-                    (q) => q.name === currentQueueName
-                  );
+                  const queue = state.data?.queues.find((q) => q.name === currentQueueName);
 
                   return (
-                    <QueuePage
-                      queue={queue}
-                      actions={actions}
-                      selectedStatus={selectedStatuses}
-                    />
+                    <QueuePage queue={queue} actions={actions} selectedStatus={selectedStatuses} />
                   );
                 }}
               />
@@ -46,21 +38,14 @@ export const App = ({ api }: { api: Api }) => {
                 {!!state.data &&
                   Array.isArray(state.data?.queues) &&
                   state.data.queues.length > 0 && (
-                    <Redirect
-                      to={`/queue/${encodeURIComponent(
-                        state.data?.queues[0].name
-                      )}`}
-                    />
+                    <Redirect to={`/queue/${encodeURIComponent(state.data?.queues[0].name)}`} />
                   )}
               </Route>
             </Switch>
           )}
         </div>
       </main>
-      <Menu
-        queues={state.data?.queues.map((q) => q.name)}
-        selectedStatuses={selectedStatuses}
-      />
+      <Menu queues={state.data?.queues.map((q) => q.name)} selectedStatuses={selectedStatuses} />
       <ToastContainer />
     </>
   );

diff --git a/packages/ui/src/components/Highlight/Highlight.tsx b/packages/ui/src/components/Highlight/Highlight.tsx
@@ -23,8 +23,7 @@ export class Highlight extends React.Component<HighlightProps> {
       nextProps.language !== this.props.language ||
       (Array.isArray(this.props.children)
         ? this.props.children.some(
-            (item: any) =>
-              !([] as any).concat(nextProps.children).includes(item)
+            (item: any) => !([] as any).concat(nextProps.children).includes(item)
           )
         : nextProps.children !== this.props.children)
     );

diff --git a/packages/ui/src/components/JobCard/Button/Button.tsx b/packages/ui/src/components/JobCard/Button/Button.tsx
@@ -7,17 +7,10 @@ export const Button = ({
   className,
   isActive = false,
   ...rest
-}: React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
+}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
   isActive?: boolean;
 }) => (
-  <button
-    type="button"
-    {...rest}
-    className={cn(s.button, className, { [s.isActive]: isActive })}
-  >
+  <button type="button" {...rest} className={cn(s.button, className, { [s.isActive]: isActive })}>
     {children}
   </button>
 );
diff --git a/packages/ui/src/components/JobCard/Details/Details.tsx b/packages/ui/src/components/JobCard/Details/Details.tsx
@@ -31,11 +31,7 @@ export const Details = ({ status, job, actions }: DetailsProps) => {
       </ul>
       <div className={s.tabContent}>
         <div>
-          <DetailsContent
-            selectedTab={selectedTab}
-            job={job}
-            actions={actions}
-          />
+          <DetailsContent selectedTab={selectedTab} job={job} actions={actions} />
         </div>
       </div>
     </div>

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx
@@ -20,14 +20,10 @@ export const DetailsContent = ({
   switch (selectedTab) {
     case 'Data':
       return (
-        <Highlight language="json">
-          {JSON.stringify({ data, returnValue }, null, 2)}
-        </Highlight>
+        <Highlight language="json">{JSON.stringify({ data, returnValue }, null, 2)}</Highlight>
       );
     case 'Options':
-      return (
-        <Highlight language="json">{JSON.stringify(opts, null, 2)}</Highlight>
-      );
+      return <Highlight language="json">{JSON.stringify(opts, null, 2)}</Highlight>;
     case 'Error':
       return (
         <>

diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -18,12 +18,7 @@ interface JobCardProps {
   };
 }
 
-export const JobCard = ({
-  job,
-  status,
-  actions,
-  readOnlyMode,
-}: JobCardProps) => (
+export const JobCard = ({ job, status, actions, readOnlyMode }: JobCardProps) => (
   <div className={s.card}>
     <div className={s.sideInfo}>
       <span title={`#${job.id}`}>#{job.id}</span>
@@ -40,11 +35,7 @@ export const JobCard = ({
       <div className={s.content}>
         <Details status={status} job={job} actions={actions} />
         {typeof job.progress === 'number' && (
-          <Progress
-            percentage={job.progress}
-            status={status}
-            className={s.progress}
-          />
+          <Progress percentage={job.progress} status={status} className={s.progress} />
         )}
       </div>
     </div>

diff --git a/packages/ui/src/components/JobCard/Timeline/Timeline.tsx b/packages/ui/src/components/JobCard/Timeline/Timeline.tsx
@@ -15,13 +15,7 @@ const formatDate = (ts: TimeStamp) => {
     : format(ts, 'MM/dd/yyyy HH:mm:ss');
 };
 
-export const Timeline = function Timeline({
-  job,
-  status,
-}: {
-  job: AppJob;
-  status: Status;
-}) {
+export const Timeline = function Timeline({ job, status }: { job: AppJob; status: Status }) {
   return (
     <div className={s.timelineWrapper}>
       <ul className={s.timeline}>
@@ -33,13 +27,9 @@ export const Timeline = function Timeline({
           <li>
             <small>Delayed for</small>
             <time>
-              {formatDistance(
-                job.timestamp || 0,
-                (job.timestamp || 0) + job.delay,
-                {
-                  includeSeconds: true,
-                }
-              )}
+              {formatDistance(job.timestamp || 0, (job.timestamp || 0) + job.delay, {
+                includeSeconds: true,
+              })}
             </time>
           </li>
         )}

diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
@@ -20,8 +20,7 @@ export const Menu = ({
             <li key={queueName}>
               <NavLink
                 to={`/queue/${encodeURIComponent(queueName)}${
-                  !selectedStatuses[queueName] ||
-                  selectedStatuses[queueName] === STATUS_LIST[0]
+                  !selectedStatuses[queueName] || selectedStatuses[queueName] === STATUS_LIST[0]
                     ? ''
                     : `?status=${selectedStatuses[queueName]}`
                 }`}

diff --git a/packages/ui/src/components/QueueActions/QueueActions.tsx b/packages/ui/src/components/QueueActions/QueueActions.tsx
@@ -14,8 +14,7 @@ interface QueueActionProps {
 
 const ACTIONABLE_STATUSES = ['failed', 'delayed', 'completed'];
 
-const isStatusActionable = (status: Status): boolean =>
-  ACTIONABLE_STATUSES.includes(status);
+const isStatusActionable = (status: Status): boolean => ACTIONABLE_STATUSES.includes(status);
 
 const CleanAllButton = ({ onClick }: any) => (
   <Button onClick={onClick} className={s.button}>

diff --git a/packages/ui/src/components/QueuePage/QueuePage.tsx b/packages/ui/src/components/QueuePage/QueuePage.tsx
@@ -24,11 +24,7 @@ export const QueuePage = ({
       <div className={s.stickyHeader}>
         <StatusMenu queue={queue} />
         {!queue.readOnlyMode && (
-          <QueueActions
-            queue={queue}
-            actions={actions}
-            status={selectedStatus[queue.name]}
-          />
+          <QueueActions queue={queue} actions={actions} status={selectedStatus[queue.name]} />
         )}
       </div>
       {queue.jobs.map((job) => (

diff --git a/packages/ui/src/components/RedisStats/RedisStats.tsx b/packages/ui/src/components/RedisStats/RedisStats.tsx
@@ -63,8 +63,7 @@ export const RedisStats = ({ stats }: { stats: Partial<ValidMetrics> }) => {
         <span>{getMemoryUsage(used_memory, total_system_memory)}</span>
         {total_system_memory && used_memory ? (
           <small>
-            {formatBytes(parseInt(used_memory))} of{' '}
-            {formatBytes(parseInt(total_system_memory))}
+            {formatBytes(parseInt(used_memory))} of {formatBytes(parseInt(total_system_memory))}
           </small>
         ) : (
           <small className="error">Could not retrieve memory stats</small>

diff --git a/packages/ui/src/components/StatusMenu/StatusMenu.tsx b/packages/ui/src/components/StatusMenu/StatusMenu.tsx
@@ -19,17 +19,12 @@ export const StatusMenu = ({ queue }: { queue: AppQueue }) => {
             activeClassName={s.active}
             isActive={(_path, { search }) => {
               const query = new URLSearchParams(search);
-              return (
-                query.get('status') === status ||
-                (isLatest && query.get('status') === null)
-              );
+              return query.get('status') === status || (isLatest && query.get('status') === null);
             }}
             key={`${queue.name}-${status}`}
           >
             <span title={displayStatus}>{displayStatus}</span>
-            {queue.counts[status] > 0 && (
-              <span className={s.badge}>{queue.counts[status]}</span>
-            )}
+            {queue.counts[status] > 0 && <span className={s.badge}>{queue.counts[status]}</span>}
           </NavLink>
         );
       })}

diff --git a/packages/ui/src/components/Tooltip/Tooltip.tsx b/packages/ui/src/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import s from './Tooltip.module.css';
 
-export const Tooltip = ({
-  title,
-  children,
-}: React.PropsWithChildren<{ title: string }>) => (
+export const Tooltip = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
   <span data-title={title} className={s.tooltip}>
     {children}
   </span>

diff --git a/packages/ui/src/hooks/useDetailsTabs.tsx b/packages/ui/src/hooks/useDetailsTabs.tsx
@@ -12,11 +12,7 @@ export function useDetailsTabs(currentStatus: Status) {
   const selectedTab = tabs[selectedTabIdx];
 
   useEffect(() => {
-    updateTabs(
-      currentStatus === STATUSES.failed
-        ? ['Error', ...regularItems]
-        : [...regularItems]
-    );
+    updateTabs(currentStatus === STATUSES.failed ? ['Error', ...regularItems] : [...regularItems]);
   }, [currentStatus]);
 
   return {

diff --git a/packages/ui/src/hooks/useInterval.ts b/packages/ui/src/hooks/useInterval.ts
@@ -1,10 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-export function useInterval(
-  callback: () => void,
-  delay: number | null,
-  deps: any[] = []
-): void {
+export function useInterval(callback: () => void, delay: number | null, deps: any[] = []): void {
   const savedCallback = useRef(callback);
 
   // Remember the latest callback if it changes.

diff --git a/packages/ui/src/hooks/useSelectedStatuses.ts b/packages/ui/src/hooks/useSelectedStatuses.ts
@@ -7,9 +7,7 @@ export function useSelectedStatuses(): SelectedStatuses {
   const { search, pathname } = useLocation();
   const match = useRouteMatch<{ name: string }>({ path: '/queue/:name' });
 
-  const [selectedStatuses, setSelectedStatuses] = useState<SelectedStatuses>(
-    {}
-  );
+  const [selectedStatuses, setSelectedStatuses] = useState<SelectedStatuses>({});
 
   useEffect(() => {
     const query = new URLSearchParams(search);

diff --git a/packages/ui/src/hooks/useStore.ts b/packages/ui/src/hooks/useStore.ts
@@ -48,14 +48,11 @@ export const useStore = (api: Api): Store => {
   const cleanJob = (queueName: string) => (job: AppJob) => () =>
     api.cleanJob(queueName, job.id).then(update);
 
-  const retryAll = (queueName: string) => () =>
-    api.retryAll(queueName).then(update);
+  const retryAll = (queueName: string) => () => api.retryAll(queueName).then(update);
 
-  const cleanAllDelayed = (queueName: string) => () =>
-    api.cleanAllDelayed(queueName).then(update);
+  const cleanAllDelayed = (queueName: string) => () => api.cleanAllDelayed(queueName).then(update);
 
-  const cleanAllFailed = (queueName: string) => () =>
-    api.cleanAllFailed(queueName).then(update);
+  const cleanAllFailed = (queueName: string) => () => api.cleanAllFailed(queueName).then(update);
 
   const cleanAllCompleted = (queueName: string) => () =>
     api.cleanAllCompleted(queueName).then(update);

diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -8,8 +8,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { App } from './components/App';
 import { Api } from './services/Api';
 
-const basePath =
-  document.head.querySelector('base')?.getAttribute('href') || '';
+const basePath = document.head.querySelector('base')?.getAttribute('href') || '';
 const api = new Api({ basePath });
 
 render(

diff --git a/packages/ui/src/services/Api.ts b/packages/ui/src/services/Api.ts
@@ -12,11 +12,7 @@ export class Api {
     this.axios.interceptors.response.use(this.handleResponse, this.handleError);
   }
 
-  public getQueues({
-    status,
-  }: {
-    status: SelectedStatuses;
-  }): Promise<GetQueuesResponse> {
+  public getQueues({ status }: { status: SelectedStatuses }): Promise<GetQueuesResponse> {
     return this.axios.get(`/queues`, { params: { ...status } });
   }
 
@@ -25,45 +21,31 @@ export class Api {
   }
 
   public cleanAllDelayed(queueName: string): Promise<void> {
-    return this.axios.put(
-      `/queues/${encodeURIComponent(queueName)}/clean/delayed`
-    );
+    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/clean/delayed`);
   }
 
   public cleanAllFailed(queueName: string): Promise<void> {
-    return this.axios.put(
-      `/queues/${encodeURIComponent(queueName)}/clean/failed`
-    );
+    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/clean/failed`);
   }
 
   public cleanAllCompleted(queueName: string): Promise<void> {
-    return this.axios.put(
-      `/queues/${encodeURIComponent(queueName)}/clean/completed`
-    );
+    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/clean/completed`);
   }
 
   public cleanJob(queueName: string, jobId: AppJob['id']): Promise<void> {
-    return this.axios.put(
-      `/queues/${encodeURIComponent(queueName)}/${jobId}/clean`
-    );
+    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/${jobId}/clean`);
   }
 
   public retryJob(queueName: string, jobId: AppJob['id']): Promise<void> {
-    return this.axios.put(
-      `/queues/${encodeURIComponent(queueName)}/${jobId}/retry`
-    );
+    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/${jobId}/retry`);
   }
 
   public promoteJob(queueName: string, jobId: AppJob['id']): Promise<void> {
-    return this.axios.put(
-      `/queues/${encodeURIComponent(queueName)}/${jobId}/promote`
-    );
+    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/${jobId}/promote`);
   }
 
   public getJobLogs(queueName: string, jobId: AppJob['id']): Promise<string[]> {
-    return this.axios.get(
-      `/queues/${encodeURIComponent(queueName)}/${jobId}/logs`
-    );
+    return this.axios.get(`/queues/${encodeURIComponent(queueName)}/${jobId}/logs`);
   }
 
   private handleResponse(response: AxiosResponse): any {