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 classNames from 'classnames'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 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'>
-      {new Array(100).fill(null).map((_, index) => {
-        return (
-          <Link key={index} href={`/application/${path.guildId}/${index}`}>
-            <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 === 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>
-        )
+    <InfiniteScroll
+      className='w-full channels-list'
+      dataLength={channels.length}
+      next={nextPage}
+      hasMore={hasMore}
+      loader={<Loader />}
+    >
+      {channels.map((channel) => {
+        return <Channel key={channel.id} channel={channel} path={path} />
       })}
-    </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>(
-    {
-      api: authentication.api,
-      url: '/guilds'
-    }
-  )
-
-  useEffect(() => {
-    nextPage()
-  }, [nextPage])
+  const { guilds, hasMore, nextPage } = useGuilds()
 
   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}