refactor!: rename eventData > project

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

@@ -1,5 +1,5 @@
 // REST stuff
-export const EVENT_DATA = ['eventdata'];
+export const PROJECT_DATA = ['project'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
 export const RUNDOWN_TABLE_KEY = 'rundown';
@@ -19,7 +19,7 @@ export const serverPort = isProduction ? location.port : STATIC_PORT;
 export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
 export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
 
-export const eventURL = `${serverURL}/eventdata`;
+export const projectDataURL = `${serverURL}/project`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;
 

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

@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { EventData } from 'ontime-types';
-
-import { eventURL } from './apiConstants';
-
-/**
- * @description HTTP request to fetch event data
- * @return {Promise}
- */
-export async function fetchEventData(): Promise<EventData> {
-  const res = await axios.get(eventURL);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate event data
- * @return {Promise}
- */
-export async function postEventData(data: EventData) {
-  return axios.post(eventURL, data);
-}

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

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { Alias, EventData, OSCSettings, OscSubscription, Settings, UserFields, ViewSettings } from 'ontime-types';
+import { Alias, OSCSettings, OscSubscription, ProjectData, Settings, UserFields, ViewSettings } from 'ontime-types';
 
 import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';
@@ -178,6 +178,6 @@ export async function getLatestVersion(): Promise<HasUpdate> {
   };
 }
 
-export async function postNew(initialData: Partial<EventData>) {
+export async function postNew(initialData: Partial<ProjectData>) {
   return axios.post(`${ontimeURL}/new`, initialData);
 }

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

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { ProjectData } from 'ontime-types';
+
+import { projectDataURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch project data
+ * @return {Promise}
+ */
+export async function getProjectData(): Promise<ProjectData> {
+  const res = await axios.get(projectDataURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate project data
+ * @return {Promise}
+ */
+export async function postProjectData(data: ProjectData) {
+  return axios.post(projectDataURL, data);
+}

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

@@ -1,15 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { EVENT_DATA } from '../api/apiConstants';
-import { fetchEventData } from '../api/eventDataApi';
-import { eventDataPlaceholder } from '../models/EventData';
+import { PROJECT_DATA } from '../api/apiConstants';
+import { getProjectData } from '../api/projectDataApi';
+import { projectDataPlaceholder } from '../models/ProjectData';
 
-export default function useEventData() {
+export default function useProjectData() {
   const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: EVENT_DATA,
-    queryFn: fetchEventData,
-    placeholderData: eventDataPlaceholder,
+    queryKey: PROJECT_DATA,
+    queryFn: getProjectData,
+    placeholderData: projectDataPlaceholder,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/models/ProjectData.ts

@@ -1,6 +1,6 @@
-import { EventData } from 'ontime-types';
+import { ProjectData } from 'ontime-types';
 
-export const eventDataPlaceholder: EventData = {
+export const projectDataPlaceholder: ProjectData = {
   title: '',
   description: '',
   publicUrl: '',

apps/client/src/features/cuesheet/CuesheetWrapper.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { EventData, OntimeRundownEntry } from 'ontime-types';
+import { OntimeRundownEntry, ProjectData } from 'ontime-types';
 
 import Empty from '../../common/components/state/Empty';
 import { useEventAction } from '../../common/hooks/useEventAction';
@@ -69,7 +69,7 @@ export default function CuesheetWrapper() {
   );
 
   const exportHandler = useCallback(
-    (headerData: EventData) => {
+    (headerData: ProjectData) => {
       if (!headerData || !rundown || !userFields) {
         return;
       }

apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx

@@ -3,12 +3,12 @@ import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
-import { EventData, Playback } from 'ontime-types';
+import { Playback, ProjectData } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import useFullscreen from '../../../common/hooks/useFullscreen';
 import { useTimer } from '../../../common/hooks/useSocket';
-import useEventData from '../../../common/hooks-query/useEventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 import { formatTime } from '../../../common/utils/time';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { useCuesheetSettings } from '../store/CuesheetSettings';
@@ -17,7 +17,7 @@ import PlaybackIcon from '../tableElements/PlaybackIcon';
 import style from './CuesheetTableHeader.module.scss';
 
 interface CuesheetTableHeaderProps {
-  handleCSVExport: (headerData: EventData) => void;
+  handleCSVExport: (headerData: ProjectData) => void;
   featureData: {
     playback: Playback;
     selectedEventIndex: number | null;
@@ -33,11 +33,11 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
   const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
   const timer = useTimer();
   const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { data: event } = useEventData();
+  const { data: project } = useProjectData();
 
   const exportCsv = () => {
-    if (event) {
-      handleCSVExport(event);
+    if (project) {
+      handleCSVExport(project);
     }
   };
 
@@ -58,7 +58,7 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
   return (
     <div className={style.header}>
       <div className={style.event}>
-        <div className={style.title}>{event?.title || '-'}</div>
+        <div className={style.title}>{project?.title || '-'}</div>
         <div className={style.eventNow}>{featureData?.titleNow || '-'}</div>
       </div>
       <div className={style.playback}>

apps/client/src/features/cuesheet/cuesheetUtils.ts

@@ -1,5 +1,5 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { EventData, OntimeEntryCommonKeys, OntimeRundown, UserFields } from 'ontime-types';
+import { OntimeEntryCommonKeys, OntimeRundown, ProjectData, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 /**
@@ -38,10 +38,11 @@ export const parseField = (field: keyof OntimeRundown, data: unknown): string =>
  * @param {object} userFields
  * @return {(string[])[]}
  */
-export const makeTable = (headerData: EventData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
+export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
   const data = [
     ['Ontime · Schedule Template'],
-    ['Event Name', headerData?.title || ''],
+    ['Project Title', headerData?.title || ''],
+    ['Project Description', headerData?.description || ''],
     ['Public URL', headerData?.publicUrl || ''],
     ['Backstage URL', headerData?.backstageUrl || ''],
     [],

apps/client/src/features/info/info-header/InfoHeader.tsx

@@ -1,9 +1,9 @@
-import useEventData from '../../../common/hooks-query/useEventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 
 import style from '../Info.module.scss';
 
 export default function InfoHeader({ selected }: { selected: string }) {
-  const { data } = useEventData();
+  const { data } = useProjectData();
 
   return (
     <>

apps/client/src/features/modals/quick-start/QuickStart.tsx

@@ -16,12 +16,12 @@ import {
   ModalOverlay,
   Textarea,
 } from '@chakra-ui/react';
-import type { EventData } from 'ontime-types';
+import type { ProjectData } from 'ontime-types';
 
-import { EVENT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
+import { PROJECT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
 import { postNew } from '../../../common/api/ontimeApi';
-import useEventData from '../../../common/hooks-query/useEventData';
-import { eventDataPlaceholder } from '../../../common/models/EventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
 import { ontimeQueryClient } from '../../../common/queryClient';
 
 import styles from '../Modal.module.scss';
@@ -32,7 +32,7 @@ interface QuickStartProps {
 }
 
 export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
-  const { data, status } = useEventData();
+  const { data, status } = useProjectData();
   const {
     handleSubmit,
     register,
@@ -49,10 +49,10 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
     if (data) reset(data);
   }, [data, reset]);
 
-  const onSubmit = async (data: Partial<EventData>) => {
+  const onSubmit = async (data: Partial<ProjectData>) => {
     try {
       await postNew(data);
-      await ontimeQueryClient.invalidateQueries(EVENT_DATA);
+      await ontimeQueryClient.invalidateQueries(PROJECT_DATA);
       await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE);
 
       onClose();
@@ -61,7 +61,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
     }
   };
 
-  const onReset = () => reset(eventDataPlaceholder);
+  const onReset = () => reset(projectDataPlaceholder);
 
   const disableButtons = status !== 'success' || isSubmitting;
   return (
@@ -86,13 +86,13 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
               <div className={styles.column}>
                 <AlertTitle>Note</AlertTitle>
                 <AlertDescription>
-                  On submit, application options will be kept but rundown and event data will be reset
+                  On submit, application options will be kept but rundown and project data will be reset
                 </AlertDescription>
               </div>
             </Alert>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Event title
+                Project title
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -104,7 +104,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Event description
+                Project description
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -116,7 +116,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Public Info
+                Public info
                 <Textarea
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -128,7 +128,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Public QR Code Url
+                Public QR code Url
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -139,7 +139,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Backstage Info
+                Backstage info
                 <Textarea
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -151,7 +151,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Backstage QR Code Url
+                Backstage QR code Url
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'

apps/client/src/features/modals/settings-modal/ProjectDataForm.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { Input, Textarea } from '@chakra-ui/react';
-import { EventData } from 'ontime-types';
+import { ProjectData } from 'ontime-types';
 
 import { logAxiosError } from '../../../common/api/apiUtils';
-import { postEventData } from '../../../common/api/eventDataApi';
-import useEventData from '../../../common/hooks-query/useEventData';
+import { postProjectData } from '../../../common/api/projectDataApi';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 import ModalLoader from '../modal-loader/ModalLoader';
 import { inputProps } from '../modalHelper';
 import ModalInput from '../ModalInput';
@@ -13,14 +13,14 @@ import OntimeModalFooter from '../OntimeModalFooter';
 
 import style from './SettingsModal.module.scss';
 
-export default function EventDataForm() {
-  const { data, status, isFetching, refetch } = useEventData();
+export default function ProjectDataForm() {
+  const { data, status, isFetching, refetch } = useProjectData();
   const {
     handleSubmit,
     register,
     reset,
     formState: { errors, isSubmitting, isDirty, isValid },
-  } = useForm<EventData>({
+  } = useForm<ProjectData>({
     defaultValues: data,
     values: data,
     resetOptions: {
@@ -34,11 +34,11 @@ export default function EventDataForm() {
     }
   }, [data, reset]);
 
-  const onSubmit = async (formData: EventData) => {
+  const onSubmit = async (formData: ProjectData) => {
     try {
-      await postEventData(formData);
+      await postProjectData(formData);
     } catch (error) {
-      logAxiosError('Error saving event settings', error);
+      logAxiosError('Error saving project data', error);
     } finally {
       await refetch();
     }
@@ -55,10 +55,10 @@ export default function EventDataForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} id='event-data' className={style.sectionContainer}>
+    <form onSubmit={handleSubmit(onSubmit)} id='project-data' className={style.sectionContainer}>
       <ModalInput
         field='title'
-        title='Event title'
+        title='Project title'
         description='Shown in overview screens'
         error={errors.title?.message}
       >
@@ -73,7 +73,7 @@ export default function EventDataForm() {
       </ModalInput>
       <ModalInput
         field='description'
-        title='Event description'
+        title='Project description'
         description='Free field, shown in editor'
         error={errors.description?.message}
       >
@@ -87,7 +87,7 @@ export default function EventDataForm() {
         />
       </ModalInput>
       <div style={{ height: '16px' }} />
-      <ModalInput field='publicInfo' title='Public Info' description='Information shown in public screens'>
+      <ModalInput field='publicInfo' title='Public info' description='Information shown in public screens'>
         <Textarea
           {...inputProps}
           variant='ontime-filled-on-light'
@@ -107,7 +107,7 @@ export default function EventDataForm() {
         />
       </ModalInput>
       <div style={{ height: '16px' }} />
-      <ModalInput field='backstageInfo' title='Backstage Info' description='Information shown in public screens'>
+      <ModalInput field='backstageInfo' title='Backstage info' description='Information shown in public screens'>
         <Textarea
           {...inputProps}
           variant='ontime-filled-on-light'
@@ -128,7 +128,7 @@ export default function EventDataForm() {
         />
       </ModalInput>
       <OntimeModalFooter
-        formId='event-data'
+        formId='project-data'
         handleRevert={onReset}
         isDirty={isDirty}
         isValid={isValid}

apps/client/src/features/modals/settings-modal/SettingsModal.tsx

@@ -6,7 +6,7 @@ import AliasesForm from './AliasesForm';
 import AppSettingsModal from './AppSettings';
 import CuesheetSettingsForm from './CuesheetSettingsForm';
 import EditorSettings from './EditorSettings';
-import EventDataForm from './EventDataForm';
+import ProjectDataForm from './ProjectDataForm';
 import ViewSettingsForm from './ViewSettingsForm';
 
 interface ModalManagerProps {
@@ -22,7 +22,7 @@ export default function SettingsModal(props: ModalManagerProps) {
         <Tabs variant='ontime' size='sm' isLazy>
           <TabList>
             <Tab>App</Tab>
-            <Tab>Event Data</Tab>
+            <Tab>Project Data</Tab>
             <Tab>Editor</Tab>
             <Tab>Cuesheet</Tab>
             <Tab>Views</Tab>
@@ -33,7 +33,7 @@ export default function SettingsModal(props: ModalManagerProps) {
               <AppSettingsModal />
             </TabPanel>
             <TabPanel>
-              <EventDataForm />
+              <ProjectDataForm />
             </TabPanel>
             <TabPanel>
               <EditorSettings />

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -3,7 +3,7 @@ import { ComponentType, useMemo } from 'react';
 import { TitleBlock } from 'ontime-types';
 import { useStore } from 'zustand';
 
-import useEventData from '../../common/hooks-query/useEventData';
+import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { runtime } from '../../common/stores/runtime';
@@ -18,7 +18,7 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
 
     // HTTP API data
     const { data: rundownData } = useRundown();
-    const { data: eventData } = useEventData();
+    const { data: project } = useProjectData();
     const { data: viewSettings } = useViewSettings();
 
     const publicEvents = useMemo(() => {
@@ -104,7 +104,7 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
         publicSelectedId={publicSelectedId}
         viewSettings={viewSettings}
         nextId={nextId}
-        general={eventData}
+        general={project}
         onAir={onAir}
       />
     );

apps/client/src/features/viewers/backstage/Backstage.scss

@@ -25,7 +25,7 @@
 
   /* =================== HEADER + EXTRAS ===================*/
 
-  .event-header {
+  .project-header {
     grid-area: header;
     font-size: clamp(32px, 4.5vw, 64px);
     font-weight: 600;

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Message, OntimeEvent, SupportedEvent, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, SupportedEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -34,7 +34,7 @@ interface BackstageProps {
   time: TimeManagerType;
   backstageEvents: OntimeEvent[];
   selectedId: string | null;
-  general: EventData;
+  general: ProjectData;
   viewSettings: ViewSettings;
 }
 
@@ -93,7 +93,7 @@ export default function Backstage(props: BackstageProps) {
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <NavigationMenu />
       <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
-      <div className='event-header'>
+      <div className='project-header'>
         {general.title}
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
+import { Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -19,7 +19,6 @@ interface MinimalTimerProps {
   pres: TimerMessage;
   time: TimeManagerType;
   viewSettings: ViewSettings;
-  general: EventData;
 }
 
 export default function MinimalTimer(props: MinimalTimerProps) {

apps/client/src/features/viewers/public/Public.scss

@@ -24,7 +24,7 @@
 
   /* =================== HEADER + EXTRAS ===================*/
 
-  .event-header {
+  .project-header {
     grid-area: header;
     font-size: clamp(32px, 4.5vw, 64px);
     font-weight: 600;

apps/client/src/features/viewers/public/Public.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Message, OntimeEvent, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -32,7 +32,7 @@ interface BackstageProps {
   time: TimeManagerType;
   events: OntimeEvent[];
   publicSelectedId: string | null;
-  general: EventData;
+  general: ProjectData;
   viewSettings: ViewSettings;
 }
 
@@ -58,7 +58,7 @@ export default function Public(props: BackstageProps) {
     <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
       <NavigationMenu />
       <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
-      <div className='event-header'>
+      <div className='project-header'>
         {general.title}
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>

apps/client/src/features/viewers/timer/Timer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
+import { Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -40,7 +40,6 @@ const titleVariants = {
 
 interface TimerProps {
   isMirrored: boolean;
-  general: EventData;
   pres: TimerMessage;
   title: TitleManager;
   time: TimeManagerType;