feat(hooks): add usePagination

components/Application/Guilds/Guild/Guild.tsx

@@ -13,6 +13,7 @@ export const Guild: React.FC<GuildProps> = (props) => {
 
   return (
     <IconLink
+      className='mt-2'
       key={guild.id}
       href={`/application/${guild.id}/${guild.defaultChannelId}`}
       selected={selected}

components/Application/Guilds/Guilds.tsx

@@ -1,48 +1,29 @@
-import { useCallback, useEffect, useState, useRef } from 'react'
+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 { useFetchState } from 'hooks/useFetchState'
 import { ApplicationProps } from '../Application'
 import { Guild } from './Guild'
+import { usePagination } from 'hooks/usePagination'
 
 export interface GuildsProps extends ApplicationProps {}
 
 export const Guilds: React.FC<GuildsProps> = (props) => {
   const { path } = props
-
-  const [guilds, setGuilds] = useState<GuildWithDefaultChannelId[]>([])
-  const [hasMore, setHasMore] = useState(true)
-  const [fetchState, setFetchState] = useFetchState('idle')
-  const afterId = useRef<number | null>(null)
-
   const { authentication } = useAuthentication()
 
-  const fetchGuilds = useCallback(async (): Promise<void> => {
+  const { items, hasMore, nextPage } = usePagination<GuildWithDefaultChannelId>(
-    if (fetchState !== 'idle') {
+    {
-      return
+      api: authentication.api,
+      url: '/guilds'
     }
-    setFetchState('loading')
+  )
-    const { data } = await authentication.api.get<GuildWithDefaultChannelId[]>(
-      `/guilds?limit=20${
-        afterId.current != null ? `&after=${afterId.current}` : ''
-      }`
-    )
-    afterId.current = data.length > 0 ? data[data.length - 1].id : null
-    setGuilds((oldGuilds) => {
-      return [...oldGuilds, ...data]
-    })
-    setHasMore(data.length > 0)
-    setFetchState('idle')
-  }, [authentication, fetchState, setFetchState])
 
   useEffect(() => {
-    fetchGuilds().catch((error) => {
+    nextPage()
-      console.error(error)
+  }, [nextPage])
-    })
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div
@@ -51,13 +32,13 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
     >
       <InfiniteScroll
         className='guilds-list'
-        dataLength={guilds.length}
+        dataLength={items.length}
-        next={fetchGuilds}
+        next={nextPage}
         hasMore={hasMore}
         scrollableTarget='guilds-list-members'
         loader={<Loader />}
       >
-        {guilds.map((guild) => {
+        {items.map((guild) => {
           return (
             <Guild
               guild={guild}

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -1,49 +1,29 @@
-import { useCallback, useEffect, useState, useRef } from 'react'
+import { useEffect, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 
 import { useAuthentication } from 'utils/authentication'
 import { GuildPublic as GuildPublicType } from 'models/Guild'
 import { Loader } from 'components/design/Loader'
-import { useFetchState } from 'hooks/useFetchState'
 import { GuildPublic } from './GuildPublic'
+import { usePagination } from 'hooks/usePagination'
 
 export const JoinGuildsPublic: React.FC = () => {
-  const [guilds, setGuilds] = useState<GuildPublicType[]>([])
+  const [search, setSearch] = useState('')
-  const [hasMore, setHasMore] = useState(true)
-  const [inputSearch, setInputSearch] = useState('')
-  const [fetchState, setFetchState] = useFetchState('idle')
-  const afterId = useRef<number | null>(null)
-
   const { authentication } = useAuthentication()
 
-  const fetchGuilds = useCallback(async (): Promise<void> => {
+  const { items, hasMore, nextPage, resetPagination } =
-    if (fetchState !== 'idle') {
+    usePagination<GuildPublicType>({
-      return
+      api: authentication.api,
-    }
+      url: '/guilds/public'
-    setFetchState('loading')
-    const { data } = await authentication.api.get<GuildPublicType[]>(
-      `/guilds/public?limit=20&search=${inputSearch}${
-        afterId.current != null ? `&after=${afterId.current}` : ''
-      }`
-    )
-    afterId.current = data.length > 0 ? data[data.length - 1].id : null
-    setGuilds((oldGuilds) => {
-      return [...oldGuilds, ...data]
     })
-    setHasMore(data.length > 0)
-    setFetchState('idle')
-  }, [authentication, fetchState, setFetchState, inputSearch])
 
   useEffect(() => {
-    afterId.current = null
+    resetPagination()
-    setGuilds([])
+    nextPage({ search })
-    fetchGuilds().catch((error) => {
+  }, [resetPagination, nextPage, search])
-      console.error(error)
-    })
-  }, [inputSearch]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setInputSearch(event.target.value)
+    setSearch(event.target.value)
   }
 
   return (
@@ -59,13 +39,13 @@ export const JoinGuildsPublic: React.FC = () => {
       <div className='w-full flex items-center justify-center p-12'>
         <InfiniteScroll
           className='guilds-public-list max-w-[1600px] grid grid-cols-1 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-8 !overflow-hidden'
-          dataLength={guilds.length}
+          dataLength={items.length}
-          next={fetchGuilds}
+          next={nextPage}
           scrollableTarget='application-page-content'
           hasMore={hasMore}
           loader={<Loader />}
         >
-          {guilds.map((guild) => {
+          {items.map((guild) => {
             return <GuildPublic guild={guild} key={guild.id} />
           })}
         </InfiniteScroll>

components/design/IconLink/IconLink.tsx

@@ -5,13 +5,14 @@ export interface IconLinkProps {
   selected?: boolean
   href: string
   title?: string
+  className?: string
 }
 
 export const IconLink: React.FC<IconLinkProps> = (props) => {
-  const { children, selected, href, title } = props
+  const { children, selected, href, title, className } = props
 
   return (
-    <div className='w-full flex justify-center group'>
+    <div className={classNames('w-full flex justify-center group', className)}>
       <Link href={href}>
         <a className='w-full flex justify-center relative group' title={title}>
           {children}

cypress/integration/common/application/authentication.spec.ts

@@ -0,0 +1,36 @@
+import { getGuildsHandler } from '../../../fixtures/guilds/get'
+import { authenticationHandlers } from '../../../fixtures/handler'
+
+const applicationPaths = [
+  '/application',
+  '/application/users/0',
+  '/application/guilds/create',
+  '/application/guilds/join',
+  '/application/0/0'
+]
+
+describe('Common > application/authentication', () => {
+  beforeEach(() => {
+    cy.task('stopMockServer')
+  })
+
+  it('should redirect the user to `/authentication/signin` if not signed in', () => {
+    for (const applicationPath of applicationPaths) {
+      cy.visit(applicationPath)
+        .location('pathname')
+        .should('eq', '/authentication/signin')
+    }
+  })
+
+  it('should not redirect the user if signed in', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildsHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    for (const applicationPath of applicationPaths) {
+      cy.visit(applicationPath)
+        .location('pathname')
+        .should('eq', applicationPath)
+    }
+  })
+})

cypress/integration/common/application/left-sidebar.spec.ts

@@ -0,0 +1,17 @@
+import { getGuildsHandler } from '../../../fixtures/guilds/get'
+import { authenticationHandlers } from '../../../fixtures/handler'
+
+describe('Common > application/left-sidebar', () => {
+  beforeEach(() => {
+    cy.task('stopMockServer')
+  })
+
+  it('should shows all the guilds of the current user in left sidebar', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildsHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.visit('/application')
+    cy.get('.guilds-list').children().should('have.length', 2)
+  })
+})

cypress/integration/pages/application/index.spec.ts

@@ -1,45 +1,31 @@
-import { getGuildsHandler } from '../../../fixtures/guilds/get'
 import { authenticationHandlers } from '../../../fixtures/handler'
 
-const applicationPaths = [
-  '/application',
-  '/application/users/0',
-  '/application/guilds/create',
-  '/application/guilds/join',
-  '/application/0/0'
-]
-
 describe('Pages > /application', () => {
   beforeEach(() => {
     cy.task('stopMockServer')
   })
 
-  it('should redirect the user to `/authentication/signin` if not signed in', () => {
+  it('should redirect user to `/application/guilds/create` on click on "Create a Guild"', () => {
-    for (const applicationPath of applicationPaths) {
+    cy.task('startMockServer', [...authenticationHandlers]).setCookie(
-      cy.visit(applicationPath)
+      'refreshToken',
-        .location('pathname')
+      'refresh-token'
-        .should('eq', '/authentication/signin')
+    )
-    }
-  })
-
-  it('should not redirect the user if signed in', () => {
-    cy.task('startMockServer', [
-      ...authenticationHandlers,
-      getGuildsHandler
-    ]).setCookie('refreshToken', 'refresh-token')
-    for (const applicationPath of applicationPaths) {
-      cy.visit(applicationPath)
-        .location('pathname')
-        .should('eq', applicationPath)
-    }
-  })
-
-  it('should shows all the guilds of the current user in left sidebar', () => {
-    cy.task('startMockServer', [
-      ...authenticationHandlers,
-      getGuildsHandler
-    ]).setCookie('refreshToken', 'refresh-token')
     cy.visit('/application')
-    cy.get('.guilds-list').children().should('have.length', 2)
+    cy.get('a[href="/application/guilds/create"]')
+      .click()
+      .location('pathname')
+      .should('eq', '/application/guilds/create')
+  })
+
+  it('should redirect user to `/application/guilds/join` on click on "Join a Guild"', () => {
+    cy.task('startMockServer', [...authenticationHandlers]).setCookie(
+      'refreshToken',
+      'refresh-token'
+    )
+    cy.visit('/application')
+    cy.get('a[href="/application/guilds/join"]')
+      .click()
+      .location('pathname')
+      .should('eq', '/application/guilds/join')
   })
 })

hooks/usePagination.ts

@@ -0,0 +1,73 @@
+import { useState, useRef, useCallback } from 'react'
+import { AxiosInstance } from 'axios'
+import { FetchState } from './useFetchState'
+
+export interface Query {
+  [key: string]: string
+}
+export type NextPageAsync = (query?: Query) => Promise<void>
+export type NextPage = (query?: Query) => void
+
+export interface UsePaginationOptions {
+  api: AxiosInstance
+  url: string
+}
+
+export interface UsePaginationResult<T> {
+  items: T[]
+  nextPage: NextPage
+  resetPagination: () => void
+  hasMore: boolean
+}
+
+export const usePagination = <T extends { id: number }>(
+  options: UsePaginationOptions
+): UsePaginationResult<T> => {
+  const { api, url } = options
+
+  const [items, setItems] = useState<T[]>([])
+  const [hasMore, setHasMore] = useState(true)
+  const fetchState = useRef<FetchState>('idle')
+  const afterId = useRef<number | null>(null)
+
+  const nextPageAsync: NextPageAsync = useCallback(
+    async (query) => {
+      if (fetchState.current !== 'idle') {
+        return
+      }
+      fetchState.current = 'loading'
+      const searchParameters = new URLSearchParams(query)
+      searchParameters.append('limit', '20')
+      if (afterId.current != null) {
+        searchParameters.append('after', afterId.current.toString())
+      }
+      const { data: newItems } = await api.get<T[]>(
+        `${url}?${searchParameters.toString()}`
+      )
+      afterId.current =
+        newItems.length > 0 ? newItems[newItems.length - 1].id : null
+      setItems((oldItems) => {
+        return [...oldItems, ...newItems]
+      })
+      setHasMore(newItems.length > 0)
+      fetchState.current = 'idle'
+    },
+    [api, url]
+  )
+
+  const nextPage: NextPage = useCallback(
+    (query) => {
+      nextPageAsync(query).catch((error) => {
+        console.error(error)
+      })
+    },
+    [nextPageAsync]
+  )
+
+  const resetPagination = useCallback((): void => {
+    afterId.current = null
+    setItems([])
+  }, [])
+
+  return { items, hasMore, nextPage, resetPagination }
+}

pages/application/index.tsx

@@ -1,6 +1,6 @@
 import { Head } from 'components/Head'
 import { Application } from 'components/Application'
-import { PopupGuild } from 'components/Application/PopupGuild/PopupGuild.stories'
+import { PopupGuild } from 'components/Application/PopupGuild'
 import {
   authenticationFromServerSide,
   AuthenticationProvider,