import { GetServerSideProps } from "next"; import Head from "next/head"; import { useRef, useState } from "react"; import prisma from "../../lib/prisma"; import Modal from "../../components/Modal"; import Shell from "../../components/Shell"; import SettingsShell from "../../components/Settings"; import Avatar from "../../components/Avatar"; import { getSession } from "next-auth/client"; import TimezoneSelect from "react-timezone-select"; import { UsernameInput } from "../../components/ui/UsernameInput"; import ErrorAlert from "../../components/ui/alerts/Error"; export default function Settings(props) { const [successModalOpen, setSuccessModalOpen] = useState(false); const usernameRef = useRef(); const nameRef = useRef(); const descriptionRef = useRef(); const avatarRef = useRef(); const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone }); const [selectedWeekStartDay, setSelectedWeekStartDay] = useState(props.user.weekStart || "Sunday"); const [hasErrors, setHasErrors] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const closeSuccessModal = () => { setSuccessModalOpen(false); }; const handleError = async (resp) => { if (!resp.ok) { const error = await resp.json(); throw new Error(error.message); } }; async function updateProfileHandler(event) { event.preventDefault(); const enteredUsername = usernameRef.current.value.toLowerCase(); const enteredName = nameRef.current.value; const enteredDescription = descriptionRef.current.value; const enteredAvatar = avatarRef.current.value; const enteredTimeZone = selectedTimeZone.value; const enteredWeekStartDay = selectedWeekStartDay; // TODO: Add validation await fetch("/api/user/profile", { method: "PATCH", body: JSON.stringify({ username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone, weekStart: enteredWeekStartDay, }), headers: { "Content-Type": "application/json", }, }) .then(handleError) .then(() => { setSuccessModalOpen(true); setHasErrors(false); // dismiss any open errors }) .catch((err) => { setHasErrors(true); setErrorMessage(err.message); }); } return ( Profile | Calendso
{hasErrors && }

Profile

Review and change your public page details.

{/*
*/}
} /> {/* */}
); } export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getSession(context); if (!session) { return { redirect: { permanent: false, destination: "/auth/login" } }; } const user = await prisma.user.findFirst({ where: { email: session.user.email, }, select: { id: true, username: true, name: true, email: true, bio: true, avatar: true, timeZone: true, weekStart: true, }, }); return { props: { user }, // will be passed to the page component as props }; };