From b3407cbdea2fdd6c4a9c4863b42bb706ccdfa6ca Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 26 May 2022 11:08:37 -0700
Subject: [PATCH] Remove user menu when chat is not available

---
 web/components/layouts/Main.tsx             | 10 +++++++---
 web/components/stores/ClientConfigStore.tsx | 10 +++++++++-
 web/components/ui/Header/Header.tsx         | 12 +++++++++---
 web/stories/Header.stories.tsx              | 11 +++++++++--
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx
index 79c1aa13b..f36e291f7 100644
--- a/web/components/layouts/Main.tsx
+++ b/web/components/layouts/Main.tsx
@@ -1,18 +1,22 @@
 import { Layout } from 'antd';
 import { useRecoilValue } from 'recoil';
-import { ClientConfigStore, clientConfigStateAtom } from '../stores/ClientConfigStore';
+import {
+  ClientConfigStore,
+  isChatAvailableSelector,
+  clientConfigStateAtom,
+} from '../stores/ClientConfigStore';
 import { Content, Header } from '../ui';
 import { ClientConfig } from '../../interfaces/client-config.model';
 
 function Main() {
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const { name, title } = clientConfig;
-
+  const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   return (
     <>
       <ClientConfigStore />
       <Layout>
-        <Header name={title || name} />
+        <Header name={title || name} chatAvailable={isChatAvailable} />
         <Content />
       </Layout>
     </>
diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx
index 7abae4170..2c65c9fbd 100644
--- a/web/components/stores/ClientConfigStore.tsx
+++ b/web/components/stores/ClientConfigStore.tsx
@@ -87,6 +87,15 @@ export const isChatVisibleSelector = selector({
   },
 });
 
+export const isChatAvailableSelector = selector({
+  key: 'isChatAvailableSelector',
+  get: ({ get }) => {
+    const state: AppStateOptions = get(appStateAtom);
+    const accessToken: String = get(accessTokenAtom);
+    return accessToken && state.chatAvailable;
+  },
+});
+
 // We display in an "online/live" state as long as video is actively playing.
 // Even during the time where technically the server has said it's no longer
 // live, however the last few seconds of video playback is still taking place.
@@ -182,7 +191,6 @@ export function ClientConfigStore() {
   };
 
   const resetAndReAuth = () => {
-    console.log('!!!!! reauth!!');
     setLocalStorage(ACCESS_TOKEN_KEY, '');
     setAccessToken('');
     handleUserRegistration();
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index d3f7e2076..5da2a79bb 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -1,4 +1,4 @@
-import { Layout } from 'antd';
+import { Layout, Tag, Tooltip } from 'antd';
 import { OwncastLogo, UserDropdown } from '../../common';
 import s from './Header.module.scss';
 
@@ -6,16 +6,22 @@ const { Header } = Layout;
 
 interface Props {
   name: string;
+  chatAvailable: boolean;
 }
 
-export default function HeaderComponent({ name = 'Your stream title' }: Props) {
+export default function HeaderComponent({ name = 'Your stream title', chatAvailable }: Props) {
   return (
     <Header className={`${s.header}`}>
       <div className={`${s.logo}`}>
         <OwncastLogo variant="contrast" />
         <span>{name}</span>
       </div>
-      <UserDropdown />
+      {chatAvailable && <UserDropdown />}
+      {!chatAvailable && (
+        <Tooltip title="Chat is available when the stream is live." placement="left">
+          <Tag color="processing">Chat offline</Tag>
+        </Tooltip>
+      )}
     </Header>
   );
 }
diff --git a/web/stories/Header.stories.tsx b/web/stories/Header.stories.tsx
index 943845a27..5df26c8e9 100644
--- a/web/stories/Header.stories.tsx
+++ b/web/stories/Header.stories.tsx
@@ -15,7 +15,14 @@ const Template: ComponentStory<typeof Header> = args => (
   </RecoilRoot>
 );
 
-export const Example = Template.bind({});
-Example.args = {
+export const ChatAvailable = Template.bind({});
+ChatAvailable.args = {
   name: 'Example Stream Name',
+  chatAvailable: true,
+};
+
+export const ChatNotAvailable = Template.bind({});
+ChatNotAvailable.args = {
+  name: 'Example Stream Name',
+  chatAvailable: false,
 };