Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: interact with user settings/profile (#9)

Browse Source
This commit is contained in:
Divlo
2022-02-19 23:20:33 +01:00
committed by GitHub
parent 48debe8638
commit 7ac4f86cd5
101 changed files with 6705 additions and 9777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/404.tsx
View File

@ -12,7 +12,7 @@ const Error404: NextPage<FooterProps> = (props) => {
return (
<>
<Head title='Divlo - 404' />
<Head title='Thream | 404' />
<Header />
<main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>

2
pages/500.tsx
View File

@ -12,7 +12,7 @@ const Error500: NextPage<FooterProps> = (props) => {
return (
<>
<Head title='Divlo - 500' />
<Head title='Thream | 500' />
<Header />
<main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>

11
pages/_app.tsx
View File

@ -2,7 +2,6 @@ import { useEffect } from 'react'
import { AppProps } from 'next/app'
import { ThemeProvider } from 'next-themes'
import useTranslation from 'next-translate/useTranslation'
import UniversalCookie from 'universal-cookie'
import 'styles/global.css'
@ -14,19 +13,13 @@ import '@fontsource/montserrat/700.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/700.css'
const universalCookie = new UniversalCookie()
/** how long in seconds, until the cookie expires (10 years) */
const COOKIE_MAX_AGE = 10 * 365.25 * 24 * 60 * 60
import { cookies } from 'tools/cookies'
const Application = ({ Component, pageProps }: AppProps): JSX.Element => {
const { lang } = useTranslation()
useEffect(() => {
universalCookie.set('NEXT_LOCALE', lang, {
path: '/',
maxAge: COOKIE_MAX_AGE
})
cookies.set('NEXT_LOCALE', lang)
}, [lang])
return (

2
pages/application/[guildId]/[channelId].tsx
View File

@ -66,7 +66,7 @@ export const getServerSideProps = authenticationFromServerSide({
if (isNaN(channelId) || isNaN(guildId)) {
return {
redirect: {
destination: '/application',
destination: '/404',
permanent: false
}
}

40
pages/application/users/[userId]/index.tsx
View File

@ -9,17 +9,23 @@ import {
} 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
const UserProfilePage: NextPage<PagePropsWithAuthentication> = (props) => {
return (
<AuthenticationProvider authentication={props.authentication}>
<AuthenticationProvider authentication={authentication}>
<GuildsProvider>
<Head title={`Thream | ${props.authentication.user.name}`} />
<Application
path={`/application/users/${props.authentication.user.id}`}
title={props.authentication.user.name}
>
<UserProfile user={props.authentication.user} />
<Head title={`Thream | ${user.name}`} />
<Application path={`/application/users/${user.id}`} title={user.name}>
<UserProfile user={user} guilds={guilds} />
</Application>
</GuildsProvider>
</AuthenticationProvider>
@ -27,7 +33,23 @@ const UserProfilePage: NextPage<PagePropsWithAuthentication> = (props) => {
}
export const getServerSideProps = authenticationFromServerSide({
shouldBeAuthenticated: true
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}`)
return {
user: data.user,
guilds: data.guilds
}
}
})
export default UserProfilePage

7
pages/application/users/[userId]/settings.tsx → pages/application/users/settings.tsx
View File

@ -15,11 +15,8 @@ const UserSettingsPage: NextPage<PagePropsWithAuthentication> = (props) => {
<AuthenticationProvider authentication={props.authentication}>
<GuildsProvider>
<Head title='Thream | Settings' />
<Application
path={`/application/users/${props.authentication.user.id}/settings`}
title='Settings'
>
<UserSettings user={props.authentication.user} />
<Application path={`/application/users/settings`} title='Settings'>
<UserSettings />
</Application>
</GuildsProvider>
</AuthenticationProvider>

9
pages/authentication/forgot-password.tsx
View File

@ -22,7 +22,10 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
const { version } = props
const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
useForm({ validateSchemaObject: { email: userSchema.email } })
useForm({
validateSchema: { email: userSchema.email },
resetOnSuccess: true
})
const onSubmit: HandleSubmitCallback = async (formData) => {
try {
@ -55,10 +58,10 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
<Main>
<AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
<Input type='email' placeholder='Email' name='email' label='Email' />
<Button data-cy='submit' className='w-full mt-6' type='submit'>
<Button data-cy='submit' className='mt-6 w-full' type='submit'>
{t('authentication:submit')}
</Button>
<p className='mt-3 font-headline text-sm text-green-800 dark:text-green-400 hover:underline'>
<p className='mt-3 font-headline text-sm text-green-800 hover:underline dark:text-green-400'>
<Link href='/authentication/signin'>
<a>{t('authentication:already-know-password')}</a>
</Link>

7
pages/authentication/reset-password.tsx
View File

@ -23,7 +23,10 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
const { version } = props
const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
useForm({ validateSchemaObject: { password: userSchema.password } })
useForm({
validateSchema: { password: userSchema.password },
resetOnSuccess: true
})
const onSubmit: HandleSubmitCallback = async (formData) => {
try {
@ -59,7 +62,7 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
name='password'
label='Password'
/>
<Button data-cy='submit' className='w-full mt-6' type='submit'>
<Button data-cy='submit' className='mt-6 w-full' type='submit'>
{t('authentication:submit')}
</Button>
</AuthenticationForm>

10
pages/index.tsx
View File

@ -21,7 +21,7 @@ const Home: NextPage<FooterProps> = (props) => {
<Head />
<Header />
<Main>
<div className='flex flex-col items-center w-4/5'>
<div className='flex w-4/5 flex-col items-center'>
<div className='max-w-xs'>
<Link href='/authentication/signup'>
<a>
@ -35,24 +35,24 @@ const Home: NextPage<FooterProps> = (props) => {
</Link>
</div>
<div className='text-center'>
<h1 className='my-4 text-3xl font-medium font-headline text-green-800 dark:text-green-400'>
<h1 className='my-4 font-headline text-3xl font-medium text-green-800 dark:text-green-400'>
Thream
</h1>
<div
className='font-paragraph text-lg max-w-lg'
className='max-w-lg font-paragraph text-lg'
data-cy='main-description'
>
<Translation
i18nKey='home:description'
components={[
<strong
className='text-green-800 dark:text-green-400 font-bold'
className='font-bold text-green-800 dark:text-green-400'
key='bold'
/>
]}
/>
</div>
<div className='flex justify-center items-center text-center mt-8 space-x-4'>
<div className='mt-8 flex items-center justify-center space-x-4 text-center'>
<Link href='/authentication/signup' passHref>
<ButtonLink data-cy='get-started'>
{t('home:get-started')}