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

components/Application/Guilds/Guild/Guild.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Guild as Component, GuildProps } from './Guild'
+import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
+
+const Stories: Meta = {
+  title: 'Guild',
+  component: Component
+}
+
+export default Stories
+
+export const Guild: Story<GuildProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Guild.args = {
+  guild: {
+    ...guildExample,
+    defaultChannelId: 1
+  }
+}

components/Application/Guilds/Guild/Guild.test.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react'
+
+import { Guild } from './Guild'
+import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
+
+describe('<Guild />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Guild
+        guild={{
+          ...guildExample,
+          defaultChannelId: 1
+        }}
+      />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/Guilds/Guild/Guild.tsx

@@ -0,0 +1,35 @@
+import Image from 'next/image'
+
+import { GuildWithDefaultChannelId } from '../../../../models/Guild'
+import { IconLink } from '../../../design/IconLink'
+
+export interface GuildProps {
+  guild: GuildWithDefaultChannelId
+  selected?: boolean
+}
+
+export const Guild: React.FC<GuildProps> = (props) => {
+  const { guild, selected } = props
+
+  return (
+    <IconLink
+      className='mt-2'
+      href={`/application/${guild.id}/${guild.defaultChannelId}`}
+      selected={selected}
+      title={guild.name}
+    >
+      <div className='pl-[6px]'>
+        <Image
+          className='rounded-full'
+          src={
+            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
+          }
+          alt='logo'
+          width={48}
+          height={48}
+          draggable={false}
+        />
+      </div>
+    </IconLink>
+  )
+}

components/Application/Guilds/Guild/index.ts

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

components/Application/Guilds/Guilds.stories.tsx

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

components/Application/Guilds/Guilds.test.tsx

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

components/Application/Guilds/Guilds.tsx

@@ -1,34 +1,37 @@
-import Image from 'next/image'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
-import { ApplicationProps } from '../Application'
-import { IconLink } from '../../design/IconLink'
+import { Loader } from 'components/design/Loader'
+import { Guild } from './Guild'
+import { useGuilds } from 'contexts/Guilds'
+import { GuildsChannelsPath } from '..'
 
-export interface GuildsProps extends ApplicationProps {}
+export interface GuildsProps {
+  path: GuildsChannelsPath | string
+}
 
 export const Guilds: React.FC<GuildsProps> = (props) => {
   const { path } = props
 
+  const { guilds, hasMore, nextPage } = useGuilds()
+
   return (
-    <div 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'>
-      {new Array(100).fill(null).map((_, index) => {
-        return (
-          <IconLink
-            key={index}
-            href={`/application/${index}/0`}
-            selected={typeof path !== 'string' && path.guildId === index}
-            title='Guild Name'
-          >
-            <div className='pl-[6px]'>
-              <Image
-                src='/images/icons/Thream.png'
-                alt='logo'
-                width={48}
-                height={48}
-              />
-            </div>
-          </IconLink>
-        )
-      })}
+    <div
+      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={guilds.length}
+        next={nextPage}
+        hasMore={hasMore}
+        scrollableTarget='guilds-list'
+        loader={<Loader />}
+      >
+        {guilds.map((guild) => {
+          const selected = typeof path !== 'string' && path.guildId === guild.id
+          return <Guild key={guild.id} guild={guild} selected={selected} />
+        })}
+      </InfiniteScroll>
     </div>
   )
 }