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 { signIn, useSession, getSession } from 'next-auth/client'; import TimezoneSelect from 'react-timezone-select'; 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 }); if (loading) { return

Loading...

; } const closeSuccessModal = () => { setSuccessModalOpen(false); } 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; // 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}), headers: { 'Content-Type': 'application/json' } }); router.replace(router.asPath); setSuccessModalOpen(true); } return( Profile | Calendso

Profile

Review and change your public page details.

{window.location.hostname}/
{/*
*/}
{props.user.avatar && } {!props.user.avatar &&
} {/* */}
); } 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, } }); return { props: {user}, // will be passed to the page component as props } }