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>
+  );
+});