factorio-server-manager/ui/App/views/Mods/components/CreateModPack.jsx

import React, {useState} from "react";
import Button from "../../../components/Button";
import Modal from "../../../components/Modal";
import Label from "../../../components/Label";
import Input from "../../../components/Input";
import {useForm} from "react-hook-form";
import modsResource from "../../../../api/resources/mods";

const CreateModPack = ({onSuccess}) => {

    const [isCreating, setIsCreating] = useState(false);
    const [isOpen, setIsOpen] = useState(false);

    const {handleSubmit, register} = useForm();

    const createModPack = (data) => {
        setIsCreating(true);

        modsResource.packs
            .create(data.name)
            .then(onSuccess)
            .finally(() => {
                setIsCreating(false)
                setIsOpen(false);
            });
    }

    return <>
        <Button size="sm" onClick={() => setIsOpen(true)}>Add ModPack with current installed Mods</Button>
        <Modal title="Create Mod Pack" isOpen={isOpen} content={
            <form onSubmit={handleSubmit(createModPack)}>
                <div className="mb-4">
                    <Label text="Name" htmlFor="name"/>
                    <Input name="name" inputRef={register({required: true})}/>
                </div>
                <Button size="sm" isLoading={isCreating} isSubmit={true}>Create</Button>
            </form>
        }
        actions={
            <Button onClick={() => setIsOpen(false)} size="sm" type="danger">Cancel</Button>
        }
        />
    </>
}

export default CreateModPack;