interface: make renderer in PostFeed stable, style tweaks

pkg/interface/src/views/landscape/components/Home/AddFeedBanner.js

@@ -60,12 +60,14 @@ export const AddFeedBanner = (props) => {
       pr={2}
     >
       <Text verticalAlign="middle">Enable Group Feed?</Text>
-      <Text color="gray" bold cursor="pointer" onClick={disableFeed}>
-        Dismiss
-      </Text>
-      <Text color="blue" bold cursor="pointer" onClick={enableFeed}>
-        Enable Feed
-      </Text>
+      <Row>
+        <Text mr="2" color="gray" bold cursor="pointer" onClick={disableFeed}>
+          Dismiss
+        </Text>
+        <Text color="blue" bold cursor="pointer" onClick={enableFeed}>
+          Enable Feed
+        </Text>
+      </Row>
     </Row>
   );
 };

pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js

@@ -1,6 +1,4 @@
-import React, {
-  useState
-} from 'react';
+import React from 'react';
 import VirtualScroller from "~/views/components/VirtualScroller";
 import PostItem from './PostItem';
 
@@ -8,35 +6,43 @@ const virtualScrollerStyle = {
   height: "100%"
 };
 
-export function PostFeed(props) {
-  const { graph, graphResource, contacts, api, history, baseUrl } = props;
-  const [isFetching, setIsFetching] = useState(false);
 
-  const renderItem = React.forwardRef(({ index, scrollWindow }, ref) => {
-    const node = graph.get(index);
-    if (!node) { return null; }
+export class PostFeed extends React.Component {
+  constructor(props) {
+    super(props);
 
-    return (
-      <PostItem
-        key={index.toString()}
-        ref={ref}
-        node={node}
-        contacts={contacts}
-        graphResource={graphResource}
-        api={api}
-        index={index}
-        baseUrl={baseUrl}
-        history={history}
-      />
-    );
-  });
+    this.isFetching = false;
+    this.renderItem = React.forwardRef(({ index, scrollWindow }, ref) => {
+      const { graph, graphResource, contacts, api, history, baseUrl } = this.props;
+      const node = graph.get(index);
+      if (!node) { return null; }
 
-  const fetchPosts = async (newer) => {
-    if (isFetching) {
+      return (
+        <PostItem
+          key={index.toString()}
+          ref={ref}
+          node={node}
+          contacts={contacts}
+          graphResource={graphResource}
+          api={api}
+          index={index}
+          baseUrl={baseUrl}
+          history={history}
+        />
+      );
+    });
+
+    this.fetchPosts = this.fetchPosts.bind(this);
+  }
+
+  async fetchPosts(newer) {
+    const { graph, graphResource, api } = this.props;
+
+    if (this.isFetching) {
       return false;
     }
-    
-    setIsFetching(true);
+
+    this.isFetching = true;
     const { ship, name } = graphResource;
     const currSize = graph.size;
 
@@ -53,23 +59,25 @@ export function PostFeed(props) {
       await api.graph.getOlderSiblings(ship, name, 100, `/${index.toString()}`);
     }
 
-    setIsFetching(false);
+    this.isFetching = false;
     return currSize === graph.size;
-  };
+  }
 
+  render() {
+    const { graph } = this.props;
 
-  return (
-    <VirtualScroller
-      origin="top"
-      offset={0}
-      data={graph}
-      averageHeight={106}
-      size={graph.size}
-      style={virtualScrollerStyle}
-      pendingSize={0}
-      renderer={renderItem}
-      loadRows={fetchPosts}
-    />
-  );
+    return (
+      <VirtualScroller
+        origin="top"
+        offset={0}
+        data={graph}
+        averageHeight={106}
+        size={graph.size}
+        style={virtualScrollerStyle}
+        pendingSize={0}
+        renderer={this.renderItem}
+        loadRows={this.fetchPosts}
+      />
+    );
+  }
 }
-

pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js

@@ -62,7 +62,7 @@ export function PostHeader(props) {
           <Text gray>{timestamp}</Text>
         </Col>
       </Row>
-      <Icon icon="Ellipsis" />
+      <Icon icon="Ellipsis" color="gray" />
     </Row>
   );
 }

pkg/interface/src/views/landscape/components/Home/Post/PostInput.js

@@ -7,7 +7,7 @@ import { createPost } from '~/logic/api/graph';
 
 
 export function PostInput(props) {
-  const { api, graphResource, index } = props;
+  const { api, graphResource, index, submitCallback } = props;
   const [disabled, setDisabled] = useState(false);
   const [postContent, setPostContent] = useState('');
 
@@ -19,7 +19,6 @@ export function PostInput(props) {
 
     setDisabled(true);
     const post = createPost(tokenizeMessage(postContent), index || '');
-    console.log(post);
 
     api.graph.addPost(
       graphResource.ship,
@@ -28,6 +27,10 @@ export function PostInput(props) {
     ).then(() => {
       setDisabled(false);
       setPostContent('');
+
+      if (submitCallback) {
+        submitCallback();
+      }
     });
   };
 

pkg/interface/src/views/landscape/components/Home/Post/PostItem.js

@@ -14,6 +14,7 @@ class PostItem extends React.Component {
     this.state = { inReplyMode: false };
     this.toggleReplyMode = this.toggleReplyMode.bind(this);
     this.navigateToReplies = this.navigateToReplies.bind(this);
+    this.submitCallback = this.submitCallback.bind(this);
   }
 
   toggleReplyMode() {
@@ -22,7 +23,12 @@ 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() {
+    this.toggleReplyMode();
+    // or navigate to replies
   }
 
   render() {
@@ -63,12 +69,12 @@ class PostItem extends React.Component {
             <PostInput
               api={api}
               graphResource={graphResource}
-              index={`/${index.toString()}`} />
+              index={`/${index.toString()}`}
+              submitCallback={this.submitCallback} />
           </Col>
         ) : null }
       </Col>
     );
-
   }
 }