Hello there! I'm facing an issue while attempting to send time data to supabase using next.js. Unfortunately, I haven't been successful in sending the data yet.
I suspect that the problem lies in the type not being valid for supabase, but I'm unsure how to resolve it.
Any guidance in the right direction would be greatly appreciated.
# event-form.tsx
"use client";
import { useState, useEffect } from "react";
import {
Box,
TextField,
Button,
Checkbox,
Container,
Grid,
} from "@mui/material";
import { publishEvent } from "../../utils/supabaseFunction";
import { useRouter } from "next/navigation";
import Link from "next/link";
import dayjs from "dayjs";
import { Session } from "@supabase/auth-helpers-nextjs";
import { supabase } from "@/utils/supabase";
import { start } from "repl";
const EventForm = ({ session }: { session: Session | null }) => {
const router = useRouter();
const [title, setTitle] = useState<string>("");
const [description, setDescription] = useState<string>("");
const [date, setDate] = useState<Date | undefined>();
const [start_time, setStart_time] = useState<Date | undefined>();
const [capacity, setCapacity] = useState<string>("");
const [host_id, setHost_id] = useState<string>("");
const [is_published, setIs_Published] = useState<boolean>(false);
const user = session?.user;
useEffect(() => {
const fetchUserId = async () => {
try {
const { data: users, error } = await supabase
.from("profiles")
.select(`id`)
.eq("id", user?.id)
.single();
if (error) {
throw error;
}
setHost_id(users.id);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchUserId();
}, []);
console.log(start_time);
const handlePublishEvent = async (e: any) => {
e.preventDefault();
await publishEvent(
title,
description,
capacity,
date,
start_time,
host_id,
is_published
);
router.push("/event");
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIs_Published(event.target.checked);
};
return (
<>
<div>
<Container component="main" maxWidth="xs">
{" "}
<Box component="form" onSubmit={(e) => handlePublishEvent(e)}>
<Grid item xs={12}>
<TextField
type="text"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
type="text"
name="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
type="date"
name="date"
value={dayjs(date).format("YYYY-MM-DD")}
onChange={(e) => setDate(new Date(e.target.value))}
/>
</Grid>
<Grid item xs={12}>
<TextField
type="time"
name="time"
value={dayjs(date).format("HH:mm:ss")}
onChange={(e) => setStart_time(new Date(e.target.value))}
/>
</Grid>
<Grid item xs={12}>
<TextField
type="text"
name="capacity"
value={capacity}
onChange={(e) => setCapacity(e.target.value)}
/>
</Grid>
<Checkbox
checked={is_published}
onChange={handleChange}
inputProps={{ "aria-label": "controlled" }}
/>
Check
<div>
<div>
<Button variant="contained" type="submit">
{is_published == true ? <>Publish</> : <>Save</>}
</Button>
</div>
<div>
<Button variant="text">
<Link href="/event">Back</Link>
</Button>
</div>
</div>
</Box>
</Container>
</div>
</>
);
};
export default EventForm;
Below is the query used to send the data.
export const publishEvent = async (
title: string,
description: string,
capacity: string,
date: Date | undefined,
start_time: Date | undefined,
host_id: string,
is_published: boolean
) => {
await supabase.from("events").insert({
title: title,
description: description,
capacity: capacity,
date: date,
start_time: start_time,
host_id: host_id,
is_published: is_published,
});
};
I attempted to adjust the type using new Date() but to no avail.