feat(pages): add /application/[guildId]/[channelId] (#4)

This commit is contained in:
Divlo
2022-01-01 20:42:25 +01:00
committed by GitHub
parent 91e246b759
commit fdc2a2d1de
118 changed files with 6040 additions and 2094 deletions

View File

@ -3,38 +3,64 @@ import { NextPage } from 'next'
import { Head } from 'components/Head'
import { Application } from 'components/Application'
import { Messages } from 'components/Application/Messages'
import { SendMessage } from 'components/Application/SendMessage'
import {
authenticationFromServerSide,
AuthenticationProvider,
PagePropsWithAuthentication
} from 'utils/authentication'
} from 'tools/authentication'
import { GuildMember, GuildMemberProvider } from 'contexts/GuildMember'
import { GuildLeftSidebar } from 'components/Application/GuildLeftSidebar'
import { ChannelsProvider } from 'contexts/Channels'
import { GuildsProvider } from 'contexts/Guilds'
import { Channel } from 'models/Channel'
import { MessagesProvider } from 'contexts/Messages'
import { MembersProviders } from 'contexts/Members'
export interface ChannelPageProps extends PagePropsWithAuthentication {
channelId: number
guildId: number
guildMember: GuildMember
selectedChannel: Channel
}
const ChannelPage: NextPage<ChannelPageProps> = (props) => {
const { channelId, guildId, authentication } = props
const { channelId, guildId, authentication, guildMember, selectedChannel } =
props
const path = {
channelId,
guildId
}
return (
<AuthenticationProvider authentication={authentication}>
<Head title='Thream | Application' />
<Application
path={{
channelId,
guildId
}}
>
<Messages />
</Application>
<GuildsProvider>
<GuildMemberProvider guildMember={guildMember} path={path}>
<MembersProviders path={path}>
<ChannelsProvider path={path}>
<MessagesProvider path={path}>
<Head title='Thream | Application' />
<Application
path={path}
guildLeftSidebar={<GuildLeftSidebar path={path} />}
title={`# ${selectedChannel.name}`}
>
<Messages />
<SendMessage />
</Application>
</MessagesProvider>
</ChannelsProvider>
</MembersProviders>
</GuildMemberProvider>
</GuildsProvider>
</AuthenticationProvider>
)
}
export const getServerSideProps = authenticationFromServerSide({
shouldBeAuthenticated: true,
fetchData: async (context) => {
fetchData: async (context, api) => {
const channelId = Number(context?.params?.channelId)
const guildId = Number(context?.params?.guildId)
if (isNaN(channelId) || isNaN(guildId)) {
@ -45,9 +71,15 @@ export const getServerSideProps = authenticationFromServerSide({
}
}
}
const { data: guildMember } = await api.get(`/guilds/${guildId}`)
const { data: selectedChannelData } = await api.get(
`/channels/${channelId}`
)
return {
channelId,
guildId
guildId,
guildMember,
selectedChannel: selectedChannelData.channel
}
}
})

View File

@ -6,16 +6,28 @@ import {
authenticationFromServerSide,
AuthenticationProvider,
PagePropsWithAuthentication
} from 'utils/authentication'
} from 'tools/authentication'
import { CreateGuild } from 'components/Application/CreateGuild'
import { GuildsProvider } from 'contexts/Guilds'
import useTranslation from 'next-translate/useTranslation'
const CreateGuildPage: NextPage<PagePropsWithAuthentication> = (props) => {
const { t } = useTranslation()
return (
<AuthenticationProvider authentication={props.authentication}>
<Head title='Thream | Create a Guild' />
<Application path='/application/guilds/create'>
<CreateGuild />
</Application>
<GuildsProvider>
<Head
title={`Thream | ${t('application:create-a-guild')}`}
description={t('application:create-a-guild-description')}
/>
<Application
path='/application/guilds/create'
title={t('application:create-a-guild')}
>
<CreateGuild />
</Application>
</GuildsProvider>
</AuthenticationProvider>
)
}

View File

@ -1,4 +1,5 @@
import { NextPage } from 'next'
import useTranslation from 'next-translate/useTranslation'
import { Head } from 'components/Head'
import { Application } from 'components/Application'
@ -6,16 +7,27 @@ import {
authenticationFromServerSide,
AuthenticationProvider,
PagePropsWithAuthentication
} from 'utils/authentication'
} from 'tools/authentication'
import { JoinGuildsPublic } from 'components/Application/JoinGuildsPublic'
import { GuildsProvider } from 'contexts/Guilds'
const JoinGuildPage: NextPage<PagePropsWithAuthentication> = (props) => {
const { t } = useTranslation()
return (
<AuthenticationProvider authentication={props.authentication}>
<Head title='Thream | Application' />
<Application path='/application/guilds/join'>
<JoinGuildsPublic />
</Application>
<GuildsProvider>
<Head
title={`Thream | ${t('application:join-a-guild')}`}
description={t('application:join-a-guild-description')}
/>
<Application
path='/application/guilds/join'
title={t('application:join-a-guild')}
>
<JoinGuildsPublic />
</Application>
</GuildsProvider>
</AuthenticationProvider>
)
}

View File

@ -2,20 +2,23 @@ import { NextPage } from 'next'
import { Head } from 'components/Head'
import { Application } from 'components/Application'
import { PopupGuild } from 'components/Application/PopupGuild/PopupGuild.stories'
import { PopupGuild } from 'components/Application/PopupGuild'
import {
authenticationFromServerSide,
AuthenticationProvider,
PagePropsWithAuthentication
} from 'utils/authentication'
} from 'tools/authentication'
import { GuildsProvider } from 'contexts/Guilds'
const ApplicationPage: NextPage<PagePropsWithAuthentication> = (props) => {
return (
<AuthenticationProvider authentication={props.authentication}>
<Head title='Thream | Application' />
<Application path='/application'>
<PopupGuild />
</Application>
<GuildsProvider>
<Head title='Thream | Application' />
<Application path='/application' title='Application'>
<PopupGuild />
</Application>
</GuildsProvider>
</AuthenticationProvider>
)
}

View File

@ -6,16 +6,22 @@ import {
authenticationFromServerSide,
AuthenticationProvider,
PagePropsWithAuthentication
} from 'utils/authentication'
} from 'tools/authentication'
import { UserProfile } from 'components/Application/UserProfile'
import { GuildsProvider } from 'contexts/Guilds'
const UserProfilePage: NextPage<PagePropsWithAuthentication> = (props) => {
return (
<AuthenticationProvider authentication={props.authentication}>
<Head title='Thream | Settings' />
<Application path='/application/users/[userId]'>
<UserProfile user={props.authentication.user} />
</Application>
<GuildsProvider>
<Head title='Thream | Settings' />
<Application
path={`/application/users/${props.authentication.user.id}`}
title='Settings'
>
<UserProfile user={props.authentication.user} />
</Application>
</GuildsProvider>
</AuthenticationProvider>
)
}

View File

@ -11,10 +11,10 @@ import { Footer, FooterProps } from 'components/Footer'
import { Input } from 'components/design/Input'
import { Button } from 'components/design/Button'
import { FormState } from 'components/design/FormState'
import { authenticationFromServerSide } from 'utils/authentication'
import { authenticationFromServerSide } from 'tools/authentication'
import { ScrollableBody } from 'components/ScrollableBody'
import { userSchema } from 'models/User'
import { api } from 'utils/api'
import { api } from 'tools/api'
import { HandleSubmitCallback, useForm } from 'hooks/useForm'
const ForgotPassword: NextPage<FooterProps> = (props) => {

View File

@ -10,10 +10,10 @@ import { Footer, FooterProps } from 'components/Footer'
import { Input } from 'components/design/Input'
import { Button } from 'components/design/Button'
import { FormState } from 'components/design/FormState'
import { authenticationFromServerSide } from 'utils/authentication'
import { authenticationFromServerSide } from 'tools/authentication'
import { AuthenticationForm } from 'components/Authentication'
import { ScrollableBody } from 'components/ScrollableBody/ScrollableBody'
import { api } from 'utils/api'
import { api } from 'tools/api'
import { userSchema } from '../../models/User'
import { HandleSubmitCallback, useForm } from 'hooks/useForm'

View File

@ -5,7 +5,7 @@ import { Head } from 'components/Head'
import { Authentication } from 'components/Authentication'
import { Header } from 'components/Header'
import { Footer, FooterProps } from 'components/Footer'
import { authenticationFromServerSide } from 'utils/authentication'
import { authenticationFromServerSide } from 'tools/authentication'
import { ScrollableBody } from 'components/ScrollableBody'
const Signin: NextPage<FooterProps> = (props) => {
@ -14,7 +14,7 @@ const Signin: NextPage<FooterProps> = (props) => {
return (
<ScrollableBody>
<Head title={`Thream | ${t('authentication:signup')}`} />
<Head title={`Thream | ${t('authentication:signin')}`} />
<Header />
<Authentication mode='signin' />
<Footer version={version} />

View File

@ -5,7 +5,7 @@ import { Head } from 'components/Head'
import { Authentication } from 'components/Authentication'
import { Header } from 'components/Header'
import { Footer, FooterProps } from 'components/Footer'
import { authenticationFromServerSide } from 'utils/authentication'
import { authenticationFromServerSide } from 'tools/authentication'
import { ScrollableBody } from 'components/ScrollableBody'
const Signup: NextPage<FooterProps> = (props) => {