import { GetServerSideProps } from "next"; import Head from "next/head"; import { useEffect, useRef, useState } from "react"; import prisma, { whereAndSelect } 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 Select from "react-select"; 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 hideBrandingRef = useRef(); const [selectedTheme, setSelectedTheme] = useState({ value: "" }); const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone }); const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: "" }); const [hasErrors, setHasErrors] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const themeOptions = [ { value: "light", label: "Light" }, { value: "dark", label: "Dark" }, ]; useEffect(() => { setSelectedTheme( props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null ); setSelectedWeekStartDay({ value: props.user.weekStart, label: props.user.weekStart }); }, []); 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.value; const enteredHideBranding = hideBrandingRef.current.checked; // 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, hideBranding: enteredHideBranding, theme: selectedTheme ? selectedTheme.value : null, }), 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.

setSelectedTheme(e.target.checked ? null : themeOptions[0])} defaultChecked={!selectedTheme} className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" />

Hide all Calendso branding from your public pages.

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