user settings

app/src/App.js

@@ -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

app/src/InitPage.js

@@ -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>