Step 11.1: Distinguish messages

Urigo · Jul 28, 2019 · 420318c · 420318c
1 parent 6fae866
commit 420318c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/public/assets/message-other.png b/public/assets/message-other.png
diff --git a/src/components/ChatRoomScreen/MessagesList.tsx b/src/components/ChatRoomScreen/MessagesList.tsx
@@ -2,7 +2,7 @@ import moment from 'moment';
 import React from 'react';
 import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const Container = styled.div`
   display: block;
@@ -11,9 +11,11 @@ const Container = styled.div`
   padding: 0 15px;
 `;
 
+type StyledProp = {
+  isMine: any;
+};
+
 const MessageItem = styled.div`
-  float: right;
-  background-color: #dcf8c6;
   display: inline-block;
   position: relative;
   max-width: 100%;
@@ -30,17 +32,36 @@ const MessageItem = styled.div`
   }
 
   &::before {
-    background-image: url(/assets/message-mine.png);
     content: '';
     position: absolute;
     bottom: 3px;
     width: 12px;
     height: 19px;
-    right: -11px;
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
   }
+
+  ${(props: StyledProp) =>
+    props.isMine
+      ? css`
+          float: right;
+          background-color: #dcf8c6;
+
+          &::before {
+            right: -11px;
+            background-image: url(/assets/message-mine.png);
+          }
+        `
+      : css`
+          float: left;
+          background-color: #fff;
+
+          &::before {
+            left: -11px;
+            background-image: url(/assets/message-other.png);
+          }
+        `}
 `;
 
 const Contents = styled.div`
@@ -75,15 +96,17 @@ const MessagesList: React.FC<MessagesListProps> = ({ messages }) => {
 
   useEffect(() => {
     if (!selfRef.current) return;
-
     const selfDOMNode = ReactDOM.findDOMNode(selfRef.current) as HTMLElement;
     selfDOMNode.scrollTop = Number.MAX_SAFE_INTEGER;
   }, [messages.length]);
 
   return (
     <Container ref={selfRef}>
       {messages.map((message: any) => (
-        <MessageItem data-testid="message-item" key={message.id}>
+        <MessageItem
+          data-testid="message-item"
+          isMine={message.isMine}
+          key={message.id}>
           <Contents data-testid="message-content">{message.content}</Contents>
           <Timestamp data-testid="message-date">
             {moment(message.createdAt).format('HH:mm')}

diff --git a/src/components/ChatRoomScreen/index.tsx b/src/components/ChatRoomScreen/index.tsx
@@ -70,6 +70,7 @@ const [addMessage] = useAddMessageMutation();
               .toString(36)
               .substr(2, 9),
             createdAt: new Date(),
+            isMine: true,
             chat: {
               __typename: 'Chat',
               id: chatId,

diff --git a/src/components/ChatsListScreen/ChatsList.test.tsx b/src/components/ChatsListScreen/ChatsList.test.tsx
@@ -36,6 +36,7 @@ describe('ChatsList', () => {
                   id: 1,
                   content: 'Hello',
                   createdAt: new Date('1 Jan 2019 GMT'),
+                  isMine: true,
                   chat: {
                     __typename: 'Chat',
                     id: 1,
@@ -86,6 +87,7 @@ describe('ChatsList', () => {
                   id: 1,
                   content: 'Hello',
                   createdAt: new Date('1 Jan 2019 GMT'),
+                  isMine: true,
                   chat: {
                     __typename: 'Chat',
                     id: 1,

diff --git a/src/graphql/fragments/message.fragment.ts b/src/graphql/fragments/message.fragment.ts
@@ -5,6 +5,7 @@ export default gql`
     id
     createdAt
     content
+    isMine
     chat {
       id
     }