refract: handle warnings

client/src/features/control/MessageControl.jsx

@@ -93,8 +93,8 @@ export default function MessageControl() {
             <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
-            active={pres.visible}
-            clickHandler={() => messageControl('toggle-pres-visible')}
+            active={pres.visible || undefined}
+            clickhandler={() => messageControl('toggle-pres-visible')}
             {...inputProps}
           />
         </div>
@@ -113,8 +113,8 @@ export default function MessageControl() {
             <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
-            active={publ.visible}
-            clickHandler={() => messageControl('toggle-publ-visible')}
+            active={publ.visible || undefined}
+            clickhandler={() => messageControl('toggle-publ-visible')}
             {...inputProps}
           />
         </div>
@@ -134,8 +134,8 @@ export default function MessageControl() {
           </Editable>
 
           <VisibleIconBtn
-            active={lower.visible}
-            clickHandler={() => messageControl('toggle-lower-visible')}
+            active={lower.visible || undefined}
+            clickhandler={() => messageControl('toggle-lower-visible')}
             {...inputProps}
           />
         </div>

client/src/features/control/PlaybackControl.jsx

@@ -115,28 +115,28 @@ export default function PlaybackControl() {
       <div className={style.playbackContainer}>
         <StartIconBtn
           active={playback === 'start'}
-          clickHandler={() => playbackControl('start')}
+          clickhandler={() => playbackControl('start')}
           disabled={!selectedId}
         />
         <PauseIconBtn
           active={playback === 'pause'}
-          clickHandler={() => playbackControl('pause')}
+          clickhandler={() => playbackControl('pause')}
           disabled={!selectedId}
         />
         <RollIconBtn
           active={playback === 'roll'}
-          clickHandler={() => playbackControl('roll')}
+          clickhandler={() => playbackControl('roll')}
         />
       </div>
       <div className={style.playbackContainer}>
-        <PrevIconBtn clickHandler={() => playbackControl('previous')} />
-        <NextIconBtn clickHandler={() => playbackControl('next')} />
+        <PrevIconBtn clickhandler={() => playbackControl('previous')} />
+        <NextIconBtn clickhandler={() => playbackControl('next')} />
         <UnloadIconBtn
-          clickHandler={() => playbackControl('unload')}
+          clickhandler={() => playbackControl('unload')}
           disabled={!selectedId}
         />
         <ReloadIconButton
-          clickHandler={() => playbackControl('reload')}
+          clickhandler={() => playbackControl('reload')}
           disabled={!selectedId}
         />
       </div>

client/src/features/editors/Editor.jsx

@@ -71,7 +71,7 @@ export default function Editor() {
               paddingTop: '3em',
             }}
           >
-            <SettingsIconBtn size='md' clickHandler={onOpen} />
+            <SettingsIconBtn size='md' clickhandler={onOpen} />
             <div
               style={{
                 width: 35,

client/src/features/editors/list/BlockBlock.jsx

@@ -18,7 +18,7 @@ export default function BlockBlock(props) {
   return (
     <div className={style.block}>
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
+        <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons
           showAdd
           addHandler={addHandler}

client/src/features/editors/list/DelayBlock.jsx

@@ -27,7 +27,7 @@ export default function DelayBlock(props) {
         submitHandler={submitHandler}
       />
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
+        <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons showAdd addHandler={addHandler} />
       </div>
     </div>

client/src/features/editors/list/EventBlock.jsx

@@ -113,10 +113,10 @@ export default function EventBlock(props) {
       </div>
       <div className={style.actionOverlay}>
         <VisibleIconBtn
-          clickHandler={() => setVisible(!visible)}
-          active={visible}
+          clickhandler={() => setVisible(!visible)}
+          active={visible || undefined}
         />
-        <DeleteIconBtn clickHandler={deleteHandler} />
+        <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons
           showAdd
           addHandler={addHandler}

client/src/features/menu/EventListMenu.jsx

@@ -57,7 +57,7 @@ export default function EventListMenu(props) {
           <MenuItem>Download CSV</MenuItem>
         </MenuList>
       </Menu>
-      <AddIconBtn clickHandler={addHandler} size='sm' />
+      <AddIconBtn clickhandler={addHandler} size='sm' />
     </div>
   );
 }