header: isSignedIn$ behavior subject integration

auth/src/App.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Card } from "@material-ui/core";
 import styled from "@emotion/styled";
-import { Router, Switch, Route } from "react-router-dom";
-import { History } from "history";
+import { Switch, Route } from "react-router-dom";
 
 import Login from "./components/Login";
 import Register from "./components/Register";

auth/src/bootstrap.tsx

@@ -18,7 +18,10 @@ if (process.env.NODE_ENV === "development") {
   const rootNode = document.querySelector("#auth-module-root");
 
   if (rootNode) {
-    mount(rootNode, { history: createBrowserHistory(), login: () => {} });
+    mount(rootNode, {
+      history: createBrowserHistory(),
+      login: () => {},
+    });
   }
 }
 

container/src/App.tsx

@@ -14,12 +14,12 @@ const HeaderContainer = styled.div`
 `;
 
 const App = () => {
-  const { login, history } = useAuth();
+  const { login, history, isSignedIn$ } = useAuth();
 
   return (
     <div>
       <HeaderContainer>
-        <Header />
+        <Header isSignedIn$={isSignedIn$}/>
       </HeaderContainer>
 
       <div>

container/src/hooks/useAuth.ts

@@ -1,27 +1,38 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { History } from "history";
+import { BehaviorSubject } from "rxjs";
 
 interface UseAuthFunctions {
   login: VoidFunction;
   logout: VoidFunction;
   history: History<unknown>;
+  isSignedIn$: BehaviorSubject<boolean>;
 }
 
+const isSignedIn$ = new BehaviorSubject<boolean>(false);
+
 const useAuth = (): UseAuthFunctions => {
   const history = useHistory();
-  const [isSignedIn, setIsSignedIn] = useState(false);
 
   useEffect(() => {
-    if (isSignedIn) {
-      history.push("/dashboard");
-    }
-  }, [isSignedIn]);
+    const subscription = isSignedIn$.subscribe((val) => {
+      if (val) {
+        history.push("/dashboard");
+      } else if (history.location.pathname === "/dashboard") {
+        history.push("/");
+      }
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
 
-  const login = useCallback(() => setIsSignedIn(true), []);
-  const logout = useCallback(() => setIsSignedIn(false), []);
+  const login = useCallback(() => isSignedIn$.next(true), []);
+  const logout = useCallback(() => isSignedIn$.next(false), []);
 
-  return { login, logout, history };
+  return { login, logout, history, isSignedIn$ };
 };
 
 export default useAuth;

container/src/modules/Header.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useRef } from "react";
 import { mount } from "header/HeaderComponent";
 import useRouter from "../hooks/useRouter";
+import { BehaviorSubject } from "rxjs";
 
-export default () => {
+export default ({ isSignedIn$ }: { isSignedIn$: BehaviorSubject<boolean> }) => {
   const ref = useRef<HTMLDivElement>(null);
   const { navigate } = useRouter();
 
   useEffect(() => {
-    mount(ref.current, { navigate });
+    mount(ref.current, { navigate, isSignedIn$ });
   }, []);
 
   return <div ref={ref} />;

container/src/typings/header.d.ts

@@ -1,5 +1,6 @@
 interface HeaderMountOptions {
   navigate: NavigateFunction;
+  isSignedIn$: import("rxjs").BehaviorSubject<boolean>;
 }
 
 declare module "header/HeaderComponent" {

header/package.json

@@ -33,6 +33,7 @@
     "@material-ui/core": "4.11.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-router-dom": "5.2.0"
+    "react-router-dom": "5.2.0",
+    "rxjs": "6.6.3"
   }
 }

header/src/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import Button from "@material-ui/core/Button";
 
@@ -16,11 +16,23 @@ const Container = styled.div`
   justify-content: space-between;
 `;
 
-const Header = ({ navigate }: HeaderMountOptions) => {
+const Header = ({ navigate, isSignedIn$ }: HeaderMountOptions) => {
+  const [isSignedIn, setIsSignedIn] = useState(false);
+
   const navigateToLanding = useCallback(() => {
     navigate("/");
   }, []);
 
+  useEffect(() => {
+    const subscription = isSignedIn$.subscribe((val) => {
+      setIsSignedIn(val);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
   return (
     <Container>
       <h3 onClick={navigateToLanding} style={{ cursor: "pointer" }}>
@@ -30,7 +42,7 @@ const Header = ({ navigate }: HeaderMountOptions) => {
         variant="outlined"
         style={{ color: "white", borderColor: "white" }}
       >
-        Login
+        {isSignedIn ? "Logout" : "Login"}
       </Button>
     </Container>
   );

header/src/bootstrap.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Header from "./Header";
+import { BehaviorSubject } from "rxjs";
 
-const mount = (el: Element, { navigate }: HeaderMountOptions) => {
-  ReactDOM.render(<Header navigate={navigate} />, el);
+const mount = (el: Element, { navigate, isSignedIn$ }: HeaderMountOptions) => {
+  ReactDOM.render(<Header navigate={navigate} isSignedIn$={isSignedIn$} />, el);
 };
 
 if (process.env.NODE_ENV === "development") {
@@ -14,6 +15,7 @@ if (process.env.NODE_ENV === "development") {
       navigate: (route: string) => {
         console.log(`Navigate to route: ${route}`);
       },
+      isSignedIn$: new BehaviorSubject<boolean>(false),
     };
 
     mount(rootNode, mockOptions);