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 }; };