From 6ff22d37d29a0e92167c368f6d2a68a95e653b8e Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Fri, 12 Feb 2021 12:59:17 +0100
Subject: selection bar, permalinks, avatar links

---
 src/index.js | 52 +++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 11 deletions(-)

(limited to 'src/index.js')

diff --git a/src/index.js b/src/index.js
index ba50149..b32054e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,8 +2,8 @@ import 'preact/debug';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as jsonld from 'jsonld';
-import { h, Component, render } from 'preact';
-import { Discussion } from './ui';
+import { h, Fragment, Component, render } from 'preact';
+import { Discussion, Selection } from './ui';
 
 const context = [
 	'https://www.w3.org/ns/activitystreams',
@@ -154,6 +154,27 @@ class GraphContainer extends Component {
 	}
 }
 
+class SelectionContainer extends Component {
+	state = {
+		selection: [],
+	};
+
+	toggle = (id) => {
+		const { selection } = this.state;
+		if (selection.indexOf(id) < 0)
+			this.setState({ selection: [ ...selection, id ] });
+		else
+			this.setState({ selection: selection.filter(i => i !== id) });
+	}
+
+	render() {
+		return this.props.render({
+			...this.state,
+			toggleSelected: this.toggle,
+		});
+	}
+}
+
 class CollapseContainer extends Component {
 	state = {};
 
@@ -193,17 +214,26 @@ const search = new URLSearchParams(window.location.search);
 const graph = search.has('graph') ? search.get('graph') : 'lib/graph.json';
 const app = (
 	<GraphContainer graph={graph} render={({ name, items }) => (
-		<CollapseContainer
-			items={items}
-			render={({ collapsed, toggleCollapsed }) => (
-				<Discussion
-					name={name}
+		<SelectionContainer render={({ selection, toggleSelected }) => (
+			<>
+				<CollapseContainer
 					items={items}
-					collapsed={collapsed}
-					toggleCollapsed={toggleCollapsed}
+					render={({ collapsed, toggleCollapsed }) => (
+						<Discussion
+							name={name}
+							items={items}
+							collapsed={collapsed}
+							toggleCollapsed={toggleCollapsed}
+							toggleSelected={toggleSelected}
+						/>
+					)}
+				/>
+				<Selection
+					items={selection.map(id => items[id])}
+					toggleSelected={toggleSelected}
 				/>
-			)}
-		/>
+			</>
+		)} />
 	)} />
 );
 render(app, document.body);
-- 
cgit v1.2.3