File size: 3,343 Bytes
cdf301a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
'use client';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
export default function RecentChats() {
const router = useRouter();
const [me, setMe] = useState('');
const [allChats, setAllChats] = useState([]);
useEffect(() => {
// Retrieve 'me' from localStorage
const storedMe = localStorage.getItem('me');
if (storedMe) {
setMe(storedMe);
}
// Retrieve all chats stored in localStorage
const allKeys = Object.keys(localStorage);
const chats = allKeys.filter((key) => key !== 'me' && key !== 's_tkn' && key !== 'a_l' && key !== 'u_id' && key !== 'ally-supports-cache').map((key) => {
return {
username: key,
chatData: JSON.parse(localStorage.getItem(key)),
};
});
setAllChats(chats);
}, []);
const handleUserSelect = (username) => {
router.push(`/u/${username}`);
};
return (
<div>
<h1 style={{ color: '#fff', marginBottom: '10px' }}>Chats</h1>
{allChats.length === 0 ? (
<div className='pulse-and-fade' style={{ color: '#7d7d7d', fontSize: '16px', marginBottom: '20px' }}>
<p>{me ? 'This looks empty. Open sidebar to go to the find page to look for someone to chat.' : 'Log in to start chatting!'}</p>
</div>
) : (
<ul style={{ listStyleType: 'none', padding: 0 }}>
{allChats.map((chat, index) => (
<li
key={index}
style={{
color: '#fff',
cursor: 'pointer',
marginBottom: '15px',
display: 'flex',
alignItems: 'center',
}}
onClick={() => handleUserSelect(chat.username)}
>
<div
style={{
width: '40px',
height: '40px',
position: 'relative',
marginRight: '10px',
}}
>
<Image
src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
chat.username
)}`}
alt={`${chat.username}'s avatar`}
layout="fill"
objectFit="cover"
style={{ borderRadius: '50%' }}
/>
</div>
<span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
{chat.username} {chat.username === me ? '(Me)' : ''}
</span>
</li>
))}
</ul>
)}
</div>
);
}
|