Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add advise dialog form refactor #8

Open
wants to merge 7 commits into
base: testing
Choose a base branch
from
Open

Add advise dialog form refactor #8

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c79bff8
add advise dialog form refactor
benjacortesdev Aug 31, 2024
20a3ecf
#7 add advise dialog form refactor
benjacortesdev Aug 31, 2024
0565fef
Merge branch 'benjacortedev/add-advise-dialog-form' of benjacortesdev…
benjacortesdev Aug 31, 2024
433209a
#7 Adding parameter destructuring
benjacortesdev Aug 31, 2024
30da2d5
Form renamed
benjacortesdev Sep 3, 2024
a2c2b15
add and edit advise updated
benjacortesdev Sep 3, 2024
7ab7b7c
#8 addressing comments
benjacortesdev Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 2 additions & 50 deletions src/components/advises/add-advise.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,12 @@ import {
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
import { toast } from 'sonner';
import { useState } from 'react';
import { createAdvise } from '@actions/advises/create-advise';
import { adviseSchema, AdviseFormData } from '@/schemas/advise-schema';
import { AdviseForm } from './advise-form';

export const AddAdvise = () => {
const [dialogOpen, setDialogOpen] = useState(false);

const form = useForm<AdviseFormData>({
resolver: zodResolver(adviseSchema),
defaultValues: {
content: '',
},
});

function onSubmit({ content }: AdviseFormData) {
toast.promise(createAdvise(content), {
loading: 'Creando consejo...',
success: () => {
form.reset();
return 'Tu consejo fue publicado exitosamente. Gracias por compartir!';
},
error: 'Ocurrió un error al publicar el consejo',
});

setDialogOpen(false);
}

return (
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogTrigger asChild>
Expand All @@ -49,33 +23,11 @@ export const AddAdvise = () => {
Publicar un consejo
</Button>
</DialogTrigger>

<DialogContent>
<DialogHeader>
<DialogTitle>Publicar un consejo</DialogTitle>
</DialogHeader>

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="content"
render={({ field }) => (
<FormItem>
<FormControl>
<Textarea placeholder="Escribí acá tu consejo..." {...field} />
</FormControl>

<FormMessage />
</FormItem>
)}
/>

<Button type="submit" className="w-full">
Publicar
</Button>
</form>
</Form>
<AdviseForm setDialogOpen={setDialogOpen} />
</DialogContent>
</Dialog>
);
Expand Down
80 changes: 80 additions & 0 deletions src/components/advises/advise-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
'use client';

import { createAdvise } from "@/actions/advises/create-advise";
import { AdviseFormData, adviseSchema } from "@/schemas/advise-schema";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { Form, FormControl, FormField, FormItem, FormMessage } from "../ui/form";
import { Textarea } from "../ui/textarea";
import { Button } from "../ui/button";
import { editAdvise } from "@/actions/advises/edit-advise";
import { EditAdviseDialogProps } from "./edit-advise-dialog";

interface AdviceFormProps {
setDialogOpen?: (data: boolean) => void;
editAdviseOptions?: EditAdviseDialogProps;
}

export const AdviseForm = ({ setDialogOpen, editAdviseOptions }: AdviceFormProps) => {

const adviseId = editAdviseOptions?.adviseId ?? '';
const initialContent = editAdviseOptions?.initialContent ?? '';
const onOpenChange = editAdviseOptions ? editAdviseOptions.onOpenChange : () => { };

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deberíamos borrar esta línea en blanco porque es la primera línea dentro de la función o componente, y es una convención no dejar nunca esta línea en blanco. Lo mismo se aplica a diferentes tipos de bloques: clases, objetos, tipos, archivos, etc.

Suggested change

const form = useForm<AdviseFormData>({
resolver: zodResolver(adviseSchema),
defaultValues: {
content: initialContent,
},
});

const onSubmitAddAdvise = ({ content }: AdviseFormData) => {
toast.promise(createAdvise(content), {
loading: 'Creando consejo...',
success: () => {
form.reset();
return 'Tu consejo fue publicado exitosamente. Gracias por compartir!';
},
error: 'Ocurrió un error al publicar el consejo',
});

if (setDialogOpen) setDialogOpen(false);
}

const onSubmitEditAdvise = ({ content }: AdviseFormData) => {
toast.promise(editAdvise({ id: adviseId, content }), {
loading: 'Editando consejo...',
success: () => {
form.reset({ content });
onOpenChange(false);
return 'Tu consejo fue editado exitosamente.';
},
error: 'Ocurrió un error al editar el consejo',
});
};

return (
<Form {...form}>
<form onSubmit={form.handleSubmit(editAdviseOptions ? onSubmitEditAdvise : onSubmitAddAdvise)} className="space-y-8">
<FormField
control={form.control}
name="content"
render={({ field }) => (
<FormItem>
<FormControl>
<Textarea placeholder="Escribí acá tu consejo..." {...field} />
</FormControl>

<FormMessage />
</FormItem>
)}
/>

<Button type="submit" className="w-full">
{editAdviseOptions ? "Guardar Cambios" : "Publicar"}
</Button>
</form>
</Form>
)
}
52 changes: 4 additions & 48 deletions src/components/advises/edit-advise-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { editAdvise } from '@/actions/advises/edit-advise';
import { toast } from 'sonner';
import { adviseSchema, AdviseFormData } from '@/schemas/advise-schema';
import { AdviseForm } from './advise-form';

interface EditAdviseDialogProps {
export interface EditAdviseDialogProps {
adviseId: string;
initialContent: string;
isOpen: boolean;
Expand All @@ -23,52 +16,15 @@ export const EditAdviseDialog = ({
isOpen,
onOpenChange,
}: EditAdviseDialogProps) => {
const form = useForm<AdviseFormData>({
resolver: zodResolver(adviseSchema),
defaultValues: {
content: initialContent,
},
});

const onSubmitEditAdvise = ({ content }: AdviseFormData) => {
toast.promise(editAdvise({ id: adviseId, content }), {
loading: 'Editando consejo...',
success: () => {
form.reset({ content });
onOpenChange(false);
return 'Tu consejo fue editado exitosamente.';
},
error: 'Ocurrió un error al editar el consejo',
});
};
const editAdviseOptions = { adviseId, initialContent, isOpen, onOpenChange }

return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>Editar consejo</DialogTitle>
</DialogHeader>

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmitEditAdvise)} className="space-y-8">
<FormField
control={form.control}
name="content"
render={({ field }) => (
<FormItem>
<FormControl>
<Textarea {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<Button type="submit" className="w-full">
Guardar cambios
</Button>
</form>
</Form>
<AdviseForm editAdviseOptions={editAdviseOptions} />
</DialogContent>
</Dialog>
);
Expand Down