Add authentication modal dialog and a stab at localstorage

src/App.tsx

@@ -1,15 +1,18 @@
-import './App.css';
+import "./App.css";
-//import MailboxList from './Mailbox';
+import 'bootstrap/dist/css/bootstrap.min.css';
-import React, { useEffect, useState } from 'react'
+
+//import MailboxList from "./Mailbox";
+import AuthModal from "./AuthModal";
+import React, { useEffect, useState } from "react"
 
 
-interface IUser {
+interface IAuth {
-  name: string;
+  password: string;
-  id: string;
+  username: string;
 }
 
 const App = () => {
-  const [users, setUsers] = useState<Array<IUser>>([])
+  const [state, setInternalState] = useState<IAuth|null>(null)
 
   const fetchUserData = () => {
     fetch("https://jsonplaceholder.typicode.com/users")
@@ -17,23 +20,30 @@ const App = () => {
         return response.json()
       })
       .then(data => {
-        setUsers(data)
+        //setUsers(data)
       })
   }
 
+  const loadAuth = () => {
+    const auth = localStorage.getItem("auth")
+    if (!auth) return;
+    setInternalState(JSON.parse(auth))
+  }
+
+  const setState = (auth: IAuth) => {
+    localStorage.setItem("auth", JSON.stringify(auth))
+  }
+
   useEffect(() => {
-    fetchUserData()
+    loadAuth()
+    //fetchUserData()
   }, [])
 
   return (
     <div className="App">
-      {users.length > 0 && (
+      {state ? 
-        <ul>
+        <p>{state.username}</p> :
-	  {users.map(user => (
+	<AuthModal></AuthModal>}
-	    <li key={user.id}>{user.name}</li>
-	    ))}
-       </ul>
-      )}
     </div>
   );
 }