feat(contexts): add Channels and Guilds

components/Application/Channels/Channel/Channel.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react'
+import { channelExample } from 'cypress/fixtures/channels/channel'
+
+import { Channel as Component, ChannelProps } from './Channel'
+
+const Stories: Meta = {
+  title: 'Channel',
+  component: Component
+}
+
+export default Stories
+
+export const Channel: Story<ChannelProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Channel.args = { path: { channelId: 1, guildId: 1 }, channel: channelExample }

components/Application/Channels/Channel/Channel.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react'
+import { channelExample } from 'cypress/fixtures/channels/channel'
+
+import { Channel } from './Channel'
+
+describe('<Channel />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Channel channel={channelExample} path={{ channelId: 1, guildId: 1 }} />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/Channels/Channel/Channel.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+
+import { GuildsChannelsPath } from '../../Application'
+import { Channel as ChannelType } from '../../../../models/Channel'
+
+export interface ChannelProps {
+  path: GuildsChannelsPath
+  channel: ChannelType
+}
+
+export const Channel: React.FC<ChannelProps> = (props) => {
+  const { channel, path } = props
+
+  return (
+    <Link key={channel.id} href={`/application/${path.guildId}/${channel.id}`}>
+      <a
+        className={classNames(
+          'hover:bg-gray-100 group flex items-center justify-between text-sm py-2 my-3 mx-3 transition-colors dark:hover:bg-gray-600 duration-200 rounded-lg',
+          {
+            'text-green-800 dark:text-green-400 font-semibold':
+              typeof path !== 'string' && path.channelId === channel.id,
+            'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-normal':
+              typeof path === 'string'
+          }
+        )}
+      >
+        <span className='ml-2 mr-4'># {channel.name}</span>
+      </a>
+    </Link>
+  )
+}

components/Application/Channels/Channel/index.ts

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

components/Application/Channels/Channels.stories.tsx

@@ -1,15 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-
-import { Channels as Component, ChannelsProps } from './'
-
-const Stories: Meta = {
-  title: 'Channels',
-  component: Component
-}
-
-export default Stories
-
-export const Channels: Story<ChannelsProps> = (arguments_) => (
-  <Component {...arguments_} />
-)
-Channels.args = { path: { channelId: 1, guildId: 2 } }

components/Application/Channels/Channels.test.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Channels } from './'
-
-describe('<Channels />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <Channels path={{ channelId: 1, guildId: 2 }} />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/Channels/Channels.tsx

@@ -1,7 +1,9 @@
-import Link from 'next/link'
+import InfiniteScroll from 'react-infinite-scroll-component'
-import classNames from 'classnames'
 
 import { GuildsChannelsPath } from '../Application'
+import { Loader } from 'components/design/Loader'
+import { Channel } from './Channel'
+import { useChannels } from 'contexts/Channels'
 
 export interface ChannelsProps {
   path: GuildsChannelsPath
@@ -10,27 +12,19 @@ export interface ChannelsProps {
 export const Channels: React.FC<ChannelsProps> = (props) => {
   const { path } = props
 
+  const { channels, hasMore, nextPage } = useChannels()
+
   return (
-    <nav className='w-full'>
+    <InfiniteScroll
-      {new Array(100).fill(null).map((_, index) => {
+      className='w-full channels-list'
-        return (
+      dataLength={channels.length}
-          <Link key={index} href={`/application/${path.guildId}/${index}`}>
+      next={nextPage}
-            <a
+      hasMore={hasMore}
-              className={classNames(
+      loader={<Loader />}
-                'hover:bg-gray-100 group flex items-center justify-between text-sm py-2 my-3 mx-3 transition-colors dark:hover:bg-gray-600 duration-200 rounded-lg',
+    >
-                {
+      {channels.map((channel) => {
-                  'text-green-800 dark:text-green-400 font-semibold':
+        return <Channel key={channel.id} channel={channel} path={path} />
-                    typeof path !== 'string' && path.channelId === index,
-                  'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-normal':
-                    typeof path === 'string'
-                }
-              )}
-            >
-              <span className='ml-2 mr-4'># Channel {index}</span>
-            </a>
-          </Link>
-        )
       })}
-    </nav>
+    </InfiniteScroll>
   )
 }

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

@@ -21,7 +21,7 @@ export const GuildLeftSidebar: React.FC<GuildLeftSidebarProps> = (props) => {
         <h2 className='text-xl'>{guild.name}</h2>
       </div>
       <Divider />
-      <div className='scrollbar-firefox-support overflow-y-auto'>
+      <div className='scrollbar-firefox-support overflow-y-auto flex-1'>
         <Channels path={path} />
       </div>
       <Divider />

components/Application/Guilds/Guilds.tsx

@@ -1,44 +1,31 @@
-import { useEffect } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 
-import { useAuthentication } from 'utils/authentication'
-import { GuildWithDefaultChannelId } from 'models/Guild'
 import { Loader } from 'components/design/Loader'
 import { ApplicationProps } from '../Application'
 import { Guild } from './Guild'
-import { usePagination } from 'hooks/usePagination'
+import { useGuilds } from 'contexts/Guilds'
 
 export interface GuildsProps extends ApplicationProps {}
 
 export const Guilds: React.FC<GuildsProps> = (props) => {
   const { path } = props
-  const { authentication } = useAuthentication()
 
-  const { items, hasMore, nextPage } = usePagination<GuildWithDefaultChannelId>(
+  const { guilds, hasMore, nextPage } = useGuilds()
-    {
-      api: authentication.api,
-      url: '/guilds'
-    }
-  )
-
-  useEffect(() => {
-    nextPage()
-  }, [nextPage])
 
   return (
     <div
-      id='guilds-list-members'
+      id='guilds-list'
       className='min-w-[92px] mt-[130px] pt-2 h-full border-r-2 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
     >
       <InfiniteScroll
         className='guilds-list'
-        dataLength={items.length}
+        dataLength={guilds.length}
         next={nextPage}
         hasMore={hasMore}
-        scrollableTarget='guilds-list-members'
+        scrollableTarget='guilds-list'
         loader={<Loader />}
       >
-        {items.map((guild) => {
+        {guilds.map((guild) => {
           return (
             <Guild
               guild={guild}

contexts/Channels.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext, useEffect } from 'react'
+
+import { NextPage, usePagination } from 'hooks/usePagination'
+import { useAuthentication } from 'utils/authentication'
+import { Channel } from 'models/Channel'
+import { GuildsChannelsPath } from 'components/Application'
+
+export interface Channels {
+  channels: Channel[]
+  hasMore: boolean
+  nextPage: NextPage
+}
+
+const defaultChannelsContext = {} as any
+const ChannelsContext = createContext<Channels>(defaultChannelsContext)
+
+export interface ChannelsProviderProps {
+  path: GuildsChannelsPath
+}
+
+export const ChannelsProvider: React.FC<ChannelsProviderProps> = (props) => {
+  const { path, children } = props
+
+  const { authentication } = useAuthentication()
+
+  const {
+    items: channels,
+    hasMore,
+    nextPage,
+    resetPagination
+  } = usePagination<Channel>({
+    api: authentication.api,
+    url: `/guilds/${path.guildId}/channels`
+  })
+
+  useEffect(() => {
+    resetPagination()
+    nextPage()
+  }, [nextPage, resetPagination])
+
+  return (
+    <ChannelsContext.Provider value={{ channels, hasMore, nextPage }}>
+      {children}
+    </ChannelsContext.Provider>
+  )
+}
+
+export const useChannels = (): Channels => {
+  const channels = useContext(ChannelsContext)
+  if (channels === defaultChannelsContext) {
+    throw new Error('useChannels must be used within ChannelsProvider')
+  }
+  return channels
+}

contexts/GuildMember.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react'
+import { createContext, useContext, useState } from 'react'
 
 import { Guild } from 'models/Guild'
 import { Member } from 'models/Member'
@@ -16,8 +16,10 @@ const defaultGuildMemberContext = {} as any
 const GuildMemberContext = createContext<GuildMember>(defaultGuildMemberContext)
 
 export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
+  const [guildMember] = useState(props.guildMember)
+
   return (
-    <GuildMemberContext.Provider value={props.guildMember}>
+    <GuildMemberContext.Provider value={guildMember}>
       {props.children}
     </GuildMemberContext.Provider>
   )

contexts/Guilds.tsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, useEffect } from 'react'
+
+import { NextPage, usePagination } from 'hooks/usePagination'
+import { useAuthentication } from 'utils/authentication'
+import { GuildWithDefaultChannelId } from 'models/Guild'
+
+export interface Guilds {
+  guilds: GuildWithDefaultChannelId[]
+  hasMore: boolean
+  nextPage: NextPage
+}
+
+const defaultGuildsContext = {} as any
+const GuildsContext = createContext<Guilds>(defaultGuildsContext)
+
+export const GuildsProvider: React.FC = (props) => {
+  const { children } = props
+
+  const { authentication } = useAuthentication()
+
+  const {
+    items: guilds,
+    hasMore,
+    nextPage,
+    resetPagination
+  } = usePagination<GuildWithDefaultChannelId>({
+    api: authentication.api,
+    url: '/guilds'
+  })
+
+  useEffect(() => {
+    resetPagination()
+    nextPage()
+  }, [nextPage, resetPagination])
+
+  return (
+    <GuildsContext.Provider value={{ guilds, hasMore, nextPage }}>
+      {children}
+    </GuildsContext.Provider>
+  )
+}
+
+export const useGuilds = (): Guilds => {
+  const guilds = useContext(GuildsContext)
+  if (guilds === defaultGuildsContext) {
+    throw new Error('useGuilds must be used within GuildsProvider')
+  }
+  return guilds
+}

hooks/usePagination.ts

@@ -1,5 +1,6 @@
 import { useState, useRef, useCallback } from 'react'
 import { AxiosInstance } from 'axios'
+
 import { FetchState } from './useFetchState'
 
 export interface Query {

models/Channel.ts

@@ -1,9 +1,7 @@
-import { Type } from '@sinclair/typebox'
+import { Type, Static } from '@sinclair/typebox'
 
 import { date, id } from './utils'
 
-export const types = [Type.Literal('text')]
-
 export const channelSchema = {
   id,
   name: Type.String({ minLength: 1, maxLength: 20 }),
@@ -11,3 +9,5 @@ export const channelSchema = {
   updatedAt: date.updatedAt,
   guildId: id
 }
+const channelObjectSchema = Type.Object(channelSchema)
+export type Channel = Static<typeof channelObjectSchema>

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

@@ -10,6 +10,8 @@ import {
 } from 'utils/authentication'
 import { GuildMember, GuildMemberProvider } from 'contexts/GuildMember'
 import { GuildLeftSidebar } from 'components/Application/GuildLeftSidebar'
+import { ChannelsProvider } from 'contexts/Channels'
+import { GuildsProvider } from 'contexts/Guilds'
 
 export interface ChannelPageProps extends PagePropsWithAuthentication {
   channelId: number
@@ -20,27 +22,26 @@ export interface ChannelPageProps extends PagePropsWithAuthentication {
 const ChannelPage: NextPage<ChannelPageProps> = (props) => {
   const { channelId, guildId, authentication, guildMember } = props
 
+  const path = {
+    channelId,
+    guildId
+  }
+
   return (
     <AuthenticationProvider authentication={authentication}>
-      <GuildMemberProvider guildMember={guildMember}>
+      <GuildsProvider>
-        <Head title='Thream | Application' />
+        <GuildMemberProvider guildMember={guildMember}>
-        <Application
+          <ChannelsProvider path={path}>
-          path={{
+            <Head title='Thream | Application' />
-            channelId,
+            <Application
-            guildId
+              path={path}
-          }}
+              guildLeftSidebar={<GuildLeftSidebar path={path} />}
-          guildLeftSidebar={
+            >
-            <GuildLeftSidebar
+              <Messages />
-              path={{
+            </Application>
-                channelId,
+          </ChannelsProvider>
-                guildId
+        </GuildMemberProvider>
-              }}
+      </GuildsProvider>
-            />
-          }
-        >
-          <Messages />
-        </Application>
-      </GuildMemberProvider>
     </AuthenticationProvider>
   )
 }

pages/application/guilds/create.tsx

@@ -8,14 +8,17 @@ import {
   PagePropsWithAuthentication
 } from 'utils/authentication'
 import { CreateGuild } from 'components/Application/CreateGuild'
+import { GuildsProvider } from 'contexts/Guilds'
 
 const CreateGuildPage: NextPage<PagePropsWithAuthentication> = (props) => {
   return (
     <AuthenticationProvider authentication={props.authentication}>
-      <Head title='Thream | Create a Guild' />
+      <GuildsProvider>
-      <Application path='/application/guilds/create'>
+        <Head title='Thream | Create a Guild' />
-        <CreateGuild />
+        <Application path='/application/guilds/create'>
-      </Application>
+          <CreateGuild />
+        </Application>
+      </GuildsProvider>
     </AuthenticationProvider>
   )
 }

pages/application/guilds/join.tsx

@@ -8,14 +8,17 @@ import {
   PagePropsWithAuthentication
 } from 'utils/authentication'
 import { JoinGuildsPublic } from 'components/Application/JoinGuildsPublic'
+import { GuildsProvider } from 'contexts/Guilds'
 
 const JoinGuildPage: NextPage<PagePropsWithAuthentication> = (props) => {
   return (
     <AuthenticationProvider authentication={props.authentication}>
-      <Head title='Thream | Application' />
+      <GuildsProvider>
-      <Application path='/application/guilds/join'>
+        <Head title='Thream | Application' />
-        <JoinGuildsPublic />
+        <Application path='/application/guilds/join'>
-      </Application>
+          <JoinGuildsPublic />
+        </Application>
+      </GuildsProvider>
     </AuthenticationProvider>
   )
 }

pages/application/index.tsx

@@ -8,14 +8,17 @@ import {
   AuthenticationProvider,
   PagePropsWithAuthentication
 } from 'utils/authentication'
+import { GuildsProvider } from 'contexts/Guilds'
 
 const ApplicationPage: NextPage<PagePropsWithAuthentication> = (props) => {
   return (
     <AuthenticationProvider authentication={props.authentication}>
-      <Head title='Thream | Application' />
+      <GuildsProvider>
-      <Application path='/application'>
+        <Head title='Thream | Application' />
-        <PopupGuild />
+        <Application path='/application'>
-      </Application>
+          <PopupGuild />
+        </Application>
+      </GuildsProvider>
     </AuthenticationProvider>
   )
 }

pages/application/users/[userId].tsx

@@ -8,14 +8,17 @@ import {
   PagePropsWithAuthentication
 } from 'utils/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' />
+      <GuildsProvider>
-      <Application path='/application/users/[userId]'>
+        <Head title='Thream | Settings' />
-        <UserProfile user={props.authentication.user} />
+        <Application path='/application/users/[userId]'>
-      </Application>
+          <UserProfile user={props.authentication.user} />
+        </Application>
+      </GuildsProvider>
     </AuthenticationProvider>
   )
 }