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

10
components/Application/JoinGuildsPublic/Guild/Guild.stories.tsx → components/Application/Guilds/Guild/Guild.stories.tsx
View File

@ -1,6 +1,7 @@
import { Meta, Story } from '@storybook/react'
import { Guild as Component, GuildProps } from './Guild'
import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
const Stories: Meta = {
title: 'Guild',
@ -14,12 +15,7 @@ export const Guild: Story<GuildProps> = (arguments_) => {
}
Guild.args = {
guild: {
id: 1,
name: 'GuildExample',
description: 'guild example.',
icon: null,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
membersCount: 1
...guildExample,
defaultChannelId: 1
}
}

10
components/Application/JoinGuildsPublic/Guild/Guild.test.tsx → components/Application/Guilds/Guild/Guild.test.tsx
View File

@ -1,19 +1,15 @@
import { render } from '@testing-library/react'
import { Guild } from './Guild'
import { guildExample } from '../../../../cypress/fixtures/guilds/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
...guildExample,
defaultChannelId: 1
}}
/>
)

34
components/Application/Guilds/Guild/Guild.tsx Normal file
View File

@ -0,0 +1,34 @@
import Image from 'next/image'
import { GuildWithDefaultChannelId } from '../../../../models/Guild'
import { IconLink } from '../../../design/IconLink'
export interface GuildProps {
guild: GuildWithDefaultChannelId
selected?: boolean
}
export const Guild: React.FC<GuildProps> = (props) => {
const { guild, selected } = props
return (
<IconLink
key={guild.id}
href={`/application/${guild.id}/${guild.defaultChannelId}`}
selected={selected}
title={guild.name}
>
<div className='pl-[6px]'>
<Image
className='rounded-full'
src={
guild.icon != null ? guild.icon : '/images/data/guild-default.png'
}
alt='logo'
width={48}
height={48}
/>
</div>
</IconLink>
)
}

0
components/Application/JoinGuildsPublic/Guild/index.ts → components/Application/Guilds/Guild/index.ts
View File

15
components/Application/Guilds/Guilds.stories.tsx
View File

@ -1,15 +0,0 @@
import { Meta, Story } from '@storybook/react'
import { Guilds as Component, GuildsProps } from './'
const Stories: Meta = {
title: 'Guilds',
component: Component
}
export default Stories
export const Guilds: Story<GuildsProps> = (arguments_) => (
<Component {...arguments_} />
)
Guilds.args = { path: { channelId: 1, guildId: 2 } }

12
components/Application/Guilds/Guilds.test.tsx
View File

@ -1,12 +0,0 @@
import { render } from '@testing-library/react'
import { Guilds } from './'
describe('<Guilds />', () => {
it('should render successfully', () => {
const { baseElement } = render(
<Guilds path={{ channelId: 1, guildId: 2 }} />
)
expect(baseElement).toBeTruthy()
})
})

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

@ -1,34 +1,72 @@
import Image from 'next/image'
import { useCallback, useEffect, useState, useRef } 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 { IconLink } from '../../design/IconLink'
import { Guild } from './Guild'
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
}
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
return (
<div className='min-w-[92px] mt-[130px] pt-2 h-full border-r-2 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'>
{new Array(100).fill(null).map((_, index) => {
return (
<IconLink
key={index}
href={`/application/${index}/0`}
selected={typeof path !== 'string' && path.guildId === index}
title='Guild Name'
>
<div className='pl-[6px]'>
<Image
src='/images/icons/Thream.png'
alt='logo'
width={48}
height={48}
/>
</div>
</IconLink>
)
})}
<div
id='guilds-list-members'
className='min-w-[92px] mt-[130px] pt-2 h-full border-r-2 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
>
<InfiniteScroll
className='guilds-list'
dataLength={guilds.length}
next={fetchGuilds}
hasMore={hasMore}
scrollableTarget='guilds-list-members'
loader={<Loader />}
>
{guilds.map((guild) => {
return (
<Guild
guild={guild}
key={guild.id}
selected={typeof path !== 'string' && path.guildId === guild.id}
/>
)
})}
</InfiniteScroll>
</div>
)
}

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>

4
components/Application/Members/Members.tsx
View File

@ -12,7 +12,7 @@ export const Members: React.FC = () => {
<div className='flex items-center cursor-pointer py-2 px-4 pr-10 rounded hover:bg-gray-300 dark:hover:bg-gray-900'>
<div className='min-w-[50px] flex rounded-full border-2 border-green-500'>
<Image
src='/images/data/divlo.png'
src='/images/data/user-default.png'
alt={"Users's profil picture"}
height={50}
width={50}
@ -35,7 +35,7 @@ export const Members: React.FC = () => {
>
<div className='min-w-[50px] flex rounded-full border-2 border-transparent drop-shadow-md'>
<Image
src='/images/data/divlo.png'
src='/images/data/user-default.png'
alt={"Users's profil picture"}
height={50}
width={50}

2
components/Application/Messages/Messages.tsx
View File

@ -15,7 +15,7 @@ export const Messages: React.FC = () => {
<div className='w-10 h-10 drop-shadow-md'>
<Image
className='rounded-full'
src='/images/data/divlo.png'
src='/images/data/user-default.png'
alt='logo'
width={50}
height={50}

9
components/Application/UserProfile/UserProfile.stories.tsx
View File

@ -1,5 +1,8 @@
import { Meta, Story } from '@storybook/react'
import { user, userSettings } from '../../../cypress/fixtures/users/user'
import {
userExample,
userSettingsExample
} from '../../../cypress/fixtures/users/user'
import { UserProfile as Component, UserProfileProps } from './UserProfile'
@ -15,7 +18,7 @@ export const UserProfile: Story<UserProfileProps> = (arguments_) => {
}
UserProfile.args = {
user: {
...user,
settings: userSettings
...userExample,
settings: userSettingsExample
}
}