factor out Discussion component

1 files changed, 3 insertions, 78 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}