factor out Discussion component

6 files changed, 88 insertions, 87 deletions

diff --git a/src/index.js b/src/index.js
index 4b46ac7..b749a53 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,24 +1,8 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as jsonld from 'jsonld';
-import Layout from './layout';
-import { css, Links, Note } from './ui';
-import { render, h, Fragment, Component } from 'preact';
-import { useRef, useState, useLayoutEffect, useEffect } from 'preact/hooks';
-
-css`
-article > div {
-	position: relative;
-}
-
-article > div > canvas {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
-`;
+import { h, Component, render } from 'preact';
+import { Discussion } from './ui';
 
 const context = [
 	'https://www.w3.org/ns/activitystreams',
@@ -130,72 +114,13 @@ class CollapseContainer extends Component {
 	}
 }
 
-const App = ({ 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>
-	);
-};
-
 const graph = document.location.hash ? document.location.hash.substr(1) : 'lib/graph.json';
 const app = (
 	<GraphContainer graph={graph} render={({ name, items }) => (
 		<CollapseContainer
 			items={items}
 			render={({ collapsed, toggleCollapsed }) => (
-				<App
+				<Discussion
 					name={name}
 					items={items}
 					collapsed={collapsed}
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,
 };