client: replyingHEADmain

1 files changed, 43 insertions, 12 deletions

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>
+	);
+};