Step 7.31: Update Messages Screen and createMessage with auth

srtucker22 · Aug 26, 2018 · 466f528 · 466f528
1 parent dc3ad36
commit 466f528
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/client/src/graphql/create-message.mutation.js b/client/src/graphql/create-message.mutation.js
@@ -3,8 +3,8 @@ import gql from 'graphql-tag';
 import MESSAGE_FRAGMENT from './message.fragment';
 
 const CREATE_MESSAGE_MUTATION = gql`
-  mutation createMessage($text: String!, $userId: Int!, $groupId: Int!) {
-    createMessage(text: $text, userId: $userId, groupId: $groupId) {
+  mutation createMessage($text: String!, $groupId: Int!) {
+    createMessage(text: $text, groupId: $groupId) {
       ... MessageFragment
     }
   }

diff --git a/client/src/screens/messages.screen.js b/client/src/screens/messages.screen.js
@@ -16,6 +16,7 @@ import update from 'immutability-helper';
 import { Buffer } from 'buffer';
 import _ from 'lodash';
 import moment from 'moment';
+import { connect } from 'react-redux';
 
 import { wsClient } from '../app';
 
@@ -171,7 +172,6 @@ class Messages extends Component {
   send(text) {
     this.props.createMessage({
       groupId: this.props.navigation.state.params.groupId,
-      userId: 1, // faking the user for now
       text,
     }).then(() => {
       this.flatList.scrollToIndex({ index: 0, animated: true });
@@ -186,7 +186,7 @@ class Messages extends Component {
     return (
       <Message
         color={this.state.usernameColors[message.from.username]}
-        isCurrentUser={message.from.id === 1} // for now until we implement auth
+        isCurrentUser={message.from.id === this.props.auth.id}
         message={message}
       />
     );
@@ -228,6 +228,10 @@ class Messages extends Component {
 }
 
 Messages.propTypes = {
+  auth: PropTypes.shape({
+    id: PropTypes.number,
+    username: PropTypes.string,
+  }),
   createMessage: PropTypes.func,
   navigation: PropTypes.shape({
     navigate: PropTypes.func,
@@ -296,10 +300,10 @@ const groupQuery = graphql(GROUP_QUERY, {
 });
 
 const createMessageMutation = graphql(CREATE_MESSAGE_MUTATION, {
-  props: ({ mutate }) => ({
-    createMessage: ({ text, userId, groupId }) =>
+  props: ({ ownProps, mutate }) => ({
+    createMessage: ({ text, groupId }) =>
       mutate({
-        variables: { text, userId, groupId },
+        variables: { text, groupId },
         optimisticResponse: {
           __typename: 'Mutation',
           createMessage: {
@@ -309,8 +313,8 @@ const createMessageMutation = graphql(CREATE_MESSAGE_MUTATION, {
             createdAt: new Date().toISOString(), // the time is now!
             from: {
               __typename: 'User',
-              id: 1, // still faking the user
-              username: 'Justyn.Kautzer', // still faking the user
+              id: ownProps.auth.id,
+              username: ownProps.auth.username,
             },
             to: {
               __typename: 'Group',
@@ -348,7 +352,7 @@ const createMessageMutation = graphql(CREATE_MESSAGE_MUTATION, {
           const userData = store.readQuery({
             query: USER_QUERY,
             variables: {
-              id: 1, // faking the user for now
+              id: ownProps.auth.id,
             },
           });
 
@@ -367,7 +371,7 @@ const createMessageMutation = graphql(CREATE_MESSAGE_MUTATION, {
             store.writeQuery({
               query: USER_QUERY,
               variables: {
-                id: 1, // faking the user for now
+                id: ownProps.auth.id,
               },
               data: userData,
             });
@@ -378,7 +382,12 @@ const createMessageMutation = graphql(CREATE_MESSAGE_MUTATION, {
   }),
 });
 
+const mapStateToProps = ({ auth }) => ({
+  auth,
+});
+
 export default compose(
+  connect(mapStateToProps),
   groupQuery,
   createMessageMutation,
 )(Messages);