fix: improve overall rendering (#10)

This commit is contained in:
Walid 2022-02-09 23:27:54 +01:00 committed by GitHub
parent ee73885fe9
commit 48debe8638
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 111 additions and 96 deletions

View File

@ -171,7 +171,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
visible={visibleSidebars.left} visible={visibleSidebars.left}
isMobile={isMobile} isMobile={isMobile}
> >
<div className='flex flex-col min-w-[92px] top-0 left-0 z-50 bg-gray-200 dark:bg-gray-800 border-r-2 border-gray-500 dark:border-white/20 py-2 space-y-2'> <div className='flex flex-col min-w-[92px] top-0 left-0 z-50 bg-gray-200 dark:bg-gray-800 border-r-2 border-gray-500 dark:border-white/20 py-2 space-y-4'>
<IconLink <IconLink
href={`/application/users/${user.id}/settings`} href={`/application/users/${user.id}/settings`}
selected={path === `/application/users/${user.id}/settings`} selected={path === `/application/users/${user.id}/settings`}

View File

@ -0,0 +1,38 @@
import Image from 'next/image'
export interface ConfirmGuildJoinProps {
className?: string
handleJoinGuild: () => void
}
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => {
const { className, handleJoinGuild } = props
return (
<div className={className}>
<Image
src='/images/svg/design/join-guild.svg'
alt='Joing Guild Illustration'
height={150}
width={150}
/>
<div className='flex flex-col mt-8'>
<h1 className='text-xl mb-6 text-center'>Rejoindre la guild ?</h1>
<div className='flex gap-7'>
<button
className='px-8 py-2 rounded-3xl bg-success hover:opacity-50 transition'
onClick={handleJoinGuild}
>
Oui
</button>
<button
className='px-8 py-2 rounded-3xl bg-error hover:opacity-50 transition'
onClick={handleJoinGuild}
>
Non
</button>
</div>
</div>
</div>
)
}

View File

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

View File

@ -17,7 +17,7 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
return ( return (
<div <div
id='guilds-list' id='guilds-list'
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' className='min-w-[92px] mt-[130px] pt-2 h-full border-r-1 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
> >
<InfiniteScroll <InfiniteScroll
className='guilds-list' className='guilds-list'

View File

@ -1,21 +0,0 @@
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

@ -1,18 +0,0 @@
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,5 +1,10 @@
import { useState } from 'react'
import Image from 'next/image' import Image from 'next/image'
import useTranslation from 'next-translate/useTranslation' import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import { Emoji } from 'components/Emoji'
import { ConfirmGuildJoin } from 'components/Application/ConfirmGuildJoin'
import { GuildPublic as GuildPublicType } from '../../../../models/Guild' import { GuildPublic as GuildPublicType } from '../../../../models/Guild'
@ -9,27 +14,59 @@ export interface GuildPublicProps {
export const GuildPublic: React.FC<GuildPublicProps> = (props) => { export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
const { guild } = props const { guild } = props
const [isConfirmed, setIsConfirmed] = useState(false)
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<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'> <div className='relative overflow-hidden rounded border border-gray-500 dark:border-gray-700 hover:-translate-y-2 hover:shadow-none shadow-lg transition duration-200 ease-in-out'>
<Image <div
className='rounded-full' className={classNames(
src={guild.icon != null ? guild.icon : '/images/data/guild-default.png'} 'flex flex-col items-center h-full justify-center cursor-pointer p-4 pt-8 transition duration-200 ease-in-out',
alt='logo' { '-translate-x-full': isConfirmed }
width={80} )}
height={80} onClick={() => setIsConfirmed(!isConfirmed)}
/> >
<div className='m-2 text-center mt-3'> <Image
<h3 data-cy='guild-name' className='font-bold text-xl mb-2'> className='rounded-full'
{guild.name} src={
</h3> guild.icon != null ? guild.icon : '/images/data/guild-default.png'
<p className='text-base w-11/12 mx-auto'>{guild.description}</p> }
alt='logo'
width={80}
height={80}
/>
<div className='w-full px-4 m-2 text-center mt-6'>
<h3
data-cy='guild-name'
className='w-full center font-bold text-xl mb-2 truncate'
>
{guild.name}
</h3>
<p className='break-words'>
{guild.description != null ? (
guild.description
) : (
<span className='flex h-full opacity-25 justify-center items-center'>
<Emoji value=':eyes:' size={25} />
<span className='ml-2'>Nothing&apos;s here...</span>
</span>
)}
</p>
</div>
<p className='flex flex-col text-green-800 dark:text-green-400 mt-auto'>
{guild.membersCount} {t('application:members')}
</p>
</div> </div>
<p className='flex flex-col text-green-800 dark:text-green-400 mt-4'> <ConfirmGuildJoin
{guild.membersCount} {t('application:members')} className={classNames(
</p> 'absolute w-full h-full flex flex-col w-ful h-ful top-1/2 -translate-y-1/2 left-full translate-x- rounded-2xl justify-center items-center transition-all',
{
'!left-0': isConfirmed
}
)}
handleJoinGuild={() => setIsConfirmed(!isConfirmed)}
/>
</div> </div>
) )
} }

View File

@ -10,6 +10,7 @@ import { usePagination } from '../../../hooks/usePagination'
export const JoinGuildsPublic: React.FC = () => { export const JoinGuildsPublic: React.FC = () => {
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const { authentication } = useAuthentication() const { authentication } = useAuthentication()
const { t } = useTranslation() const { t } = useTranslation()
@ -29,7 +30,7 @@ export const JoinGuildsPublic: React.FC = () => {
} }
return ( return (
<> <div className='flex flex-col w-full h-full transition-all'>
<input <input
data-cy='search-guild-input' data-cy='search-guild-input'
onChange={handleChange} onChange={handleChange}
@ -38,9 +39,9 @@ export const JoinGuildsPublic: React.FC = () => {
name='search-guild' name='search-guild'
placeholder={`🔎 ${t('application:search')}...`} placeholder={`🔎 ${t('application:search')}...`}
/> />
<div className='w-full flex items-center justify-center p-12'> <div className='w-full p-12'>
<InfiniteScroll <InfiniteScroll
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' className='guilds-public-list max-w-[1400px] mx-auto grid gap-8 grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] !overflow-visible'
dataLength={items.length} dataLength={items.length}
next={nextPage} next={nextPage}
scrollableTarget='application-page-content' scrollableTarget='application-page-content'
@ -52,6 +53,6 @@ export const JoinGuildsPublic: React.FC = () => {
})} })}
</InfiniteScroll> </InfiniteScroll>
</div> </div>
</> </div>
) )
} }

View File

@ -14,7 +14,7 @@ export const Member: React.FC<MemberProps> = (props) => {
return ( return (
<Link href={`/application/users/${member.user.id}`}> <Link href={`/application/users/${member.user.id}`}>
<a> <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='flex items-center cursor-pointer py-2 px-6 pr-10 overflow-hidden hover:bg-gray-300 dark:hover:bg-gray-900'>
<div className='min-w-[50px] flex rounded-full'> <div className='min-w-[50px] flex rounded-full'>
<Image <Image
src={ src={
@ -29,14 +29,13 @@ export const Member: React.FC<MemberProps> = (props) => {
className='rounded-full' className='rounded-full'
/> />
</div> </div>
<div className='max-w-[145px] ml-4'> <div className='ml-5'>
<p <p data-cy='member-user-name' className='truncate font-bold'>
data-cy='member-user-name'
className='overflow-hidden whitespace-nowrap overflow-ellipsis'
>
{member.user.name} {member.user.name}
</p> </p>
{member.user.status != null && <span>{member.user.status}</span>} {member.user.status != null && (
<span className='block truncate w-44'>{member.user.status}</span>
)}
</div> </div>
</div> </div>
</a> </a>

View File

@ -21,7 +21,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
{ {
'top-0 right-0 scrollbar-firefox-support overflow-y-auto flex-col space-y-1': 'top-0 right-0 scrollbar-firefox-support overflow-y-auto flex-col space-y-1':
direction === 'right', direction === 'right',
'w-64': direction === 'right' && visible, 'w-72': direction === 'right' && visible,
'w-0 opacity-0': !visible, 'w-0 opacity-0': !visible,
'w-80': direction === 'left' && visible, 'w-80': direction === 'left' && visible,
'max-w-max': typeof path !== 'string' && direction === 'left', 'max-w-max': typeof path !== 'string' && direction === 'left',

View File

@ -9,6 +9,7 @@ import { API_URL } from '../../../tools/api'
import { UserPublic } from '../../../models/User' import { UserPublic } from '../../../models/User'
import { UserProfileGuilds } from './UserProfileGuilds' import { UserProfileGuilds } from './UserProfileGuilds'
import { UserProfileGuild } from './UserProfileGuilds/UserProfileGuild' import { UserProfileGuild } from './UserProfileGuilds/UserProfileGuild'
import { ConfirmGuildJoin } from '../ConfirmGuildJoin'
export interface UserProfileProps { export interface UserProfileProps {
className?: string className?: string
@ -137,36 +138,13 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
/> />
</div> </div>
<div <ConfirmGuildJoin
className={classNames( className={classNames(
'absolute w-full h-full flex flex-col justify-center items-center transition-all top-0 left-[150%]', 'absolute w-full h-full flex flex-col justify-center items-center transition-all top-0 left-[150%]',
{ 'left-[0%]': confirmation } { 'left-[0%]': confirmation }
)} )}
> handleJoinGuild={handleConfirmationState}
<Image />
src='/images/svg/design/join-guild.svg'
alt='Joing Guild Illustration'
height={150}
width={150}
/>
<div className='flex flex-col mt-8'>
<h1 className='text-xl mb-6 text-center'>Rejoindre la guild ?</h1>
<div className='flex gap-7'>
<button
className='px-8 py-2 rounded-3xl bg-success hover:opacity-50 transition'
onClick={handleConfirmationState}
>
Oui
</button>
<button
className='px-8 py-2 rounded-3xl bg-error hover:opacity-50 transition'
onClick={handleConfirmationState}
>
Non
</button>
</div>
</div>
</div>
</div> </div>
<XIcon <XIcon
height={40} height={40}

View File

@ -8,7 +8,7 @@ export const guildSchema = {
id, id,
name: Type.String({ minLength: 1, maxLength: 30 }), name: Type.String({ minLength: 1, maxLength: 30 }),
icon: Type.Union([Type.String({ format: 'uri-reference' }), Type.Null()]), icon: Type.Union([Type.String({ format: 'uri-reference' }), Type.Null()]),
description: Type.Union([Type.String({ maxLength: 160 }), Type.Null()]), description: Type.Union([Type.String({ maxLength: 120 }), Type.Null()]),
createdAt: date.createdAt, createdAt: date.createdAt,
updatedAt: date.updatedAt updatedAt: date.updatedAt
} }