data fetching in home/admin pages

Author: rwieruch

src/components/Admin/index.js

@@ -11,36 +11,23 @@ class AdminPage extends Component {
 
     this.state = {
       loading: false,
-      error: false,
       users: [],
     };
   }
 
   componentDidMount() {
     this.setState({ loading: true });
 
-    this.props.firebase
-      .users()
-      .once('value')
-      .then(snapshot => {
-        const usersObject = snapshot.val();
-        const users = Object.keys(usersObject).map(key => ({
-          ...usersObject[key],
-          uid: key,
-        }));
-
-        this.setState(state => ({
-          users,
-          loading: false,
-        }));
-      })
-      .catch(error => {
-        this.setState({ error: true, loading: false });
-      });
+    this.props.firebase.users().on('value', snapshot => {
+      const usersObject = snapshot.val();
+      const users = Object.keys(usersObject).map(key => ({
+        ...usersObject[key],
+        uid: key,
+      }));
 
-    this.props.firebase.users().on('child_removed', snapshot => {
       this.setState(state => ({
-        users: state.users.filter(user => user.uid !== snapshot.key),
+        users,
+        loading: false,
       }));
     });
   }
@@ -50,7 +37,7 @@ class AdminPage extends Component {
   };
 
   render() {
-    const { users, loading, error } = this.state;
+    const { users, loading } = this.state;
 
     return (
       <div>
@@ -60,7 +47,6 @@ class AdminPage extends Component {
         </p>
 
         {loading && <div>Loading ...</div>}
-        {error && <div>Something went wrong ...</div>}
 
         <UserList users={users} onRemove={this.onRemove} />
       </div>

src/components/Home/index.js

@@ -22,46 +22,22 @@ class HomePage extends Component {
   componentDidMount() {
     this.setState({ userLoading: true, messageLoading: true });
 
-    this.props.firebase
-      .users()
-      .once('value')
-      .then(snapshot => {
-        this.setState(state => ({
-          users: snapshot.val(),
-          userLoading: false,
-        }));
-      })
-      .catch(error => {
-        this.setState({ error: true, userLoading: false });
-      });
+    this.props.firebase.users().on('value', snapshot => {
+      this.setState(state => ({
+        users: snapshot.val(),
+        userLoading: false,
+      }));
+    });
 
     this.props.firebase
       .messages()
       .orderByKey()
       .limitToLast(100)
-      .once('value')
-      .then(snapshot => {
+      .on('child_added', snapshot => {
         this.setState(state => ({
-          messages: Object.values(snapshot.val()),
+          messages: [snapshot.val(), ...state.messages],
           messageLoading: false,
         }));
-
-        // Listen for updates
-        this.props.firebase
-          .messages()
-          .orderByKey()
-          .limitToLast(100)
-          .on('child_added', snapshot => {
-            this.setState(state => ({
-              messages: [snapshot.val(), ...state.messages],
-            }));
-          });
-      })
-      .catch(error => {
-        this.setState({
-          error: true,
-          messageLoading: false,
-        });
       });
   }