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

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
+  selected?: boolean
+}
+
+export const Channel: React.FC<ChannelProps> = (props) => {
+  const { channel, path, selected = false } = props
+
+  return (
+    <Link 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': selected
+          }
+        )}
+      >
+        <span className='ml-2 mr-4' data-cy='channel-name'>
+          # {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,33 @@ 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>
-        )
-      })}
-    </nav>
+    <div
+      id='channels'
+      className='scrollbar-firefox-support overflow-y-auto flex-1 flex flex-col'
+    >
+      <InfiniteScroll
+        className='w-full channels-list'
+        scrollableTarget='channels'
+        dataLength={channels.length}
+        next={nextPage}
+        hasMore={hasMore}
+        loader={<Loader />}
+      >
+        {channels.map((channel) => {
+          const selected = channel.id === path.channelId
+          return (
+            <Channel
+              key={channel.id}
+              channel={channel}
+              path={path}
+              selected={selected}
+            />
+          )
+        })}
+      </InfiniteScroll>
+    </div>
   )
 }