GKaszewski/thoughts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add confetti animation on thought submission and update dependencies

Browse Source
This commit is contained in:
Gabriel Kaszewski
2025-09-07 17:43:17 +02:00
parent dd279a1434
commit 72b4cb0851
6 changed files with 240 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
thoughts-frontend/components/post-thought-form.tsx
View File

@@ -25,10 +25,13 @@ import { CreateThoughtSchema, createThought } from "@/lib/api";
import { useAuth } from "@/hooks/use-auth";
import { toast } from "sonner";
import { Globe, Lock, Users } from "lucide-react";
import { useState } from "react";
import { Confetti } from "./confetti";
export function PostThoughtForm() {
const router = useRouter();
const { token } = useAuth();
const [showConfetti, setShowConfetti] = useState(false);
const form = useForm<z.infer<typeof CreateThoughtSchema>>({
resolver: zodResolver(CreateThoughtSchema),
@@ -44,6 +47,7 @@ export function PostThoughtForm() {
try {
await createThought(values, token);
toast.success("Your thought has been posted!");
setShowConfetti(true);
form.reset();
router.refresh(); // This is the key to updating the feed
} catch {
@@ -52,67 +56,70 @@ export function PostThoughtForm() {
}
return (
<Card>
<CardContent className="p-4">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="content"
render={({ field }) => (
<FormItem>
<FormControl>
<Textarea
placeholder="What's on your mind?"
className="resize-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-between items-center">
<>
<Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
<Card>
<CardContent className="p-4">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="visibility"
name="content"
render={({ field }) => (
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormItem>
<FormControl>
<SelectTrigger className="w-[150px]">
<SelectValue placeholder="Visibility" />
</SelectTrigger>
<Textarea
placeholder="What's on your mind?"
className="resize-none"
{...field}
/>
</FormControl>
<SelectContent>
<SelectItem value="Public">
<div className="flex items-center gap-2">
<Globe className="h-4 w-4" /> Public
</div>
</SelectItem>
<SelectItem value="FriendsOnly">
<div className="flex items-center gap-2">
<Users className="h-4 w-4" /> Friends Only
</div>
</SelectItem>
<SelectItem value="Private">
<div className="flex items-center gap-2">
<Lock className="h-4 w-4" /> Private
</div>
</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? "Posting..." : "Post Thought"}
</Button>
</div>
</form>
</Form>
</CardContent>
</Card>
<div className="flex justify-between items-center">
<FormField
control={form.control}
name="visibility"
render={({ field }) => (
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger className="w-[150px]">
<SelectValue placeholder="Visibility" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Public">
<div className="flex items-center gap-2">
<Globe className="h-4 w-4" /> Public
</div>
</SelectItem>
<SelectItem value="FriendsOnly">
<div className="flex items-center gap-2">
<Users className="h-4 w-4" /> Friends Only
</div>
</SelectItem>
<SelectItem value="Private">
<div className="flex items-center gap-2">
<Lock className="h-4 w-4" /> Private
</div>
</SelectItem>
</SelectContent>
</Select>
)}
/>
<Button type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? "Posting..." : "Post Thought"}
</Button>
</div>
</form>
</Form>
</CardContent>
</Card>
</>
);
}