feat: interact with user settings/profile (#9)
This commit is contained in:
Divlo
GitHub
@ -1,5 +1,9 @@
|
||||
import { Meta, Story } from '@storybook/react'
|
||||
|
||||
import {
|
||||
guildExample,
|
||||
guildExample2
|
||||
} from '../../../cypress/fixtures/guilds/guild'
|
||||
import {
|
||||
userExample,
|
||||
userSettingsExample
|
||||
@ -20,5 +24,6 @@ UserProfile.args = {
|
||||
user: {
|
||||
...userExample,
|
||||
settings: userSettingsExample
|
||||
}
|
||||
},
|
||||
guilds: [guildExample, guildExample2]
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import { render } from '@testing-library/react'
|
||||
|
||||
import {
|
||||
guildExample,
|
||||
guildExample2
|
||||
} from '../../../cypress/fixtures/guilds/guild'
|
||||
import {
|
||||
userExample,
|
||||
userSettingsExample
|
||||
@ -9,7 +13,10 @@ import { UserProfile } from './UserProfile'
|
||||
describe('<UserProfile />', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(
|
||||
<UserProfile user={{ ...userExample, settings: userSettingsExample }} />
|
||||
<UserProfile
|
||||
user={{ ...userExample, settings: userSettingsExample }}
|
||||
guilds={[guildExample, guildExample2]}
|
||||
/>
|
||||
)
|
||||
expect(baseElement).toBeTruthy()
|
||||
})
|
||||
|
||||
@ -9,15 +9,17 @@ import { API_URL } from '../../../tools/api'
|
||||
import { UserPublic } from '../../../models/User'
|
||||
import { UserProfileGuilds } from './UserProfileGuilds'
|
||||
import { UserProfileGuild } from './UserProfileGuilds/UserProfileGuild'
|
||||
import { Guild } from '../../../models/Guild'
|
||||
import { ConfirmGuildJoin } from '../ConfirmGuildJoin'
|
||||
|
||||
export interface UserProfileProps {
|
||||
className?: string
|
||||
user: UserPublic
|
||||
guilds: Guild[]
|
||||
}
|
||||
|
||||
export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
const { user } = props
|
||||
const { user, guilds } = props
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [showPopup, setShowPopup] = useState<boolean>(false)
|
||||
@ -32,16 +34,16 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='relative h-full flex flex-col items-center justify-center'>
|
||||
<div className='relative flex h-full flex-col items-center justify-center'>
|
||||
<div
|
||||
className={classNames('transition', {
|
||||
'blur-3xl select-none': showPopup
|
||||
'select-none blur-3xl': showPopup
|
||||
})}
|
||||
>
|
||||
<div className='max-w-[1000px] px-12'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='w-max flex items-center'>
|
||||
<div className='relative flex justify-center items-center rounded-full overflow-hidden transition-all shadow-lg'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex w-max items-center'>
|
||||
<div className='relative flex items-center justify-center overflow-hidden rounded-full shadow-lg transition-all'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src={
|
||||
@ -55,24 +57,31 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
width={125}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col ml-10'>
|
||||
<div className='flex items-center mb-2'>
|
||||
<p className='text-3xl font-bold space tracking-wide text-white'>
|
||||
<div className='ml-10 flex flex-col'>
|
||||
<div className='mb-2 flex items-center'>
|
||||
<p
|
||||
className='space text-3xl font-bold tracking-wide text-white'
|
||||
data-cy='user-name'
|
||||
>
|
||||
{user.name}
|
||||
</p>
|
||||
<p className='ml-8 text-sm tracking-widest text-white opacity-40 select-none'>
|
||||
<p
|
||||
className='ml-8 select-none text-sm tracking-widest text-white opacity-40'
|
||||
data-cy='user-createdAt'
|
||||
>
|
||||
{date.format(new Date(user.createdAt), 'DD/MM/YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='text-left my-2'>
|
||||
<div className='my-2 text-left'>
|
||||
{user.email != null && (
|
||||
<p className='font-bold'>
|
||||
Email:{' '}
|
||||
<a
|
||||
href={`mailto:${user.email}`}
|
||||
target='_blank'
|
||||
className='relative ml-2 opacity-80 hover:opacity-100 transition-all no-underline font-normal tracking-wide after:absolute after:left-0 after:bottom-[-1px] after:bg-black dark:after:bg-white after:h-[1px] after:w-0 after:transition-all hover:after:w-full'
|
||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-1px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
||||
rel='noreferrer'
|
||||
data-cy='user-email'
|
||||
>
|
||||
{user.email}
|
||||
</a>
|
||||
@ -83,7 +92,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
{t('application:website')}:{' '}
|
||||
<a
|
||||
href={user.website}
|
||||
className='relative ml-2 opacity-80 hover:opacity-100 transition-all no-underline font-normal tracking-wide after:absolute after:left-0 after:bottom-[-2px] after:bg-black dark:after:bg-white after:h-[1px] after:w-0 after:transition-all hover:after:w-full'
|
||||
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
|
||||
>
|
||||
{user.website}
|
||||
</a>
|
||||
@ -104,6 +113,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
<div className='py-8 px-4' onClick={handlePopupVisibility}>
|
||||
<UserProfileGuilds
|
||||
isPublicGuilds={user.settings.isPublicGuilds}
|
||||
guilds={guilds}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -114,22 +124,24 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TODO: We might want to remove this code */}
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute flex justify-center items-center top-0 h-full w-full bg-zinc-900/75 transition opacity-0 pointer-events-none',
|
||||
'pointer-events-none absolute top-0 flex h-full w-full items-center justify-center bg-zinc-900/75 opacity-0 transition',
|
||||
{
|
||||
'opacity-100 visible pointer-events-auto': showPopup
|
||||
'pointer-events-auto visible opacity-100': showPopup
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'relative h-[400px] w-[400px] py-2 rounded-2xl shadow-xl bg-gray-200 dark:bg-gray-800 scale-0 transition overflow-y-auto overflow-x-hidden',
|
||||
'relative h-[400px] w-[400px] scale-0 overflow-y-auto overflow-x-hidden rounded-2xl bg-gray-200 py-2 shadow-xl transition dark:bg-gray-800',
|
||||
{ 'scale-100': showPopup }
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames('relative transition h-full', {
|
||||
className={classNames('relative h-full transition', {
|
||||
'-translate-x-[150%]': confirmation
|
||||
})}
|
||||
>
|
||||
@ -140,7 +152,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
|
||||
<ConfirmGuildJoin
|
||||
className={classNames(
|
||||
'absolute w-full h-full flex flex-col justify-center items-center transition-all top-0 left-[150%]',
|
||||
'absolute top-0 left-[150%] flex h-full w-full flex-col items-center justify-center transition-all',
|
||||
{ 'left-[0%]': confirmation }
|
||||
)}
|
||||
handleJoinGuild={handleConfirmationState}
|
||||
@ -149,7 +161,7 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
||||
<XIcon
|
||||
height={40}
|
||||
onClick={() => setShowPopup(false)}
|
||||
className='absolute top-8 right-8 cursor-pointer hover:rotate-180 transition'
|
||||
className='absolute top-8 right-8 cursor-pointer transition hover:rotate-180'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,12 +11,12 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className='relative flex w-full cursor-pointer transition group'
|
||||
className='group relative flex w-full cursor-pointer transition'
|
||||
onClick={handleConfirmationState}
|
||||
>
|
||||
<div className='relative group-hover:-translate-x-20 px-8 py-5 w-full transition'>
|
||||
<div className='flex group-hover:opacity-40 transition'>
|
||||
<div className='flex justify-center rounded-full filter drop-shadow-lg mr-8 min-w-[60px] min-h-[60px] select-none'>
|
||||
<div className='relative w-full px-8 py-5 transition group-hover:-translate-x-20'>
|
||||
<div className='flex transition group-hover:opacity-40'>
|
||||
<div className='mr-8 flex min-h-[60px] min-w-[60px] select-none justify-center rounded-full drop-shadow-lg filter'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_1.svg'
|
||||
@ -28,13 +28,13 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<h1 className='text-xl font-bold'>Guild Name</h1>
|
||||
<p className='text-gray-300 mt-2'>
|
||||
<p className='mt-2 text-gray-300'>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
|
||||
nam.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='absolute top-0 right-[-80px] flex justify-center items-center w-[80px] h-full'>
|
||||
<div className='absolute top-0 right-[-80px] flex h-full w-[80px] items-center justify-center'>
|
||||
<LoginIcon
|
||||
height={40}
|
||||
className='fill-green-600 drop-shadow-[0_0_15px_rgba(22,163,74,0.50)]'
|
||||
|
||||
@ -3,8 +3,11 @@ import classNames from 'classnames'
|
||||
import { EyeOffIcon } from '@heroicons/react/solid'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
|
||||
import { Guild } from '../../../../models/Guild'
|
||||
|
||||
export interface UserProfileGuildsProps {
|
||||
isPublicGuilds?: boolean
|
||||
guilds: Guild[]
|
||||
}
|
||||
|
||||
export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
@ -19,10 +22,10 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
>
|
||||
<div
|
||||
className={classNames('flex -space-x-7', {
|
||||
'blur-lg select-none': !isPublicGuilds
|
||||
'select-none blur-lg': !isPublicGuilds
|
||||
})}
|
||||
>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_1.svg'
|
||||
@ -32,7 +35,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_2.svg'
|
||||
@ -42,7 +45,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_3.svg'
|
||||
@ -52,7 +55,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_4.svg'
|
||||
@ -62,7 +65,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_5.svg'
|
||||
@ -72,7 +75,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
|
||||
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
|
||||
<Image
|
||||
className='rounded-full'
|
||||
src='/images/guilds/Guild_6.svg'
|
||||
@ -82,20 +85,20 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
|
||||
width={60}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-[60px] h-[60px] flex justify-center items-center rounded-full filter drop-shadow-lg bg-gray-300 dark:bg-gray-800 z-10'>
|
||||
<span className='font-bold text-black dark:text-white text-xl select-none'>
|
||||
<div className='z-10 flex h-[60px] w-[60px] items-center justify-center rounded-full bg-gray-300 drop-shadow-lg filter dark:bg-gray-800'>
|
||||
<span className='select-none text-xl font-bold text-black dark:text-white'>
|
||||
+4
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute flex items-center top-1/2 -translate-y-1/2',
|
||||
'absolute top-1/2 flex -translate-y-1/2 items-center',
|
||||
{ hidden: isPublicGuilds }
|
||||
)}
|
||||
>
|
||||
<EyeOffIcon height={25} />
|
||||
<p className='drop-shadow-2xl ml-4'>
|
||||
<p className='ml-4 drop-shadow-2xl'>
|
||||
{t('application:private-user-guilds-list')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user