General formatting for messaging + reshaping of messaging components and their structure.

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

@@ -0,0 +1,77 @@
+import { Card } from "antd";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import twilio from "twilio";
+import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
+
+const client = twilio(
+  "ACf1b1aaf0e04740828b49b6e58467d787",
+  "0bea5e29a6d77593183ab1caa01d23de"
+);
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  toggleConversationVisible: conversationId =>
+    dispatch(toggleConversationVisible(conversationId))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatConversationComponent({
+  conversation,
+  toggleConversationVisible
+}) {
+  const [conversations, setConversations] = useState([]);
+
+  useEffect(() => {
+    client.messages.list({ limit: 20 }, (error, items) => {
+      setConversations(
+        items.reduce((acc, value) => {
+          acc.push({
+            sid: value.sid,
+            direction: value.direction,
+            body: value.body
+          });
+          return acc;
+        }, [])
+      );
+    });
+    return () => {};
+  }, [setConversations]);
+  return (
+    <div>
+      <Card
+        style={{
+          width: conversation.open ? "400px" : "125px",
+          margin: "0px 10px"
+        }}
+        size="small"
+        onClick={() => toggleConversationVisible(conversation.id)}
+      >
+        {conversation.open ? (
+          <div className="messages" style={{ height: "400px" }}>
+            <ul>
+              {conversations.map(item => (
+                <li
+                  key={item.sid}
+                  className={`${
+                    item.direction === "inbound" ? "replies" : "sent"
+                  }`}
+                >
+                  <p> {item.body}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+        )}
+      </Card>
+    </div>
+  );
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+import ChatConversationComponent from "./chat-conversation.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatConversationContainer({ conversation }) {
+  return <ChatConversationComponent conversation={conversation} />;
+});

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

@@ -0,0 +1,127 @@
+.messages {
+  height: auto;
+  min-height: calc(100% - 93px);
+  max-height: calc(100% - 93px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+@media screen and (max-width: 735px) {
+  .messages {
+    max-height: calc(100% - 105px);
+  }
+}
+.messages::-webkit-scrollbar {
+  width: 8px;
+  background: transparent;
+}
+.messages::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.messages ul li {
+  display: inline-block;
+  clear: both;
+  //float: left;
+  margin: 5px 15px 5px 15px;
+  width: calc(100% - 25px);
+  font-size: 0.9em;
+}
+.messages ul li:nth-last-child(1) {
+  margin-bottom: 20px;
+}
+.messages ul li.sent img {
+  margin: 6px 8px 0 0;
+}
+.messages ul li.sent p {
+  background: #435f7a;
+  color: #f5f5f5;
+}
+.messages ul li.replies img {
+  float: right;
+  margin: 6px 0 0 8px;
+}
+.messages ul li.replies p {
+  background: #f5f5f5;
+  float: right;
+}
+.messages ul li img {
+  width: 22px;
+  border-radius: 50%;
+  float: left;
+}
+.messages ul li p {
+  display: inline-block;
+  padding: 10px 15px;
+  border-radius: 20px;
+  max-width: 205px;
+  line-height: 130%;
+}
+@media screen and (min-width: 735px) {
+  .messages ul li p {
+    max-width: 300px;
+  }
+}
+.message-input {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 99;
+}
+.message-input .wrap {
+  position: relative;
+}
+.message-input .wrap input {
+  font-family: "proxima-nova", "Source Sans Pro", sans-serif;
+  float: left;
+  border: none;
+  width: calc(100% - 90px);
+  padding: 11px 32px 10px 8px;
+  font-size: 0.8em;
+  color: #32465a;
+}
+@media screen and (max-width: 735px) {
+  .message-input .wrap input {
+    padding: 15px 32px 16px 8px;
+  }
+}
+.message-input .wrap input:focus {
+  outline: none;
+}
+.message-input .wrap .attachment {
+  position: absolute;
+  right: 60px;
+  z-index: 4;
+  margin-top: 10px;
+  font-size: 1.1em;
+  color: #435f7a;
+  opacity: 0.5;
+  cursor: pointer;
+}
+@media screen and (max-width: 735px) {
+  .message-input .wrap .attachment {
+    margin-top: 17px;
+    right: 65px;
+  }
+}
+.message-input .wrap .attachment:hover {
+  opacity: 1;
+}
+.message-input .wrap button {
+  float: right;
+  border: none;
+  width: 50px;
+  padding: 12px 0;
+  cursor: pointer;
+  background: #32465a;
+  color: #f5f5f5;
+}
+@media screen and (max-width: 735px) {
+  .message-input .wrap button {
+    padding: 16px 0;
+  }
+}
+.message-input .wrap button:hover {
+  background: #435f7a;
+}
+.message-input .wrap button:focus {
+  outline: none;
+}