feat: create project list (#671)

apps/client/src/common/api/apiConstants.ts

@@ -1,14 +1,15 @@
 // REST stuff
-export const PROJECT_DATA = ['project'];
 export const ALIASES = ['aliases'];
-export const USERFIELDS = ['userFields'];
-export const RUNDOWN = ['rundown'];
 export const APP_INFO = ['appinfo'];
-export const OSC_SETTINGS = ['oscSettings'];
-export const HTTP_SETTINGS = ['httpSettings'];
 export const APP_SETTINGS = ['appSettings'];
-export const VIEW_SETTINGS = ['viewSettings'];
+export const HTTP_SETTINGS = ['httpSettings'];
+export const OSC_SETTINGS = ['oscSettings'];
+export const PROJECT_DATA = ['project'];
+export const PROJECT_LIST = ['projectList'];
+export const RUNDOWN = ['rundown'];
 export const RUNTIME = ['runtimeStore'];
+export const USERFIELDS = ['userFields'];
+export const VIEW_SETTINGS = ['viewSettings'];
 
 const location = window.location;
 const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';

apps/client/src/common/api/ontimeApi.ts

@@ -8,6 +8,7 @@ import {
   OSCSettings,
   OscSubscription,
   ProjectData,
+  ProjectFileListResponse,
   Settings,
   UserFields,
   ViewSettings,
@@ -242,6 +243,17 @@ export async function getLatestVersion(): Promise<HasUpdate> {
   };
 }
 
+/**
+ * @description HTTP POST request to create a new project file with given project data
+ */
 export async function postNew(initialData: Partial<ProjectData>) {
   return axios.post(`${ontimeURL}/new`, initialData);
 }
+
+/**
+ * @description HTTP request to get the list of available project files
+ */
+export async function getProjects(): Promise<ProjectFileListResponse> {
+  const res = await axios.get(`${ontimeURL}/projects`);
+  return res.data;
+}

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEvent, memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Link, useLocation, useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';
@@ -13,6 +13,7 @@ import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
 import useFullscreen from '../../hooks/useFullscreen';
 import { useViewOptionsStore } from '../../stores/viewOptions';
+import { isKeyEnter } from '../../utils/keyEvent';
 
 import RenameClientModal from './rename-client-modal/RenameClientModal';
 
@@ -53,7 +54,6 @@ function NavigationMenu() {
     };
   }, []);
 
-  const isKeyEnter = (event: KeyboardEvent<HTMLDivElement>) => event.key === 'Enter';
   const handleFullscreen = () => toggleFullScreen();
   const handleMirror = () => toggleMirror();
 

apps/client/src/common/hooks-query/useProjectList.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import { ProjectFileListResponse } from 'ontime-types';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { PROJECT_LIST } from '../api/apiConstants';
+import { getProjects } from '../api/ontimeApi';
+
+const placeholderProjectList: ProjectFileListResponse = {
+  files: [],
+  lastLoadedProject: '',
+};
+
+export function useProjectList() {
+  const { data, status } = useQuery({
+    queryKey: PROJECT_LIST,
+    queryFn: getProjects,
+    placeholderData: placeholderProjectList,
+    retry: 5,
+    retryDelay: (attempt: number) => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
+  });
+  return { data: data ?? placeholderProjectList, status };
+}

apps/client/src/common/utils/keyEvent.ts

@@ -0,0 +1,5 @@
+import { KeyboardEvent } from 'react';
+
+export function isKeyEnter<T>(event: KeyboardEvent<T>): boolean {
+  return event.key === 'Enter';
+}