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