chore: BooleanStyle as functional component (#2921)

dhis2 · Aug 9, 2023 · 5fbf249 · 5fbf249
1 parent dbdcc2f
commit 5fbf249
Showing 1 changed file with 36 additions and 39 deletions.
diff --git a/src/components/dataItem/BooleanStyle.js b/src/components/dataItem/BooleanStyle.js
@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 import { setBooleanStyle } from '../../actions/layerEdit.js'
 import { qualitativeColors } from '../../constants/colors.js'
 import OptionStyle from '../optionSet/OptionStyle.js'
@@ -10,52 +10,49 @@ const style = {
     marginTop: 20,
 }
 
-class BooleanStyle extends Component {
-    static propTypes = {
-        setBooleanStyle: PropTypes.func.isRequired,
-        valueType: PropTypes.string.isRequired,
-        values: PropTypes.shape({
-            true: PropTypes.string.isRequired,
-            false: PropTypes.string,
-        }),
-    }
-
-    componentDidMount() {
-        const { valueType, values, setBooleanStyle } = this.props
+const BooleanStyle = ({ valueType, values }) => {
+    const dispatch = useDispatch()
 
+    useEffect(() => {
         if (!values) {
-            setBooleanStyle('true', qualitativeColors[0])
+            dispatch(setBooleanStyle('true', qualitativeColors[0]))
 
             if (valueType === 'BOOLEAN') {
-                setBooleanStyle('false', qualitativeColors[1])
+                dispatch(setBooleanStyle('false', qualitativeColors[1]))
             }
         }
-    }
+    }, [dispatch, valueType, values])
 
-    render() {
-        const { valueType, values, setBooleanStyle } = this.props
-
-        if (!values) {
-            return null
-        }
+    if (!values) {
+        return null
+    }
 
-        return (
-            <div style={style}>
+    return (
+        <div style={style}>
+            <OptionStyle
+                name={i18n.t('Yes')}
+                color={values.true}
+                onChange={(color) => dispatch(setBooleanStyle('true', color))}
+            />
+            {valueType === 'BOOLEAN' && (
                 <OptionStyle
-                    name={i18n.t('Yes')}
-                    color={values.true}
-                    onChange={(color) => setBooleanStyle('true', color)}
+                    name={'No'}
+                    color={values.false}
+                    onChange={(color) =>
+                        dispatch(setBooleanStyle('false', color))
+                    }
                 />
-                {valueType === 'BOOLEAN' ? (
-                    <OptionStyle
-                        name={'No'}
-                        color={values.false}
-                        onChange={(color) => setBooleanStyle('false', color)}
-                    />
-                ) : null}
-            </div>
-        )
-    }
+            )}
+        </div>
+    )
+}
+
+BooleanStyle.propTypes = {
+    valueType: PropTypes.string.isRequired,
+    values: PropTypes.shape({
+        true: PropTypes.string.isRequired,
+        false: PropTypes.string,
+    }),
 }
 
-export default connect(null, { setBooleanStyle })(BooleanStyle)
+export default BooleanStyle