WIP for messaging chat.

2020-02-19 20:33:11 -08:00
parent b0a810bf17
commit eec5a806e9
6 changed files with 445 additions and 57 deletions
--- 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 (
-    <div style={{ height: "300px" }}>
-      <button onClick={() => toggleChatVisible()}>hide</button> This is a chat
-      window!
-    </div>
+    <Card style={{ width: "400px" }}>
+      <div>
+        <button onClick={() => toggleChatVisible()}>X</button>
+        <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>
+      </div>
+    </Card>
  );
 }
--- a/client/src/components/chat-window/chat-window.container.jsx
+++ b/client/src/components/chat-window/chat-window.container.jsx
@@ -1,3 +1,4 @@
+import { Affix, Button, Badge } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -17,8 +18,20 @@ export default connect(
  mapStateToProps,
  mapDispatchToProps
 )(function ChatWindowContainer({ chatVisible, toggleChatVisible }) {
-  if (chatVisible)
-    return <ChatWindowComponent toggleChatVisible={toggleChatVisible} />;
-
-  return <div onClick={() => toggleChatVisible()}>Chat</div>;
+  return (
+    <Affix offsetBottom={25}>
+      {chatVisible ? (
+        <ChatWindowComponent toggleChatVisible={toggleChatVisible} />
+      ) : (
+        <Badge count={5}>
+          <Button
+            type='primary'
+            shape='circle'
+            icon='message'
+            onClick={() => toggleChatVisible()}
+          />
+        </Badge>
+      )}
+    </Affix>
+  );
 });
--- a/client/src/components/chat-window/chat-window.styles.scss
+++ 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;
+}
--- 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 (
-    <Row type="flex" justify="space-around" align="middle">
+    <Row type='flex' justify='space-around' align='middle'>
      {logo ? (
        <Col span={4}>
-          <img alt="Shop Logo" src={logo} style={{ height: "40px" }} />
+          <img alt='Shop Logo' src={logo} style={{ height: "40px" }} />
        </Col>
      ) : null}
      <Col span={14}>
        <Menu
-          theme="dark"
-          className="header"
+          theme='dark'
+          className='header'
          selectedKeys={selectedNavItem}
-          mode="horizontal"
-          onClick={handleMenuClick}
-        >
-          <Menu.Item key="home">
-            <Link to="/manage">
-              <Icon type="home" />
+          mode='horizontal'
+          onClick={handleMenuClick}>
+          <Menu.Item key='home'>
+            <Link to='/manage'>
+              <Icon type='home' />
              {t("menus.header.home")}
            </Link>
          </Menu.Item>
          <Menu.SubMenu title={t("menus.header.jobs")}>
-            <Menu.Item key="schedule">
-              <Link to="/manage/schedule">
-                <Icon type="calendar" />
+            <Menu.Item key='schedule'>
+              <Link to='/manage/schedule'>
+                <Icon type='calendar' />
                {t("menus.header.schedule")}
              </Link>
            </Menu.Item>
-            <Menu.Item key="activejobs">
-              <Link to="/manage/jobs">
-                <Icon type="home" />
-                {t("menus.header.activejobs")}
-              </Link>
+            <Menu.Item key='activejobs'>
+              <Link to='/manage/jobs'>{t("menus.header.activejobs")}</Link>
            </Menu.Item>
-            <Menu.Item key="availablejobs">
-              <Link to="/manage/available">
-                <Icon type="home" />
+            <Menu.Item key='availablejobs'>
+              <Link to='/manage/available'>
                {t("menus.header.availablejobs")}
              </Link>
            </Menu.Item>
          </Menu.SubMenu>

          <Menu.SubMenu title={t("menus.header.customers")}>
-            <Menu.Item key="owners">
-              <Link to="/manage/owners">
-                <Icon type="team" />
+            <Menu.Item key='owners'>
+              <Link to='/manage/owners'>
+                <Icon type='team' />
                {t("menus.header.owners")}
              </Link>
            </Menu.Item>
-            <Menu.Item key="vehicles">
-              <Link to="/manage/vehicles">
-                <Icon type="car" />
+            <Menu.Item key='vehicles'>
+              <Link to='/manage/vehicles'>
+                <Icon type='car' />
                {t("menus.header.vehicles")}
              </Link>
            </Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu title={t("menus.header.shop")}>
-            <Menu.Item key="shop">
-              <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
+            <Menu.Item key='shop'>
+              <Link to='/manage/shop'>{t("menus.header.shop_config")}</Link>
            </Menu.Item>
-            <Menu.Item key="shop-vendors">
-              <Link to="/manage/shop/vendors">
+            <Menu.Item key='shop-vendors'>
+              <Link to='/manage/shop/vendors'>
                {t("menus.header.shop_vendors")}
              </Link>
            </Menu.Item>
@@ -86,36 +81,34 @@ export default ({
            title={
              <div>
                <Avatar
-                  size="medium"
-                  alt="Avatar"
+                  size='medium'
+                  alt='Avatar'
                  src={currentUser.photoURL ? currentUser.photoURL : UserImage}
                  style={{ margin: "10px" }}
                />
                {currentUser.displayName || t("general.labels.unknown")}
              </div>
-            }
-          >
+            }>
            <Menu.Item onClick={signOutStart()}>
              {t("user.actions.signout")}
            </Menu.Item>
            <Menu.Item>
-              <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
+              <Link to='/manage/profile'>{t("menus.currentuser.profile")}</Link>
            </Menu.Item>
            <Menu.SubMenu
              title={
                <span>
-                  <Icon type="global" />
+                  <Icon type='global' />
                  <span>{t("menus.currentuser.languageselector")}</span>
                </span>
-              }
-            >
-              <Menu.Item actiontype="lang-select" key="en_us">
+              }>
+              <Menu.Item actiontype='lang-select' key='en_us'>
                {t("general.languages.english")}
              </Menu.Item>
-              <Menu.Item actiontype="lang-select" key="fr">
+              <Menu.Item actiontype='lang-select' key='fr'>
                {t("general.languages.french")}
              </Menu.Item>
-              <Menu.Item actiontype="lang-select" key="es">
+              <Menu.Item actiontype='lang-select' key='es'>
                {t("general.languages.spanish")}
              </Menu.Item>
            </Menu.SubMenu>