store auth token in local storage, improve admin page

.prettierrc.yaml

@@ -1,4 +1,4 @@
 trailingComma: "es5"
 tabWidth: 4
-semi: false
+semi: true
 singleQuote: true

src/components/Admin.js

@@ -1,61 +1,123 @@
-import React, { useState, useEffect, useContext } from 'react'
-import { withAuthorization } from './Session'
-import * as ROLES from '../constants/roles'
-import { FirebaseContext } from '../firebase'
+import React, { useState, useEffect, useContext } from 'react';
+import { Switch, Route, Link } from 'react-router-dom';
+import { withAuthorization } from './Session';
+import * as ROLES from '../constants/roles';
+import * as ROUTES from '../constants/routes';
+import { FirebaseContext } from '../firebase';
 
 function AdminPage() {
-    const [loading, setLoading] = useState(false)
-    const [users, setUsers] = useState([])
-    const firebase = useContext(FirebaseContext)
+    return (
+        <div>
+            <h1>Admin</h1>
+            <p>The Admin Page is accessible by every signed in admin user.</p>
+
+            <Switch>
+                <Route exact path={ROUTES.ADMIN_DETAILS} component={UserItem} />
+                <Route exact path={ROUTES.ADMIN} component={UserList} />
+            </Switch>
+
+            {/*  */}
+
+            {/* <UserList users={users} /> */}
+        </div>
+    );
+}
+
+const UserItem = (props) => {
+    console.log();
+    const [loading, setLoading] = useState(false);
+    const [user, setUser] = useState({...props.location.state.user});
+    const firebase = useContext(FirebaseContext);
 
     useEffect(() => {
-        setLoading(true)
+        if(user) return;
+
+        setLoading(false);
+
+        firebase.user(props.match.params.id).on('value', snapshot => {
+            setUser(snapshot.val());
+            setLoading(false);
+        });
+
+        return () => firebase.user(props.match.params.id).off();
+    }, []);
+
+    return (
+        <div>
+            <h2>User ({props.match.params.id})</h2>
+            {loading && <div>Loading ...</div>}
+
+            {user && (
+                <div>
+                    <span>
+                        <strong>ID:</strong> {user.uid}
+                    </span>
+                    <span>
+                        <strong>E-Mail:</strong> {user.email}
+                    </span>
+                    <span>
+                        <strong>Username:</strong> {user.username}
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+};
+
+function UserList() {
+    const [loading, setLoading] = useState(false);
+    const [users, setUsers] = useState([]);
+    const firebase = useContext(FirebaseContext);
+
+    useEffect(() => {
+        setLoading(true);
 
         firebase.users().on('value', snapshot => {
-            const usersObject = snapshot.val()
+            const usersObject = snapshot.val();
 
             const usersList = Object.keys(usersObject).map(key => ({
                 ...usersObject[key],
                 uid: key,
-            }))
+            }));
 
-            setUsers(usersList)
-            setLoading(false)
-        })
+            setUsers(usersList);
+            setLoading(false);
+        });
 
-        return () => firebase.users().off()
-    }, [])
+        return () => firebase.users().off();
+    }, []);
 
     return (
         <div>
-            <h1>Admin</h1>
-            <p>The Admin Page is accessible by every signed in admin user.</p>
-
+            <h2>Users</h2>
             {loading && <div>Loading...</div>}
-
-            <UserList users={users} />
+            <ul>
+                {users.map(user => (
+                    <li key={user.uid}>
+                        <span>
+                            <strong>ID:</strong> {user.uid}
+                        </span>
+                        <span>
+                            <strong>E-Mail:</strong> {user.email}
+                        </span>
+                        <span>
+                            <strong>Username:</strong> {user.username}
+                        </span>
+                        <span>
+                            <Link to={{
+                                pathname: `${ROUTES.ADMIN}/${user.uid}`,
+                                state: { user }
+                            }}>
+                                Details
+                            </Link>
+                        </span>
+                    </li>
+                ))}
+            </ul>
         </div>
-    )
+    );
 }
 
-const UserList = ({ users }) => (
-    <ul>
-        {users.map(user => (
-            <li key={user.uid}>
-                <span>
-                    <strong>ID:</strong> {user.uid}
-                </span>
-                <span>
-                    <strong>E-Mail:</strong> {user.email}
-                </span>
-                <span>
-                    <strong>Username:</strong> {user.username}
-                </span>
-            </li>
-        ))}
-    </ul>
-)
-
-const condition = authUser => authUser && !!authUser.roles[ROLES.ADMIN]
-
-export default withAuthorization(condition)(AdminPage)
+const condition = authUser => authUser && !!authUser.roles[ROLES.ADMIN];
+
+export default withAuthorization(condition)(AdminPage);

src/components/Session/useAuthUser.js

@@ -2,15 +2,17 @@ import React, { useState, useEffect, useContext } from 'react';
 import { FirebaseContext } from '../../firebase';
 
 function useAuthUser() {
-    const [authUser, setAuthUser] = useState(null);
+    const [authUser, setAuthUser] = useState(JSON.parse(localStorage.getItem('authUser')));
     const firebase = useContext(FirebaseContext);
 
     useEffect(() => {
         const releaseAuthListener = firebase.onAuthUserListener(
             authUser => {
+                localStorage.setItem('authUser', JSON.stringify(authUser));
                 setAuthUser(authUser);
             },
             () => {
+                localStorage.removeItem('authUser');
                 setAuthUser(null);
             }
         )

src/constants/routes.js

@@ -4,4 +4,5 @@ export const SIGN_IN = '/signin';
 export const HOME = '/home';
 export const ACCOUNT = '/account';
 export const ADMIN = '/admin';
+export const ADMIN_DETAILS = '/admin/:id';
 export const PASSWORD_FORGET = '/pw-forget';