refactor: checkbox component

src/common/Checkbox/Checkbox.tsx

@@ -1,65 +1,47 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useState, useEffect, useCallback, DetailedHTMLProps, HTMLAttributes } from 'react';
+import React, { useCallback, DetailedHTMLProps, HTMLAttributes, ChangeEvent } from 'react';
 import classNames from 'classnames';
 import styles from './Checkbox.less';
 import Icon from '@stremio/stremio-icons/react';
 
 type Props = {
     disabled?: boolean;
-    value?: boolean;
+    checked?: boolean;
     className?: string;
     onChange?: (checked: boolean) => void;
     ariaLabel?: string;
     error?: string;
 };
 
-const Checkbox = ({ disabled, value, className, onChange, ariaLabel, error }: Props) => {
-    const [isChecked, setIsChecked] = useState(false);
-    const [isError, setIsError] = useState(false);
-    const [isDisabled, setIsDisabled] = useState(disabled);
+const Checkbox = ({ disabled, checked, className, onChange, ariaLabel, error }: Props) => {
 
-    const handleChangeCheckbox = useCallback(() => {
-        if (disabled) {
-            return;
+    const handleChangeCheckbox = useCallback(({ target }: ChangeEvent<HTMLInputElement>) => {
+        onChange && onChange(target.checked);
+    }, [onChange]);
+
+    const onKeyDown = useCallback(({ key }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+        if ((key === 'Enter' || key === ' ') && !disabled) {
+            onChange && onChange(!checked);
         }
-
-        setIsChecked(!isChecked);
-        onChange && onChange(!isChecked);
-    }, [disabled]);
-
-    const handleEnterPress = useCallback((event: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
-        if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
-            setIsChecked(!isChecked);
-            onChange && onChange(!isChecked);
-        }
-    }, [disabled]);
-
-    useEffect(() => setIsDisabled(disabled), [disabled]);
-
-    useEffect(() => setIsError(!!error), [error]);
-
-    useEffect(() => {
-        const checked = typeof value === 'boolean' ? value : false;
-        setIsChecked(checked);
-    }, [value]);
+    }, [disabled, checked, onChange]);
 
     return (
         <div className={classNames(styles['checkbox'], className)}>
             <label>
                 <div
                     className={classNames({
-                        [styles['checkbox-checked']]: isChecked,
-                        [styles['checkbox-unchecked']]: !isChecked,
-                        [styles['checkbox-error']]: isError,
-                        [styles['checkbox-disabled']]: isDisabled,
+                        [styles['checkbox-checked']]: checked,
+                        [styles['checkbox-unchecked']]: !checked,
+                        [styles['checkbox-error']]: error,
+                        [styles['checkbox-disabled']]: disabled,
                     })}
                 >
                     <div
                         className={styles['checkbox-container']}
                         role={'input'}
                         tabIndex={0}
-                        onKeyDown={handleEnterPress}
+                        onKeyDown={onKeyDown}
                     >
                         <input
                             type={'checkbox'}
@@ -69,7 +51,7 @@ const Checkbox = ({ disabled, value, className, onChange, ariaLabel, error }: Pr
                             disabled={disabled}
                         />
                         {
-                            isChecked ?
+                            checked ?
                                 <Icon name={'checkmark'} className={styles['checkbox-icon']} />
                                 : null
                         }

src/routes/Settings/URLsManager/Item/Item.tsx

@@ -36,7 +36,7 @@ const Item = ({ url }: Props) => {
     return (
         <div className={styles['item']}>
             <div className={styles['content']}>
-                <Checkbox className={styles['check']} value={selected} onChange={handleSelect} disabled={selected} />
+                <Checkbox className={styles['check']} checked={selected} onChange={handleSelect} disabled={selected} />
                 <div className={styles['label']}>{url}</div>
             </div>
             <div className={styles['actions']}>