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

This commit is contained in:
Divlo
2022-01-01 20:42:25 +01:00
committed by GitHub
parent 91e246b759
commit fdc2a2d1de
118 changed files with 6040 additions and 2094 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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