tonality/packages/app-web/src/pages/my/create/ringtone/index.tsx

import {GetServerSideProps, NextPage} from 'next'
import {useRef} from 'react'
import {models} from '@tonality/library-common'
import CreateRingtoneTemplate from '../../../../components/templates/CreateRingtone'
import RingtoneClient from '../../../../modules/ringtone/client'
import {getSession, withPageAuthRequired} from '@auth0/nextjs-auth0';

type Props = {
	user: models.Composer,
	composerRingtones: models.Ringtone[],
}

const MyCreateRingtonePage: NextPage<Props> = ({
	user,
	composerRingtones,
}) => {
	const ringtoneClient = useRef(new RingtoneClient())
	return (
		<CreateRingtoneTemplate
			composer={user}
			composerRingtones={composerRingtones}
			onSubmit={ringtoneClient.current.save}
		/>
	)
}

export const getServerSideProps: GetServerSideProps = withPageAuthRequired({
	getServerSideProps: async (ctx) => {
		const session = getSession(ctx.req, ctx.res)
		const { user } = session
		const composerRingtones = []

		return {
			props: {
				user: {
					id: user.sub,
					name: user.nickname,
					bio: '',
				},
				composerRingtones,
			},
		}
	},
	returnTo: '/my/create/ringtone'
})

export default MyCreateRingtonePage