Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat(hooks): add usePagination

Browse Source
This commit is contained in:
Divlo
2021-11-19 17:06:18 +01:00
parent ad945d7a7a
commit dc3d658d85
9 changed files with 178 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/Application/Guilds/Guild/Guild.tsx
View File

@ -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}

43
components/Application/Guilds/Guilds.tsx
View File

@ -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> => {
if (fetchState !== 'idle') {
return
const { items, hasMore, nextPage } = usePagination<GuildWithDefaultChannelId>(
{
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) => {
console.error(error)
})
}, []) // eslint-disable-line react-hooks/exhaustive-deps
nextPage()
}, [nextPage])
return (
<div
@ -51,13 +32,13 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
>
<InfiniteScroll
className='guilds-list'
dataLength={guilds.length}
next={fetchGuilds}
dataLength={items.length}
next={nextPage}
hasMore={hasMore}
scrollableTarget='guilds-list-members'
loader={<Loader />}
>
{guilds.map((guild) => {
{items.map((guild) => {
return (
<Guild
guild={guild}

48
components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx
View File

@ -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 [hasMore, setHasMore] = useState(true)
const [inputSearch, setInputSearch] = useState('')
const [fetchState, setFetchState] = useFetchState('idle')
const afterId = useRef<number | null>(null)
const [search, setSearch] = useState('')
const { authentication } = useAuthentication()
const fetchGuilds = useCallback(async (): Promise<void> => {
if (fetchState !== 'idle') {
return
}
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]
const { items, hasMore, nextPage, resetPagination } =
usePagination<GuildPublicType>({
api: authentication.api,
url: '/guilds/public'
})
setHasMore(data.length > 0)
setFetchState('idle')
}, [authentication, fetchState, setFetchState, inputSearch])
useEffect(() => {
afterId.current = null
setGuilds([])
fetchGuilds().catch((error) => {
console.error(error)
})
}, [inputSearch]) // eslint-disable-line react-hooks/exhaustive-deps
resetPagination()
nextPage({ search })
}, [resetPagination, nextPage, search])
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}
next={fetchGuilds}
dataLength={items.length}
next={nextPage}
scrollableTarget='application-page-content'
hasMore={hasMore}
loader={<Loader />}
>
{guilds.map((guild) => {
{items.map((guild) => {
return <GuildPublic guild={guild} key={guild.id} />
})}
</InfiniteScroll>

5
components/design/IconLink/IconLink.tsx
View File

@ -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}