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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

16
components/Application/Members/Member/Member.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Meta, Story } from '@storybook/react'
import { Member as Component, MemberProps } from './Member'
import { memberExampleComplete } from '../../../../cypress/fixtures/members/member'
const Stories: Meta = {
title: 'Member',
component: Component
}
export default Stories
export const Member: Story<MemberProps> = (arguments_) => {
return <Component {...arguments_} />
}
Member.args = { member: memberExampleComplete }

11
components/Application/Members/Member/Member.test.tsx Normal file
View File

@ -0,0 +1,11 @@
import { render } from '@testing-library/react'
import { Member } from './Member'
import { memberExampleComplete } from '../../../../cypress/fixtures/members/member'
describe('<Member />', () => {
it('should render successfully', () => {
const { baseElement } = render(<Member member={memberExampleComplete} />)
expect(baseElement).toBeTruthy()
})
})

45
components/Application/Members/Member/Member.tsx Normal file
View File

@ -0,0 +1,45 @@
import Image from 'next/image'
import Link from 'next/link'
import { MemberWithPublicUser } from '../../../../models/Member'
import { API_URL } from '../../../../tools/api'
export interface MemberProps {
member: MemberWithPublicUser
}
export const Member: React.FC<MemberProps> = (props) => {
const { member } = props
return (
<Link href={`/application/users/${member.user.id}`}>
<a>
<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'>
<Image
src={
member.user.logo == null
? '/images/data/user-default.png'
: API_URL + member.user.logo
}
alt={"Users's profil picture"}
height={50}
width={50}
draggable={false}
className='rounded-full'
/>
</div>
<div className='max-w-[145px] ml-4'>
<p
data-cy='member-user-name'
className='overflow-hidden whitespace-nowrap overflow-ellipsis'
>
{member.user.name}
</p>
{member.user.status != null && <span>{member.user.status}</span>}
</div>
</div>
</a>
</Link>
)
}

1
components/Application/Members/Member/index.ts Normal file
View File

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

14
components/Application/Members/Members.stories.tsx
View File

@ -1,14 +0,0 @@
import { Meta, Story } from '@storybook/react'
import { Members as Component } from './Members'
const Stories: Meta = {
title: 'Members',
component: Component
}
export default Stories
export const Members: Story = (arguments_) => {
return <Component {...arguments_} />
}

10
components/Application/Members/Members.test.tsx
View File

@ -1,10 +0,0 @@
import { render } from '@testing-library/react'
import { Members } from './Members'
describe('<Members />', () => {
it('should render successfully', () => {
const { baseElement } = render(<Members />)
expect(baseElement).toBeTruthy()
})
})

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

@ -1,57 +1,36 @@
import Image from 'next/image'
import useTranslation from 'next-translate/useTranslation'
import InfiniteScroll from 'react-infinite-scroll-component'
import { Divider } from '../../design/Divider'
import { Loader } from 'components/design/Loader'
import { useMembers } from 'contexts/Members'
import { Member } from './Member'
import { capitalize } from '../../../tools/utils/capitalize'
export const Members: React.FC = () => {
const { members, hasMore, nextPage } = useMembers()
const { t } = useTranslation()
return (
<>
<div className='mb-2'>
<h1 className='text-center pt-2 my-2 text-xl'>Members</h1>
<h1 data-cy='members-title' className='text-center pt-2 my-2 text-xl'>
{capitalize(t('application:members'))}
</h1>
<Divider />
</div>
<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'
alt={"Users's profil picture"}
height={50}
width={50}
draggable='false'
className='rounded-full'
/>
</div>
<div className='max-w-[145px] ml-4'>
<p className='overflow-hidden whitespace-nowrap overflow-ellipsis'>
Walidouxssssssssssss
</p>
<span className='text-green-600 dark:text-green-400'>Online</span>
</div>
</div>
{new Array(100).fill(null).map((_, index) => {
return (
<div
key={index}
className='flex items-center cursor-pointer py-2 px-4 pr-10 rounded opacity-40 hover:bg-gray-300 dark:hover:bg-gray-900'
>
<div className='min-w-[50px] flex rounded-full border-2 border-transparent drop-shadow-md'>
<Image
src='/images/data/divlo.png'
alt={"Users's profil picture"}
height={50}
width={50}
draggable='false'
className='rounded-full'
/>
</div>
<div className='max-w-[145px] ml-4'>
<p className='overflow-hidden whitespace-nowrap overflow-ellipsis'>
Walidouxssssssssssssssssssssssssssssss
</p>
<span className='text-red-800 dark:text-red-400'>Offline</span>
</div>
</div>
)
})}
<InfiniteScroll
className='members-list'
dataLength={members.length}
next={nextPage}
hasMore={hasMore}
loader={<Loader />}
>
{members.map((member) => {
return <Member key={member.id} member={member} />
})}
</InfiniteScroll>
</>
)
}