Tiny refactor

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

@@ -2,7 +2,7 @@ import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-import PermalinkContainer from "../Permalink/PermalinkContainer";
+import PermalinkContainer from "../../containers/PermalinkContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";

src/core/client/stream/components/Permalink/PermalinkView.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
-import CommentContainer from "../containers/CommentContainer";
+import CommentContainer from "../../containers/CommentContainer";
 
 export interface InnerProps {
   comment: {} | null;

src/core/client/stream/containers/PermalinkContainer.tsx

@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
 import { withLocalStateContainer } from "talk-framework/lib/relay";
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 
-import Permalink from "./Permalink";
+import Permalink from "../components/Permalink/Permalink";
 
 interface InnerProps {
   local: Local;

src/core/client/stream/containers/PermalinkViewContainer.tsx

@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
 import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
 import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
-import PermalinkView from "../components/PermalinkView";
+import PermalinkView from "../components/Permalink/PermalinkView";
 
 interface InnerProps {
   data: Data;
@@ -18,12 +18,7 @@ const enhanced = withFragmentContainer<{ data: Data }>({
     fragment PermalinkViewContainerQuery on Query
       @argumentDefinitions(commentID: { type: "ID!" }) {
       comment(id: $commentID) {
-        id
-        author {
-          username
-        }
-        body
-        createdAt
+        ...CommentContainer
       }
     }
   `,

src/core/client/stream/queries/AppQuery.tsx

@@ -20,9 +20,25 @@ interface InnerProps {
   local: Local;
 }
 
+interface WrappedProps {
+  data: any;
+}
+
 // TODO (bc) refactor this into another component. break down the needs of each component.
 // (careful porting QueryRenderer into another stateless component)
 
+export const renderWrapper = (
+  WrappedComponent: React.ComponentType<WrappedProps>
+) => ({ error, props }: ReadyState<AppQueryResponse>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (props) {
+    return <WrappedComponent data={props} />;
+  }
+  return <div>Loading</div>;
+};
+
 const AppQuery: StatelessComponent<InnerProps> = ({
   local: { commentID, assetID },
 }) => {
@@ -37,15 +53,7 @@ const AppQuery: StatelessComponent<InnerProps> = ({
         variables={{
           commentID,
         }}
-        render={({ error, props }: ReadyState<AppQueryResponse>) => {
-          if (error) {
-            return <div>{error.message}</div>;
-          }
-          if (props) {
-            return <PermalinkViewContainer data={props} />;
-          }
-          return <div>Loading</div>;
-        }}
+        render={renderWrapper(PermalinkViewContainer)}
       />
     );
   }
@@ -60,15 +68,7 @@ const AppQuery: StatelessComponent<InnerProps> = ({
       variables={{
         assetID,
       }}
-      render={({ error, props }: ReadyState<AppQueryResponse>) => {
-        if (error) {
-          return <div>{error.message}</div>;
-        }
-        if (props) {
-          return <AppContainer data={props} />;
-        }
-        return <div>Loading</div>;
-      }}
+      render={renderWrapper(AppContainer)}
     />
   );
 };