header: logout integration

container/src/App.tsx

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

container/src/hooks/useAuth.ts

@@ -1,13 +1,13 @@
 import { useCallback, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { History } from "history";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
 
 interface UseAuthFunctions {
   login: VoidFunction;
   logout: VoidFunction;
   history: History<unknown>;
-  isSignedIn$: BehaviorSubject<boolean>;
+  isSignedIn$: Observable<boolean>;
 }
 
 const isSignedIn$ = new BehaviorSubject<boolean>(false);
@@ -32,7 +32,7 @@ const useAuth = (): UseAuthFunctions => {
   const login = useCallback(() => isSignedIn$.next(true), []);
   const logout = useCallback(() => isSignedIn$.next(false), []);
 
-  return { login, logout, history, isSignedIn$ };
+  return { login, logout, history, isSignedIn$: isSignedIn$.asObservable() };
 };
 
 export default useAuth;

container/src/modules/Header.tsx

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

container/src/typings/header.d.ts

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

header/src/Header.tsx

@@ -16,7 +16,7 @@ const Container = styled.div`
   justify-content: space-between;
 `;
 
-const Header = ({ navigate, isSignedIn$ }: HeaderMountOptions) => {
+const Header = ({ navigate, isSignedIn$, logout }: HeaderMountOptions) => {
   const [isSignedIn, setIsSignedIn] = useState(false);
 
   const navigateToLanding = useCallback(() => {
@@ -38,9 +38,11 @@ const Header = ({ navigate, isSignedIn$ }: HeaderMountOptions) => {
       <h3 onClick={navigateToLanding} style={{ cursor: "pointer" }}>
         Header Microfrontend
       </h3>
+
       <Button
         variant="outlined"
         style={{ color: "white", borderColor: "white" }}
+        onClick={() => (isSignedIn ? logout() : navigate("/auth/login"))}
       >
         {isSignedIn ? "Logout" : "Login"}
       </Button>

header/src/bootstrap.tsx

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