From f0e0051c972723a04bfbadd954ece0839ba69b98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 25 Jul 2018 18:57:43 -0300
Subject: [PATCH] Tiny refactor

---
 .../stream/components/Comment/Comment.tsx     |  2 +-
 .../{ => Permalink}/PermalinkView.tsx         |  2 +-
 .../PermalinkContainer.tsx                    |  2 +-
 .../containers/PermalinkViewContainer.tsx     |  9 ++---
 src/core/client/stream/queries/AppQuery.tsx   | 36 +++++++++----------
 5 files changed, 23 insertions(+), 28 deletions(-)
 rename src/core/client/stream/components/{ => Permalink}/PermalinkView.tsx (88%)
 rename src/core/client/stream/{components/Permalink => containers}/PermalinkContainer.tsx (91%)

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 8f8553fce..10a6c9659 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/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";
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
similarity index 88%
rename from src/core/client/stream/components/PermalinkView.tsx
rename to src/core/client/stream/components/Permalink/PermalinkView.tsx
index 889c8c28a..7e4a29177 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/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;
diff --git a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
similarity index 91%
rename from src/core/client/stream/components/Permalink/PermalinkContainer.tsx
rename to src/core/client/stream/containers/PermalinkContainer.tsx
index 4364a8e0b..46a646600 100644
--- a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx
+++ b/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;
diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx
index 6e0545383..a2c6216f8 100644
--- a/src/core/client/stream/containers/PermalinkViewContainer.tsx
+++ b/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
       }
     }
   `,
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 1cb252899..07601ed1d 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/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)}
     />
   );
 };