116 lines
4.2 KiB
TypeScript
116 lines
4.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
import { joiResolver } from "@hookform/resolvers/joi";
|
|
import { Sheet } from "@tamagui/sheet";
|
|
import { useForm } from "react-hook-form";
|
|
import Toast from "react-native-toast-message";
|
|
import { Button, YStack } from "tamagui";
|
|
|
|
import { useUpdateBookmark } from "@/api/request/feed-management/bookmark";
|
|
import { Bookmark, BookmarkPayload, BookmarkPayloadSchema } from "@/api/schema/feed-management/bookmark";
|
|
import { ErrorResponse, safeMessage } from "@/api/shared";
|
|
import { FormSwitch } from "@/ui/components/controls/forms/Switch";
|
|
import { FormTextArea } from "@/ui/components/controls/forms/TextArea";
|
|
import { FormTextInput } from "@/ui/components/controls/forms/TextInput";
|
|
import { SubmitButton } from "@/ui/components/controls/SubmitButton";
|
|
|
|
type UpdateBookmarkSheetProps = {
|
|
data: Bookmark;
|
|
};
|
|
|
|
export const UpdateBookmarkSheet = (props: UpdateBookmarkSheetProps) => {
|
|
const { data } = props;
|
|
const { mutate, isPending } = useUpdateBookmark(data.id);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { control, handleSubmit, formState, reset } = useForm<BookmarkPayload>({
|
|
resolver: joiResolver(BookmarkPayloadSchema),
|
|
});
|
|
|
|
useEffect(() => {
|
|
reset({ ...data });
|
|
}, [data, reset]);
|
|
|
|
const onSubmit = (data: BookmarkPayload) => {
|
|
mutate(data, {
|
|
onSuccess: () => {
|
|
Toast.show({
|
|
text1: "Félicitations !",
|
|
text2: "Votre signet a été modifié avec succès.",
|
|
type: "success",
|
|
});
|
|
setOpen(false);
|
|
},
|
|
onError: (error: ErrorResponse) => {
|
|
Toast.show({
|
|
text1: "Erreur",
|
|
text2: safeMessage(error),
|
|
type: "error",
|
|
});
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<YStack alignItems="center" justifyContent="center">
|
|
<Button onPress={() => setOpen(true)}>Modifier</Button>
|
|
|
|
<Sheet
|
|
modal={true}
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
snapPointsMode="percent"
|
|
snapPoints={[65, 90]}
|
|
dismissOnOverlayPress={true}
|
|
dismissOnSnapToBottom={true}
|
|
animation="medium"
|
|
>
|
|
<Sheet.Overlay
|
|
animation="lazy"
|
|
backgroundColor="rgba(0, 0, 0, 0.8)"
|
|
enterStyle={{ opacity: 0 }}
|
|
exitStyle={{ opacity: 0 }}
|
|
/>
|
|
<Sheet.Frame
|
|
flex={1}
|
|
backgroundColor="$background"
|
|
padding="$4"
|
|
gap="$4"
|
|
alignItems="center"
|
|
justifyContent="flex-start"
|
|
>
|
|
<YStack width="100%">
|
|
<Sheet.Handle theme="accent" />
|
|
<FormTextInput
|
|
name="name"
|
|
control={control}
|
|
label="Name"
|
|
caption="Enter a name for your bookmark."
|
|
placeholder="My awesome bookmark"
|
|
/>
|
|
<FormTextArea
|
|
name="description"
|
|
control={control}
|
|
caption="Describe your bookmark for easy retrieval."
|
|
label="Description"
|
|
placeholder="A brief description..."
|
|
/>
|
|
<FormSwitch
|
|
name="isPublic"
|
|
control={control}
|
|
label="Public"
|
|
description="A public bookmark is visible and accessible to other users"
|
|
/>
|
|
</YStack>
|
|
<SubmitButton
|
|
label="Modifier le signet"
|
|
onPress={handleSubmit(onSubmit)}
|
|
isPending={isPending}
|
|
isValid={formState.isValid}
|
|
/>
|
|
</Sheet.Frame>
|
|
</Sheet>
|
|
</YStack>
|
|
);
|
|
};
|