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

Compare commits

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

No commits in common. "210fca62d217e7599209ac38e5a0053f379b833a" and "77a939a6372ae603315bf7116b07928fc8b075a4" have entirely different histories.
210fca62d2 ... 77a939a637

2 changed files with 8 additions and 39 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} /> <MessageList messages={messages} user={user} updateUser={updateUser} />
<UserList users={users} updateUser={updateUser} user={user} socket={socket} /> <UserList users={users} updateUser={updateUser} user={user} socket={socket} />
<ChatInput sendMessage={sendMessage} user={user} updateUser={updateUser} setSettingsModalOpen={setSettingsModalOpen} /> <ChatInput sendMessage={sendMessage} user={user} updateUser={updateUser} setSettingsModalOpen={setSettingsModalOpen} />
<SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} user={user} updateUser={updateUser} /> <SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} />
</div> </div>
) )
} }
@ -171,7 +171,6 @@ function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen}) {
var [content, setContent] = useState(""); var [content, setContent] = useState("");
var [file, setFile] = useState(); var [file, setFile] = useState();
var fileInput = useRef(); var fileInput = useRef();
var [showEmojiPicker, setShowEmojiPicker] = useState(false);
function onSubmit(event) { function onSubmit(event) {
event.preventDefault(); event.preventDefault();
content = content.trim(); content = content.trim();
@ -220,37 +219,16 @@ function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen}) {
value={content} value={content}
placeholder={file ? "press ENTER to send file without text" : "type and press ENTER"}> placeholder={file ? "press ENTER to send file without text" : "type and press ENTER"}>
</input> </input>
<input type="submit" className='w-14 h-14 cursor-pointer' value="➡️" /> <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>
<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> <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> <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> <button type="button" className='w-14 h-14' onClick={e => setSettingsModalOpen(true)}>⚙️</button>
</form> </form>
<EmojiPicker open={showEmojiPicker} setOpen={setShowEmojiPicker} setChatInputContent={setContent} />
</div> </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 UserList({users, updateUser, user: myUser, socket}) {
function changeName() { function changeName() {
@ -266,14 +244,11 @@ function UserList({users, updateUser, user: myUser, socket}) {
function SettingsModal({open, setOpen}) {
function SettingsModal({open, setOpen, user, updateUser}) {
var [emojis, setEmojis] = useState([]); var [emojis, setEmojis] = useState([]);
async function getEmojis() { async function getEmojis() {
var emojis = await (await fetch(BASE_URL + "/emojis")).json(); var emojis = await (await fetch(BASE_URL + "/emojis")).json();
console.debug("emojis", emojis);
return emojis; return emojis;
} }
useEffect(function(){ useEffect(function(){
@ -308,10 +283,8 @@ function SettingsModal({open, setOpen, user, updateUser}) {
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)}> 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="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 className="text-2xl border-b border-slate-500 mb-1">Settings</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>i put here maybe user settings later</div>
<div className="m-3"><label>Color: <input type="color" value={user.color} onChange={e => updateUser({color: e.target.value})} /></label></div> <div className="text-2xl mt-16 border-b border-slate-500 mb-2">Emoji</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" />)} {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> <div className="text-xl mt-8">Upload Emoji</div>
<EmojiUploader setEmojis={setEmojis} /> <EmojiUploader setEmojis={setEmojis} />
@ -325,10 +298,6 @@ function SettingsModal({open, setOpen, user, updateUser}) {
function processMessageContent(content) { function processMessageContent(content) {
if (!content) return; if (!content) return;
// hyperlinks // hyperlinks

4
app/src/InitPage.js
View File

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