[#8] added mobx & user saved in mobx store

SafeCity/ClientApp/package.json

@@ -11,6 +11,7 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "bootstrap": "^4.5.3",
+    "mobx": "^6.0.4",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",

SafeCity/ClientApp/src/App.tsx

@@ -8,14 +8,15 @@ import Experts from './pages/Experts';
 import Report from './pages/Report';
 import About from './pages/About';
 import NotFound from './pages/NotFound';
+import authStore from './mobx/authStore';
 
 import 'bootstrap/dist/css/bootstrap.css';
 import './main.css';
 import './app.css';
 
 function App() {
   return (
-    <Layout>
+    <Layout authStore={authStore}>
       <Switch>
         <Route exact path='/' component={Home} />
         <Route exact path='/projects/:id' component={Project} />

SafeCity/ClientApp/src/index.tsx

@@ -4,12 +4,20 @@ import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import auth from './services/auth';
+import usersService from './services/usersService';
 import * as serviceWorker from './serviceWorker';
+import authStore from './mobx/authStore';
 
 auth.load(updateSigninStatus);
 
 function updateSigninStatus(isSignedIn: boolean) {
-  console.log(`app loaded, signed in: ${isSignedIn} token: ${auth.getToken()}`);
+  if (isSignedIn) {
+    usersService.getMe()
+      .then(me => authStore.setUser(me))
+      .catch(err => console.log('getMe err ', err));
+  } else {
+    authStore.setUser(null);
+  }
 }
 
 const rootElement = document.getElementById('root');

SafeCity/ClientApp/src/mobx/authStore.ts

@@ -0,0 +1,14 @@
+
+import { observable, configure } from 'mobx';
+
+configure({enforceActions: 'observed'});
+
+const authStore = observable({
+    user: null,
+
+    setUser(u?: any) {
+        this.user = u
+    },
+});
+
+export default authStore;

SafeCity/ClientApp/src/pages/Layout.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
+import { observer } from 'mobx-react-lite';
 import { NavLink } from 'react-router-dom';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import auth from '../services/auth';
 
-function Layout(props: any) {
+const Layout = observer(({ children, authStore }: { children: any, authStore: any }) => {
+
+    const handleLogin = () => {
+        if (authStore.user) {
+            auth.signOut()
+        } else {
+            auth.signIn()
+        }
+    };
+
     return (
         <>
             <header>
@@ -25,15 +35,12 @@ function Layout(props: any) {
                             <li className='nav-item mx-3'>
                                 <Nav.Link as={NavLink} to='/about'>Про нас</Nav.Link>
                             </li>
-                            <li>
-                                <button onClick={auth.signIn}>login</button>
-                            </li>
                         </Nav>
                     </Navbar.Collapse>
                 </Navbar>
             </header>
             <main>
-                {props.children}
+                {children}
             </main>
             <footer className='mt-auto'>
                 <div className='container'>
@@ -43,12 +50,14 @@ function Layout(props: any) {
                             <br />
                             тел: <a href='tel:+380959242349'>+3 8095 9242349</a>
                         </div>
-                        <div className='col-md-8'></div>
+                        <div className='col-md-8 text-right'>
+                            <button onClick={handleLogin} className='btn btn-link'>{authStore.user ? 'log out' : 'log in'}</button>
+                        </div>
                     </div>
                 </div>
             </footer>
         </>
     );
-}
+})
 
 export default Layout;

SafeCity/ClientApp/src/services/usersService.ts

@@ -0,0 +1,11 @@
+import { get } from './crud';
+
+const baseUrl = '/api/v1/auth';
+
+async function getMe(): Promise<any> {
+    return await get(`${baseUrl}`);
+};
+
+export default {
+    getMe: getMe,
+}