fix breaking change from react form hooks

ui/App/components/Checkbox.jsx

@@ -1,17 +1,15 @@
 import React from "react";
 
-const Checkbox = ({name, text, inputRef, checked}) => {
+const Checkbox = ({text, register, checked}) => {
     return (
         <label className="block text-gray-500 font-bold">
             <input
                 className="mr-2 leading-tight"
-                ref={inputRef}
+                {...register}
-                name={name}
-                id={name}
                 type="checkbox" defaultChecked={checked}/>
             <span className="text-sm">{text}</span>
         </label>
     )
 }
 
-export default Checkbox;
+export default Checkbox;

ui/App/components/Input.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 
 const Input = ({
-                   name,
+                   register,
-                   inputRef,
                    placeholder = null,
                    type = "text",
                    defaultValue = null,
@@ -16,9 +15,7 @@ const Input = ({
         <input
             className="shadow appearance-none border w-full py-2 px-3 text-black"
             placeholder={placeholder}
-            ref={inputRef}
+            {...register}
-            name={name}
-            id={name}
             type={type}
             onKeyDown={onKeyDown}
             autoComplete={hasAutoComplete ? "on" : "off"}
@@ -30,4 +27,4 @@ const Input = ({
     )
 }
 
-export default Input;
+export default Input;

ui/App/components/InputPassword.jsx

@@ -3,7 +3,7 @@ import React, {useState} from "react";
 import {faEye, faEyeSlash} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
-const InputPassword = ({name, inputRef, defaultValue}) => {
+const InputPassword = ({register, defaultValue}) => {
 
     const [type, setType] = useState("password");
 
@@ -16,7 +16,7 @@ const InputPassword = ({name, inputRef, defaultValue}) => {
 
     return (
         <div className="flex">
-            <Input type={type} name={name} defaultValue={defaultValue} inputRef={inputRef} placeholder="*************"/>
+            <Input type={type} defaultValue={defaultValue} {...register} placeholder="*************"/>
             <div
                 className="accentuated cursor-pointer bg-gray-light flex items-center px-2 text-black"
                 onClick={() => setType(type === "password" ? "text" : "password")}
@@ -26,4 +26,4 @@ const InputPassword = ({name, inputRef, defaultValue}) => {
         </div>
     )
 }
-export default InputPassword;
+export default InputPassword;

ui/App/components/Select.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from "react";
 
-const Select = ({name, inputRef, options, className = "", defaultValue = ""}) => {
+const Select = ({register, options, className = "", defaultValue = ""}) => {
 
     const [value, setValue] = useState(defaultValue);
 
@@ -9,8 +9,7 @@ const Select = ({name, inputRef, options, className = "", defaultValue = ""}) =>
         <select
             className="shadow appearance-none border w-full py-2 px-3 text-black"
             name={name}
-            ref={inputRef}
+            {...register}
-            id={name}
             value={value}
             onChange={optionElement => setValue(optionElement.target.value)}
         >
@@ -28,4 +27,4 @@ const Select = ({name, inputRef, options, className = "", defaultValue = ""}) =>
     )
 }
 
-export default Select;
+export default Select;

ui/App/views/Console.jsx

@@ -1,7 +1,6 @@
 import Panel from "../components/Panel";
 import React, {useEffect, useRef, useState} from "react";
 import socket from "../../api/socket";
-import Input from "../components/Input";
 
 const Console = ({serverStatus}) => {
 
@@ -33,8 +32,9 @@ const Console = ({serverStatus}) => {
                         <ul>
                             {logs?.map((log, i) => (<li key={i}>{log}</li>))}
                         </ul>
-                        <Input type="text"
+                        <input type="text"
-                               inputRef={consoleInput}
+                               className="shadow appearance-none border w-full py-2 px-3 text-black"
+                               ref={consoleInput}
                                onKeyDown={e => {
                                    if (e.key === "Enter" && socket) {
                                        socket.emit("command send", consoleInput.current.value);

ui/App/views/Controls.jsx

@@ -16,7 +16,7 @@ const Controls = ({serverStatus}) => {
     const [isStarting, setIsStarting] = useState(false);
     const [isKilling, setIsKilling] = useState(false);
 
-    const { handleSubmit, register, errors } = useForm();
+    const { handleSubmit, register, formState: {errors} } = useForm();
 
     const startServer = async (data) => {
         if(saves.length === 1 && saves[0].name === "Load Latest") {
@@ -79,20 +79,18 @@ const Controls = ({serverStatus}) => {
                             <div className="lg:w-1/5 mb-2 mr-0 lg:mr-4">
                                 <div className="font-bold">IP</div>
                                 <Input
-                                    name="ip"
                                     defaultValue={"0.0.0.0"}
-                                    inputRef={register({required: true, pattern: '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$'})}
+                                    register={register('ip',{required: true, pattern: '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$'})}
                                 />
                                 <Error error={errors.ip} message="IP is required and must be valid."/>
                             </div>
                             <div className="lg:w-1/5 mb-2 mr-0 lg:mr-4">
                                 <div className="font-bold">Port</div>
                                 <Input
-                                    name="port"
                                     type="number"
                                     min={1}
                                     defaultValue={"34197"}
-                                    inputRef={register({required: true})}
+                                    register={register('port',{required: true})}
                                 />
                                 <Error error={errors.port} message="Port is required"/>
                             </div>
@@ -104,8 +102,7 @@ const Controls = ({serverStatus}) => {
                                 <div className="font-bold">Save</div>
                                 <div className="relative">
                                     <Select
-                                        name="save"
+                                        register={register('save',{required: true})}
-                                        inputRef={register({required: true})}
                                         defaultValue="Load Latest"
                                         options={saves.map(save => new Object({
                                             value: save.name,
@@ -134,4 +131,4 @@ const Controls = ({serverStatus}) => {
     )
 };
 
-export default Controls;
+export default Controls;

ui/App/views/Login.jsx

@@ -10,7 +10,7 @@ import {Flash} from "../components/Flash";
 import Error from "../components/Error";
 
 const Login = ({handleLogin}) => {
-    const {register, handleSubmit, errors} = useForm();
+    const {register, handleSubmit, formState: { errors }} = useForm();
     const history = useHistory();
     const location = useLocation();
 
@@ -47,14 +47,13 @@ const Login = ({handleLogin}) => {
                     <form onSubmit={handleSubmit(onSubmit)}>
                         <div className="mb-4">
                             <Label text="Username" htmlFor="username"/>
-                            <Input inputRef={register({required: true})} name="username" placeholder="Username"/>
+                            <Input register={register('username', {required: true})} placeholder="Username"/>
                             <Error error={errors.username} message="Username is required"/>
                         </div>
                         <div className="mb-6">
                             <Label text="Password" htmlFor="password"/>
                             <Input
-                                inputRef={register({required: true})}
+                                register={register('password',{required: true})}
-                                name="password"
                                 type="password"
                                 placeholder="******************"
                             />
@@ -71,4 +70,4 @@ const Login = ({handleLogin}) => {
     );
 };
 
-export default Login;
+export default Login;

ui/App/views/Mods/components/AddMod/components/AddModForm.jsx

@@ -103,7 +103,7 @@ const AddModForm = ({setIsFactorioAuthenticated, fuse, refetchInstalledMods}) =>
             <div className="mb-4 relative" >
                 <Label text="Mod" htmlFor="mod"/>
                 { typeof fuse !== "undefined"
-                    ? <Input inputRef={register({required: true})} hasAutoComplete={false} name="mod" onKeyDown={handleKeyDown}/>
+                    ? <Input register={register('mod',{required: true})} hasAutoComplete={false} onKeyDown={handleKeyDown}/>
                     : <div className="border border-gray-medium w-full py-2 px-3 text-white">
                         <FontAwesomeIcon icon={faSpinner} spin={true}/> Loading List of Mods from <LinkModPortal/>
                     </div>
@@ -121,4 +121,4 @@ const AddModForm = ({setIsFactorioAuthenticated, fuse, refetchInstalledMods}) =>
     )
 }
 
-export default AddModForm;
+export default AddModForm;

ui/App/views/Mods/components/AddMod/components/FactorioLogin.jsx

@@ -22,11 +22,11 @@ const FactorioLogin = ({setIsFactorioAuthenticated}) => {
             <div className="flex mb-4">
                 <div className="w-1/2 mr-2">
                     <Label text="Username" htmlFor="username"/>
-                    <Input name="username" inputRef={register({required: true})}/>
+                    <Input register={register('username',{required: true})}/>
                 </div>
                 <div className="w-1/2 ml-2">
                     <Label text="Password" htmlFor="password"/>
-                    <Input name="password" type="password" inputRef={register({required: true})}/>
+                    <Input type="password" register={register('password',{required: true})}/>
                 </div>
             </div>
             <Button isSubmit={true}>Login</Button>
@@ -34,4 +34,4 @@ const FactorioLogin = ({setIsFactorioAuthenticated}) => {
     )
 }
 
-export default FactorioLogin;
+export default FactorioLogin;

ui/App/views/Mods/components/CreateModPack.jsx

@@ -31,7 +31,7 @@ const CreateModPack = ({onSuccess}) => {
             <form onSubmit={handleSubmit(createModPack)}>
                 <div className="mb-4">
                     <Label text="Name" htmlFor="name"/>
-                    <Input name="name" inputRef={register({required: true})}/>
+                    <Input register={register('name',{required: true})}/>
                 </div>
                 <Button size="sm" isLoading={isCreating} isSubmit={true}>Create</Button>
             </form>
@@ -43,4 +43,4 @@ const CreateModPack = ({onSuccess}) => {
     </>
 }
 
-export default CreateModPack;
+export default CreateModPack;

ui/App/views/Mods/components/LoadMods.jsx

@@ -36,8 +36,7 @@ const LoadMods = ({refreshMods}) => {
         <form onSubmit={handleSubmit(loadMods)}>
             <Label text="Save" htmlFor="save"/>
             <Select
-                name="save"
+                register={register('save')}
-                inputRef={register}
                 className="mb-4"
                 options={saves?.map(save => new Object({
                     name: save.name,
@@ -49,4 +48,4 @@ const LoadMods = ({refreshMods}) => {
     )
 }
 
-export default LoadMods;
+export default LoadMods;

ui/App/views/Mods/components/UploadMod.jsx

@@ -29,8 +29,7 @@ const UploadMod = ({refetchInstalledMods}) => {
                 <input
                     className="absolute left-0 top-0 opacity-0 cursor-pointer w-full h-full"
                     onChange={e => setFileName(e.currentTarget.files[0].name)}
-                    name="mod_file"
+                    ref={register('mod_file')}
-                    ref={register}
                     id="mod_file"
                     type="file"
                 />
@@ -41,4 +40,4 @@ const UploadMod = ({refetchInstalledMods}) => {
     )
 }
 
-export default UploadMod;
+export default UploadMod;

ui/App/views/Saves/components/CreateSaveForm.jsx

@@ -4,12 +4,10 @@ import React, {useState} from "react";
 import saves from "../../../../api/resources/saves";
 import Label from "../../../components/Label";
 import Input from "../../../components/Input";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faSpinner} from "@fortawesome/free-solid-svg-icons";
 import Error from "../../../components/Error";
 
 const CreateSaveForm = ({onSuccess}) => {
-    const {register, handleSubmit, errors} = useForm();
+    const {register, handleSubmit, formState: {errors}} = useForm();
     const [isLoading, setIsLoading] = useState(false);
 
     const onSubmit = async (data, e) => {
@@ -26,7 +24,7 @@ const CreateSaveForm = ({onSuccess}) => {
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-6">
                 <Label text="Savefile Name" htmlFor="savefile"/>
-                <Input inputRef={register({required: true})} name="savefile"/>
+                <Input register={register('savefile', {required: true})}/>
                 <Error error={errors.savefile} message="Savefile Name is required"/>
             </div>
             <Button type="success" isLoading={isLoading} isSubmit={true}>Create Save</Button>
@@ -34,4 +32,4 @@ const CreateSaveForm = ({onSuccess}) => {
     )
 }
 
-export default CreateSaveForm;
+export default CreateSaveForm;

ui/App/views/Saves/components/UploadSaveForm.jsx

@@ -6,7 +6,7 @@ import Error from "../../../components/Error";
 
 
 const UploadSaveForm = ({onSuccess}) => {
-    const {register, handleSubmit, errors} = useForm();
+    const {register, handleSubmit, formState: {errors}} = useForm();
     const [fileName, setFileName] = useState('Select File ...');
 
     const onSubmit = (data, e) => {
@@ -25,10 +25,9 @@ const UploadSaveForm = ({onSuccess}) => {
                 <div className="relative bg-white shadow text-black w-full">
                     <input
                         className="absolute left-0 top-0 opacity-0 cursor-pointer w-full h-full"
-                        ref={register({required: true})}
+                        register={register('savefile', {required: true})}
                         onChange={e => setFileName(e.currentTarget.files[0].name)}
-                        name="savefile"
+                        type="file"/>
-                        id="savefile" type="file"/>
                     <div className="px-2 py-3">{fileName}</div>
                 </div>
                 <Error error={errors.savefile} message="Savefile is required"/>
@@ -38,4 +37,4 @@ const UploadSaveForm = ({onSuccess}) => {
     )
 }
 
-export default UploadSaveForm;
+export default UploadSaveForm;

ui/App/views/ServerSettings.jsx

@@ -13,7 +13,7 @@ const ServerSettings = () => {
     const [settings, setSettings] = useState();
     const [numberInputs, setNumberInputs] = useState([]);
 
-    const {register, handleSubmit, errors, control} = useForm();
+    const {register, handleSubmit, formState: {errors}, control} = useForm();
 
     const fetchSettings = async () => {
         const res = await settingsResource.server.list();
@@ -67,7 +67,7 @@ const ServerSettings = () => {
                 return (
                     <>
                         <Label htmlFor={name} text={label}/>
-                        <Input type="number" name={name} inputRef={register} valueAsNumber="double" defaultValue={value} />
+                        <Input type="number" register={register} valueAsNumber="double" defaultValue={value} />
                     </>
                 )
             case "string":
@@ -75,27 +75,27 @@ const ServerSettings = () => {
                     return (
                         <>
                             <Label htmlFor={name} text={label}/>
-                            <InputPassword name={name} inputRef={register} defaultValue={value}/>
+                            <InputPassword name={name} register={register} defaultValue={value}/>
                         </>
                     )
                 } else {
                     return (
                         <>
                             <Label htmlFor={name} text={label}/>
-                            <Input name={name} inputRef={register} defaultValue={value}/>
+                            <Input name={name} register={register} defaultValue={value}/>
                         </>
                     )
                 }
             case "boolean":
                 return (
-                    <Checkbox checked={value} text={label} inputRef={register} name={name}/>
+                    <Checkbox checked={value} text={label} register={register} name={name}/>
                 )
             case "object":
                 if (Array.isArray(value)) {
                     return (
                         <>
                             <Label htmlFor={name} text={label}/>
-                            <Input name={name} inputRef={register} defaultValue={value}/>
+                            <Input name={name} register={register} defaultValue={value}/>
                         </>
                     )
                 } else if (name.includes("visibility")) {
@@ -104,7 +104,7 @@ const ServerSettings = () => {
                             <Label text="Visibility"/>
                             <div className="flex">
                                 {Object.keys(value).map(key => <div className="mr-4" key={`visibility-${key}`}>
-                                    <Checkbox checked={value[key]} inputRef={register} text={key} name={`visibility[${key}]`}/>
+                                    <Checkbox checked={value[key]} register={register} text={key} name={`visibility[${key}]`}/>
                                 </div>)}
                             </div>
                         </>
@@ -115,7 +115,7 @@ const ServerSettings = () => {
                 return (
                     <>
                         <Label htmlFor={name} text={label}/>
-                        <Input name={name} inputRef={register} defaultValue={value}/>
+                        <Input name={name} register={register} defaultValue={value}/>
                     </>
                 )
         }
@@ -157,4 +157,4 @@ const ServerSettings = () => {
     )
 }
 
-export default ServerSettings;
+export default ServerSettings;

ui/App/views/UserManagement/components/ChangePasswordForm.jsx

@@ -7,8 +7,7 @@ import Input from "../../../components/Input";
 import Error from "../../../components/Error";
 
 const ChangePasswordForm = () => {
-    const {register, handleSubmit, errors, watch} = useForm();
+    const {register, handleSubmit, formState: {errors}, watch} = useForm();
-    const password = watch('new_password');
 
     const onSubmit = async (data) => {
         const res = await user.changePassword(data);
@@ -22,8 +21,7 @@ const ChangePasswordForm = () => {
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-4">
                 <Label htmlFor="old_password" text="Old Password"/>
-                <Input inputRef={register({required: true})}
+                <Input register={register('old_password',{required: true})}
-                       name="old_password"
                        type="password"
                        placeholder="Old Password"
                 />
@@ -31,8 +29,7 @@ const ChangePasswordForm = () => {
             </div>
             <div className="mb-4">
                 <Label htmlFor="new_password" text="New Password"/>
-                <Input inputRef={register({required: true})}
+                <Input register={register('new_password',{required: true})}
-                       name="new_password"
                        type="password"
                        placeholder="New Password"
                 />
@@ -40,8 +37,7 @@ const ChangePasswordForm = () => {
             </div>
             <div className="mb-4">
                 <Label htmlFor="new_password_confirmation" text="New Password Confirmation"/>
-                <Input inputRef={register({required: true})}
+                <Input register={register('new_password_confirmation',{required: true})}
-                       name="new_password_confirmation"
                        type="password"
                        placeholder="New Password"
                 />
@@ -52,4 +48,4 @@ const ChangePasswordForm = () => {
     )
 }
 
-export default ChangePasswordForm
+export default ChangePasswordForm

ui/App/views/UserManagement/components/CreateUserForm.jsx

@@ -8,7 +8,7 @@ import Error from "../../../components/Error";
 
 const CreateUserForm = ({updateUserList}) => {
 
-    const {register, handleSubmit, errors, watch} = useForm();
+    const {register, handleSubmit, formState: {errors}, watch} = useForm();
     const password = watch('password');
 
     const onSubmit = async (data) => {
@@ -22,8 +22,7 @@ const CreateUserForm = ({updateUserList}) => {
         <form onSubmit={handleSubmit(onSubmit)}>
             <div className="mb-4">
                 <Label htmlFor="username" text="Username"/>
-                <Input inputRef={register({required: true})}
+                <Input register={register('username',{required: true})}
-                       name="username"
                        type="text"
                        placeholder="Username"
                 />
@@ -32,9 +31,7 @@ const CreateUserForm = ({updateUserList}) => {
             <div className="mb-4">
                 <Label htmlFor="role" text="Role" />
                 <input className="shadow appearance-none border w-full py-2 px-3 text-black"
-                       ref={register({required: true})}
+                       {...register('role',{required: true})}
-                       id="role"
-                       name="role"
                        value="admin"
                        disabled={true}
                        type="text"
@@ -44,8 +41,7 @@ const CreateUserForm = ({updateUserList}) => {
             </div>
             <div className="mb-4">
                 <Label htmlFor="email" text="Email"/>
-                <Input inputRef={register({required: true})}
+                <Input register={register('email',{required: true})}
-                       name="email"
                        type="email"
                        placeholder="Email"
                 />
@@ -53,8 +49,7 @@ const CreateUserForm = ({updateUserList}) => {
             </div>
             <div className="mb-4">
                 <Label htmlFor="password" text="Password"/>
-                <Input inputRef={register({required: true})}
+                <Input register={register('password',{required: true})}
-                       name="password"
                        type="password"
                        placeholder="Password"
                 />
@@ -62,8 +57,8 @@ const CreateUserForm = ({updateUserList}) => {
             </div>
             <div className="mb-4">
                 <Label htmlFor="password_confirmation" text="Password Confirmation"/>
-                <Input inputRef={register({required: true, validate: conformation => conformation === password})}
+                <Input register={register('password_confirmation',{required: true, validate: conformation => conformation === password})}
-                       name="password_confirmation"
+
                        type="password"
                        placeholder="Password Confirmation"
                 />
@@ -74,4 +69,4 @@ const CreateUserForm = ({updateUserList}) => {
     )
 }
 
-export default CreateUserForm;
+export default CreateUserForm;