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

feat: add guilds list in left sidebar

Browse Source
This commit is contained in:
Divlo
2021-11-18 22:47:46 +01:00
parent accd36d1fc
commit ad945d7a7a
33 changed files with 1511 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/Application/JoinGuildsPublic/Guild/Guild.stories.tsx
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
}
}

22
components/Application/JoinGuildsPublic/Guild/Guild.test.tsx
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()
})
})

1
components/Application/JoinGuildsPublic/Guild/index.ts
View File

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

21
components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.stories.tsx Normal file
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
}
}

18
components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.test.tsx Normal file
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()
})
})

8
components/Application/JoinGuildsPublic/Guild/Guild.tsx → components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx
View File

@ -1,12 +1,12 @@
import Image from 'next/image'
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
return (

1
components/Application/JoinGuildsPublic/GuildPublic/index.ts Normal file
View File

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

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

@ -2,13 +2,13 @@ import { useCallback, useEffect, useState, useRef } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
import { useAuthentication } from 'utils/authentication'
import { GuildPublic } from 'models/Guild'
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'
export const JoinGuildsPublic: React.FC = () => {
const [guilds, setGuilds] = useState<GuildPublic[]>([])
const [guilds, setGuilds] = useState<GuildPublicType[]>([])
const [hasMore, setHasMore] = useState(true)
const [inputSearch, setInputSearch] = useState('')
const [fetchState, setFetchState] = useFetchState('idle')
@ -21,7 +21,7 @@ export const JoinGuildsPublic: React.FC = () => {
return
}
setFetchState('loading')
const { data } = await authentication.api.get<GuildPublic[]>(
const { data } = await authentication.api.get<GuildPublicType[]>(
`/guilds/public?limit=20&search=${inputSearch}${
afterId.current != null ? `&after=${afterId.current}` : ''
}`
@ -58,7 +58,7 @@ export const JoinGuildsPublic: React.FC = () => {
/>
<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'
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}
scrollableTarget='application-page-content'
@ -66,7 +66,7 @@ export const JoinGuildsPublic: React.FC = () => {
loader={<Loader />}
>
{guilds.map((guild) => {
return <Guild guild={guild} key={guild.id} />
return <GuildPublic guild={guild} key={guild.id} />
})}
</InfiniteScroll>
</div>