feat(pages): add /application/[guildId]/[channelId]
(#4)
This commit is contained in:
@ -1,25 +0,0 @@
|
||||
import { Meta, Story } from '@storybook/react'
|
||||
|
||||
import { Guild as Component, GuildProps } from './Guild'
|
||||
|
||||
const Stories: Meta = {
|
||||
title: 'Guild',
|
||||
component: Component
|
||||
}
|
||||
|
||||
export default Stories
|
||||
|
||||
export const Guild: Story<GuildProps> = (arguments_) => {
|
||||
return <Component {...arguments_} />
|
||||
}
|
||||
Guild.args = {
|
||||
guild: {
|
||||
id: 1,
|
||||
name: 'GuildExample',
|
||||
description: 'guild example.',
|
||||
icon: null,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
membersCount: 1
|
||||
}
|
||||
}
|
@ -1,22 +0,0 @@
|
||||
import { render } from '@testing-library/react'
|
||||
|
||||
import { Guild } from './Guild'
|
||||
|
||||
describe('<Guild />', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(
|
||||
<Guild
|
||||
guild={{
|
||||
id: 1,
|
||||
name: 'GuildExample',
|
||||
description: 'guild example.',
|
||||
icon: null,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
membersCount: 1
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(baseElement).toBeTruthy()
|
||||
})
|
||||
})
|
@ -1 +0,0 @@
|
||||
export * from './Guild'
|
@ -0,0 +1,21 @@
|
||||
import { Meta, Story } from '@storybook/react'
|
||||
|
||||
import { GuildPublic as Component, GuildPublicProps } from './GuildPublic'
|
||||
import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
|
||||
|
||||
const Stories: Meta = {
|
||||
title: 'GuildPublic',
|
||||
component: Component
|
||||
}
|
||||
|
||||
export default Stories
|
||||
|
||||
export const GuildPublic: Story<GuildPublicProps> = (arguments_) => {
|
||||
return <Component {...arguments_} />
|
||||
}
|
||||
GuildPublic.args = {
|
||||
guild: {
|
||||
...guildExample,
|
||||
membersCount: 1
|
||||
}
|
||||
}
|
@ -0,0 +1,18 @@
|
||||
import { render } from '@testing-library/react'
|
||||
|
||||
import { GuildPublic } from './GuildPublic'
|
||||
import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
|
||||
|
||||
describe('<GuildPublic />', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(
|
||||
<GuildPublic
|
||||
guild={{
|
||||
...guildExample,
|
||||
membersCount: 1
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(baseElement).toBeTruthy()
|
||||
})
|
||||
})
|
@ -1,19 +1,19 @@
|
||||
import Image from 'next/image'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
|
||||
import { GuildPublic } from 'models/Guild'
|
||||
import { GuildPublic as GuildPublicType } from '../../../../models/Guild'
|
||||
|
||||
export interface GuildProps {
|
||||
guild: GuildPublic
|
||||
export interface GuildPublicProps {
|
||||
guild: GuildPublicType
|
||||
}
|
||||
|
||||
export const Guild: React.FC<GuildProps> = (props) => {
|
||||
export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
||||
const { guild } = props
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div
|
||||
key={guild.id}
|
||||
className='max-w-sm flex flex-col items-center justify-center border-gray-500 dark:border-gray-700 p-4 cursor-pointer rounded shadow-lg border transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none'
|
||||
>
|
||||
<div className='max-w-sm flex flex-col items-center justify-center border-gray-500 dark:border-gray-700 p-4 cursor-pointer rounded shadow-lg border transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src={guild.icon != null ? guild.icon : '/images/data/guild-default.png'}
|
||||
@ -28,7 +28,7 @@ export const Guild: React.FC<GuildProps> = (props) => {
|
||||
<p className='text-base w-11/12 mx-auto'>{guild.description}</p>
|
||||
</div>
|
||||
<p className='flex flex-col text-green-800 dark:text-green-400 mt-4'>
|
||||
{guild.membersCount} members
|
||||
{guild.membersCount} {t('application:members')}
|
||||
</p>
|
||||
</div>
|
||||
)
|
@ -0,0 +1 @@
|
||||
export * from './GuildPublic'
|
@ -1,49 +1,31 @@
|
||||
import { useCallback, useEffect, useState, useRef } from 'react'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { useEffect, useState } from 'react'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
|
||||
import { useAuthentication } from 'utils/authentication'
|
||||
import { GuildPublic } from 'models/Guild'
|
||||
import { useAuthentication } from 'tools/authentication'
|
||||
import { GuildPublic as GuildPublicType } from 'models/Guild'
|
||||
import { Loader } from 'components/design/Loader'
|
||||
import { useFetchState } from 'hooks/useFetchState'
|
||||
import { Guild } from './Guild'
|
||||
import { GuildPublic } from './GuildPublic'
|
||||
import { usePagination } from 'hooks/usePagination'
|
||||
|
||||
export const JoinGuildsPublic: React.FC = () => {
|
||||
const [guilds, setGuilds] = useState<GuildPublic[]>([])
|
||||
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 { t } = useTranslation()
|
||||
|
||||
const fetchGuilds = useCallback(async (): Promise<void> => {
|
||||
if (fetchState !== 'idle') {
|
||||
return
|
||||
}
|
||||
setFetchState('loading')
|
||||
const { data } = await authentication.api.get<GuildPublic[]>(
|
||||
`/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 (
|
||||
@ -54,19 +36,19 @@ export const JoinGuildsPublic: React.FC = () => {
|
||||
className='w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 bg-white dark:bg-[#3B3B3B] border-gray-500 dark:border-gray-700 p-3 my-6 mt-16 mx-auto rounded-md border'
|
||||
type='search'
|
||||
name='search-guild'
|
||||
placeholder='🔎 Search...'
|
||||
placeholder={`🔎 ${t('application:search')}...`}
|
||||
/>
|
||||
<div className='w-full flex items-center justify-center p-12'>
|
||||
<InfiniteScroll
|
||||
className='guilds-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}
|
||||
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={items.length}
|
||||
next={nextPage}
|
||||
scrollableTarget='application-page-content'
|
||||
hasMore={hasMore}
|
||||
loader={<Loader />}
|
||||
>
|
||||
{guilds.map((guild) => {
|
||||
return <Guild guild={guild} key={guild.id} />
|
||||
{items.map((guild) => {
|
||||
return <GuildPublic guild={guild} key={guild.id} />
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user