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

2022-01-01 20:42:25 +01:00
parent 91e246b759
commit fdc2a2d1de
118 changed files with 6040 additions and 2094 deletions
--- a/pages/application/[guildId]/[channelId].tsx
+++ b/pages/application/[guildId]/[channelId].tsx
@ -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
    }
  }
 })
--- a/pages/application/guilds/create.tsx
+++ b/pages/application/guilds/create.tsx
@ -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>
  )
 }
--- a/pages/application/guilds/join.tsx
+++ b/pages/application/guilds/join.tsx
@ -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>
  )
 }
--- a/pages/application/index.tsx
+++ b/pages/application/index.tsx
@ -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>
  )
 }
--- a/pages/application/users/[userId].tsx
+++ b/pages/application/users/[userId].tsx
@ -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>
  )
 }