feat(contexts): add GuildMember

components/Application/Application.tsx

@@ -1,13 +1,7 @@
 import { useState, useEffect, useMemo } from 'react'
 import Image from 'next/image'
 import useTranslation from 'next-translate/useTranslation'
-import {
-  CogIcon,
-  PlusIcon,
-  MenuIcon,
-  UsersIcon,
-  XIcon
-} from '@heroicons/react/solid'
+import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
 import classNames from 'classnames'
 import { useMediaQuery } from 'react-responsive'
 import { useSwipeable } from 'react-swipeable'
@@ -15,7 +9,6 @@ import { useSwipeable } from 'react-swipeable'
 import { Sidebar, DirectionSidebar } from './Sidebar'
 import { IconButton } from 'components/design/IconButton'
 import { IconLink } from 'components/design/IconLink'
-import { Channels } from './Channels'
 import { Guilds } from './Guilds/Guilds'
 import { Divider } from '../design/Divider'
 import { Members } from './Members'
@@ -27,17 +20,20 @@ export interface GuildsChannelsPath {
   channelId: number
 }
 
+export type ApplicationPath =
+  | '/application'
+  | '/application/guilds/join'
+  | '/application/guilds/create'
+  | '/application/users/[userId]'
+  | GuildsChannelsPath
+
 export interface ApplicationProps {
-  path:
-    | '/application'
-    | '/application/guilds/join'
-    | '/application/guilds/create'
-    | '/application/users/[userId]'
-    | GuildsChannelsPath
+  path: ApplicationPath
+  guildLeftSidebar?: React.ReactNode
 }
 
 export const Application: React.FC<ApplicationProps> = (props) => {
-  const { children, path } = props
+  const { children, path, guildLeftSidebar } = props
 
   const { t } = useTranslation()
   const { user } = useAuthentication()
@@ -217,26 +213,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
             <Guilds path={path} />
           </div>
 
-          {typeof path !== 'string' && (
-            <div className='flex flex-col justify-between w-full mt-2'>
-              <div className='text-center p-2 mx-8 mt-2'>
-                <h2 className='text-xl'>Guild Name</h2>
-              </div>
-              <Divider />
-              <div className='scrollbar-firefox-support overflow-y-auto'>
-                <Channels path={path} />
-              </div>
-              <Divider />
-              <div className='flex justify-center items-center p-2 mb-1 space-x-6'>
-                <IconButton className='h-10 w-10' title='Add a Channel'>
-                  <PlusIcon />
-                </IconButton>
-                <IconButton className='h-7 w-7' title='Settings'>
-                  <CogIcon />
-                </IconButton>
-              </div>
-            </div>
-          )}
+          {guildLeftSidebar}
         </Sidebar>
 
         <div

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

@@ -0,0 +1,38 @@
+import { CogIcon, PlusIcon } from '@heroicons/react/solid'
+
+import { useGuildMember } from 'contexts/GuildMember'
+import { Divider } from 'components/design/Divider'
+import { Channels } from 'components/Application/Channels'
+import { IconButton } from 'components/design/IconButton'
+import { GuildsChannelsPath } from '..'
+
+export interface GuildLeftSidebarProps {
+  path: GuildsChannelsPath
+}
+
+export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
+  const { path } = props
+
+  const { guild } = useGuildMember()
+
+  return (
+    <div className='flex flex-col justify-between w-full mt-2'>
+      <div className='text-center p-2 mx-8 mt-2'>
+        <h2 className='text-xl'>{guild.name}</h2>
+      </div>
+      <Divider />
+      <div className='scrollbar-firefox-support overflow-y-auto'>
+        <Channels path={path} />
+      </div>
+      <Divider />
+      <div className='flex justify-center items-center p-2 mb-1 space-x-6'>
+        <IconButton className='h-10 w-10' title='Add a Channel'>
+          <PlusIcon />
+        </IconButton>
+        <IconButton className='h-7 w-7' title='Settings'>
+          <CogIcon />
+        </IconButton>
+      </div>
+    </div>
+  )
+}

components/Application/GuildLeftSidebar/index.ts

@@ -0,0 +1 @@
+export * from './GuildLeftSidebar'

contexts/GuildMember.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext } from 'react'
+
+import { Guild } from 'models/Guild'
+import { Member } from 'models/Member'
+
+export interface GuildMember {
+  guild: Guild
+  member: Member
+}
+
+export interface GuildMemberProps {
+  guildMember: GuildMember
+}
+
+const defaultGuildMemberContext = {} as any
+const GuildMemberContext = createContext<GuildMember>(defaultGuildMemberContext)
+
+export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
+  return (
+    <GuildMemberContext.Provider value={props.guildMember}>
+      {props.children}
+    </GuildMemberContext.Provider>
+  )
+}
+
+export const useGuildMember = (): GuildMember => {
+  const guildMember = useContext(GuildMemberContext)
+  if (guildMember === defaultGuildMemberContext) {
+    throw new Error('useGuildMember must be used within GuildMemberProvider')
+  }
+  return guildMember
+}

models/Member.ts

@@ -1,4 +1,4 @@
-import { Type } from '@sinclair/typebox'
+import { Type, Static } from '@sinclair/typebox'
 
 import { date, id } from './utils'
 
@@ -10,3 +10,5 @@ export const memberSchema = {
   userId: id,
   guildId: id
 }
+const memberObjectSchema = Type.Object(memberSchema)
+export type Member = Static<typeof memberObjectSchema>

pages/application/[guildId]/[channelId].tsx

@@ -8,33 +8,46 @@ import {
   AuthenticationProvider,
   PagePropsWithAuthentication
 } from 'utils/authentication'
+import { GuildMember, GuildMemberProvider } from 'contexts/GuildMember'
+import { GuildLeftSidebar } from 'components/Application/GuildLeftSidebar'
 
 export interface ChannelPageProps extends PagePropsWithAuthentication {
   channelId: number
   guildId: number
+  guildMember: GuildMember
 }
 
 const ChannelPage: NextPage<ChannelPageProps> = (props) => {
-  const { channelId, guildId, authentication } = props
+  const { channelId, guildId, authentication, guildMember } = props
 
   return (
     <AuthenticationProvider authentication={authentication}>
-      <Head title='Thream | Application' />
-      <Application
-        path={{
-          channelId,
-          guildId
-        }}
-      >
-        <Messages />
-      </Application>
+      <GuildMemberProvider guildMember={guildMember}>
+        <Head title='Thream | Application' />
+        <Application
+          path={{
+            channelId,
+            guildId
+          }}
+          guildLeftSidebar={
+            <GuildLeftSidebar
+              path={{
+                channelId,
+                guildId
+              }}
+            />
+          }
+        >
+          <Messages />
+        </Application>
+      </GuildMemberProvider>
     </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 +58,11 @@ export const getServerSideProps = authenticationFromServerSide({
         }
       }
     }
+    const { data: guildMember } = await api.get(`/guilds/${guildId}`)
     return {
       channelId,
-      guildId
+      guildId,
+      guildMember
     }
   }
 })

utils/authentication/authenticationFromServerSide.ts

@@ -1,5 +1,5 @@
 import { AxiosInstance, AxiosResponse } from 'axios'
-import { GetServerSideProps, GetServerSidePropsContext, Redirect } from 'next'
+import { GetServerSideProps, GetServerSidePropsContext } from 'next'
 
 import { api } from '../api'
 import { Cookies } from '../cookies'
@@ -25,7 +25,7 @@ interface AuthenticationFromServerSideOptions {
   /** allows to fetch data server side with the authenticated user, the callback should returns the data that will be transfer to the component as props */
   fetchData?: (
     context: GetServerSidePropsContext,
-    api?: AxiosInstance
+    api: AxiosInstance
   ) => Promise<{ [key: string]: any }>
 }
 
@@ -56,9 +56,9 @@ export const authenticationFromServerSide = (
       } else {
         let data = {}
         if (fetchData != null) {
-          data = await fetchData(context)
+          data = await fetchData(context, api)
         }
-        return { props: { ...data } }
+        return { props: data }
       }
     } else {
       if (tokens == null) {
@@ -69,20 +69,26 @@ export const authenticationFromServerSide = (
           }
         }
       } else {
-        let data: Redirect | any = {}
-        const authentication = new Authentication(tokens)
-        const { data: currentUser } = await authentication.api.get<
-          unknown,
-          AxiosResponse<UserCurrent>
-        >('/users/current')
-        if (fetchData != null) {
-          data = await fetchData(context, authentication.api)
-        }
-        if (data.redirect != null) {
-          return data
-        }
-        return {
-          props: { authentication: { tokens, ...currentUser }, ...data }
+        try {
+          let data: any = {}
+          const authentication = new Authentication(tokens)
+          const { data: currentUser } = await authentication.api.get<
+            unknown,
+            AxiosResponse<UserCurrent>
+          >('/users/current')
+          if (fetchData != null) {
+            data = await fetchData(context, authentication.api)
+          }
+          return {
+            props: { authentication: { tokens, ...currentUser }, ...data }
+          }
+        } catch {
+          return {
+            redirect: {
+              destination: '/404',
+              permanent: false
+            }
+          }
         }
       }
     }