WIP

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>
   );

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;

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;

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;