- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,118 +1,113 @@
 import Icon from "@ant-design/icons";
-import { Tooltip } from "antd";
+import {Tooltip} from "antd";
 import i18n from "i18next";
-import moment from "moment";
-import React, { useEffect, useRef } from "react";
-import { MdDone, MdDoneAll } from "react-icons/md";
-import {
-  AutoSizer,
-  CellMeasurer,
-  CellMeasurerCache,
-  List,
-} from "react-virtualized";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
+import React, {useEffect, useRef} from "react";
+import {MdDone, MdDoneAll} from "react-icons/md";
+import {AutoSizer, CellMeasurer, CellMeasurerCache, List,} from "react-virtualized";
+import {DateTimeFormatter} from "../../utils/DateFormatter";
 import "./chat-message-list.styles.scss";
 
-export default function ChatMessageListComponent({ messages }) {
-  const virtualizedListRef = useRef(null);
+export default function ChatMessageListComponent({messages}) {
+    const virtualizedListRef = useRef(null);
 
-  const _cache = new CellMeasurerCache({
-    fixedWidth: true,
-    // minHeight: 50,
-    defaultHeight: 100,
-  });
+    const _cache = new CellMeasurerCache({
+        fixedWidth: true,
+        // minHeight: 50,
+        defaultHeight: 100,
+    });
 
-  const scrollToBottom = (renderedrows) => {
-    //console.log("Scrolling to", messages.length);
-    // !!virtualizedListRef.current &&
-    //   virtualizedListRef.current.scrollToRow(messages.length);
-    // Outstanding isue on virtualization: https://github.com/bvaughn/react-virtualized/issues/1179
-    //Scrolling does not work on this version of React.
-  };
+    const scrollToBottom = (renderedrows) => {
+        //console.log("Scrolling to", messages.length);
+        // !!virtualizedListRef.current &&
+        //   virtualizedListRef.current.scrollToRow(messages.length);
+        // Outstanding isue on virtualization: https://github.com/bvaughn/react-virtualized/issues/1179
+        //Scrolling does not work on this version of React.
+    };
 
-  useEffect(scrollToBottom, [messages]);
+    useEffect(scrollToBottom, [messages]);
+
+    const _rowRenderer = ({index, key, parent, style}) => {
+        return (
+            <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
+                {({measure, registerChild}) => (
+                    <div
+                        ref={registerChild}
+                        onLoad={measure}
+                        style={style}
+                        className={`${
+                            messages[index].isoutbound ? "mine messages" : "yours messages"
+                        }`}
+                    >
+                        <div className="message msgmargin">
+                            {MessageRender(messages[index])}
+                            {StatusRender(messages[index].status)}
+                        </div>
+                        {messages[index].isoutbound && (
+                            <div style={{fontSize: 10}}>
+                                {i18n.t("messaging.labels.sentby", {
+                                    by: messages[index].userid,
+                                    time: dayjs(messages[index].created_at).format(
+                                        "MM/DD/YYYY @ hh:mm a"
+                                    ),
+                                })}
+                            </div>
+                        )}
+                    </div>
+                )}
+            </CellMeasurer>
+        );
+    };
 
-  const _rowRenderer = ({ index, key, parent, style }) => {
     return (
-      <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
-        {({ measure, registerChild }) => (
-          <div
-            ref={registerChild}
-            onLoad={measure}
-            style={style}
-            className={`${
-              messages[index].isoutbound ? "mine messages" : "yours messages"
-            }`}
-          >
-            <div className="message msgmargin">
-              {MessageRender(messages[index])}
-              {StatusRender(messages[index].status)}
-            </div>
-            {messages[index].isoutbound && (
-              <div style={{ fontSize: 10 }}>
-                {i18n.t("messaging.labels.sentby", {
-                  by: messages[index].userid,
-                  time: moment(messages[index].created_at).format(
-                    "MM/DD/YYYY @ hh:mm a"
-                  ),
-                })}
-              </div>
-            )}
-          </div>
-        )}
-      </CellMeasurer>
+        <div className="chat">
+            <AutoSizer>
+                {({height, width}) => (
+                    <List
+                        ref={virtualizedListRef}
+                        width={width}
+                        height={height}
+                        rowHeight={_cache.rowHeight}
+                        rowRenderer={_rowRenderer}
+                        rowCount={messages.length}
+                        overscanRowCount={10}
+                        estimatedRowSize={150}
+                        scrollToIndex={messages.length}
+                    />
+                )}
+            </AutoSizer>
+        </div>
     );
-  };
-
-  return (
-    <div className="chat">
-      <AutoSizer>
-        {({ height, width }) => (
-          <List
-            ref={virtualizedListRef}
-            width={width}
-            height={height}
-            rowHeight={_cache.rowHeight}
-            rowRenderer={_rowRenderer}
-            rowCount={messages.length}
-            overscanRowCount={10}
-            estimatedRowSize={150}
-            scrollToIndex={messages.length}
-          />
-        )}
-      </AutoSizer>
-    </div>
-  );
 }
 
 const MessageRender = (message) => {
-  return (
-    <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
-      <div>
-        {message.image_path &&
-          message.image_path.map((i, idx) => (
-            <div
-              key={idx}
-              style={{ display: "flex", justifyContent: "center" }}
-            >
-              <a href={i} target="__blank">
-                <img alt="Received" className="message-img" src={i} />
-              </a>
+    return (
+        <Tooltip title={DateTimeFormatter({children: message.created_at})}>
+            <div>
+                {message.image_path &&
+                    message.image_path.map((i, idx) => (
+                        <div
+                            key={idx}
+                            style={{display: "flex", justifyContent: "center"}}
+                        >
+                            <a href={i} target="__blank">
+                                <img alt="Received" className="message-img" src={i}/>
+                            </a>
+                        </div>
+                    ))}
+                <div>{message.text}</div>
             </div>
-          ))}
-        <div>{message.text}</div>
-      </div>
-    </Tooltip>
-  );
+        </Tooltip>
+    );
 };
 
 const StatusRender = (status) => {
-  switch (status) {
-    case "sent":
-      return <Icon component={MdDone} className="message-icon" />;
-    case "delivered":
-      return <Icon component={MdDoneAll} className="message-icon" />;
-    default:
-      return null;
-  }
+    switch (status) {
+        case "sent":
+            return <Icon component={MdDone} className="message-icon"/>;
+        case "delivered":
+            return <Icon component={MdDoneAll} className="message-icon"/>;
+        default:
+            return null;
+    }
 };