import Head from 'next/head'; import Link from 'next/link'; import { useRef, useState } from 'react'; import { useRouter } from 'next/router'; 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 { signIn, useSession, 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 [ session, loading ] = useSession(); const router = useRouter(); 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(''); if (loading) { return

Loading...

; } 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; 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 const response = 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 async function getServerSideProps(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 } }