refactor: table mode and context

apps/client/src/features/rundown/rundown-event/RundownEventInner.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import {
   IoArrowDown,
   IoArrowUp,
@@ -76,17 +76,11 @@ function RundownEventInner({
   isLinkedToLoaded,
   hasTriggers,
 }: RundownEventInnerProps) {
-  const [renderInner, setRenderInner] = useState(false);
-
   const [editorMode] = useSessionStorage({
     key: sessionKeys.editorMode,
     defaultValue: AppMode.Edit,
   });
 
-  useEffect(() => {
-    setRenderInner(true);
-  }, []);
-
   const eventIsPlaying = playback === Playback.Play;
   const eventIsPaused = playback === Playback.Pause;
 
@@ -97,7 +91,7 @@ function RundownEventInner({
     playBtnStyles._hover = {};
   }
 
-  return !renderInner ? null : (
+  return (
     <>
       <div className={cx([style.eventTimers, editorMode === AppMode.Edit && style.editMode])}>
         <TimeInputFlow
@@ -161,8 +155,7 @@ function RundownEventInner({
   );
 }
 
-function EndActionIcon(props: { action: EndAction; className: string }) {
-  const { action, className } = props;
+function EndActionIcon({ action, className }: { action: EndAction; className: string }) {
   const maybeActiveClasses = cx([action !== EndAction.None && style.active, className]);
 
   if (action === EndAction.LoadNext) {
@@ -174,8 +167,7 @@ function EndActionIcon(props: { action: EndAction; className: string }) {
   return <IoPlay className={className} />;
 }
 
-function TimerIcon(props: { type: TimerType; className: string }) {
-  const { type, className } = props;
+function TimerIcon({ type, className }: { type: TimerType; className: string }) {
   if (type === TimerType.CountUp) {
     return <IoArrowUp className={className} />;
   }