diff --git a/client/package.json b/client/package.json
index 53b892548..0ee8609c1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -40,7 +40,8 @@
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"styled-components": "^5.0.1",
- "subscriptions-transport-ws": "^0.9.16"
+ "subscriptions-transport-ws": "^0.9.16",
+ "twilio": "^3.39.5"
},
"scripts": {
"start": "react-scripts start",
diff --git a/client/src/components/chat-window/chat-window.component.jsx b/client/src/components/chat-window/chat-window.component.jsx
index fa5f3539d..53b5f790e 100644
--- a/client/src/components/chat-window/chat-window.component.jsx
+++ b/client/src/components/chat-window/chat-window.component.jsx
@@ -1,10 +1,53 @@
-import React from "react";
-
+import { Card } from "antd";
+import React, { useState, useEffect } from "react";
+import "./chat-window.styles.scss"; //https://bootsnipp.com/snippets/exR5v
+import twilio from "twilio";
+// const client = require("twilio")(
+// "ACf1b1aaf0e04740828b49b6e58467d787",
+// "0bea5e29a6d77593183ab1caa01d23de"
+// );
+const client = twilio(
+ "ACf1b1aaf0e04740828b49b6e58467d787",
+ "0bea5e29a6d77593183ab1caa01d23de"
+);
export default function ChatWindowComponent({ toggleChatVisible }) {
+ 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]);
+
+ console.log(conversations);
return (
-
- This is a chat
- window!
-
+
+
+
+
+
+ {conversations.map(item => (
+ -
+
{item.body}
+
+ ))}
+
+
+
toggleChatVisible()}>Chat
;
+ return (
+
+ {chatVisible ? (
+
+ ) : (
+
+
+ )}
+
+ );
});
diff --git a/client/src/components/chat-window/chat-window.styles.scss b/client/src/components/chat-window/chat-window.styles.scss
new file mode 100644
index 000000000..1b68074fb
--- /dev/null
+++ b/client/src/components/chat-window/chat-window.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;
+}
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 2393f5e51..094b5f448 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -16,67 +16,62 @@ export default ({
const { t } = useTranslation();
//TODO Add
return (
-
+
{logo ? (
- 
+
) : null}