From 2a895f96fcd3365390baff147ee222d143cd3e53 Mon Sep 17 00:00:00 2001
From: Robin Wieruch <wrobin@gmx.net>
Date: Wed, 6 Feb 2019 12:45:58 +0800
Subject: [PATCH 1/3] fix role to object instead of array

---
 src/components/Admin/index.js       | 2 +-
 src/components/Firebase/firebase.js | 2 +-
 src/components/Navigation/index.js  | 2 +-
 src/components/SignIn/index.js      | 6 +++---
 src/components/SignUp/index.js      | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Admin/index.js b/src/components/Admin/index.js
index cd0c7b63..1038e5e7 100644
--- a/src/components/Admin/index.js
+++ b/src/components/Admin/index.js
@@ -20,7 +20,7 @@ const AdminPage = () => (
 );
 
 const condition = authUser =>
-  authUser && authUser.roles.includes(ROLES.ADMIN);
+  authUser && !!authUser.roles[ROLES.ADMIN];
 
 export default compose(
   withEmailVerification,
diff --git a/src/components/Firebase/firebase.js b/src/components/Firebase/firebase.js
index b791945d..719e6dcd 100644
--- a/src/components/Firebase/firebase.js
+++ b/src/components/Firebase/firebase.js
@@ -73,7 +73,7 @@ class Firebase {
 
             // default empty roles
             if (!dbUser.roles) {
-              dbUser.roles = [];
+              dbUser.roles = {};
             }
 
             // merge auth and db user
diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js
index 156e27ae..ba3571ea 100644
--- a/src/components/Navigation/index.js
+++ b/src/components/Navigation/index.js
@@ -29,7 +29,7 @@ const NavigationAuth = ({ authUser }) => (
     <li>
       <Link to={ROUTES.ACCOUNT}>Account</Link>
     </li>
-    {authUser.roles.includes(ROLES.ADMIN) && (
+    {!!authUser.roles[ROLES.ADMIN] && (
       <li>
         <Link to={ROUTES.ADMIN}>Admin</Link>
       </li>
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
index 91e3f562..d32937c1 100644
--- a/src/components/SignIn/index.js
+++ b/src/components/SignIn/index.js
@@ -108,7 +108,7 @@ class SignInGoogleBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.user.displayName,
           email: socialAuthUser.user.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
@@ -154,7 +154,7 @@ class SignInFacebookBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
@@ -200,7 +200,7 @@ class SignInTwitterBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
diff --git a/src/components/SignUp/index.js b/src/components/SignUp/index.js
index f25d5804..a319cac2 100644
--- a/src/components/SignUp/index.js
+++ b/src/components/SignUp/index.js
@@ -41,10 +41,10 @@ class SignUpFormBase extends Component {
 
   onSubmit = event => {
     const { username, email, passwordOne, isAdmin } = this.state;
-    const roles = [];
+    const roles = {};
 
     if (isAdmin) {
-      roles.push(ROLES.ADMIN);
+      roles[ROLES.ADMIN] = ROLES.ADMIN;
     }
 
     this.props.firebase

From 52d24d09a76f717c54642a6c547c4856c0799865 Mon Sep 17 00:00:00 2001
From: Robin Wieruch <wrobin@gmx.net>
Date: Wed, 6 Feb 2019 13:01:34 +0800
Subject: [PATCH 2/3] remove: fetch across entities, because users cannot be
 fetched anymore

---
 src/components/Home/index.js           | 42 +++++---------------------
 src/components/Messages/MessageItem.js |  6 ++--
 src/components/Messages/Messages.js    | 12 +++-----
 3 files changed, 14 insertions(+), 46 deletions(-)

diff --git a/src/components/Home/index.js b/src/components/Home/index.js
index 0bec512b..75510b2e 100644
--- a/src/components/Home/index.js
+++ b/src/components/Home/index.js
@@ -1,47 +1,21 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { compose } from 'recompose';
 
 import { withAuthorization, withEmailVerification } from '../Session';
-import { withFirebase } from '../Firebase';
 import Messages from '../Messages';
 
-class HomePage extends Component {
-  constructor(props) {
-    super(props);
+const HomePage = () => (
+  <div>
+    <h1>Home Page</h1>
+    <p>The Home Page is accessible by every signed in user.</p>
 
-    this.state = {
-      users: null,
-    };
-  }
-
-  componentDidMount() {
-    this.props.firebase.users().on('value', snapshot => {
-      this.setState({
-        users: snapshot.val(),
-      });
-    });
-  }
-
-  componentWillUnmount() {
-    this.props.firebase.users().off();
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>Home Page</h1>
-        <p>The Home Page is accessible by every signed in user.</p>
-
-        <Messages users={this.state.users} />
-      </div>
-    );
-  }
-}
+    <Messages />
+  </div>
+);
 
 const condition = authUser => !!authUser;
 
 export default compose(
-  withFirebase,
   withEmailVerification,
   withAuthorization(condition),
 )(HomePage);
diff --git a/src/components/Messages/MessageItem.js b/src/components/Messages/MessageItem.js
index 78a9bb20..0935d469 100644
--- a/src/components/Messages/MessageItem.js
+++ b/src/components/Messages/MessageItem.js
@@ -41,10 +41,8 @@ class MessageItem extends Component {
           />
         ) : (
           <span>
-            <strong>
-              {message.user.username || message.user.userId}
-            </strong>{' '}
-            {message.text} {message.editedAt && <span>(Edited)</span>}
+            <strong>{message.userId}</strong> {message.text}
+            {message.editedAt && <span>(Edited)</span>}
           </span>
         )}
 
diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
index e6e70fd2..bfd76d45 100644
--- a/src/components/Messages/Messages.js
+++ b/src/components/Messages/Messages.js
@@ -67,8 +67,10 @@ class Messages extends Component {
   };
 
   onEditMessage = (message, text) => {
+    const { uid, ...messageSnapshot } = message;
+
     this.props.firebase.message(message.uid).set({
-      ...message,
+      ...messageSnapshot,
       text,
       editedAt: this.props.firebase.serverValue.TIMESTAMP,
     });
@@ -86,7 +88,6 @@ class Messages extends Component {
   };
 
   render() {
-    const { users } = this.props;
     const { text, messages, loading } = this.state;
 
     return (
@@ -103,12 +104,7 @@ class Messages extends Component {
 
             {messages && (
               <MessageList
-                messages={messages.map(message => ({
-                  ...message,
-                  user: users
-                    ? users[message.userId]
-                    : { userId: message.userId },
-                }))}
+                messages={messages}
                 onEditMessage={this.onEditMessage}
                 onRemoveMessage={this.onRemoveMessage}
               />

From 8cb594e957eb3571c11653e96e8f119518822f0c Mon Sep 17 00:00:00 2001
From: Robin Wieruch <wrobin@gmx.net>
Date: Wed, 6 Feb 2019 13:12:38 +0800
Subject: [PATCH 3/3] only allow owner of message to edit/delete

---
 src/components/Messages/MessageItem.js | 34 ++++++++++++++------------
 src/components/Messages/MessageList.js |  2 ++
 src/components/Messages/Messages.js    |  1 +
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/Messages/MessageItem.js b/src/components/Messages/MessageItem.js
index 0935d469..b92f9545 100644
--- a/src/components/Messages/MessageItem.js
+++ b/src/components/Messages/MessageItem.js
@@ -28,7 +28,7 @@ class MessageItem extends Component {
   };
 
   render() {
-    const { message, onRemoveMessage } = this.props;
+    const { authUser, message, onRemoveMessage } = this.props;
     const { editMode, editText } = this.state;
 
     return (
@@ -46,22 +46,26 @@ class MessageItem extends Component {
           </span>
         )}
 
-        {editMode ? (
+        {authUser.uid === message.userId && (
           <span>
-            <button onClick={this.onSaveEditText}>Save</button>
-            <button onClick={this.onToggleEditMode}>Reset</button>
-          </span>
-        ) : (
-          <button onClick={this.onToggleEditMode}>Edit</button>
-        )}
+            {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>
+            {!editMode && (
+              <button
+                type="button"
+                onClick={() => onRemoveMessage(message.uid)}
+              >
+                Delete
+              </button>
+            )}
+          </span>
         )}
       </li>
     );
diff --git a/src/components/Messages/MessageList.js b/src/components/Messages/MessageList.js
index 4e0c49ba..fb18585e 100644
--- a/src/components/Messages/MessageList.js
+++ b/src/components/Messages/MessageList.js
@@ -3,6 +3,7 @@ import React from 'react';
 import MessageItem from './MessageItem';
 
 const MessageList = ({
+  authUser,
   messages,
   onEditMessage,
   onRemoveMessage,
@@ -10,6 +11,7 @@ const MessageList = ({
   <ul>
     {messages.map(message => (
       <MessageItem
+        authUser={authUser}
         key={message.uid}
         message={message}
         onEditMessage={onEditMessage}
diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
index bfd76d45..29e52a3c 100644
--- a/src/components/Messages/Messages.js
+++ b/src/components/Messages/Messages.js
@@ -104,6 +104,7 @@ class Messages extends Component {
 
             {messages && (
               <MessageList
+                authUser={authUser}
                 messages={messages}
                 onEditMessage={this.onEditMessage}
                 onRemoveMessage={this.onRemoveMessage}