Use pagination container

src/core/client/stream/components/App.tsx

@@ -4,17 +4,11 @@ import { StatelessComponent } from "react";
 import { Center } from "talk-ui/components";
 
 import AssetListContainer from "../containers/AssetListContainer";
-import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import StreamContainer from "../containers/StreamContainer";
-import Logo from "./Logo";
 
 export interface AppProps {
   assets?: any | null;
-  asset?: {
-    id: string;
-    isClosed: boolean;
-    comments: any | null;
-  } | null;
+  asset?: {} | null;
 }
 
 const App: StatelessComponent<AppProps> = props => {
@@ -24,9 +18,7 @@ const App: StatelessComponent<AppProps> = props => {
   if (props.asset) {
     return (
       <Center>
-        <Logo gutterBottom />
-        <StreamContainer comments={props.asset.comments} />
-        <PostCommentFormContainer assetID={props.asset.id} />
+        <StreamContainer asset={props.asset} />
       </Center>
     );
   }

src/core/client/stream/components/PostCommentForm.css

@@ -7,6 +7,7 @@
   margin-bottom: calc(2px * $spacing-unit);
 }
 
-.postButton {
-  float: right;
-}
+.postButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+}

src/core/client/stream/components/PostCommentForm.tsx

@@ -39,11 +39,13 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             </div>
           )}
         </Field>
-        <Localized id="postCommentForm-submit">
-          <Button className={styles.postButton} disabled={submitting} primary>
-            Post
-          </Button>
-        </Localized>
+        <div className={styles.postButtonContainer}>
+          <Localized id="postCommentForm-submit">
+            <Button disabled={submitting} primary>
+              Post
+            </Button>
+          </Localized>
+        </div>
       </form>
     )}
   </Form>

src/core/client/stream/components/Stream.tsx

@@ -1,18 +1,36 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import CommentContainer from "../containers/CommentContainer";
+import Logo from "talk-stream/components/Logo";
+import CommentContainer from "talk-stream/containers/CommentContainer";
+import PostCommentFormContainer from "talk-stream/containers/PostCommentFormContainer";
+import { Button } from "talk-ui/components";
 
 export interface StreamProps {
-  comments: ReadonlyArray<{ id: string }>;
+  id: string;
+  isClosed: boolean;
+  comments: ReadonlyArray<{ id: string }> | null;
+  onLoadMore: () => void;
+  hasMore: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
+  if (props.comments === null) {
+    // TODO: (@cvle) What's the reason for this being null?
+    return <div>Comments unavailable</div>;
+  }
   return (
     <div>
+      <Logo gutterBottom />
+      <PostCommentFormContainer assetID={props.id} />
       {props.comments.map(comment => (
         <CommentContainer key={comment.id} data={comment} gutterBottom />
       ))}
+      {props.hasMore && (
+        <Button onClick={props.onLoadMore} secondary fullWidth>
+          Load More
+        </Button>
+      )}
     </div>
   );
 };