From 76cd2b876897192f05144c5cd97a5ef24eff23e9 Mon Sep 17 00:00:00 2001 From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com> Date: Wed, 9 Aug 2023 16:50:54 +0300 Subject: [PATCH] refactor: split useStore into several small hooks based on zustand stores --- packages/api/src/handlers/job.ts | 4 +- packages/api/typings/responses.ts | 7 +- packages/ui/package.json | 8 +- packages/ui/src/App.tsx | 63 +- packages/ui/src/components/Menu/Menu.tsx | 16 +- .../components/QueueActions/QueueActions.tsx | 24 +- .../QueueDropdownActions.tsx | 6 +- .../src/components/StatusMenu/StatusMenu.tsx | 9 +- packages/ui/src/hooks/useActiveJobId.ts | 14 + packages/ui/src/hooks/useActiveQueue.ts | 8 +- packages/ui/src/hooks/useConfirm.ts | 47 +- packages/ui/src/hooks/useJob.ts | 90 +++ packages/ui/src/hooks/useQueues.ts | 124 ++++ packages/ui/src/hooks/useStore.ts | 171 ----- packages/ui/src/pages/JobPage/JobPage.tsx | 39 +- .../src/pages/OverviewPage/OverviewPage.tsx | 33 +- packages/ui/src/pages/QueuePage/QueuePage.tsx | 32 +- packages/ui/src/services/Api.ts | 12 +- packages/ui/src/utils/getConfirmFor.ts | 25 + packages/ui/src/utils/links.ts | 12 + packages/ui/typings/app.d.ts | 16 +- yarn.lock | 682 ++++++------------ 22 files changed, 635 insertions(+), 807 deletions(-) create mode 100644 packages/ui/src/hooks/useActiveJobId.ts create mode 100644 packages/ui/src/hooks/useJob.ts create mode 100644 packages/ui/src/hooks/useQueues.ts delete mode 100644 packages/ui/src/hooks/useStore.ts create mode 100644 packages/ui/src/utils/getConfirmFor.ts create mode 100644 packages/ui/src/utils/links.ts diff --git a/packages/api/src/handlers/job.ts b/packages/api/src/handlers/job.ts index 3a596a38f..d49b151db 100644 --- a/packages/api/src/handlers/job.ts +++ b/packages/api/src/handlers/job.ts @@ -6,13 +6,13 @@ async function getJobState( _req: BullBoardRequest, job: QueueJob ): Promise { - const state = await job.getState(); + const status = await job.getState(); return { status: 200, body: { job, - state, + status, }, }; } diff --git a/packages/api/typings/responses.ts b/packages/api/typings/responses.ts index 2c08501d2..e9676c758 100644 --- a/packages/api/typings/responses.ts +++ b/packages/api/typings/responses.ts @@ -1,5 +1,10 @@ -import { AppQueue } from './app'; +import { AppJob, AppQueue, Status } from './app'; export interface GetQueuesResponse { queues: AppQueue[]; } + +export interface GetJobResponse { + job: AppJob; + status: Status; +} diff --git a/packages/ui/package.json b/packages/ui/package.json index 4adbee247..f168436fa 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -39,10 +39,10 @@ "@babel/preset-typescript": "^7.13.0", "@babel/runtime": "^7.17.9", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", - "@radix-ui/react-alert-dialog": "^1.0.0", - "@radix-ui/react-dialog": "^1.0.0", - "@radix-ui/react-dropdown-menu": "^1.0.0", - "@radix-ui/react-switch": "^1.0.0", + "@radix-ui/react-alert-dialog": "^1.0.4", + "@radix-ui/react-dialog": "^1.0.4", + "@radix-ui/react-dropdown-menu": "^2.0.5", + "@radix-ui/react-switch": "^1.0.3", "@types/react": "^17.0.14", "@types/react-dom": "^17.0.14", "@types/react-paginate": "^7.1.1", diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx index 2b9ad0f97..0140ba085 100644 --- a/packages/ui/src/App.tsx +++ b/packages/ui/src/App.tsx @@ -1,4 +1,4 @@ -import React, { Suspense } from 'react'; +import React, { Suspense, useEffect } from 'react'; import { Route, Switch } from 'react-router-dom'; import { ToastContainer } from 'react-toastify'; import { ConfirmModal } from './components/ConfirmModal/ConfirmModal'; @@ -8,8 +8,9 @@ import { Loader } from './components/Loader/Loader'; import { Menu } from './components/Menu/Menu'; import { Title } from './components/Title/Title'; import { useActiveQueue } from './hooks/useActiveQueue'; +import { useConfirm } from './hooks/useConfirm'; +import { useQueues } from './hooks/useQueues'; import { useScrollTopOnNav } from './hooks/useScrollTopOnNav'; -import { useStore } from './hooks/useStore'; const JobPageLazy = React.lazy(() => import('./pages/JobPage/JobPage').then(({ JobPage }) => ({ default: JobPage })) @@ -27,8 +28,13 @@ const OverviewPageLazy = React.lazy(() => export const App = () => { useScrollTopOnNav(); - const { state, actions, selectedStatuses, confirmProps } = useStore(); - const activeQueue = useActiveQueue(state.data); + const { queues, actions: queueActions } = useQueues(); + const activeQueue = useActiveQueue({ queues }); + const { confirmProps } = useConfirm(); + + useEffect(() => { + queueActions.updateQueues(); + }, []); return ( <> @@ -38,46 +44,21 @@ export const App = () => {
- {state.loading ? ( - - ) : ( - <> - }> - - ( - - )} - /> - ( - - )} - /> + }> + + } + /> + } /> - } - /> - - - - - )} + } /> + + +
- + ); diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index ba99daa41..b30b2de6b 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -3,18 +3,14 @@ import cn from 'clsx'; import React, { useState } from 'react'; import { NavLink } from 'react-router-dom'; import { STATUS_LIST } from '../../constants/status-list'; -import { Store } from '../../hooks/useStore'; +import { useSelectedStatuses } from '../../hooks/useSelectedStatuses'; import { SearchIcon } from '../Icons/Search'; import s from './Menu.module.css'; -export const Menu = ({ - queues, - selectedStatuses, -}: { - queues: AppQueue[] | undefined; - selectedStatuses: Store['selectedStatuses']; -}) => { +export const Menu = ({ queues }: { queues: AppQueue[] | null }) => { + const selectedStatuses = useSelectedStatuses(); const [searchTerm, setSearchTerm] = useState(''); + return (