useState and conditional rendering

src/AuthorizePage.tsx

@@ -1,8 +1,19 @@
 import React from 'react';
+import { useStore } from 'react-stores';
+import { store } from './store';
 
-export const AuthorizePage = () => (
-  <div>
-    <h1>Authorize</h1>
-    <button>Press to login</button>
-  </div>
-);
+export const AuthorizePage: React.FC = () => {
+  const authStoreState = useStore(store);
+
+  return authStoreState.authorized ? (
+    <div>
+      <h1>Authorized</h1>
+      <button>Press to exit</button>
+    </div>
+  ) : (
+    <div>
+      <h1>Unauthorized</h1>
+      <button>Press to login</button>
+    </div>
+  );
+};

src/Nav.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { store } from './store';
+import { useStore } from 'react-stores';
 
 export const Nav: React.FC = () => {
+  const authStoreState = useStore(store);
+
   return (
     <header>
       <ul>
@@ -24,7 +28,7 @@ export const Nav: React.FC = () => {
       <ul>
         <li>
           <NavLink exact activeClassName='active' to='/authorize'>
-            Authorize
+            {authStoreState.authorized ? 'Authorized' : 'Login'}
           </NavLink>
         </li>
       </ul>

src/store.ts

@@ -1,9 +1,9 @@
-import { Store } from "react-stores";
+import { Store } from 'react-stores';
 
 interface IStoreState {
   authorized: boolean;
 }
 
 export const store = new Store<IStoreState>({
-  authorized: false
+  authorized: true,
 });