13-Manage Users with Firebase's Realtime Database in React

Author: rwieruch

src/components/Admin/index.js

@@ -1,9 +1,70 @@
-import React from 'react';
+import React, { Component } from 'react';
 
-const Admin = () => (
-  <div>
-    <h1>Admin</h1>
-  </div>
+import { withFirebase } from '../Firebase';
+
+class AdminPage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: false,
+      users: [],
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ loading: true });
+
+    this.props.firebase.users().on('value', snapshot => {
+      const usersObject = snapshot.val();
+
+      const usersList = Object.keys(usersObject).map(key => ({
+        ...usersObject[key],
+        uid: key,
+      }));
+
+      this.setState({
+        users: usersList,
+        loading: false,
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.firebase.users().off();
+  }
+
+  render() {
+    const { users, loading } = this.state;
+
+    return (
+      <div>
+        <h1>Admin</h1>
+
+        {loading && <div>Loading ...</div>}
+
+        <UserList users={users} />
+      </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>
 );
 
-export default Admin;
+export default withFirebase(AdminPage);

src/components/Navigation/index.js

@@ -27,6 +27,9 @@ const NavigationAuth = () => (
     <li>
       <Link to={ROUTES.ACCOUNT}>Account</Link>
     </li>
+    <li>
+      <Link to={ROUTES.ADMIN}>Admin</Link>
+    </li>
     <li>
       <SignOutButton />
     </li>

src/components/SignUp/index.js

@@ -32,8 +32,20 @@ class SignUpFormBase extends Component {
     this.props.firebase
       .doCreateUserWithEmailAndPassword(email, passwordOne)
       .then(authUser => {
-        this.setState({ ...INITIAL_STATE });
-        this.props.history.push(ROUTES.HOME);
+        // Create a user in your Firebase realtime database
+        this.props.firebase
+          .user(authUser.user.uid)
+          .set({
+            username,
+            email,
+          })
+          .then(() => {
+            this.setState({ ...INITIAL_STATE });
+            this.props.history.push(ROUTES.HOME);
+          })
+          .catch(error => {
+            this.setState({ error });
+          });
       })
       .catch(error => {
         this.setState({ error });