Added image handling for messaging BOD-187

2020-07-15 10:47:12 -07:00
parent fc02824ff0
commit 7aec0c7055
13 changed files with 153 additions and 75 deletions
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
@@ -1,12 +1,12 @@
-import { Badge, List, Avatar } from "antd";
+import { Badge, List } from "antd";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
-import { createStructuredSelector } from "reselect";
-import "./chat-conversation-list.styles.scss";
-import { useTranslation } from "react-i18next";
 import PhoneFormatter from "../../utils/PhoneFormatter";
+import "./chat-conversation-list.styles.scss";

 const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
--- a/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
+++ b/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
@@ -1,10 +1,9 @@
+import { Space } from "antd";
 import React from "react";
-import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
-import { Typography, Space } from "antd";
+import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";

 export default function ChatConversationTitle({ conversation }) {
-  console.log("ChatConversationTitle -> conversation", conversation);
  return (
    <div>
      <Space>
@@ -18,7 +17,7 @@ export default function ChatConversationTitle({ conversation }) {
          )}
        </span>
      </Space>
-      <div className="imex-flex-row imex-flex-row__margin">
+      <div className='imex-flex-row imex-flex-row__margin'>
        <ChatConversationTitleTags
          jobConversations={
            (conversation && conversation.job_conversations) || []
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.container.jsx
@@ -1,5 +1,5 @@
 import { useMutation, useSubscription } from "@apollo/react-hooks";
-import React from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
@@ -20,6 +20,8 @@ export function ChatConversationContainer({ selectedConversation }) {
    }
  );

+  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
+
  const [markConversationRead] = useMutation(
    MARK_MESSAGES_AS_READ_BY_CONVERSATION,
    {
@@ -36,9 +38,15 @@ export function ChatConversationContainer({ selectedConversation }) {
      data.conversations_by_pk.messages_aggregate.aggregate.count) ||
    0;

-  const handleMarkConversationAsRead = () => {
-    if (unreadCount > 0 && !!selectedConversation) {
-      markConversationRead();
+  const handleMarkConversationAsRead = async () => {
+    if (
+      unreadCount > 0 &&
+      !!selectedConversation &&
+      !markingAsReadInProgress
+    ) {
+      setMarkingAsReadInProgress(true);
+      await markConversationRead();
+      setMarkingAsReadInProgress(false);
    }
  };

--- a/client/src/components/chat-messages-list/chat-message-list.component.jsx
+++ b/client/src/components/chat-messages-list/chat-message-list.component.jsx
@@ -8,21 +8,21 @@ import {
  List,
 } from "react-virtualized";
 import "./chat-message-list.styles.scss";
+import { urlencoded } from "body-parser";

 export default function ChatMessageListComponent({ messages }) {
  const virtualizedListRef = useRef(null);

  const _cache = new CellMeasurerCache({
    fixedWidth: true,
-    minHeight: 25,
-    defaultHeight: 50,
+    // minHeight: 50,
+    defaultHeight: 100,
  });

-  const scrollToBottom = () => {
-    console.log("Scrolling to", messages.length);
-    !!virtualizedListRef.current &&
-      virtualizedListRef.current.scrollToRow(messages.length - 1);
-
+  const scrollToBottom = (renderedrows) => {
+    //console.log("Scrolling to", messages.length);
+    // !!virtualizedListRef.current &&
+    //   virtualizedListRef.current.scrollToRow(messages.length);
    //TODO Outstanding isue on virtualization: https://github.com/bvaughn/react-virtualized/issues/1179
    //Scrolling does not work on this version of React.
  };
@@ -39,12 +39,11 @@ export default function ChatMessageListComponent({ messages }) {
            style={style}
            className={`${
              messages[index].isoutbound ? "mine messages" : "yours messages"
-            }`}
-          >
-            <div className="message msgmargin">
-              <span>{messages[index].text}</span>
+            }`}>
+            <div className='message msgmargin'>
+              {MessageRender(messages[index])}
+              {StatusRender(messages[index].status)}
            </div>
-            {StatusRender(messages[index].status)}
          </div>
        )}
      </CellMeasurer>
@@ -52,7 +51,7 @@ export default function ChatMessageListComponent({ messages }) {
  };

  return (
-    <div className="chat">
+    <div className='chat'>
      <AutoSizer>
        {({ height, width }) => (
          <List
@@ -62,6 +61,9 @@ export default function ChatMessageListComponent({ messages }) {
            rowHeight={_cache.rowHeight}
            rowRenderer={_rowRenderer}
            rowCount={messages.length}
+            overscanRowCount={10}
+            estimatedRowSize={150}
+            scrollToIndex={messages.length}
          />
        )}
      </AutoSizer>
@@ -69,12 +71,24 @@ export default function ChatMessageListComponent({ messages }) {
  );
 }

+const MessageRender = (message) => {
+  if (message.image) {
+    return (
+      <a href={message.image_path} target='__blank'>
+        <img className='message-img' src={message.image_path} />
+      </a>
+    );
+  } else {
+    return <span>{message.text}</span>;
+  }
+};
+
 const StatusRender = (status) => {
  switch (status) {
    case "sent":
-      return <Icon component={FaCheck} className="message-icon" />;
+      return <Icon component={FaCheck} className='message-icon' />;
    case "delivered":
-      return <Icon component={FaCheckDouble} className="message-icon" />;
+      return <Icon component={FaCheckDouble} className='message-icon' />;
    default:
      return null;
  }
--- a/client/src/components/chat-messages-list/chat-message-list.styles.scss
+++ b/client/src/components/chat-messages-list/chat-message-list.styles.scss
@@ -1,8 +1,10 @@
 .message-icon {
-  position: absolute;
-  bottom: 0rem;
-  color: seagreen;
-  border: black;
+  //position: absolute;
+  // bottom: 0rem;
+  color: whitesmoke;
+  border: #000000;
+  margin-left: 0.2rem;
+  margin-right: 0rem;
  // z-index: 5;
 }

@@ -12,7 +14,7 @@
  //border: solid 1px #eee;
  display: flex;
  flex-direction: column;
-  //padding: 10px;
+  margin: 0.8rem 0rem;
 }

 .messages {
@@ -26,7 +28,13 @@
  padding: 0.25rem 0.8rem;
  //margin-top: 5px;
  // margin-bottom: 5px;
-  display: inline-block;
+  //display: inline-block;
+
+  .message-img {
+    max-width: 33%;
+    object-fit: contain;
+  }
+
 }

 .yours {
@@ -34,10 +42,11 @@
 }
 .msgmargin {
  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
 }

 .yours .message {
-  margin-right: 25%;
+  margin-right: 20%;
  background-color: #eee;
  position: relative;
 }
--- a/client/src/components/chat-popup/chat-popup.styles.scss
+++ b/client/src/components/chat-popup/chat-popup.styles.scss
@@ -1,6 +1,6 @@
 .chat-popup {
-  width: 40vw;
-  height: 50vh;
+  width: 90vw;
+  height: 95vh;
  display: flex;
  flex-direction: column;
 }
@@ -9,3 +9,12 @@
  //height: 50vh;
  flex: 1;
 }
+
+@media only screen and (min-width: 992px) {
+  .chat-popup {
+    width: 60vw;
+    height: 55vh;
+    display: flex;
+    flex-direction: column;
+  }
+}
--- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx
+++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
@@ -7,12 +7,13 @@ import { useTranslation } from "react-i18next";
 import { MdClose } from "react-icons/md";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
+import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import {
  selectBodyshop,
  selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
 import DashboardMonthlyRevenueGraph from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
 import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
 import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
@@ -23,6 +24,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 // /node_modules/react-resizable/css/styles.css
 import "./dashboard-grid.styles.css";
 import "./dashboard-grid.styles.scss";
+
 const ResponsiveReactGridLayout = WidthProvider(Responsive);

 const mapStateToProps = createStructuredSelector({
@@ -91,13 +93,15 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
        <Menu.Item
          key={key}
          value={key}
-          disabled={existingLayoutKeys.includes(key)}
-        >
+          disabled={existingLayoutKeys.includes(key)}>
          {componentList[key].label}
        </Menu.Item>
      ))}
    </Menu>
  );
+  console.log("Dashboard Data:", data);
+
+  if (error) return <AlertComponent message={error.message} type='error' />;

  return (
    <div>
@@ -105,13 +109,12 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
        <Button>{t("dashboard.actions.addcomponent")}</Button>
      </Dropdown>
      <ResponsiveReactGridLayout
-        className="layout"
+        className='layout'
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        width="100%"
+        width='100%'
        onLayoutChange={handleLayoutChange}
-        onBreakpointChange={onBreakpointChange}
-      >
+        onBreakpointChange={onBreakpointChange}>
        {state.layout.map((item, index) => {
          const TheComponent = componentList[item.i].component;
          return (
@@ -130,8 +133,8 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
                  onClick={() => handleRemoveComponent(item.i)}
                />
                <TheComponent
-                  className="dashboard-card"
-                  size="small"
+                  className='dashboard-card'
+                  size='small'
                  style={{ height: "100%", width: "100%" }}
                />
              </LoadingSkeleton>