Convert React components to functions

admin/src/Components/CategoryPeriodsInput.js

@@ -1,69 +1,65 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import DatePeriod from "../Models/DatePeriod";
 import { utcToday } from "../utils";
 import DatePeriodInput from "./DatePeriodInput";
-import DatePeriod from "../Models/DatePeriod";
 
-export default class CategoryPeriodsInput extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { periods: [] };
-    }
+const CategoryPeriodsInput = ({ categoryPeriods, showHistoric }) => {
+    const [periods, setPeriods] = useState([]);
 
-    componentDidMount() {
-        const { categoryPeriods } = this.props;
-        categoryPeriods.subscribe(() => {
-            this.setState({ periods: categoryPeriods.periods });
+    useEffect(() => {
+        const unsubscribe = categoryPeriods.subscribe(() => {
+            setPeriods(categoryPeriods.periods);
         });
-    }
-
-    render() {
-        const { category } = this.props.categoryPeriods;
-        const { showHistoric } = this.props;
-        const { periods } = this.state;
 
-        const today = utcToday();
-        const categoryTitle = {
-            labaccess: "Labaccess",
-            special_labaccess: "Access till lokalen (styrelsen etc)",
-            membership: "Medlemsskap",
+        return () => {
+            unsubscribe();
         };
+    }, [categoryPeriods]);
+
+    const { category } = categoryPeriods;
+
+    const today = utcToday();
+    const categoryTitle = {
+        labaccess: "Labaccess",
+        special_labaccess: "Access till lokalen (styrelsen etc)",
+        membership: "Medlemsskap",
+    };
+
+    return (
+        <div>
+            <h4 className="uk-margin-top">{categoryTitle[category]}</h4>
+            {periods.map((p) => {
+                if (!showHistoric && p.end < today) {
+                    return null;
+                }
+                return (
+                    <div key={p.id}>
+                        <DatePeriodInput period={p} />
+                        &nbsp;
+                        <a
+                            onClick={() => categoryPeriods.remove(p)}
+                            className="removebutton"
+                        >
+                            <i className="uk-icon-trash" />
+                        </a>
+                    </div>
+                );
+            })}
+            <button
+                type="button"
+                style={{ marginTop: "2px" }}
+                className="uk-button uk-button-small uk-button-success"
+                onClick={() => {
+                    const period = new DatePeriod();
+                    period.start = utcToday();
+                    period.end = utcToday();
+                    categoryPeriods.add(period);
+                }}
+            >
+                Lägg till period
+            </button>
+        </div>
+    );
+};
 
-        return (
-            <div>
-                <h4 className="uk-margin-top">{categoryTitle[category]}</h4>
-                {periods.map((p) => {
-                    if (!showHistoric && p.end < today) {
-                        return null;
-                    }
-                    return (
-                        <div key={p.id}>
-                            <DatePeriodInput key={p.id} period={p} />
-                            &nbsp;
-                            <a
-                                onClick={() =>
-                                    this.props.categoryPeriods.remove(p)
-                                }
-                                className="removebutton"
-                            >
-                                <i className="uk-icon-trash" />
-                            </a>
-                        </div>
-                    );
-                })}
-                <button
-                    type="button"
-                    style={{ marginTop: "2px" }}
-                    className="uk-button uk-button-small uk-button-success"
-                    onClick={() => {
-                        const period = new DatePeriod();
-                        period.start = utcToday();
-                        period.end = utcToday();
-                        this.props.categoryPeriods.add(period);
-                    }}
-                >
-                    Lägg till period
-                </button>
-            </div>
-        );
-    }
-}
+export default CategoryPeriodsInput;

admin/src/Components/CheckboxInput.jsx

@@ -1,76 +1,76 @@
-import React from "react";
 import classNames from "classnames/bind";
+import React, { useEffect, useState } from "react";
 
-export default class CheckboxInput extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: false,
-            selected: false,
-            isDirty: false,
-        };
-    }
+const CheckboxInput = ({
+    model,
+    name,
+    title,
+    icon,
+    disabled,
+    formrow,
+    tabIndex,
+    label,
+}) => {
+    const [value, setValue] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
 
-    componentDidMount() {
-        const { model, name } = this.props;
-        this.unsubscribe = model.subscribe(() =>
-            this.setState({
-                value: model[name] === "" ? false : model[name],
-                isDirty: model.isDirty(name),
-            }),
-        );
-    }
+    useEffect(() => {
+        const unsubscribe = model.subscribe(() => {
+            setValue(model[name] === "" ? false : model[name]);
+            setIsDirty(model.isDirty(name));
+        });
 
-    componentWillUnmount() {
-        this.unsubscribe();
-    }
+        return () => {
+            unsubscribe();
+        };
+    }, [model, name]);
 
-    render() {
-        const { value, isDirty } = this.state;
-        const { model, name, title, icon, disabled, formrow, tabIndex, label } =
-            this.props;
+    const classes = classNames(name, {
+        "uk-form-row": formrow,
+        changed: isDirty,
+    });
 
-        const classes = classNames(name, {
-            "uk-form-row": formrow,
-            changed: isDirty,
-        });
+    const handleChange = () => {
+        model[name] = !model[name];
+    };
 
-        const input = (
-            <input
-                id={name}
-                name={name}
-                className=""
-                checked={value}
-                disabled={disabled}
-                type="checkbox"
-                tabIndex={tabIndex}
-                onChange={() => (model[name] = !model[name])}
-            />
-        );
+    const input = (
+        <input
+            id={name}
+            name={name}
+            className=""
+            checked={value}
+            disabled={disabled}
+            type="checkbox"
+            tabIndex={tabIndex}
+            onChange={handleChange}
+        />
+    );
 
-        return (
-            <div className={classes}>
-                {label ? (
-                    <label className="uk-form-label" htmlFor={name}>
-                        {title}
-                    </label>
-                ) : null}
-                <div className="uk-form-controls">
-                    {icon ? (
-                        <div className="uk-form-icon">
-                            <i className={"uk-icon-" + icon} />
-                            {input}
-                        </div>
-                    ) : (
-                        input
-                    )}
-                </div>
+    return (
+        <div className={classes}>
+            {label && (
+                <label className="uk-form-label" htmlFor={name}>
+                    {title}
+                </label>
+            )}
+            <div className="uk-form-controls">
+                {icon ? (
+                    <div className="uk-form-icon">
+                        <i className={"uk-icon-" + icon} />
+                        {input}
+                    </div>
+                ) : (
+                    input
+                )}
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 CheckboxInput.defaultProps = {
     formrow: true,
     label: true,
 };
+
+export default CheckboxInput;