BOD-14 WIP. CSS issues present with 2 way texting, but working live.

client/src/App/App.container.jsx

@@ -29,7 +29,6 @@ export default class AppContainer extends Component {
         connectionParams: async () => {
           //const token = localStorage.getItem("token");
           const token = await auth.currentUser.getIdToken(true);
-          console.log("token", token);
           if (token) {
             return {
               headers: {
@@ -42,7 +41,6 @@ export default class AppContainer extends Component {
     });
     const subscriptionMiddleware = {
       applyMiddleware: async (options, next) => {
-        console.log("SubMiddleware");
         options.authToken = await auth.currentUser.getIdToken(true);
         next();
       }

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -24,7 +24,7 @@ export function ChatConversationListComponent({
   console.log("conversationList", conversationList);
 
   return (
-    <div>
+    <div className='chat-overlay-open'>
       <Row>
         <Col span={12}>Title</Col>
         <Col span={2} offset={10}>

client/src/components/chat-conversation/chat-conversation.closed.component.jsx

@@ -21,12 +21,13 @@ function ChatConversationClosedComponent({
   closeConversation
 }) {
   return (
-    <div style={{ display: "flex" }}>
+    <div className='chat-overlay-closed'>
       <div onClick={() => toggleConversationVisible(conversation.phone_num)}>
         <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
       </div>
       <Button
         type='dashed'
+        style={{ alignSelf: "right" }}
         shape='circle-outline'
         onClick={() => closeConversation(conversation.phone_num)}>
         X

client/src/components/chat-conversation/chat-conversation.component.jsx

@@ -1,60 +1,17 @@
-import { Button, Card, Badge } from "antd";
+import { Badge, Card } from "antd";
 import React from "react";
-import { connect } from "react-redux";
+import ChatConversationClosedComponent from "./chat-conversation.closed.component";
-import { createStructuredSelector } from "reselect";
-import {
-  closeConversation,
-  sendMessage,
-  toggleConversationVisible
-} from "../../redux/messaging/messaging.actions";
-import PhoneFormatter from "../../utils/PhoneFormatter";
 import ChatConversationOpenComponent from "./chat-conversation.open.component";
 import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
-import ChatConversationClosedComponent from "./chat-conversation.closed.component";
 
-const mapStateToProps = createStructuredSelector({
+export default function ChatConversationComponent({
-  //currentUser: selectCurrentUser
-});
-const mapDispatchToProps = dispatch => ({
-  toggleConversationVisible: conversationId =>
-    dispatch(toggleConversationVisible(conversationId)),
-  closeConversation: phone => dispatch(closeConversation(phone)),
-  sendMessage: message => dispatch(sendMessage(message))
-});
-
-export function ChatConversationComponent({
   conversation,
-  toggleConversationVisible,
-  closeConversation,
   messages,
   subState
 }) {
   return (
     <Badge count={messages.length}>
-      <Card
+      <Card className='chat-overlay' size='small'>
-        title={
-          conversation.open ? (
-            <div style={{ display: "flex" }}>
-              <div
-                onClick={() =>
-                  toggleConversationVisible(conversation.phone_num)
-                }>
-                <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
-              </div>
-              <Button
-                type='danger'
-                shape='circle-outline'
-                onClick={() => closeConversation(conversation.phone_num)}>
-                X
-              </Button>
-            </div>
-          ) : null
-        }
-        style={{
-          width: conversation.open ? "400px" : "175px",
-          margin: "0px 10px"
-        }}
-        size='small'>
         {conversation.open ? (
           <ChatConversationOpenComponent
             messages={messages}
@@ -68,8 +25,3 @@ export function ChatConversationComponent({
     </Badge>
   );
 }
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ChatConversationComponent);

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -13,7 +13,6 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export function ChatConversationContainer({ conversation }) {
-  console.log("conversation", conversation);
   const { loading, error, data } = useSubscription(MESSAGES_SUBSCRIPTION, {
     variables: { conversationId: conversation.id }
   });

client/src/components/chat-conversation/chat-conversation.open.component.jsx

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import AlertComponent from "../alert/alert.component";
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { CheckOutlined, CheckCircleOutlined } from "@ant-design/icons";
 
 export default function ChatConversationOpenComponent({
   conversation,
@@ -9,24 +10,47 @@ export default function ChatConversationOpenComponent({
   subState
 }) {
   const [loading, error] = subState;
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    console.log("use");
+    !!messagesEndRef.current &&
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(scrollToBottom, [messages]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type='error' />;
 
+  const StatusRender = status => {
+    switch (status) {
+      case "sent":
+        return <CheckOutlined style={{ margin: "2px", float: "right" }} />;
+      case "delivered":
+        return (
+          <CheckCircleOutlined style={{ margin: "2px", float: "right" }} />
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
-    <div>
+    <div className='chat-overlay-open'>
-      <div className='messages' style={{ height: "400px" }}>
+      <div className='messages'>
         <ul>
           {messages.map(item => (
             <li
               key={item.id}
               className={`${item.isoutbound ? "replies" : "sent"}`}>
-              <div>
+              <p>
-                <p>
+                {item.text}
-                  {item.text} <br /> <i>{item.status}</i>
+                {StatusRender(item.status)}
-                </p>
+              </p>
-              </div>
             </li>
           ))}
+          <li ref={messagesEndRef} />
         </ul>
       </div>
       <ChatSendMessage conversation={conversation} />

client/src/components/chat-conversation/chat-conversation.styles.scss

@@ -1,6 +1,77 @@
+.chat-overlay-wrapper {
+  width: 95vw;
+}
+.chat-overlay-scroller {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  vertical-align: bottom;
+}
+.chat-overlay {
+  margin: 0px 12px;
+  display: inline-block;
+}
+.chat-overlay-open {
+  width: 400px;
+  height: 33vh;
+  display: flex;
+  flex-flow: column;
+}
+.chat-overlay-closed {
+  display: flex;
+  justify-content: space-between;
+  vertical-align: middle;
+  width: 150px;
+  cursor: pointer;
+}
+
+// .chat-messages {
+//   height: 80%;
+//   overflow-x: hidden;
+//   overflow-y: scroll;
+//   flex-grow: 1;
+
+//   ul {
+//     list-style: none;
+//     margin: 0;
+//     padding: 0;
+//   }
+
+//   ul li {
+//     display: inline-block;
+//     clear: both;
+//     padding: 3px 10px;
+//     border-radius: 30px;
+//     margin-bottom: 2px;
+//   }
+
+//   .inbound {
+//     background: #eee;
+//     float: left;
+//   }
+
+//   .outbound {
+//     float: right;
+//     background: #0084ff;
+//     color: #fff;
+//   }
+
+//   .inbound + .outbound {
+//     border-bottom-right-radius: 5px;
+//   }
+
+//   .outbound + .outbound {
+//     border-top-right-radius: 5px;
+//     border-bottom-right-radius: 5px;
+//   }
+
+//   .outbound:last-of-type {
+//     border-bottom-right-radius: 30px;
+//   }
+// }
+
 .messages {
   height: auto;
-  min-height: calc(100% - 93px);
+  min-height: calc(100% - 10px);
   max-height: calc(100% - 93px);
   overflow-y: scroll;
   overflow-x: hidden;
@@ -21,7 +92,7 @@
   display: inline-block;
   clear: both;
   //float: left;
-  margin: 5px 15px 5px 15px;
+  margin: 5px;
   width: calc(100% - 25px);
   font-size: 0.9em;
 }

client/src/components/chat-overlay/chat-overlay.component.jsx

@@ -1,5 +1,5 @@
-import { Badge, Card } from "antd";
 import { MessageFilled } from "@ant-design/icons";
+import { Card } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ChatConversationListContainer from "../chat-conversation-list/chat-conversation-list.container";
@@ -10,30 +10,21 @@ export default function ChatWindowComponent({
 }) {
   const { t } = useTranslation();
   return (
-    <div>
+    <Card
-      <Badge count={5}>
+      className="chat-overlay"
-        <Card
+      size='small'>
-          style={{
+      {chatVisible ? (
-            width: chatVisible ? "300px" : "125px",
+     
-            margin: "0px 10px"
+          <ChatConversationListContainer />
-          }}
+   
-          size='small'>
+      ) : (
-          {chatVisible ? (
+        <div className="chat-overlay-closed" onClick={() => toggleChatVisible()}>
-            <div className='messages' style={{ height: "400px" }}>
+          <MessageFilled />
-              <ChatConversationListContainer />
+          <strong style={{ paddingLeft: "10px" }}>
-            </div>
+            {t("messaging.labels.messaging")}
-          ) : (
+          </strong>
-            <div
+        </div>
-              style={{ cursor: "pointer" }}
+      )}
-              onClick={() => toggleChatVisible()}>
+    </Card>
-              <MessageFilled />
-              <strong style={{ paddingLeft: "10px" }}>
-                {t("messaging.labels.messaging")}
-              </strong>
-            </div>
-          )}
-        </Card>
-      </Badge>
-    </div>
   );
 }

client/src/components/chat-overlay/chat-overlay.container.jsx

@@ -26,21 +26,23 @@ export function ChatOverlayContainer({
 }) {
   return (
     <Affix offsetBottom={0}>
-      <div>
+      <div className={`chat-overlay-wrapper`}>
-        <Badge count={10}>
+        <div className={`chat-overlay-scroller`}>
-          <ChatOverlayComponent
+          <Badge count={10}>
-            chatVisible={chatVisible}
+            <ChatOverlayComponent
-            toggleChatVisible={toggleChatVisible}
+              chatVisible={chatVisible}
-          />
+              toggleChatVisible={toggleChatVisible}
-        </Badge>
+            />
-        {activeConversations
+          </Badge>
-          ? activeConversations.map(conversation => (
+          {activeConversations
-              <ChatConversationContainer
+            ? activeConversations.map(conversation => (
-                conversation={conversation}
+                <ChatConversationContainer
-                key={conversation.id}
+                  conversation={conversation}
-              />
+                  key={conversation.id}
-            ))
+                />
-          : null}
+              ))
+            : null}
+        </div>
       </div>
     </Affix>
   );

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -1,5 +1,6 @@
-import { Input } from "antd";
+import { Input, Spin } from "antd";
-import React, { useState } from "react";
+import { LoadingOutlined } from "@ant-design/icons";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -15,6 +16,12 @@ const mapDispatchToProps = dispatch => ({
 
 function ChatSendMessageComponent({ conversation, bodyshop, sendMessage }) {
   const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    if (conversation.isSending === false) {
+      setMessage("");
+    }
+  }, [conversation, setMessage]);
   const { t } = useTranslation();
 
   const handleEnter = () => {
@@ -24,22 +31,35 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage }) {
       messagingServiceSid: bodyshop.messagingservicesid,
       conversationid: conversation.id
     });
-    setMessage("");
   };
 
   return (
     <div style={{ display: "flex " }}>
       <Input.TextArea
         allowClear
+        autoFocus
+        suffix={<span>a</span>}
         autoSize={{ minRows: 1, maxRows: 4 }}
         value={message}
+        disabled={conversation.isSending}
         placeholder={t("messaging.labels.typeamessage")}
-        // enterButton={}
         onChange={e => setMessage(e.target.value)}
         onPressEnter={event => {
+          event.preventDefault();
           if (!!!event.shiftKey) handleEnter();
         }}
       />
+      <Spin
+        style={{ display: `${conversation.isSending ? "" : "none"}` }}
+        indicator={
+          <LoadingOutlined
+            style={{
+              fontSize: 24
+            }}
+            spin
+          />
+        }
+      />
     </div>
   );
 }

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -13,10 +13,11 @@ const Sdiv = styled.div`
   width: 80%;
   top: 10%;
   left: 10%;
- // background-color: #ffcc00;
+  // background-color: #ffcc00;
 `;
 
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
+
 export default function DashboardGridComponent() {
   const [state, setState] = useState({
     layout: [
@@ -38,19 +39,18 @@ export default function DashboardGridComponent() {
     console.log("breakpoint, cols", breakpoint, cols);
     // setState({ ...state, breakpoint: breakpoint, cols: cols });
   };
-
+  if (true) return null;
   return (
     <Sdiv>
       The Grid.
       <ResponsiveReactGridLayout
         {...defaultProps}
         onBreakpointChange={onBreakpointChange}
-        width="100%"
+        width='100%'
         onLayoutChange={layout => {
           console.log("layout", layout);
           setState({ ...state, layout });
-        }}
+        }}>
-      >
         {state.layout.map((item, index) => {
           return (
             <Card style={{ width: "100px" }} key={item.i} data-grid={item}>

client/src/graphql/messages.queries.js

@@ -2,7 +2,10 @@ import { gql } from "apollo-boost";
 
 export const MESSAGES_SUBSCRIPTION = gql`
   subscription MESSAGES_SUBSCRIPTION($conversationId: uuid!) {
-    messages(where: { conversationid: { _eq: $conversationId } }) {
+    messages(
+      where: { conversationid: { _eq: $conversationId } }
+      order_by: { created_at: asc }
+    ) {
       text
       created_at
       id

client/src/redux/messaging/messaging.actions.js

@@ -25,6 +25,11 @@ export const sendMessage = message => ({
   payload: message
 });
 
+export const sendMessageSuccess = message => ({
+  type: MessagingActionTypes.SEND_MESSAGE_SUCCESS,
+  payload: message
+});
+
 export const sendMessageFailure = error => ({
   type: MessagingActionTypes.SEND_MESSAGE_FAILURE,
   payload: error

client/src/redux/messaging/messaging.reducer.js

@@ -7,12 +7,16 @@ const INITIAL_STATE = {
     {
       phone_num: "6049992002",
       id: "519ba10d-6467-4fa5-9c22-59ae891edeb6",
-      open: false
+      open: false,
+      isSending: false,
+      sendingError: null
     },
     {
       phone_num: "6049992991",
       id: "ab57deba-eeb9-40db-b5ae-23f3ce8d7c7b",
-      open: false
+      open: false,
+      isSending: false,
+      sendingError: null
     }
   ],
   error: null
@@ -30,6 +34,31 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
         ...state,
         visible: true
       };
+    case MessagingActionTypes.SEND_MESSAGE:
+      return {
+        ...state,
+        conversations: state.conversations.map(c =>
+          c.id === action.payload.conversationid ? { ...c, isSending: true } : c
+        )
+      };
+    case MessagingActionTypes.SEND_MESSAGE_SUCCESS:
+      return {
+        ...state,
+        conversations: state.conversations.map(c =>
+          c.id === action.payload.conversationid
+            ? { ...c, isSending: false }
+            : c
+        )
+      };
+    case MessagingActionTypes.SEND_MESSAGE_FAILURE:
+      return {
+        ...state,
+        conversations: state.conversations.map(c =>
+          c.id === action.payload.conversationid
+            ? { ...c, isSending: false, sendingError: action.payload.error }
+            : c
+        )
+      };
     case MessagingActionTypes.OPEN_CONVERSATION:
       if (
         state.conversations.find(c => c.phone_num === action.payload.phone_num)
@@ -48,7 +77,9 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
             {
               phone_num: action.payload.phone_num,
               id: action.payload.id,
-              open: true
+              open: true,
+              isSending: false,
+              sendingError: null
             }
           ]
         };
@@ -66,8 +97,7 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
           c.phone_num === action.payload ? { ...c, open: !c.open } : c
         )
       };
-    case MessagingActionTypes.SEND_MESSAGE_FAILURE:
+
-      return { ...state, error: action.payload };
     default:
       return state;
   }

client/src/redux/messaging/messaging.sagas.js

@@ -1,20 +1,22 @@
 import { all, call, put, takeLatest } from "redux-saga/effects";
-import { sendMessageFailure } from "./messaging.actions";
+import { sendMessageFailure, sendMessageSuccess } from "./messaging.actions";
 import MessagingActionTypes from "./messaging.types";
 import axios from "axios";
+import { sendEmailFailure } from "../email/email.actions";
 
 export function* onSendMessage() {
   yield takeLatest(MessagingActionTypes.SEND_MESSAGE, sendMessage);
 }
 export function* sendMessage({ payload }) {
-  console.log("In the saga.");
   try {
-    console.log("Message Contents", payload);
+    const response = yield call(axios.post, "/sms/send", payload);
-    axios.post("/sms/send", payload).then(response => {
+    if (response.status === 200) {
-      console.log(JSON.stringify(response));
+      yield put(sendMessageSuccess(payload));
-    });
+    } else {
+      yield put(sendEmailFailure(response.data));
+    }
   } catch (error) {
-    console.log("Error in sendMessage saga.");
+    console.log("Error in sendMessage saga.", error);
     yield put(sendMessageFailure(error));
   }
 }

client/src/redux/messaging/messaging.types.js

@@ -5,6 +5,7 @@ const MessagingActionTypes = {
   CLOSE_CONVERSATION: "CLOSE_CONVERSATION",
   TOGGLE_CONVERSATION_VISIBLE: "TOGGLE_CONVERSATION_VISIBLE",
   SEND_MESSAGE: "SEND_MESSAGE",
+  SEND_MESSAGE_SUCCESS: "SEND_MESSAGE_SUCCESS",
   SEND_MESSAGE_FAILURE: "SEND_MESSAGE_FAILURE"
 };
 export default MessagingActionTypes;

client/src/redux/user/user.sagas.js

@@ -14,21 +14,9 @@ import {
 } from "./user.actions";
 import UserActionTypes from "./user.types";
 
-// export function* getSnapshotFromUserAuth(userAuth) {
-//   try {
-//     const userRef = yield call(createUserProfileDocument, userAuth);
-//     //const userSnapshot = yield userRef.get();
-//   } catch (error) {
-//     yield put(signInFailure(error));
-//   }
-// }
-
 export function* signInWithEmail({ payload: { email, password } }) {
   try {
     const { user } = yield auth.signInWithEmailAndPassword(email, password);
-    let token = yield user.getIdToken();
-   // localStorage.setItem("token", token);
-    //window.sessionStorage.setItem(`lastTokenRefreshTime`, new Date());
     yield put(
       signInSuccess({
         uid: user.uid,
@@ -54,10 +42,6 @@ export function* isUserAuthenticated() {
       yield put(unauthorizedUser());
       return;
     }
-    let token = yield user.getIdToken();
-    //localStorage.setItem("token", token);
-    //window.sessionStorage.setItem(`lastTokenRefreshTime`, new Date());
-
     yield put(
       signInSuccess({
         uid: user.uid,

server/sms/receive.js

@@ -5,8 +5,13 @@ const phone = require("phone");
 
 exports.receive = (req, res) => {
   //Perform request validation
-  if (!req.body || !req.body.MessagingServiceSid || !req.body.SmsMessageSid) {
+  if (
-    res.sendStatus(400);
+    !!!req.body ||
+    !!!req.body.MessagingServiceSid ||
+    !!!req.body.SmsMessageSid
+  ) {
+    res.status(400);
+    res.json({ success: false, error: "Malformed Request" });
   } else {
     client
       .request(queries.FIND_BODYSHOP_BY_MESSAGING_SERVICE_SID, {
@@ -43,17 +48,17 @@ exports.receive = (req, res) => {
           client
             .request(queries.INSERT_MESSAGE, { msg: newMessage })
             .then(r2 => {
-              res.sendStatus(200);
+              res.status(200).end();
             })
             .catch(e2 => {
               console.log("e2", e2);
-              res.json(e2);
+              res.status(500).json(e2);
             });
         }
       })
       .catch(e1 => {
         console.log("e1", e1);
-        res.json(e1);
+        res.status(500).json(e1);
       });
   }
 };

server/sms/send.js

@@ -10,15 +10,8 @@ const client = twilio(
 const gqlClient = require("../graphql-client/graphql-client").client;
 
 exports.send = (req, res) => {
-  console.log("Sending an SMS!");
   const { to, messagingServiceSid, body, conversationid } = req.body;
-  console.log(
+  console.log("[Sending Sms] " + conversationid + " | " + body);
-    "to, messagingServiceSid, body, conversationid",
-    to,
-    messagingServiceSid,
-    body,
-    conversationid
-  );
   if (!!to && !!messagingServiceSid && !!body && !!conversationid) {
     client.messages
       .create({
@@ -36,6 +29,7 @@ exports.send = (req, res) => {
         gqlClient
           .request(queries.INSERT_MESSAGE, { msg: newMessage })
           .then(r2 => {
+            console.log("Responding GQL Message ID", JSON.stringify(r2));
             res.sendStatus(200);
           })
           .catch(e2 => {
@@ -48,6 +42,8 @@ exports.send = (req, res) => {
         console.log("e1", e1);
       });
   } else {
-    res.json({ success: false, message: "Missing required parameter(s)." });
+    res
+      .status(400)
+      .json({ success: false, message: "Missing required parameter(s)." });
   }
 };