schulze/bam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix final backend and styling
All checks were successful
Lint / Lint (push) Successful in 1m7s
Details

Browse Source
This commit is contained in:
Felix Schulze 2024-10-18 14:20:58 +02:00
parent 867bd6797d
commit 620156197a
6 changed files with 103 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/sign-up/page.tsx
View File

@ -9,8 +9,9 @@ export default function Page() {
alt="Bangers and Mash GBG" alt="Bangers and Mash GBG"
width={200} width={200}
height={200} height={200}
className="mx-auto" className="mx-auto my-8"
/> />
<h1 className="mb-4 text-xl">Sign up to our guest list here</h1>
<SignUp /> <SignUp />
</div> </div>
); );

170
app/sign-up/sign-up-form.tsx
View File

@ -21,17 +21,19 @@ import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { signupFormSubmit } from "@/lib/actions"; import { signupFormSubmit } from "@/lib/actions";
import { useState } from "react";
export const signupFormSchema = z.object({ export const signupFormSchema = z.object({
name: z.string().min(2, { message: "Name is required" }).max(50, { message: "Name is too long" }), name: z.string().min(2, { message: "Name is required" }).max(50, { message: "Name is too long" }),
email: z.string().email({ message: "Email is invalid" }), email: z.string().email({ message: "Email is invalid" }),
dob: z.date({ required_error: "Birthday is required" }), dob: z.date({ required_error: "Birthday is required" }),
}); });
export const youngestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 21)); export const youngestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 21));
export const oldestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 100)); export const oldestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 100));
export default function SignUp() { export default function SignUp() {
const [submitted, setSubmitted] = useState(false);
const [response, setResponse] = useState<string | null>(null);
const form = useForm<z.infer<typeof signupFormSchema>>({ const form = useForm<z.infer<typeof signupFormSchema>>({
resolver: zodResolver(signupFormSchema), resolver: zodResolver(signupFormSchema),
defaultValues: { defaultValues: {
@ -40,85 +42,91 @@ export default function SignUp() {
dob: youngestDate, dob: youngestDate,
}, },
}); });
function onSubmit(values: z.infer<typeof signupFormSchema>) { async function onSubmit(values: z.infer<typeof signupFormSchema>) {
signupFormSubmit(values); setSubmitted(true);
setResponse(await signupFormSubmit(values));
} }
return ( function SignupForm() {
<Form {...form}> return (
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8"> <Form {...form}>
<FormField <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
control={form.control} <FormField
name="email" control={form.control}
render={({ field }) => ( name="email"
<FormItem> render={({ field }) => (
<FormLabel>Email</FormLabel> <FormItem>
<FormControl> <FormLabel>Email</FormLabel>
<Input placeholder="name@example.com" {...field} /> <FormControl>
</FormControl> <Input placeholder="name@example.com" {...field} />
<FormDescription> </FormControl>
We will contact you here with information about events. <FormDescription>
</FormDescription> We will contact you here with information about events.
<FormMessage /> </FormDescription>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
<FormField />
control={form.control} <FormField
name="name" control={form.control}
render={({ field }) => ( name="name"
<FormItem> render={({ field }) => (
<FormLabel>Name</FormLabel> <FormItem>
<FormControl> <FormLabel>Name</FormLabel>
<Input placeholder="Firstname Lastname" {...field} /> <FormControl>
</FormControl> <Input placeholder="Firstname Lastname" {...field} />
<FormDescription>Please enter your full name.</FormDescription> </FormControl>
<FormMessage /> <FormDescription>Please enter your full name.</FormDescription>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
<FormField />
control={form.control} <FormField
name="dob" control={form.control}
render={({ field }) => ( name="dob"
<FormItem className="flex flex-col"> render={({ field }) => (
<FormLabel>Date of birth</FormLabel> <FormItem className="flex flex-col">
<Popover> <FormLabel>Date of birth</FormLabel>
<PopoverTrigger asChild> <Popover>
<FormControl> <PopoverTrigger asChild>
<Button <FormControl>
variant={"outline"} <Button
className={cn( variant={"outline"}
"w-[240px] pl-3 text-left font-normal", className={cn(
!field.value && "text-muted-foreground" "w-[240px] pl-3 text-left font-normal",
)} !field.value && "text-muted-foreground"
> )}
{field.value ? format(field.value, "PPP") : <span>Pick a date</span>} >
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
</Button> <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</FormControl> </Button>
</PopoverTrigger> </FormControl>
<PopoverContent className="w-auto p-0" align="start"> </PopoverTrigger>
<Calendar <PopoverContent className="w-auto p-0" align="start">
required <Calendar
mode="single" required
showOutsideDays={false} mode="single"
selected={field.value} showOutsideDays={false}
onSelect={field.onChange} selected={field.value}
disabled={(date) => date > youngestDate} onSelect={field.onChange}
defaultMonth={field.value} disabled={(date) => date > youngestDate}
fromDate={oldestDate} defaultMonth={field.value}
toDate={youngestDate} fromDate={oldestDate}
captionLayout="dropdown" toDate={youngestDate}
/> captionLayout="dropdown"
</PopoverContent> />
</Popover> </PopoverContent>
<FormDescription>You must be over 21 to sign up.</FormDescription> </Popover>
<FormMessage /> <FormDescription>You must be over 21 to sign up.</FormDescription>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
<Button type="submit">Submit</Button> />
</form> <Button type="submit" disabled={submitted}>
</Form> Submit
); </Button>
</form>
</Form>
);
}
return response ?? SignupForm();
} }

2
components/ui/calendar.tsx
View File

@ -37,7 +37,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
head_row: "flex", head_row: "flex",
head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
row: "flex w-full mt-2", row: "flex w-full mt-2",
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
day: cn( day: cn(
buttonVariants({ variant: "ghost" }), buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100" "h-9 w-9 p-0 font-normal aria-selected:opacity-100"

11
lib/actions.ts
View File

@ -4,18 +4,21 @@ import { z } from "zod";
import { oldestDate, signupFormSchema, youngestDate } from "@/app/sign-up/sign-up-form"; import { oldestDate, signupFormSchema, youngestDate } from "@/app/sign-up/sign-up-form";
import listmonk, { listmonkData } from "./listmonk"; import listmonk, { listmonkData } from "./listmonk";
export async function signupFormSubmit(data: z.infer<typeof signupFormSchema>) { export async function signupFormSubmit(data: z.infer<typeof signupFormSchema>): Promise<string> {
if (data.dob > youngestDate || data.dob < oldestDate) { if (data.dob > youngestDate || data.dob < oldestDate) {
return { error: "Invalid date of birth" }; return "Invalid date of birth";
} }
const offset = data.dob.getTimezoneOffset();
data.dob = new Date(data.dob.getTime() - offset * 60 * 1000);
const listmonkData: listmonkData = { const listmonkData: listmonkData = {
email: data.email, email: data.email,
name: data.name, name: data.name,
status: "enabled", status: "enabled",
lists: [6], lists: [6],
attribs: { attribs: {
dob: data.dob.toISOString(), dob: data.dob.toISOString().split("T")[0],
}, },
}; };
listmonk(listmonkData); return await listmonk(listmonkData);
} }

22
lib/listmonk.ts
View File

@ -8,20 +8,7 @@ export type listmonkData = {
attribs: {}; attribs: {};
}; };
async function makeApiCall(url: string, options?: RequestInit) { async function listmonk(data: listmonkData): Promise<string> {
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("Error making API call:", error);
throw error;
}
}
async function listmonk(data: listmonkData) {
const listmonkUrl = process.env.LISTMONK_URL ?? "http://localhost:9000/api/"; const listmonkUrl = process.env.LISTMONK_URL ?? "http://localhost:9000/api/";
const listmonkUser = process.env.LISTMONK_USER ?? "nouser"; const listmonkUser = process.env.LISTMONK_USER ?? "nouser";
const listmonkPass = process.env.LISTMONK_PASS ?? "nopass"; const listmonkPass = process.env.LISTMONK_PASS ?? "nopass";
@ -39,12 +26,11 @@ async function listmonk(data: listmonkData) {
try { try {
const response = await fetch(`${listmonkUrl}subscribers`, options); const response = await fetch(`${listmonkUrl}subscribers`, options);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`); return "Error. please try again soon.";
} }
const responseData = await response.json(); return "Thanks for signing up!";
console.log("Subscriber created successfully:", responseData);
} catch (error) { } catch (error) {
console.error("Failed to create subscriber:", error); return "Error. please try again soon.";
} }
} }

BIN
public/image/bam.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 694 KiB