separate out GroupContainerwip

1 files changed, 9 insertions, 79 deletions

diff --git a/client/src/ui2.js b/client/src/ui2.js
index e715d4a..f79ffbb 100644
--- a/client/src/ui2.js
+++ b/client/src/ui2.js
@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { useState, useEffect, useMemo } from 'preact/hooks';
+import { useState, useEffect } from 'preact/hooks';
 import { TransitionGroup, CSSTransition } from 'preact-transitioning'
 import cn from 'classnames';
 import ColorHash from 'color-hash';
@@ -121,26 +121,24 @@ css`
 const Panel = ({ id, focusDir, activePages, setActivePages, setFocus, groups, className }) => (
 	<div class={cn('panel', focusDir === 'this' && 'panel-focused', className)}>
 		<PageIndicator
-			group={groups[id]}
 			dir="up"
+			pages={groups[id].next.up.map(pid => groups[pid])}
 			active={activePages.up}
 			focused={focusDir === 'this'}
 			attached={focusDir === 'up'}
 			setActivePage={(newId) => setActivePages({ ...activePages, up: newId })}
-			groups={groups}
 		/>
 		<Group
 			group={groups[id]}
 			onClick={focusDir !== 'this' && setFocus}
 		/>
 		<PageIndicator
-			group={groups[id]}
 			dir="down"
+			pages={groups[id].next.down.map(pid => groups[pid])}
 			active={activePages.down}
 			focused={focusDir === 'this'}
 			attached={focusDir === 'down'}
 			setActivePage={(newId) => setActivePages({ ...activePages, down: newId })}
-			groups={groups}
 		/>
 	</div>
 );
@@ -293,13 +291,12 @@ css`
 }
 `;
 
-const PageIndicator = ({ group: { id, next }, groups, dir, focused, active, attached, setActivePage }) => {
-	const activeIndex = next[dir].indexOf(active);
+const PageIndicator = ({ pages, dir, focused, active, attached, setActivePage }) => {
+	const activeIndex = pages.findIndex(g => g.id === active);
 	return (
 		<nav class={cn('page-indicator', `page-indicator-${dir}`, attached && 'page-indicator-attached')}>
 			<ul>
-				{next[dir].map((id, i) => {
-					const target = groups[id];
+				{pages.map((target, i) => {
 					let num = target.depth[dir];
 					if (num === Infinity) num = '';
 
@@ -309,11 +306,11 @@ const PageIndicator = ({ group: { id, next }, groups, dir, focused, active, atta
 					return (
 						<li
 							key={target.id}
-							class={cn(active === id && 'active')}
+							class={cn(active === target.id && 'active')}
 							style={{ '--offset': i - activeIndex }}
 						>
 							<button
-								onClick={setActivePage ? ((e) => { e.preventDefault(); setActivePage(id); }) : null}
+								onClick={setActivePage ? ((e) => { e.preventDefault(); setActivePage(target.id); }) : null}
 								disabled={!focused}
 								style={{ '--link-color': color }}
 							>
@@ -359,74 +356,7 @@ article.discussion > main {
 	justify-content: center;
 }
 `
-export const Discussion = ({ name, items, first }) => {
-	const groups = useMemo(
-		() => {
-			const groupMap = Object.fromEntries(
-				Object.values(items).map(item => [
-					item.id,
-					{
-						id: item.id,
-						items: [item],
-						next: {},
-						depth: {},
-					},
-				 ]),
-			);
-
-			for (const item of Object.values(items)) {
-				const parent = item.inReplyTo.length === 1 && item.inReplyTo[0].id;
-
-				if (parent && items[parent].replies.length === 1) {
-					const self = groupMap[item.id];
-					for (const s of self.items) {
-						groupMap[parent].items.push(s);
-						groupMap[s.id] = groupMap[parent];
-					}
-				}
-			}
-
-			const uniqueGroups = new Set(Object.values(groupMap));
-			const groups = {};
-			for (const group of uniqueGroups) {
-				group.next.up = group.items[0].inReplyTo.map(i => groupMap[i.id].id);
-				group.next.down = group.items[group.items.length-1].replies.map(i => groupMap[i.id].id);
-				groups[group.items[0].id] = group;
-			}
-
-			const updateDepth = (group, dir) => {
-				if (group.depth[dir] !== undefined) {
-					return group.depth[dir];
-				}
-
-				// @TODO: count nodes properly using Set,
-				// this counts nodes multiple times if subgraphs converge
-				let count = group.items.length;
-				for (const id of group.next[dir]) {
-					// go through groupMap here, since when moving 'up',
-					// were not hitting only group-headers
-		 			count += updateDepth(groupMap[id], dir);
-
-		 			if (count >= 9) {
-			 			count = Infinity;
-			 			break;
-		 			}
-				}
-
-				group.depth[dir] = count;
-				return count;
-			};
-
-			for (const group of Object.values(groups)) {
-				updateDepth(group, 'up');
-				updateDepth(group, 'down');
-			}
-
-			return groups;
-		},
-		[items]
-	);
-
+export const Discussion = ({ name, groups, first }) => {
 	// save/restore focus state
 	const [focusId, setFocusId] = useState(() => {
 		const id = window.location.hash.slice(1);