diff --git a/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.js b/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.js index b59ce7a21..b3a92d4bb 100644 --- a/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.js +++ b/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.js @@ -60,12 +60,14 @@ export const AddFeedBanner = (props) => { pr={2} > Enable Group Feed? - - Dismiss - - - Enable Feed - + + + Dismiss + + + Enable Feed + + ); }; 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 2b899e029..173d3b77c 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,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 ( - - ); - }); + 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 ( + + ); + }); + + 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 ( - - ); + return ( + + ); + } } - 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 15b3f92f4..56b5eafd4 100644 --- a/pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js +++ b/pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js @@ -62,7 +62,7 @@ export function PostHeader(props) { {timestamp} - + ); } diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostInput.js b/pkg/interface/src/views/landscape/components/Home/Post/PostInput.js index c7a896539..dafb381ce 100644 --- a/pkg/interface/src/views/landscape/components/Home/Post/PostInput.js +++ b/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(); + } }); }; 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 229a01870..2cc09dd4d 100644 --- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem.js +++ b/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 { + index={`/${index.toString()}`} + submitCallback={this.submitCallback} /> ) : null } ); - } }