lamp
/
chat
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lamp:77a939a6372ae603315bf7116b07928fc8b075a4
Branches Tags
lamp:master
...
compare: lamp:210fca62d217e7599209ac38e5a0053f379b833a
Branches Tags
lamp:master

2 Commits
77a939a637 ... 210fca62d2

Author SHA1 Message Date
Lamp 210fca62d2 user settings 2022-09-13 01:37:09 -05:00
Lamp e828746579 emoji picker 2022-09-13 01:09:23 -05:00
2 changed files with 39 additions and 8 deletions
Show Stats Expand all files Collapse all files

43
app/src/App.js
View File

@ -79,7 +79,7 @@ function Chat({user, setUser}) {
<MessageList messages={messages} user={user} updateUser={updateUser} />
<UserList users={users} updateUser={updateUser} user={user} socket={socket} />
<ChatInput sendMessage={sendMessage} user={user} updateUser={updateUser} setSettingsModalOpen={setSettingsModalOpen} />
<SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} />
<SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} user={user} updateUser={updateUser} />
</div>
)
}
@ -171,6 +171,7 @@ function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen}) {
var [content, setContent] = useState("");
var [file, setFile] = useState();
var fileInput = useRef();
var [showEmojiPicker, setShowEmojiPicker] = useState(false);
function onSubmit(event) {
event.preventDefault();
content = content.trim();
@ -219,16 +220,37 @@ function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen}) {
value={content}
placeholder={file ? "press ENTER to send file without text" : "type and press ENTER"}>
</input>
<label className='w-14 h-14 text-center leading-[56px]'><input type="color" className='w-6 h-6 bg-transparent' value={user.color} onChange={event => updateUser({color: event.target.value})}></input></label>
<input type="submit" className='w-14 h-14 cursor-pointer' value="➡️" />
<button type="button" className='w-14 h-14' onClick={()=>setShowEmojiPicker(!showEmojiPicker)}>🤔</button>
<label htmlFor="file" className="w-14 h-14 text-center leading-[56px] cursor-pointer" style={{backgroundColor: file ? "red" : undefined}}>📄</label>
<input type="file" id="file" className='hidden' onChange={onFileInput} ref={fileInput}></input>
<button type="button" className='w-14 h-14' onClick={e => setSettingsModalOpen(true)}>⚙️</button>
</form>
<EmojiPicker open={showEmojiPicker} setOpen={setShowEmojiPicker} setChatInputContent={setContent} />
</div>
}
function EmojiPicker({open, setOpen, setChatInputContent}) {
var [emojis, setEmojis] = useState([]);
var getEmojis = () => fetch(BASE_URL + "/emojis").then(r => r.json());
useEffect(() => {open && getEmojis().then(setEmojis)}, [open]);
var onEmojiClick = event => {
//setOpen(false);
setChatInputContent(content => `${content} :${event.target.dataset.emoji}:`);
};
if (open)
return <div className='w-64 h-64 rounded border fixed right-6 bottom-16 overflow-auto bg-white dark:bg-black'>
{emojis.map(emoji => <img src={BASE_URL+"/emoji/"+emoji} title={`:${emoji}:`} alt={`:${emoji}:`} key={emoji} data-emoji={emoji} className="w-8 h-8 inline-block m-1 cursor-pointer hover:border" onClick={onEmojiClick} />)}
</div>
}
function UserList({users, updateUser, user: myUser, socket}) {
function changeName() {
@ -244,11 +266,14 @@ function UserList({users, updateUser, user: myUser, socket}) {
function SettingsModal({open, setOpen}) {
function SettingsModal({open, setOpen, user, updateUser}) {
var [emojis, setEmojis] = useState([]);
async function getEmojis() {
var emojis = await (await fetch(BASE_URL + "/emojis")).json();
console.debug("emojis", emojis);
return emojis;
}
useEffect(function(){
@ -283,8 +308,10 @@ function SettingsModal({open, setOpen}) {
if (open) return <div className="fixed top-0 left-0 w-full h-full bg-slate-500/50 flex justify-center items-center" onClick={e => setOpen(false)}>
<div className="bg-white dark:bg-black border rounded-lg w-8/12 p-8 h-4/6 overflow-auto" onClick={e => e.stopPropagation()}>
<div className="text-2xl border-b border-slate-500 mb-1">Settings</div>
<div>i put here maybe user settings later</div>
<div className="text-2xl mt-16 border-b border-slate-500 mb-2">Emoji</div>
<div className="m-3"><label>Name: <input type="text" className="dark:text-black" value={user.name} onChange={e => updateUser({name: e.target.value})} /></label></div>
<div className="m-3"><label>Color: <input type="color" value={user.color} onChange={e => updateUser({color: e.target.value})} /></label></div>
<div className="m-3"><label>Website: <input type="text" className="dark:text-black" placeholder='http://example.com' value={user.website} onChange={e => updateUser({website: e.target.value})} /></label></div>
<div className="text-2xl mt-8 border-b border-slate-500 mb-2">Emoji</div>
{emojis.map(emoji => <img src={BASE_URL+"/emoji/"+emoji} title={`:${emoji}:`} alt={`:${emoji}:`} key={emoji} className="w-8 h-8 inline-block m-1" />)}
<div className="text-xl mt-8">Upload Emoji</div>
<EmojiUploader setEmojis={setEmojis} />
@ -298,6 +325,10 @@ function SettingsModal({open, setOpen}) {
function processMessageContent(content) {
if (!content) return;
// hyperlinks

4
app/src/InitPage.js
View File

@ -15,11 +15,11 @@ export default function InitPage({setUser}) {
<form onSubmit={onSubmit}>
<div className="m-1">welcome to chat app</div>
<div className="m-1">
<label for="name" className="mr-2">enter name:</label>
<label htmlFor="name" className="mr-2">enter name:</label>
<input type="text" id="name" className="dark:bg-black border p-1" value={name} onChange={event => setName(event.target.value)} />
</div>
<div className="m-1">
<label for="color" className="mr-2">choose color:</label>
<label htmlFor="color" className="mr-2">choose color:</label>
<input type="color" id="color" value={color} onChange={event => setColor(event.target.value)} />
</div>
<div className="m-1"><input type="submit" className="border p-1" value="ok go"></input></div>