From 935c2ff629e1aa4da5976cf88206828a070df414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 14 Sep 2018 10:43:40 -0300
Subject: [PATCH] WIP

---
 src/core/client/stream/components/App.tsx     |  5 ++-
 .../tabs/profile/components/Profile.tsx       | 21 ++++++++++
 .../profile/containers/ProfileContainer.tsx   | 26 ++++++++++++
 .../tabs/profile/queries/ProfileQuery.tsx     | 40 +++++++++++++++++++
 4 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/core/client/stream/tabs/profile/components/Profile.tsx
 create mode 100644 src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx
 create mode 100644 src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx

diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index b45756b46..d78881430 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -12,6 +12,7 @@ import {
 import { SetActiveTabMutation } from "talk-stream/mutations";
 
 import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
+import ProfileContainer from "../tabs/profile/containers/ProfileContainer";
 import * as styles from "./App.css";
 
 export interface AppProps {
@@ -33,7 +34,9 @@ const App: StatelessComponent<AppProps> = props => {
         <TabPane tabId="COMMENTS">
           <CommentsPaneContainer />
         </TabPane>
-        <TabPane tabId="PROFILE">My profileeeeee</TabPane>
+        <TabPane tabId="PROFILE">
+          <ProfileContainer />
+        </TabPane>
       </TabContent>
     </HorizontalGutter>
   );
diff --git a/src/core/client/stream/tabs/profile/components/Profile.tsx b/src/core/client/stream/tabs/profile/components/Profile.tsx
new file mode 100644
index 000000000..b8223f70d
--- /dev/null
+++ b/src/core/client/stream/tabs/profile/components/Profile.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { PropTypesOf } from "talk-framework/types";
+import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
+import { HorizontalGutter } from "talk-ui/components";
+
+export interface ProfileProps {
+  me: PropTypesOf<typeof UserBoxContainer>["me"] | null;
+}
+
+const Profile: StatelessComponent<ProfileProps> = props => {
+  return (
+    <HorizontalGutter size="double">
+      <HorizontalGutter size="half">
+        <UserBoxContainer me={props.me} />
+      </HorizontalGutter>
+    </HorizontalGutter>
+  );
+};
+
+export default Profile;
diff --git a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx
new file mode 100644
index 000000000..50570f913
--- /dev/null
+++ b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { ProfileContainer_me as MeData } from "talk-stream/__generated__/ProfileContainer_me.graphql";
+
+import Profile from "../components/Profile";
+
+interface ProfileContainerProps {
+  me: MeData | null;
+}
+
+export class StreamContainer extends React.Component<ProfileContainerProps> {
+  public render() {
+    return <Profile me={this.props.me} />;
+  }
+}
+const enhanced = withFragmentContainer<ProfileContainerProps>({
+  me: graphql`
+    fragment ProfileContainer_me on User {
+      ...UserBoxContainer_me
+    }
+  `,
+})(StreamContainer);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx b/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx
new file mode 100644
index 000000000..7662343e1
--- /dev/null
+++ b/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx
@@ -0,0 +1,40 @@
+import React, { StatelessComponent } from "react";
+import { ReadyState } from "react-relay";
+import { graphql, QueryRenderer } from "talk-framework/lib/relay";
+import { ProfileQuery as QueryTypes } from "talk-stream/__generated__/ProfileQuery.graphql";
+import { Spinner } from "talk-ui/components";
+import ProfileContainer from "../containers/ProfileContainer";
+
+export const render = ({
+  error,
+  props,
+}: ReadyState<QueryTypes["response"]>) => {
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  if (props) {
+    if (!props.me) {
+      return <div>Error loading profile</div>;
+    }
+    return <ProfileContainer me={props.me} />;
+  }
+
+  return <Spinner />;
+};
+
+const ProfileQuery: StatelessComponent = () => (
+  <QueryRenderer<QueryTypes>
+    query={graphql`
+      query ProfileQuery {
+        me {
+          ...ProfileContainer_me
+        }
+      }
+    `}
+    variables={{}}
+    render={render}
+  />
+);
+
+export default ProfileQuery;