20-Realtime Chat with React and Firebase Database

Author: rwieruch

src/components/Firebase/firebase.js

@@ -15,10 +15,18 @@ class Firebase {
   constructor() {
     app.initializeApp(config);
 
+    /* Helper */
+
+    this.serverValue = app.database.ServerValue;
     this.emailAuthProvider = app.auth.EmailAuthProvider;
+
+    /* Firebase APIs */
+
     this.auth = app.auth();
     this.db = app.database();
 
+    /* Social Sign In Method Provider */
+
     this.googleProvider = new app.auth.GoogleAuthProvider();
     this.facebookProvider = new app.auth.FacebookAuthProvider();
     this.twitterProvider = new app.auth.TwitterAuthProvider();
@@ -89,6 +97,12 @@ class Firebase {
   user = uid => this.db.ref(`users/${uid}`);
 
   users = () => this.db.ref('users');
+
+  // *** Message API ***
+
+  message = uid => this.db.ref(`messages/${uid}`);
+
+  messages = () => this.db.ref('messages');
 }
 
 export default Firebase;

src/components/Home/index.js

@@ -1,18 +1,271 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { compose } from 'recompose';
 
-import { withAuthorization, withEmailVerification } from '../Session';
+import {
+  AuthUserContext,
+  withAuthorization,
+  withEmailVerification,
+} from '../Session';
+import { withFirebase } from '../Firebase';
+
+class HomePage extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: false,
+      users: null,
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ loading: true });
+    this.props.firebase.users().on('value', snapshot => {
+      this.setState({
+        users: snapshot.val(),
+        loading: false,
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.firebase.users().off();
+  }
+
+  render() {
+    const { users, loading } = this.state;
+
+    return (
+      <div>
+        <h1>Home Page</h1>
+        <p>The Home Page is accessible by every signed in user.</p>
+
+        <Messages users={users} usersLoading={loading} />
+      </div>
+    );
+  }
+}
+
+class MessagesBase extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: '',
+      loading: false,
+      messages: [],
+      limit: 5,
+    };
+  }
+
+  componentDidMount() {
+    this.onListenForMessages();
+  }
+
+  onListenForMessages = () => {
+    this.setState({ loading: true });
+
+    this.props.firebase
+      .messages()
+      .orderByChild('createdAt')
+      .limitToLast(this.state.limit)
+      .on('value', snapshot => {
+        const messageObject = snapshot.val();
+
+        if (messageObject) {
+          const messageList = Object.keys(messageObject).map(key => ({
+            ...messageObject[key],
+            uid: key,
+          }));
+
+          this.setState({
+            messages: messageList,
+            loading: false,
+          });
+        } else {
+          this.setState({ messages: null, loading: false });
+        }
+      });
+  };
+
+  componentWillUnmount() {
+    this.props.firebase.messages().off();
+  }
+
+  onChangeText = event => {
+    this.setState({ text: event.target.value });
+  };
+
+  onCreateMessage = (event, authUser) => {
+    this.props.firebase.messages().push({
+      text: this.state.text,
+      userId: authUser.uid,
+      createdAt: this.props.firebase.serverValue.TIMESTAMP,
+    });
+
+    this.setState({ text: '' });
+
+    event.preventDefault();
+  };
 
-const HomePage = () => (
-  <div>
-    <h1>Home Page</h1>
-    <p>The Home Page is accessible by every signed in user.</p>
-  </div>
+  onEditMessage = (message, text) => {
+    this.props.firebase.message(message.uid).set({
+      ...message,
+      text,
+      editedAt: this.props.firebase.serverValue.TIMESTAMP,
+    });
+  };
+
+  onRemoveMessage = uid => {
+    this.props.firebase.message(uid).remove();
+  };
+
+  onNextPage = () => {
+    this.setState(
+      state => ({ limit: state.limit + 5 }),
+      this.onListenForMessages,
+    );
+  };
+
+  render() {
+    const { users, usersLoading } = this.props;
+    const { text, messages, loading } = this.state;
+
+    return (
+      <AuthUserContext.Consumer>
+        {authUser => (
+          <div>
+            {!loading && messages && (
+              <button type="button" onClick={this.onNextPage}>
+                More
+              </button>
+            )}
+
+            {loading && usersLoading && <div>Loading ...</div>}
+
+            {users && messages && (
+              <MessageList
+                messages={messages.map(message => ({
+                  ...message,
+                  user: users[message.userId],
+                }))}
+                onEditMessage={this.onEditMessage}
+                onRemoveMessage={this.onRemoveMessage}
+              />
+            )}
+
+            {!messages && <div>There are no messages ...</div>}
+
+            <form
+              onSubmit={event =>
+                this.onCreateMessage(event, authUser)
+              }
+            >
+              <input
+                type="text"
+                value={text}
+                onChange={this.onChangeText}
+              />
+              <button type="submit">Send</button>
+            </form>
+          </div>
+        )}
+      </AuthUserContext.Consumer>
+    );
+  }
+}
+
+const MessageList = ({
+  messages,
+  onEditMessage,
+  onRemoveMessage,
+}) => (
+  <ul>
+    {messages.map(message => (
+      <MessageItem
+        key={message.uid}
+        message={message}
+        onEditMessage={onEditMessage}
+        onRemoveMessage={onRemoveMessage}
+      />
+    ))}
+  </ul>
 );
 
+class MessageItem extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editMode: false,
+      editText: this.props.message.text,
+    };
+  }
+
+  onToggleEditMode = () => {
+    this.setState(state => ({
+      editMode: !state.editMode,
+      editText: this.props.message.text,
+    }));
+  };
+
+  onChangeEditText = event => {
+    this.setState({ editText: event.target.value });
+  };
+
+  onSaveEditText = () => {
+    this.props.onEditMessage(this.props.message, this.state.editText);
+
+    this.setState({ editMode: false });
+  };
+
+  render() {
+    const { message, onRemoveMessage } = this.props;
+    const { editMode, editText } = this.state;
+
+    return (
+      <li>
+        {editMode ? (
+          <input
+            type="text"
+            value={editText}
+            onChange={this.onChangeEditText}
+          />
+        ) : (
+          <span>
+            <strong>{message.user.username}</strong> {message.text}{' '}
+            {message.editedAt && <span>(Edited)</span>}
+          </span>
+        )}
+
+        {editMode ? (
+          <span>
+            <button onClick={this.onSaveEditText}>Save</button>
+            <button onClick={this.onToggleEditMode}>Reset</button>
+          </span>
+        ) : (
+          <button onClick={this.onToggleEditMode}>Edit</button>
+        )}
+
+        {!editMode && (
+          <button
+            type="button"
+            onClick={() => onRemoveMessage(message.uid)}
+          >
+            Delete
+          </button>
+        )}
+      </li>
+    );
+  }
+}
+
+const Messages = withFirebase(MessagesBase);
+
 const condition = authUser => !!authUser;
 
 export default compose(
+  withFirebase,
   withEmailVerification,
   withAuthorization(condition),
 )(HomePage);