import { NextPage } from 'next'
import { Head } from 'components/Head'
import { Application } from 'components/Application'
import {
authenticationFromServerSide,
AuthenticationProvider,
PagePropsWithAuthentication
} from 'tools/authentication'
import { UserProfile } from 'components/Application/UserProfile'
import { GuildsProvider } from 'contexts/Guilds'
import { UserPublic } from 'models/User'
import { Guild } from 'models/Guild'
export interface UserProfilePageProps extends PagePropsWithAuthentication {
user: UserPublic
guilds: Guild[]
}
const UserProfilePage: NextPage<UserProfilePageProps> = (props) => {
const { user, guilds, authentication } = props
return (
<AuthenticationProvider authentication={authentication}>
<GuildsProvider>
<Head title={`Thream | ${user.name}`} />
<Application path={`/application/users/${user.id}`} title={user.name}>
<UserProfile user={user} guilds={guilds} />
</Application>
</GuildsProvider>
</AuthenticationProvider>
)
export const getServerSideProps = authenticationFromServerSide({
shouldBeAuthenticated: true,
fetchData: async (context, api) => {
const userId = Number(context?.params?.userId)
if (isNaN(userId)) {
return {
redirect: {
destination: '/404',
permanent: false
const { data } = await api.get(`/users/${userId}`)
user: data.user,
guilds: data.guilds
})
export default UserProfilePage
