Mahyar Khanbolooki
252 lines
10 KiB
TypeScript
252 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import Button from '@/components/button/PrimaryButton';
|
|
import SearchBox from '@/components/input/SearchBox';
|
|
import BlurredOverlayContainer from '@/components/overlays/BlurredOverlayContainer';
|
|
import { ScrollArea } from '@/components/ui/scrollarea';
|
|
import { Radar2, Trash } from 'iconsax-react';
|
|
import { Check, CheckCheck } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import React, { useCallback, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next';
|
|
import { motion } from 'framer-motion';
|
|
import { LongPressCallbackMeta, LongPressReactEvents, useLongPress } from 'use-long-press'
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
type Props = object
|
|
|
|
type ChatEntryModel = {
|
|
id: string,
|
|
username: string,
|
|
avatarUrl: string,
|
|
update?: {
|
|
time: string,
|
|
content: string,
|
|
count?: number,
|
|
seen?: boolean
|
|
}
|
|
}
|
|
|
|
function ChatIndex({ }: Props) {
|
|
const { t } = useTranslation('chat');
|
|
const { t: tDeleteModal } = useTranslation('common', {
|
|
keyPrefix: 'DeleteChatModal'
|
|
});
|
|
const [search, setSearch] = useState('');
|
|
const [selectedChats, setSelectedChats] = useState<Array<string>>([]);
|
|
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const [chatsList, setChatList] = useState<Array<ChatEntryModel>>([
|
|
{
|
|
id: '0',
|
|
username: 'علی مصلحی',
|
|
avatarUrl: '/assets/images/user-avatar.png',
|
|
update: {
|
|
time: '12:03',
|
|
content: 'چه خبر',
|
|
count: 2,
|
|
}
|
|
},
|
|
{
|
|
id: '1',
|
|
username: 'علی مصلحی',
|
|
avatarUrl: '/assets/images/user-avatar.png',
|
|
update: {
|
|
time: '12:03',
|
|
content: 'چه خبر',
|
|
count: 2,
|
|
}
|
|
},
|
|
{
|
|
id: '2',
|
|
username: 'علی مصلحی',
|
|
avatarUrl: '/assets/images/user-avatar.png',
|
|
update: {
|
|
time: '12:03',
|
|
content: 'چه خبر',
|
|
seen: true
|
|
}
|
|
},
|
|
{
|
|
id: '3',
|
|
username: 'علی مصلحی',
|
|
avatarUrl: '/assets/images/user-avatar.png',
|
|
update: {
|
|
time: '12:03',
|
|
content: 'چه خبر',
|
|
seen: true
|
|
}
|
|
},
|
|
{
|
|
id: '4',
|
|
username: 'علی مصلحی',
|
|
avatarUrl: '/assets/images/user-avatar.png',
|
|
update: {
|
|
time: '12:03',
|
|
content: 'چه خبر',
|
|
seen: true
|
|
}
|
|
},
|
|
{
|
|
id: '5',
|
|
username: 'علی مصلحی',
|
|
avatarUrl: '/assets/images/user-avatar.png',
|
|
update: {
|
|
time: '12:03',
|
|
content: 'چه خبر',
|
|
seen: false
|
|
}
|
|
},
|
|
]);
|
|
|
|
const toggleDeleteModalVisiblity = (e?: React.MouseEvent) => {
|
|
e?.preventDefault();
|
|
e?.stopPropagation();
|
|
setDeleteModalVisible((state) => {
|
|
if (state) {
|
|
setSelectedChats([]);
|
|
}
|
|
return !state;
|
|
});
|
|
};
|
|
|
|
const deleteSelectedChats = () => {
|
|
if (setSelectedChats.length <= 0) return;
|
|
setChatList((prev) => {
|
|
return prev.filter(x => !selectedChats.includes(x.id));
|
|
})
|
|
toggleDeleteModalVisiblity();
|
|
}
|
|
|
|
const longPressCallback = useCallback((e: LongPressReactEvents<Element>, ctx: LongPressCallbackMeta<unknown>) => {
|
|
e.preventDefault();
|
|
if (!ctx?.context) return;
|
|
const id = String(ctx.context);
|
|
setSelectedChats((prev) => {
|
|
if (prev.includes(id)) return prev.filter(x => x !== id);
|
|
return [...prev, id]
|
|
})
|
|
}, [])
|
|
|
|
const longPressCancelledCallback = useCallback((id: string, reason?: string) => {
|
|
if (reason && reason !== 'cancelled-by-release') return;
|
|
if (selectedChats.length > 0) {
|
|
setSelectedChats((prev) => {
|
|
if (prev.includes(id)) return prev.filter(x => x !== id);
|
|
return [...prev, id]
|
|
})
|
|
} else {
|
|
router.push(`chat/${id}`)
|
|
}
|
|
}, [router, selectedChats.length])
|
|
|
|
const longPress = useLongPress(longPressCallback, {
|
|
onCancel: (event, ctx) => longPressCancelledCallback(String(ctx.context), String(ctx.reason)),
|
|
threshold: 500, // In milliseconds
|
|
captureEvent: true, // Event won't get cleared after React finish processing it
|
|
cancelOnMovement: 100, // Square side size (in pixels) inside which movement won't cancel long press
|
|
cancelOutsideElement: true, // Cancel long press when moved mouse / pointer outside element while pressing
|
|
});
|
|
|
|
return (
|
|
<div className='pt-8 mb-8'>
|
|
<section className='flex justify-between items-center gap-x-4'>
|
|
<SearchBox placeholder={t('InputSearch.Placeholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
|
|
|
|
{selectedChats.length > 0 ?
|
|
<span onClick={toggleDeleteModalVisiblity} className='bg-container p-2 rounded-xl active:bg-gray-50'>
|
|
<Trash size={24} className='stroke-primary' />
|
|
</span>
|
|
:
|
|
<Link href={'chat/nearby'} className='bg-container p-2 rounded-xl active:bg-gray-50'>
|
|
<Radar2 size={24} className='stroke-primary' />
|
|
</Link>
|
|
}
|
|
</section>
|
|
|
|
<section>
|
|
<ScrollArea dir='rtl' className='w-full h-full'>
|
|
<ul className='pt-4'>
|
|
{chatsList.map((chat, i) => {
|
|
return (
|
|
<li
|
|
key={i}
|
|
{...longPress(chat.id)}
|
|
className='select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 bg-background rounded-xl'
|
|
>
|
|
<div className='size-[49px] min-w-[49px]'>
|
|
{
|
|
selectedChats.includes(chat.id) ?
|
|
<div className='size-[49px] relative bg-primary rounded-full'>
|
|
<Check className='absolute top-1/2 left-1/2 -translate-1/2 stroke-white' />
|
|
</div>
|
|
:
|
|
<Image
|
|
src={chat.avatarUrl}
|
|
height={49}
|
|
width={49}
|
|
|
|
alt={`${chat.username}'s avatar`}
|
|
unoptimized
|
|
/>
|
|
}
|
|
|
|
</div>
|
|
|
|
<div className='flex flex-col justify-between w-full gap-2'>
|
|
<h5 className='text-sm2 font-medium'>{chat.username}</h5>
|
|
<p className='text-xs'>{chat.update?.content}</p>
|
|
</div>
|
|
|
|
<div className='flex flex-col justify-between items-end gap-2'>
|
|
<span className='text-sm2 text-disabled2'>{chat.update?.time}</span>
|
|
{chat.update?.count !== undefined && chat.update?.count > 0 ?
|
|
<span className='text-xs w-5 h-5 relative bg-foreground text-white rounded-full'>
|
|
<span className='absolute top-1/2 left-1/2 -translate-1/2 pt-1'>{chat.update?.count}</span>
|
|
</span>
|
|
:
|
|
chat.update?.seen !== undefined &&
|
|
chat.update?.seen ?
|
|
<CheckCheck className='stroke-foreground' size={16} /> :
|
|
<Check className='stroke-foreground' size={16} />
|
|
}
|
|
|
|
</div>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</ScrollArea>
|
|
</section>
|
|
|
|
<BlurredOverlayContainer visible={deleteModalVisible} onClick={toggleDeleteModalVisiblity} inDuration={100} outDuration={100} outDelay={75}>
|
|
<div className="absolute top-1/2 left-0 w-full px-6">
|
|
<motion.div
|
|
animate={{ y: deleteModalVisible ? [10, 0] : [0, 10] }}
|
|
transition={{ duration: 0.1, ease: 'easeInOut' }}
|
|
className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-white/63 rounded-4xl"
|
|
>
|
|
<h2 className="text-base font-medium">
|
|
{tDeleteModal('Heading')}
|
|
</h2>
|
|
<p className="text-xs font-medium mt-6">
|
|
{tDeleteModal('Description')}
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-5.5 mt-8">
|
|
<Button onClick={deleteSelectedChats} className="text-sm font-normal">
|
|
{tDeleteModal('ButtonOk')}
|
|
</Button>
|
|
<Button onClick={toggleDeleteModalVisiblity} className="bg-disabled! text-disabled2! text-sm font-normal">
|
|
{tDeleteModal('ButtonCancel')}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</BlurredOverlayContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChatIndex |