refactor: table mode and context

apps/client/src/features/rundown/RundownExport.tsx

@@ -5,18 +5,23 @@ import * as Editor from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
 import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../externals';
 import { AppMode, sessionKeys } from '../../ontimeConfig';
+import EditorEditModal from '../../views/cuesheet/cuesheet-edit-modal/EditorEditModal';
 
-import { RundownActionsProvider } from './context/RundownActionsContext';
 import RundownEntryEditor from './entry-editor/RundownEntryEditor';
 import FinderPlacement from './placements/FinderPlacement';
 import { RundownContextMenu } from './rundown-context-menu/RundownContextMenu';
-import RundownWrapper, { RundownViewMode } from './RundownWrapper';
+import RundownHeader from './rundown-header/RundownHeader';
+import RundownHeaderMobile from './rundown-header/RundownHeaderMobile';
+import RundownTable from './rundown-table/RundownTable';
+import RundownList from './RundownList';
+import { DEFAULT_RUNDOWN_VIEW_MODE, RUNDOWN_VIEW_MODE_STORAGE_KEY, RundownViewMode } from './rundownViewMode';
 
 import style from './RundownExport.module.scss';
 
@@ -29,15 +34,15 @@ function RundownExport() {
     defaultValue: AppMode.Edit,
   });
   const [viewMode, setViewMode] = useSessionStorage<RundownViewMode>({
-    key: 'rundown-view-mode',
-    defaultValue: 'list',
+    key: RUNDOWN_VIEW_MODE_STORAGE_KEY,
+    defaultValue: DEFAULT_RUNDOWN_VIEW_MODE,
   });
   const isSmallDevice = useIsSmallDevice();
   const entryActions = useEntryActions();
 
   if (isSmallDevice && isExtracted) {
     return (
-      <RundownActionsProvider actions={entryActions}>
+      <EntryActionsProvider actions={entryActions}>
         <ProtectRoute permission='editor'>
           <div
             className={cx([style.rundownExport, style.extracted])}
@@ -48,20 +53,20 @@ function RundownExport() {
             <ViewNavigationMenu suppressSettings />
             <div className={style.rundown}>
               <ErrorBoundary>
-                <RundownWrapper isSmallDevice viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownRoot isSmallDevice viewMode={viewMode} setViewMode={setViewMode} />
                 <RundownContextMenu />
               </ErrorBoundary>
             </div>
           </div>
         </ProtectRoute>
-      </RundownActionsProvider>
+      </EntryActionsProvider>
     );
   }
 
   const hideSideBar = (isExtracted && editorMode === 'run') || viewMode === 'table';
 
   return (
-    <RundownActionsProvider actions={entryActions}>
+    <EntryActionsProvider actions={entryActions}>
       <ProtectRoute permission='editor'>
         <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
           <FinderPlacement />
@@ -70,7 +75,7 @@ function RundownExport() {
             <Editor.Panel className={style.list}>
               <ErrorBoundary>
                 {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-                <RundownWrapper viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownRoot viewMode={viewMode} setViewMode={setViewMode} />
                 <RundownContextMenu />
               </ErrorBoundary>
             </Editor.Panel>
@@ -84,6 +89,22 @@ function RundownExport() {
           </div>
         </div>
       </ProtectRoute>
-    </RundownActionsProvider>
+    </EntryActionsProvider>
+  );
+}
+
+interface RundownRootProps {
+  isSmallDevice?: boolean;
+  viewMode: RundownViewMode;
+  setViewMode: (mode: RundownViewMode) => void;
+}
+
+function RundownRoot({ isSmallDevice, viewMode, setViewMode }: RundownRootProps) {
+  return (
+    <div className={style.rundownRoot}>
+      {isSmallDevice ? <RundownHeaderMobile /> : <RundownHeader viewMode={viewMode} setViewMode={setViewMode} />}
+      {viewMode === 'list' ? <RundownList /> : <RundownTable />}
+      <EditorEditModal />
+    </div>
   );
 }