* Iteration, before functional component * Use react-hook-form, shared form for new and edit * Avoid negative margin on input prefix * Centered now default for modals
33 lines
812 B
TypeScript
33 lines
812 B
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { toast } from "sonner";
|
|
import useStores from "~/hooks/useStores";
|
|
import { CollectionForm, FormData } from "./CollectionForm";
|
|
|
|
type Props = {
|
|
collectionId: string;
|
|
onSubmit: () => void;
|
|
};
|
|
|
|
export const CollectionEdit = observer(function CollectionEdit_({
|
|
collectionId,
|
|
onSubmit,
|
|
}: Props) {
|
|
const { collections } = useStores();
|
|
const collection = collections.get(collectionId);
|
|
|
|
const handleSubmit = React.useCallback(
|
|
async (data: FormData) => {
|
|
try {
|
|
await collection?.save(data);
|
|
onSubmit?.();
|
|
} catch (error) {
|
|
toast.error(error.message);
|
|
}
|
|
},
|
|
[collection, onSubmit]
|
|
);
|
|
|
|
return <CollectionForm collection={collection} handleSubmit={handleSubmit} />;
|
|
});
|