dashboard/src/modules/apps/components/GeneralTab/GeneralTab.tsx

62 lines
1.9 KiB
TypeScript
Raw Normal View History

2022-08-02 23:43:18 +02:00
import _ from 'lodash';
import React, { useEffect, useRef } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { Switch } from 'src/components/Form';
import { App, useApps } from 'src/services/apps';
2021-09-27 12:17:33 +02:00
2022-08-02 23:43:18 +02:00
export const GeneralTab = () => {
const { app, editApp } = useApps();
const { control, reset, handleSubmit } = useForm<App>({
defaultValues: { automaticUpdates: false },
});
2021-09-27 12:17:33 +02:00
2022-08-02 23:43:18 +02:00
useEffect(() => {
if (!_.isEmpty(app)) {
reset(app);
}
return () => {
reset({ automaticUpdates: false });
};
}, [app, reset]);
const onSubmit: SubmitHandler<App> = (data) => {
try {
editApp(data);
} catch (e: any) {
// continue
}
};
2021-09-27 12:17:33 +02:00
return (
2022-08-02 23:43:18 +02:00
<>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="py-4">
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-2">
<h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
<p className="mt-1 text-sm text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
gravida at orci.
</p>
</div>
<div className="my-auto ml-auto">
<Switch control={control} name="automaticUpdates" />
</div>
</div>
2021-09-27 12:17:33 +02:00
</div>
2022-08-02 23:43:18 +02:00
<div className="py-3 sm:flex">
<div className="ml-auto sm:flex sm:flex-row-reverse">
<button
type="submit"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
>
Save changes
</button>
</div>
2021-09-27 12:17:33 +02:00
</div>
2022-08-02 23:43:18 +02:00
</form>
</>
2021-09-27 12:17:33 +02:00
);
};