From 4650f507e213ed1269771fdb390a7552c70fc11e Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Mon, 22 Mar 2021 17:20:55 -0500
Subject: [PATCH] interface: buggy implementation of reply view

---
 pkg/interface/src/views/components/Author.tsx |  7 +-
 .../landscape/components/Home/GroupFeed.js    | 73 ++++++++----------
 .../components/Home/Post/PostFeed.js          | 60 ++++++++++++++-
 .../components/Home/Post/PostFooter.js        |  5 +-
 .../components/Home/Post/PostHeader.js        |  5 +-
 .../components/Home/Post/PostItem.js          | 30 ++++++--
 .../components/Home/Post/PostReplies.js       | 74 +++++++++++++++++++
 .../components/Home/Post/PostTimeline.js      | 59 +++++++++++++++
 .../components/Sidebar/SidebarListHeader.tsx  |  2 +-
 9 files changed, 260 insertions(+), 55 deletions(-)
 create mode 100644 pkg/interface/src/views/landscape/components/Home/Post/PostReplies.js
 create mode 100644 pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.js

diff --git a/pkg/interface/src/views/components/Author.tsx b/pkg/interface/src/views/components/Author.tsx
index ddb218a13..96ee8bce0 100644
--- a/pkg/interface/src/views/components/Author.tsx
+++ b/pkg/interface/src/views/components/Author.tsx
@@ -20,7 +20,6 @@ interface AuthorProps {
   showImage?: boolean;
   children?: ReactNode;
   unread?: boolean;
-  group: Group;
   api?: GlobalApi;
   size?: number;
 }
@@ -109,7 +108,10 @@ export default function Author(props: AuthorProps): ReactElement {
   return (
     <Row alignItems='center' width='auto'>
       <Box
-        onClick={() => toggleOverlay()}
+        onClick={(e) => {
+          e.stopPropagation();
+          toggleOverlay();
+        }}
         height={size}
         position='relative'
         cursor='pointer'
@@ -120,7 +122,6 @@ export default function Author(props: AuthorProps): ReactElement {
             ship={ship}
             contact={contact}
             color={`#${uxToHex(contact?.color ?? '0x0')}`}
-            group={group}
             onDismiss={() => toggleOverlay()}
             history={history}
             className='relative'
diff --git a/pkg/interface/src/views/landscape/components/Home/GroupFeed.js b/pkg/interface/src/views/landscape/components/Home/GroupFeed.js
index 3c87e5163..ce6030746 100644
--- a/pkg/interface/src/views/landscape/components/Home/GroupFeed.js
+++ b/pkg/interface/src/views/landscape/components/Home/GroupFeed.js
@@ -1,13 +1,13 @@
 import React, {
   useEffect
 } from 'react';
-import { Box, Row, Text } from '@tlon/indigo-react'
-import { GroupFeedHeader } from './GroupFeedHeader';
-import { PostInput } from './Post/PostInput';
-import { PostFeed } from './Post/PostFeed';
-import { Loading } from '~/views/components/Loading';
+import { Switch, Route } from 'react-router-dom';
+import { Box } from '@tlon/indigo-react'
 import { resourceFromPath } from '~/logic/lib/group';
 import useGraphState from '~/logic/state/graph';
+import { GroupFeedHeader } from './GroupFeedHeader';
+import { PostTimeline } from './Post/PostTimeline';
+import { PostReplies } from './Post/PostReplies';
 
 
 export function GroupFeed(props) {
@@ -16,16 +16,12 @@ export function GroupFeed(props) {
     api,
     history,
     associations,
-    groups,
-    contacts,
     graphPath
   } = props;
-  const graphResource = resourceFromPath(graphPath);
-  const graphId = `${graphResource.ship.slice(1)}/${graphResource.name}`;
   const graphs = useGraphState(state => state.graphs);
   const pendingSize = useGraphState(state => state.pendingSize);
-
-  const shouldRenderFeed = graphId in graphs;
+  const graphResource = resourceFromPath(graphPath);
+  const relativePath = (path) => baseUrl + path;
 
   useEffect(() => {
     //  TODO: VirtualScroller should support lower starting values than 100
@@ -41,36 +37,31 @@ export function GroupFeed(props) {
       alignItems="center"
       overflow="hidden">
       <GroupFeedHeader baseUrl={baseUrl} history={history} />
-      <Box
-        width="100%"
-        maxWidth="616px"
-        pt="3"
-        pl="2"
-        pr="2"
-        mb="3"
-        flexDirection="column"
-        alignItems="center">
-        { shouldRenderFeed ? (
-            <PostInput api={api} graphResource={graphResource} />
-          ) : null
-        }
-      </Box> 
-      <Box height="calc(100% - 136px)" width="100%" alignItems="center" pl="1">
-        { shouldRenderFeed ? (
-            <PostFeed
-              graphResource={graphResource}
-              graph={graphs[graphId]}
-              pendingSize={pendingSize}
-              associations={associations}
-              groups={groups}
-              contacts={contacts}
-              api={api}
-              history={history}
-              baseUrl={baseUrl}
-            />
-          ) : <Loading />
-        }
-      </Box>
+      <Switch>
+        <Route
+          exact
+          path={[relativePath('/'), relativePath('/feed')]}
+          render={(routeProps) => {
+            return (
+              <PostTimeline
+                {...props}
+                graphs={graphs}
+                pendingSize={pendingSize}
+                graphResource={graphResource} />
+            );
+          }} />
+        <Route
+          path={relativePath('/feed/:index+')}
+          render={(routeProps) => {
+            return (
+              <PostReplies
+                {...props}
+                graphs={graphs}
+                pendingSize={pendingSize}
+                graphResource={graphResource} />
+            );
+          }} />
+      </Switch>
     </Box>
   );
 }
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js
index 862619cca..74fe5fa3c 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js
@@ -1,6 +1,9 @@
 import React from 'react';
+import bigInt from 'big-integer';
 import VirtualScroller from "~/views/components/VirtualScroller";
 import PostItem from './PostItem';
+import { Col } from '@tlon/indigo-react';
+
 
 const virtualScrollerStyle = {
   height: "100%"
@@ -13,10 +16,63 @@ export class PostFeed extends React.Component {
 
     this.isFetching = false;
     this.renderItem = React.forwardRef(({ index, scrollWindow }, ref) => {
-      const { graph, graphResource, contacts, api, history, baseUrl } = this.props;
+      const {
+        graph,
+        graphResource,
+        contacts,
+        api,
+        history,
+        baseUrl,
+        parentNode
+      } = this.props;
       const node = graph.get(index);
       if (!node) { return null; }
 
+      const first = graph.peekLargest()?.[0];
+      const post = node?.post;
+      if (!node || !post) {
+        return null;
+      }
+     
+      if (parentNode && index.eq(first ?? bigInt.zero)) {
+        return (
+          <React.Fragment key={index.toString()}>
+            <Col
+              key={index.toString()}
+              mb="3"
+              width="100%"
+              flexShrink={0}
+            >
+              <PostItem
+                key={parentNode.post.index}
+                ref={ref}
+                node={parentNode}
+                contacts={contacts}
+                graphResource={graphResource}
+                api={api}
+                index={bigInt(parentNode.post.index.slice(1))}
+                baseUrl={baseUrl}
+                history={history}
+                isParent={true}
+              />
+            </Col>
+            <PostItem
+              key={index.toString()}
+              ref={ref}
+              node={node}
+              contacts={contacts}
+              graphResource={graphResource}
+              api={api}
+              index={index}
+              baseUrl={baseUrl}
+              history={history}
+              isReply={true}
+              parentPost={parentNode.post}
+            />
+          </React.Fragment>
+        );
+      }
+
       return (
         <PostItem
           key={index.toString()}
@@ -28,6 +84,8 @@ export class PostFeed extends React.Component {
           index={index}
           baseUrl={baseUrl}
           history={history}
+          parentPost={parentNode?.post}
+          isReply={!!parentNode}
         />
       );
     });
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostFooter.js b/pkg/interface/src/views/landscape/components/Home/Post/PostFooter.js
index 50a44f311..2303cbb53 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostFooter.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostFooter.js
@@ -7,7 +7,10 @@ export function PostFooter(props) {
 
   return (
     <Row mt={2} justify-content="flex-start">
-      <Row cursor="pointer" onClick={toggleReplyMode}>
+      <Row cursor="pointer" onClick={(e) => {
+        e.stopPropagation();
+        toggleReplyMode();
+      }}>
         <Icon icon="Chat" />
         { replyCount > 0 ? (
           <Text pl="1" gray>{replyCount}</Text>
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js b/pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js
index fc6e35cc5..4fa2c0728 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js
@@ -4,10 +4,11 @@ import Author from '~/views/components/Author';
 
 
 export function PostHeader(props) {
-  const { post, contacts, api} = props;
+  const { post, contacts, api, isReply } = props;
+  const mb = isReply ? "2" : "3";
 
   return (
-    <Row width="100%" height="36px" mb={3} justifyContent="space-between">
+    <Row width="100%" height="36px" mb={mb} justifyContent="space-between">
       <Author
         showImage
         contacts={contacts}
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem.js b/pkg/interface/src/views/landscape/components/Home/Post/PostItem.js
index e6040f8ed..e1e12ced0 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Box, Col } from '@tlon/indigo-react';
+import { Box, Col, Row, Text } from '@tlon/indigo-react';
 import { PostHeader } from './PostHeader';
 import { PostContent } from './PostContent';
 import { PostFooter } from './PostFooter';
 import { PostInput } from './PostInput';
+import { Mention } from "~/views/components/MentionText";
 
 
 class PostItem extends React.Component {
@@ -23,7 +24,7 @@ class PostItem extends React.Component {
 
   navigateToReplies() {
     const { history, baseUrl, index } = this.props;
-    //history.push(`${baseUrl}/feed/${index.toString()}`);
+    history.push(`${baseUrl}/feed/${index.toString()}`);
   }
 
   submitCallback() {
@@ -32,7 +33,17 @@ class PostItem extends React.Component {
   }
 
   render() {
-    const { node, contacts, api, graphResource, index, innerRef } = this.props;
+    const {
+      node,
+      contacts,
+      api,
+      graphResource,
+      index,
+      innerRef,
+      isParent,
+      isReply,
+      parentPost
+    } = this.props;
     const { inReplyMode } = this.state;
 
     return (
@@ -46,12 +57,19 @@ class PostItem extends React.Component {
         <Col
           p="2"
           border={1}
-          borderColor="lightGray"
+          borderColor={ isParent ? "gray" : "lightGray" }
           borderRadius="2"
           width="100%"
           maxWidth="600px"
-          onClick={this.navigateToReplies}>
-          <PostHeader post={node.post} contacts={contacts} api={api} />
+          onClick={this.navigateToReplies}
+          cursor="pointer">
+          <PostHeader post={node.post} contacts={contacts} api={api} isReply={isReply} />
+          { isReply ? (
+            <Row width="100%" alignItems="center" mb="3">
+              <Text color="gray" pr="1">Replying to</Text>
+              <Mention ship={parentPost.author} />
+            </Row>
+          ) : null }
           <PostContent
             post={node.post}
             contacts={contacts} />
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.js b/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.js
new file mode 100644
index 000000000..9eafe945a
--- /dev/null
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import bigInt from 'big-integer';
+import { Box } from '@tlon/indigo-react'
+import { PostInput } from './PostInput';
+import { PostFeed } from './PostFeed';
+import { Loading } from '~/views/components/Loading';
+
+
+export function PostReplies(props) {
+  const {
+    baseUrl,
+    api,
+    history,
+    associations,
+    groups,
+    contacts,
+    graphPath,
+    graphs,
+    pendingSize,
+    graphResource
+  } = props;
+  const graphId = `${graphResource.ship.slice(1)}/${graphResource.name}`;
+  const shouldRenderFeed = graphId in graphs;
+
+  if (!shouldRenderFeed) {
+    return (
+      <Box height="100%" width="100%" alignItems="center" pl="1" pt="3">
+        <Loading />
+      </Box>
+    );
+  }
+
+  const locationUrl =
+    history.location.pathname.replace(`${baseUrl}/feed`, '');
+  console.log(locationUrl);
+  let nodeIndex = locationUrl.split('/').slice(1).map((ind) => {
+    return bigInt(ind);
+  });
+
+  let node;
+  let graph = graphs[graphId];
+  nodeIndex.forEach((i) => {
+    if (!graph) {
+      return null;
+    }
+    node = graph.get(i);
+    if (!node) {
+      return null;
+    }
+    graph = node.children;
+  });
+
+  if (!node || !graph) {
+    return null;
+  }
+
+  return (
+    <Box height="100%" width="100%" alignItems="center" pl="1" pt="3">
+      <PostFeed
+        graphResource={graphResource}
+        graph={graph}
+        parentNode={node}
+        pendingSize={pendingSize}
+        associations={associations}
+        groups={groups}
+        contacts={contacts}
+        api={api}
+        history={history}
+        baseUrl={baseUrl}
+      />
+    </Box>
+  );
+}
+
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.js b/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.js
new file mode 100644
index 000000000..66b92e932
--- /dev/null
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Box } from '@tlon/indigo-react'
+import { PostInput } from './PostInput';
+import { PostFeed } from './PostFeed';
+import { Loading } from '~/views/components/Loading';
+
+
+export function PostTimeline(props) {
+  const {
+    baseUrl,
+    api,
+    history,
+    associations,
+    groups,
+    contacts,
+    graphPath,
+    graphs,
+    pendingSize,
+    graphResource
+  } = props;
+  const graphId = `${graphResource.ship.slice(1)}/${graphResource.name}`;
+  const shouldRenderFeed = graphId in graphs;
+
+  return (
+    <>
+      <Box
+        width="100%"
+        maxWidth="616px"
+        pt="3"
+        pl="2"
+        pr="2"
+        mb="3"
+        flexDirection="column"
+        alignItems="center">
+        { shouldRenderFeed ? (
+            <PostInput api={api} graphResource={graphResource} />
+          ) : null
+        }
+      </Box> 
+      <Box height="calc(100% - 136px)" width="100%" alignItems="center" pl="1">
+        { shouldRenderFeed ? (
+            <PostFeed
+              graphResource={graphResource}
+              graph={graphs[graphId]}
+              pendingSize={pendingSize}
+              associations={associations}
+              groups={groups}
+              contacts={contacts}
+              api={api}
+              history={history}
+              baseUrl={baseUrl}
+            />
+          ) : <Loading />
+        }
+      </Box>
+    </>
+  );
+}
+
diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
index 3ff088523..787496dd3 100644
--- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
@@ -73,7 +73,7 @@ export function SidebarListHeader(props: {
          borderColor="washedGray"
          backgroundColor={['transparent',
            props.history.location.pathname === `/~landscape${groupPath}` ||
-           props.history.location.pathname === `/~landscape${groupPath}/feed` 
+           props.history.location.pathname.includes(`/~landscape${groupPath}/feed`) 
            ? (
             'washedGray'
            ) : (