graph-post: fixed infinite nested reply functionality and added back navigation

This commit is contained in:
Logan Allen 2020-06-20 15:56:24 -04:00
parent f5be1389ef
commit d1a9db2599
3 changed files with 36 additions and 12 deletions

View File

@ -133,18 +133,26 @@ export default class GraphPostApp extends React.Component {
/> />
<Route <Route
exact exact
path="/~post/room/:ship/:name/:nodeId" path="/~post/room/:ship/:name/:nodeId+"
render={(props) => { render={(props) => {
let resource = let resource =
`${props.match.params.ship}/${props.match.params.name}`; `${props.match.params.ship}/${props.match.params.name}`;
const graph = state.graphs[resource] || new Map();
let index = props.match.params.nodeId let index = props.match.params.nodeId
.split('-').map((ind) => { .split('/').map((ind) => {
return parseInt(ind, 10); return parseInt(ind, 10);
}); });
let node = null; let graph = state.graphs[resource] || new Map();
if (index.length > 0) { let node = {};
node = graph.get(index[0]) || null;
while (index.length > 0) {
if (!node) {
return <div></div>;
}
node = graph.get(index[0]);
graph = (!!node && 'children' in node) ?
node.children : new Map();
index = index.slice(1);
} }
return ( return (
@ -162,7 +170,7 @@ export default class GraphPostApp extends React.Component {
subscription={this.subscription} subscription={this.subscription}
node={node} node={node}
sidebarShown={state.sidebarShown} sidebarShown={state.sidebarShown}
parentIndex={'/' + props.match.params.nodeId.split('-').join('/')} parentIndex={'/' + props.match.params.nodeId}
{...props} {...props}
/> />
</Skeleton> </Skeleton>

View File

@ -184,7 +184,8 @@ export class Message extends Component {
minHeight: 'min-content' minHeight: 'min-content'
}} }}
onClick={() => { onClick={() => {
props.history.push(`/~post/room/${props.resource}/${props.index}`); props.history.push(`/~post/room/` +
`${props.resource.ship}/${props.resource.name}${props.index}`);
}} }}
> >
<OverlaySigil <OverlaySigil

View File

@ -31,16 +31,29 @@ export class NodeTreeScreen extends Component {
parentPost() { parentPost() {
const { props } = this; const { props } = this;
console.log(props);
const node = props.node; const node = props.node;
if (!node) { return (<div></div>); } if (!node) { return (<div></div>); }
let prevIndex = node.post.index.split('/');
prevIndex.pop();
prevIndex = prevIndex.join('/');
return ( return (
<div> <div>
<span className="dib f9 v-mid gray2 ml1 mr1 c-default inter">
<Link className="dib f9 v-mid inter ml2 no-underline white-d"
to={
"/~post/room/" +
`${props.resource.ship}/${props.resource.name}` +
`${prevIndex}`
}>
</Link>
</span>
<Message <Message
isParent={true} isParent={true}
key={node.index} key={node.post.index}
msg={node.post} msg={node.post}
/> />
</div> </div>
@ -53,22 +66,24 @@ export class NodeTreeScreen extends Component {
let graph = !!props.node && 'children' in props.node ? let graph = !!props.node && 'children' in props.node ?
props.node.children : new Map(); props.node.children : new Map();
let messages = Array.from(graph).reverse(); let messages = Array.from(graph).reverse();
console.log(messages);
const messageElements = messages.map((msg, i) => { const messageElements = messages.map((msg, i) => {
let index = msg[0]; let index = msg[0];
let node = msg[1]; let node = msg[1];
let post = node.post; let post = node.post;
console.log(post);
return ( return (
<Message <Message
key={index} key={index}
resource={props.resource}
index={post.index}
msg={post} msg={post}
history={props.history}
/> />
); );
}); });
return ( return (
<div <div
className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column relative" className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column relative"