From ffd81d2c07475ea086ee384ec254ee58330819cb Mon Sep 17 00:00:00 2001 From: alex-arc Date: Fri, 10 Jul 2026 17:01:35 +0200 Subject: [PATCH] refactor: useSuspenseQuery for project list --- .../src/common/hooks-query/useProjectList.ts | 20 +++---- apps/client/src/common/utils/socket.ts | 3 + .../panel/project-panel/ProjectList.tsx | 26 +++++---- .../project-service/ProjectService.ts | 58 ++++++++++++++++++- .../types/src/api/websocket/refetch.type.ts | 1 + 5 files changed, 84 insertions(+), 24 deletions(-) diff --git a/apps/client/src/common/hooks-query/useProjectList.ts b/apps/client/src/common/hooks-query/useProjectList.ts index b79324c9b..fd5b4e616 100644 --- a/apps/client/src/common/hooks-query/useProjectList.ts +++ b/apps/client/src/common/hooks-query/useProjectList.ts @@ -1,24 +1,18 @@ -import { useQuery } from '@tanstack/react-query'; -import { ProjectFile, ProjectFileList, ProjectFileListResponse } from 'ontime-types'; +import { useSuspenseQuery } from '@tanstack/react-query'; +import { ProjectFile, ProjectFileList } from 'ontime-types'; +import { MILLIS_PER_HOUR } from 'ontime-utils'; import { useMemo } from 'react'; -import { queryRefetchIntervalSlow } from '../../ontimeConfig'; import { PROJECT_LIST } from '../api/constants'; import { getProjects } from '../api/db'; -const placeholderProjectList: ProjectFileListResponse = { - files: [], - lastLoadedProject: '', -}; - -function useProjectList() { - const { data, status, refetch } = useQuery({ +export function useProjectList() { + const { data, status, refetch } = useSuspenseQuery({ queryKey: PROJECT_LIST, queryFn: ({ signal }) => getProjects({ signal }), - placeholderData: (previousData, _previousQuery) => previousData, - refetchInterval: queryRefetchIntervalSlow, + staleTime: MILLIS_PER_HOUR, }); - return { data: data ?? placeholderProjectList, status, refetch }; + return { data, status, refetch }; } export type ProjectSortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'modified-asc' | 'modified-desc'; diff --git a/apps/client/src/common/utils/socket.ts b/apps/client/src/common/utils/socket.ts index a9366cc36..93ee3b3ae 100644 --- a/apps/client/src/common/utils/socket.ts +++ b/apps/client/src/common/utils/socket.ts @@ -216,6 +216,9 @@ export const connectSocket = () => { case RefetchKey.ProjectRundowns: ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS }); break; + case RefetchKey.ProjectFiles: + ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS }); + break; default: { target satisfies never; break; diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx index ad4feb8d6..20ad55ce2 100644 --- a/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx +++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { Suspense, useState } from 'react'; import { IoArrowDown, IoArrowUp } from 'react-icons/io5'; import Info from '../../../../common/components/info/Info'; @@ -11,11 +11,25 @@ import style from './ProjectPanel.module.scss'; type SortParameter = 'alphabetical' | 'modified'; export default function ProjectList() { + return ( + + + + } + > + + + ); +} + +function ProjectListSuspend() { const [editingMode, setEditingMode] = useState(null); const [editingFilename, setEditingFilename] = useState(null); const [sortMode, setSortMode] = useState('modified-desc'); - const { data, refetch, status } = useOrderedProjectList(sortMode); + const { data, refetch } = useOrderedProjectList(sortMode); const handleToggleEditMode = (editMode: EditMode, filename: string | null) => { setEditingMode((prev) => (prev === editMode && filename === editingFilename ? null : editMode)); @@ -38,14 +52,6 @@ export default function ProjectList() { }); }; - if (status === 'pending') { - return ( -
- -
- ); - } - const numProjects = data.reorderedProjectFiles.length; return ( diff --git a/apps/server/src/services/project-service/ProjectService.ts b/apps/server/src/services/project-service/ProjectService.ts index 3cad948c3..ce71bb886 100644 --- a/apps/server/src/services/project-service/ProjectService.ts +++ b/apps/server/src/services/project-service/ProjectService.ts @@ -1,9 +1,10 @@ import { copyFile } from 'fs/promises'; import { join } from 'path'; -import { DatabaseModel, LogOrigin, ProjectFileListResponse } from 'ontime-types'; +import { DatabaseModel, LogOrigin, ProjectFileListResponse, RefetchKey } from 'ontime-types'; import { getErrorMessage, getFirstRundown } from 'ontime-utils'; +import { sendRefetch } from '../../adapters/WebsocketAdapter.js'; import { parseCustomFields } from '../../api-data/custom-fields/customFields.parser.js'; import { parseDatabaseModel } from '../../api-data/db/db.parser.js'; import { getCurrentRundown } from '../../api-data/rundown/rundown.dao.js'; @@ -72,6 +73,9 @@ export async function getCurrentProject(): Promise<{ filename: string; pathToFil // we know the project is loaded since we force initialisation above const pathToFile = getPathToProject(currentProjectState.currentProjectName as string); + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return { filename: currentProjectState.currentProjectName as string, pathToFile }; } @@ -105,6 +109,9 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown currentProjectName: fileName, }; + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return fileName; } @@ -113,6 +120,9 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown */ export async function loadDemoProject(): Promise { populateOntimeLogo(); + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return createProject(config.demoProject, demoDb); } @@ -122,6 +132,9 @@ export async function loadDemoProject(): Promise { */ async function loadNewProject(): Promise { const emptyProject = makeNewProject(); + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return createProject(config.newProject, emptyProject); } @@ -142,6 +155,9 @@ async function handleCorruptedFile(filePath: string, fileName: string): Promise< // and make a new file with the recovered data const newPath = appendToName(filePath, '(recovered)'); await dockerSafeRename(filePath, newPath); + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return getFileNameFromPath(newPath); } @@ -162,6 +178,9 @@ async function handleMigratedFile(filePath: string, fileName: string): Promise { + sendRefetch(RefetchKey.ProjectFiles); + }); return getFileNameFromPath(newPath); } @@ -200,6 +219,9 @@ export async function initialiseProject(): Promise { } } + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return loadNewProject(); } @@ -231,6 +253,10 @@ export async function loadProjectFile( } const projectName = await loadProject(result.data, parsedFileName, options?.rundownId); + + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return projectName; } @@ -241,6 +267,9 @@ export async function getProjectList(): Promise { const files = await getProjectFiles(); const lastLoaded = await getLastLoaded(); + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return { files, lastLoadedProject: lastLoaded?.projectName ? removeFileExtension(lastLoaded?.projectName) : '', @@ -263,6 +292,10 @@ export async function duplicateProjectFile(originalFile: string, newFilename: st const pathToDuplicate = getPathToProject(newFilename); await copyFile(projectFilePath, pathToDuplicate); + + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return; } @@ -291,8 +324,16 @@ export async function renameProjectFile(originalFile: string, newFilename: strin const projectData = parseDatabaseModel(fileData); const newFileName = await loadProject(projectData.data, newFilename); + + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return newFileName; } + + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return newFilename; } @@ -304,6 +345,10 @@ export async function renameProjectFile(originalFile: string, newFilename: strin export async function createProject(fileName: string, initialData: DatabaseModel): Promise { const fileNameWithExtension = generateUniqueFileName(publicDir.projectsDir, ensureJsonExtension(fileName)); await loadProject(initialData, fileNameWithExtension); + + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return fileNameWithExtension; } @@ -315,6 +360,10 @@ export async function createProject(fileName: string, initialData: DatabaseModel export async function createProjectWithPatch(fileName: string, initialData: Partial): Promise { const newProject = makeNewProject(); const sanitisedData = safeMerge(newProject, initialData); + + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return createProject(fileName, sanitisedData); } @@ -331,6 +380,9 @@ export async function deleteProjectFile(filename: string) { throw new Error('Project file not found'); } + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); await deleteFile(projectFilePath); } @@ -375,5 +427,9 @@ export async function patchCurrentProject(data: Partial) { } const updatedData = await getDataProvider().getData(); + + setImmediate(() => { + sendRefetch(RefetchKey.ProjectFiles); + }); return updatedData; } diff --git a/packages/types/src/api/websocket/refetch.type.ts b/packages/types/src/api/websocket/refetch.type.ts index 1f7fe2d31..9ef5ff29a 100644 --- a/packages/types/src/api/websocket/refetch.type.ts +++ b/packages/types/src/api/websocket/refetch.type.ts @@ -1,6 +1,7 @@ export enum RefetchKey { All = 'all', CustomFields = 'custom-fields', + ProjectFiles = 'project-files', ProjectData = 'project-data', ProjectRundowns = 'project-rundowns', Report = 'report',