From fabe52a0a67385cf5db377aae7be3f171d6b942d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 3 Oct 2018 15:49:49 +0200
Subject: [PATCH] feat: hide profile tab when not logged in

---
 src/core/client/stream/components/App.tsx     |  9 +++--
 .../stream/containers/IfLoggedInContainer.tsx | 34 +++++++++++++++++++
 src/core/client/stream/index.tsx              |  2 +-
 3 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/stream/containers/IfLoggedInContainer.tsx

diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index 14043aa3b..f1bb1e388 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -11,6 +11,7 @@ import {
 } from "talk-ui/components";
 
 import { PropTypesOf } from "talk-ui/types";
+import IfLoggedInContainer from "../containers/IfLoggedInContainer";
 import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
 import ProfileQuery from "../tabs/profile/queries/ProfileQuery";
 import * as styles from "./App.css";
@@ -29,9 +30,11 @@ const CommentsTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
 );
 
 const MyProfileTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
-  <Localized id="general-app-myProfileTab">
-    <Tab {...props}>My Profile</Tab>
-  </Localized>
+  <IfLoggedInContainer>
+    <Localized id="general-app-myProfileTab">
+      <Tab {...props}>My Profile</Tab>
+    </Localized>
+  </IfLoggedInContainer>
 );
 
 const App: StatelessComponent<AppProps> = props => {
diff --git a/src/core/client/stream/containers/IfLoggedInContainer.tsx b/src/core/client/stream/containers/IfLoggedInContainer.tsx
new file mode 100644
index 000000000..d22b8b60a
--- /dev/null
+++ b/src/core/client/stream/containers/IfLoggedInContainer.tsx
@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+
+import { graphql, QueryRenderer } from "talk-framework/lib/relay";
+import { IfLoggedInContainerQuery as QueryTypes } from "talk-stream/__generated__/IfLoggedInContainerQuery.graphql";
+
+class IfLoggedInContainer extends Component {
+  public render() {
+    return (
+      <QueryRenderer<QueryTypes>
+        query={graphql`
+          query IfLoggedInContainerQuery {
+            me {
+              id
+            }
+          }
+        `}
+        render={({ error, props }) => {
+          if (error) {
+            return <div>{error.message}</div>;
+          }
+
+          if (props && props.me) {
+            return <>{this.props.children}</>;
+          }
+
+          return null;
+        }}
+        variables={{}}
+      />
+    );
+  }
+}
+
+export default IfLoggedInContainer;
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 7dde43c00..5ba961e83 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -4,8 +4,8 @@ import { StatelessComponent } from "react";
 import ReactDOM from "react-dom";
 
 import { createManaged } from "talk-framework/lib/bootstrap";
+import AppContainer from "talk-stream/containers/AppContainer";
 
-import AppContainer from "./containers/AppContainer";
 import {
   OnPostMessageAuthError,
   OnPostMessageSetAuthToken,