Fix checkbox inputs always being unchecked on load

This commit is contained in:
grimsi
2024-09-10 17:14:26 +02:00
parent eb7c0c5d87
commit 4e75075c01
4 changed files with 17 additions and 6 deletions
@@ -10,7 +10,9 @@ const CheckboxInput = ({label, ...props}) => {
<div className="flex flex-row flex-grow items-center gap-2 my-2"> <div className="flex flex-row flex-grow items-center gap-2 my-2">
<Checkbox <Checkbox
{...field} {...field}
id={field.name}> id={field.name}
isSelected={field.value}
>
{label} {label}
</Checkbox> </Checkbox>
</div> </div>
+1 -1
View File
@@ -8,7 +8,7 @@ const Input = ({label, ...props}) => {
const [field, meta] = useField(props); const [field, meta] = useField(props);
return ( return (
<div className="grid w-full max-w-sm items-center gap-2 my-2"> <div className="flex flex-grow max-w-sm items-center gap-2 my-2">
<NextUiInput <NextUiInput
{...props} {...props}
{...field} {...field}
@@ -5,6 +5,7 @@ import {Form, Formik} from "formik";
import ConfigFormField from "Frontend/components/administration/ConfigFormField"; import ConfigFormField from "Frontend/components/administration/ConfigFormField";
import {Button, Divider, Skeleton} from "@nextui-org/react"; import {Button, Divider, Skeleton} from "@nextui-org/react";
import {toast} from "sonner"; import {toast} from "sonner";
import {Check} from "@phosphor-icons/react";
type NestedConfig = { type NestedConfig = {
[field: string]: any; [field: string]: any;
@@ -17,6 +18,7 @@ type ConfigValuePair = {
export function LibraryManagement() { export function LibraryManagement() {
const isInitialized = useRef(false); const isInitialized = useRef(false);
const [configSaved, setConfigSaved] = useState(false);
const [configDtos, setConfigDtos] = useState<ConfigEntryDto[]>([]); const [configDtos, setConfigDtos] = useState<ConfigEntryDto[]>([]);
useEffect(() => { useEffect(() => {
@@ -26,6 +28,12 @@ export function LibraryManagement() {
}); });
}, []); }, []);
useEffect(() => {
if (configSaved) {
setTimeout(() => setConfigSaved(false), 2000);
}
}, [configSaved])
async function handleSubmit(values: NestedConfig) { async function handleSubmit(values: NestedConfig) {
const configValues = toConfigValuePair(values); const configValues = toConfigValuePair(values);
await Promise.all(configValues.map(async (c: ConfigValuePair) => { await Promise.all(configValues.map(async (c: ConfigValuePair) => {
@@ -37,6 +45,7 @@ export function LibraryManagement() {
await ConfigController.setConfig(c.key, c.value.toString()); await ConfigController.setConfig(c.key, c.value.toString());
})); }));
setConfigSaved(true);
toast.success("Configuration saved"); toast.success("Configuration saved");
} }
@@ -122,9 +131,10 @@ export function LibraryManagement() {
<Button <Button
color="secondary" color="secondary"
isLoading={formik.isSubmitting} isLoading={formik.isSubmitting}
disabled={formik.isSubmitting || configSaved}
type="submit" type="submit"
> >
{formik.isSubmitting ? "" : "Save"} {formik.isSubmitting ? "" : configSaved ? <Check/> : "Save"}
</Button> </Button>
</div> </div>
<div className="mb-8 flex flex-col flex-grow"> <div className="mb-8 flex flex-col flex-grow">
@@ -145,7 +155,6 @@ export function LibraryManagement() {
<ConfigFormField <ConfigFormField
configElement={getConfig("library.display.games-per-page")}></ConfigFormField> configElement={getConfig("library.display.games-per-page")}></ConfigFormField>
</div> </div>
<pre>{JSON.stringify(formik.values, null, 2)}</pre>
</Form> </Form>
)} )}
</Formik> </Formik>
@@ -8,11 +8,11 @@ import org.springframework.web.servlet.HandlerInterceptor
@Component @Component
@Profile("development") @Profile("dev")
class DelayInterceptor : HandlerInterceptor { class DelayInterceptor : HandlerInterceptor {
override fun preHandle(request: HttpServletRequest, response: HttpServletResponse, handler: Any): Boolean { override fun preHandle(request: HttpServletRequest, response: HttpServletResponse, handler: Any): Boolean {
Thread.sleep(2000) if (request.requestURI.startsWith("/connect")) Thread.sleep(2000)
return true return true
} }