factor out Discussion component

5 files changed, 85 insertions, 9 deletions

diff --git a/src/ui/Discussion.js b/src/ui/Discussion.js
new file mode 100644
index 0000000..2cea1c1
--- /dev/null
+++ b/src/ui/Discussion.js
@@ -0,0 +1,80 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import Layout from '../layout';
+import css from './css';
+import { Links } from './Links';
+import { Note } from './Note';
+
+css`
+article > div {
+	position: relative;
+}
+
+article > div > canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+`;
+
+export const Discussion = ({ name, items, collapsed, toggleCollapsed }) => {
+	const [{ width, height, positions, links }, setState] = useState({
+		width: 0,
+		height: 0,
+		positions: {},
+		links: [],
+	});
+
+	const layout = new Layout();
+	const setNodeSize = layout.addNode.bind(layout);
+
+	useEffect(() => {
+		layout.render().then(setState);
+	}, [ items, collapsed ]);
+
+	return (
+		<article>
+			<h1>{name}</h1>
+			<div>
+				<Links width={width} height={height} links={links} />
+				<div>
+					{Object.values(items).map((item) => {
+						const isCollapsed = collapsed[item.id];
+						const hidden =
+							item.inReplyTo.every(p => collapsed[p.id])
+							&& item.replies.every(c => collapsed[c.id]);
+						if (hidden)
+							return;
+
+						const onlyParent = item.inReplyTo.length === 1 && items[item.inReplyTo[0].id];
+
+						for (const reply of item.replies) {
+							if (isCollapsed && collapsed[reply.id])
+								continue;
+
+							layout.addLink(item.id, reply.id);
+						}
+
+						return (
+							<Note
+								{...item}
+								smallHeader={
+									onlyParent																			 // only one parent post
+									&& onlyParent.attributedTo === item.attributedTo // posted by same user
+									&& onlyParent.published === item.published			 // in the same second
+								}
+								collapsed={isCollapsed}
+								position={positions[item.id]}
+								onHide={toggleCollapsed}
+								onSize={setNodeSize}
+							/>
+				 		);
+					})}
+				</div>
+			</div>
+		</article>
+	);
+};
+
diff --git a/src/ui/Links.js b/src/ui/Links.js
index dfd981f..0a0b1ef 100644
--- a/src/ui/Links.js
+++ b/src/ui/Links.js
@@ -1,4 +1,4 @@
-import { render, h, Fragment } from 'preact';
+import { h } from 'preact';
 import { useRef, useLayoutEffect } from 'preact/hooks';
 
 export const Links = ({ links, ...props }) => {
diff --git a/src/ui/Note.js b/src/ui/Note.js
index 36691d4..34c15d7 100644
--- a/src/ui/Note.js
+++ b/src/ui/Note.js
@@ -1,4 +1,4 @@
-import { render, h, Fragment } from 'preact';
+import { h } from 'preact';
 import { useRef, useLayoutEffect } from 'preact/hooks';
 import ColorHash from 'color-hash';
 import { formatRelative } from 'date-fns';
diff --git a/src/ui/css.js b/src/ui/css.js
index e793c4f..9089f1e 100644
--- a/src/ui/css.js
+++ b/src/ui/css.js
@@ -1,4 +1,4 @@
-export default ([ code] ) => {
+export default ([ code ]) => {
 	const style = document.createElement('style');
 	document.head.appendChild(style);
 	style.appendChild(document.createTextNode(''));
diff --git a/src/ui/index.js b/src/ui/index.js
index 3224b71..38b5b1b 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -1,10 +1,6 @@
 import './theme';
-import { Links } from './Links';
-import { Note } from './Note';
-import css from './css';
+import { Discussion } from './Discussion';
 
 export {
-	Links,
-	Note,
-	css,
+	Discussion,
 };