diff --git a/auth/src/App.tsx b/auth/src/App.tsx index be34a20..847bc79 100644 --- a/auth/src/App.tsx +++ b/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"; diff --git a/auth/src/bootstrap.tsx b/auth/src/bootstrap.tsx index 23bc719..043fd29 100644 --- a/auth/src/bootstrap.tsx +++ b/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: () => {}, + }); } } diff --git a/container/src/App.tsx b/container/src/App.tsx index 364a5c5..9f3bfe6 100644 --- a/container/src/App.tsx +++ b/container/src/App.tsx @@ -14,12 +14,12 @@ const HeaderContainer = styled.div` `; const App = () => { - const { login, history } = useAuth(); + const { login, history, isSignedIn$ } = useAuth(); return (
-
+
diff --git a/container/src/hooks/useAuth.ts b/container/src/hooks/useAuth.ts index f7f9630..5f8182b 100644 --- a/container/src/hooks/useAuth.ts +++ b/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; + isSignedIn$: BehaviorSubject; } +const isSignedIn$ = new BehaviorSubject(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; diff --git a/container/src/modules/Header.tsx b/container/src/modules/Header.tsx index 3a8bfc9..83135cd 100644 --- a/container/src/modules/Header.tsx +++ b/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 }) => { const ref = useRef(null); const { navigate } = useRouter(); useEffect(() => { - mount(ref.current, { navigate }); + mount(ref.current, { navigate, isSignedIn$ }); }, []); return
; diff --git a/container/src/typings/header.d.ts b/container/src/typings/header.d.ts index dc253ca..e674c05 100644 --- a/container/src/typings/header.d.ts +++ b/container/src/typings/header.d.ts @@ -1,5 +1,6 @@ interface HeaderMountOptions { navigate: NavigateFunction; + isSignedIn$: import("rxjs").BehaviorSubject; } declare module "header/HeaderComponent" { diff --git a/header/package-lock.json b/header/package-lock.json index 5bc3f17..d2bb228 100644 --- a/header/package-lock.json +++ b/header/package-lock.json @@ -4690,6 +4690,21 @@ "glob": "^7.1.3" } }, + "rxjs": { + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz", + "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==", + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", diff --git a/header/package.json b/header/package.json index b2b35d6..22e266d 100644 --- a/header/package.json +++ b/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" } } diff --git a/header/src/Header.tsx b/header/src/Header.tsx index 6795389..40478a6 100644 --- a/header/src/Header.tsx +++ b/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 (

@@ -30,7 +42,7 @@ const Header = ({ navigate }: HeaderMountOptions) => { variant="outlined" style={{ color: "white", borderColor: "white" }} > - Login + {isSignedIn ? "Logout" : "Login"} ); diff --git a/header/src/bootstrap.tsx b/header/src/bootstrap.tsx index cd18c76..cdea9ff 100644 --- a/header/src/bootstrap.tsx +++ b/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(
, el); +const mount = (el: Element, { navigate, isSignedIn$ }: HeaderMountOptions) => { + ReactDOM.render(
, 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(false), }; mount(rootNode, mockOptions);