UI Work on chats

client/src/components/jobs-list/jobs-list.component.jsx

@@ -1,11 +1,11 @@
-import { Input, Table, Icon, Button } from "antd";
+import { Button, Icon, Input, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
-import { withRouter } from "react-router-dom";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import StartChatButton from "../chat-open-button/chat-open-button.component";
 
 export default withRouter(function JobsList({
   searchTextState,
@@ -78,13 +78,7 @@ export default withRouter(function JobsList({
         return record.ownr_ph1 ? (
           <span>
             <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-            <Icon
-              style={{ margin: 4 }}
-              type='message'
-              onClick={() => {
-                alert("SMSing will happen here.");
-              }}
-            />
+            <StartChatButton phone={record.ownr_ph1} />
           </span>
         ) : (
           t("general.labels.unknown")
@@ -214,10 +208,10 @@ export default withRouter(function JobsList({
           return (
             <div style={{ display: "flex" }}>
               <Button onClick={() => refetch()}>
-                <Icon type='sync' />
+                <Icon type="sync" />
               </Button>
               <Input.Search
-                placeholder='Search...'
+                placeholder="Search..."
                 onChange={e => {
                   setSearchText(e.target.value);
                 }}
@@ -226,10 +220,10 @@ export default withRouter(function JobsList({
             </div>
           );
         }}
-        size='small'
+        size="small"
         pagination={{ position: "top" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         rowSelection={{ selectedRowKeys: [selectedJob] }}
         onChange={handleTableChange}