refract: handle warnings

client/src/common/components/buttons/AddIconBtn.jsx

@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiPlus } from 'react-icons/fi';
 
 export default function AddIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiPlus />}
       colorScheme='blue'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/BlockIconBtn.jsx

@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiMinusCircle } from 'react-icons/fi';
 
 export default function BlockIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiMinusCircle />}
       colorScheme='purple'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/CollapseIconBtn.jsx

@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiArrowDownCircle } from 'react-icons/fi';
 
 export default function CollapseIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiArrowDownCircle />}
       colorScheme='orange'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/DelayIconBtn.jsx

@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiClock } from 'react-icons/fi';
 
 export default function DelayIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiClock />}
       colorScheme='yellow'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiMinus } from 'react-icons/fi';
 
 export default function DeleteIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiMinus />}
       colorScheme='red'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/NextIconBtn.jsx

@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSkipForward } from 'react-icons/fi';
 
 export default function NextIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiSkipForward />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff11'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiPause } from 'react-icons/fi';
 
 export default function PauseIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       icon={<FiPause />}
       colorScheme='orange'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/PrevIconBtn.jsx

@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSkipBack } from 'react-icons/fi';
 
 export default function PrevIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiSkipBack />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff11'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/ReloadIconBtn.jsx

@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiRefreshCcw } from 'react-icons/fi';
 
 export default function ReloadIconButton(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiRefreshCcw />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff05'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/RollIconBtn.jsx

@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiClock } from 'react-icons/fi';
 
 export default function RollIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       icon={<FiClock />}
       colorScheme='blue'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
       disabled
     />
   );

client/src/common/components/buttons/SettingsIconBtn.jsx

@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSettings } from 'react-icons/fi';
 
 export default function SettingsIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiSettings />}
       isRound
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/StartIconBtn.jsx

@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiPlay } from 'react-icons/fi';
 
 export default function StartIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       icon={<FiPlay />}
       colorScheme='green'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiCornerLeftUp } from 'react-icons/fi';
 
 export default function UnloadIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiCornerLeftUp />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff05'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

client/src/common/components/buttons/VisibleIconBtn.jsx

@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSun } from 'react-icons/fi';
 
 export default function VisibleIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiSun />}
       colorScheme='blue'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }

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>
   );
 }