Radio buttons not toggling, checked or highlighted

Viewed 36
import React, { useState, useEffect, Fragment } from "react";
import Button from "../../../Resources/Forms/Button";
import Switch from "../../../Resources/Forms/Switch";
import { POST } from "../../../Utils/api";
import Radio from "../../../Resources/Forms/Radio";
import withAppData from "../../../HOC/withAppData";

const InventorySettings = (props) => {
    const [state, setState] = useState({});
    const [isSaving, setIsSaving] = useState();
    const [isStockRequestChecked, setIsStockRequestChecked] = useState(false);

    const getStatus = id => {
        return props.context.isSettingsActivated(id) ? 1 : 0;
    };

    const setBusinessSettings = async () => {
        const defaultSettings = [
            { state: "enableStockRequest", id: 53 },
            { state: "connectWarehousePickStock", id: 52 },
            { state: "approveRequestOtp", id: 51 },
            { state: "approveRequestManually", id: 50 }
        ];
        for (const setting of defaultSettings) {
            await setState({ [setting.state]: getStatus(setting.id) });
        }
    };

    function chooseApprovalMethod(methodType) {
        const currentValue = state[methodType];
        setState({[methodType]
            : currentValue === 1 ? 0: 1})
    }

    async function saveApprovalMethod() {
        setIsSaving(true)
        const approvalSettings = [{text:"approvalRequestManually", id: 51}, {text:"approveRequestOtp", id: 50}]
        for(const el of approvalSettings) {
            const currentValue = state[el.text];
            const data = {
                settingId: el.id,
                status: currentValue
            }
           await POST(`Common/AddBusinessSetting`, data);
    }
        setIsSaving(false);
        props.context.getBusinessSettings();
    }

    const updateBasicSettings = async (id, key) => {    
        setState({ [key]: !state[key] ? 1 : 0 });
            const data = {
                SettingId: id,
                Status: state[key],
            };
            await POST(`Common/AddBusinessSetting`, data);
            props.context.getBusinessSettings();
    };

    useEffect(() => {
        setBusinessSettings();
    }, []);

    return (
        <Fragment>
        <div className="basic-settings-section">
            <Switch
                label={"Connect Warehouse Stock to pick stock"}
                light={true}
                checked={state && state.connectWarehousePickStock === 1}
                onChange={() => updateBasicSettings(52, "connectWarehousePickStock")}
            ></Switch>
        </div>
        <div className="basic-settings-section">
            <Switch
                label={"Stock Request"}
                light={true}
                checked={isStockRequestChecked}
                onChange={() => setIsStockRequestChecked(!isStockRequestChecked)}
            ></Switch>
            {isStockRequestChecked && (
                <div className="basic-settings-plan-generate">
                    <div
                        className="form__label"
                        style={{ padding: "2px", marginBottom: "20px" }}
                    >
                        <p>Please choose an approval method</p>
                    </div>
                    <Radio
                        label={"Manual Approval"}
                        name="approval"
                        value="50"
                        id="50"
                        checked={state && state.approveRequestManually === 1}
                        // onChange={() => (chooseApprovalMethod)}
                    />
                    <Radio
                        label={"OTP Approval"}
                        name="approval"
                        value="51"
                        id="51"
                        checked={state && state.approveRequestOtp === 1}
                        // onChange={() => (chooseApprovalMethod)}
                    />
                    <div className="password-settings-btn"
                        // onClick={props.context.showToast}
                    >
                        <Button
                            type={"outline"}
                            size={"medium"}
                            text={"Save"}
                            disabled={!state.approveRequestOtp && !state.approveRequestManually}
                            withMargin={false}
                            loading={isSaving}
                            onClick={saveApprovalMethod}
                        ></Button>
                    </div>
                </div>
            )}
        </div>
    </Fragment>
    );
}
export default withAppData(InventorySettings);

I added the chooseApprovalMethod function to the radio buttons but still I wasn't getting it well. So I had to call there state using state.text is equal to 1. Please help me out I don't think I know what I'm doing anymore.

Please above are my code, the radio buttons aren't checking or highlighting, so I want them to be checked when clicked on, and I want there ids to be saved when clicking on the save button.

So please guys help me out, as I don't understand it anymore.

0 Answers
Related