client: replyingHEADmain

2 files changed, 47 insertions, 14 deletions

diff --git a/client/src/ui/Menu.js b/client/src/ui/Menu.js
index f3e912d..a91b188 100644
--- a/client/src/ui/Menu.js
+++ b/client/src/ui/Menu.js
@@ -1,7 +1,8 @@
 import { h, Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 import cn from 'classnames';
-import { useUser, useUserCtx } from '../user';
+import { useDispatch } from '../actions';
+import { useUser } from '../user';
 import css from './css';
 
 css`
@@ -93,7 +94,8 @@ div.menu div.user {
 `;
 const UserMenu = () => {
 	const [showLogin, setLogin] = useState(false);
-	const { state: { user }, dispatch } = useUserCtx();
+	const { user } = useUser();
+	const dispatch = useDispatch();
 
 	if (showLogin) {
 		return (
diff --git a/client/src/ui/Selection.js b/client/src/ui/Selection.js
index d8dfa88..5e2fe66 100644
--- a/client/src/ui/Selection.js
+++ b/client/src/ui/Selection.js
@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import cn from 'classnames';
+import { useDispatch } from '../actions';
 import css from './css';
 import { Note } from './Note';
 
@@ -19,7 +20,6 @@ css`
 
 .drawer .handle {
 	height: 1.5rem;
-	margin-bottom: 1rem;
 }
 
 .drawer .handle button {
@@ -37,6 +37,7 @@ css`
 	display: flex;
 	overflow: auto;
 	width: 100%;
+	padding: 1rem 0;
 
 	transition: max-height 0.3s;
 }
@@ -53,6 +54,16 @@ css`
 .drawer .contents > * {
 	flex: 0 0 auto;
 }
+
+.drawer .contents > .reply {
+	display: flex;
+	flex-direction: column;
+	align-self: stretch;
+}
+
+.drawer .contents > .reply textarea {
+	flex: 1 1;
+}
 `;
 
 export const Drawer = ({ height, children }) => {
@@ -80,14 +91,34 @@ export const Drawer = ({ height, children }) => {
 	);
 };
 
-export const Selection = ({ items, toggleSelected }) => (
-	<Drawer height="8.55rem" >
-		{items.map((item) => (
-			<Note
-				{...item}
-				ellipsis
-				onSelect={toggleSelected}
-			/>
-		))}
-	</Drawer>
-);
+export const Selection = ({ items, toggleSelected }) => {
+	const [reply, setReply] = useState('');
+	const dispatch = useDispatch();
+
+	return (
+		<Drawer height="8.55rem" >
+			{items.map((item) => (
+				<Note
+					{...item}
+					ellipsis
+					onSelect={toggleSelected}
+				/>
+			))}
+			{!!items.length && (
+				<div class="reply">
+					<textarea value={reply} onChange={(e) => setReply(e.target.value)} />
+					<button onClick={() => {
+						dispatch({
+							type: 'reply',
+							content: reply,
+							to: items.map(i => i.id),
+						})
+						.then(() => setReply(''));
+					}}>
+						reply
+					</button>
+				</div>
+			)}
+		</Drawer>
+	);
+};