admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Work on chats

Browse Source
This commit is contained in:
Patrick Fic
2020-02-21 15:02:56 -08:00
parent 0639131936
commit 31e0a1f081
12 changed files with 163 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
bodyshop_translations.babel
View File

@@ -5346,6 +5346,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>typeamessage</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
</children>

89
client/src/components/chat-conversation/chat-conversation.component.jsx
View File

@@ -1,11 +1,16 @@
import { Card } from "antd";
import { Button, Card, Input, Icon } from "antd";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import twilio from "twilio";
import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
import {
closeConversation,
toggleConversationVisible
} from "../../redux/messaging/messaging.actions";
import PhoneFormatter from "../../utils/PhoneFormatter";
import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
import { MdSend } from "react-icons/md";
import { useTranslation } from "react-i18next";
const client = twilio(
"ACf1b1aaf0e04740828b49b6e58467d787",
@@ -17,20 +22,24 @@ const mapStateToProps = createStructuredSelector({
});
const mapDispatchToProps = dispatch => ({
toggleConversationVisible: conversationId =>
dispatch(toggleConversationVisible(conversationId))
dispatch(toggleConversationVisible(conversationId)),
closeConversation: phone => dispatch(closeConversation(phone))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(function ChatConversationComponent({
conversation,
toggleConversationVisible
toggleConversationVisible,
closeConversation
}) {
const [conversations, setConversations] = useState([]);
const { t } = useTranslation();
const [messages, setMessages] = useState([]);
useEffect(() => {
client.messages.list({ limit: 20 }, (error, items) => {
setConversations(
setMessages(
items.reduce((acc, value) => {
acc.push({
sid: value.sid,
@@ -42,34 +51,68 @@ export default connect(
);
});
return () => {};
}, [setConversations]);
}, [setMessages]);
return (
<div>
<Card
title={
conversation.open ? (
<div style={{ display: "flex" }}>
<div
onClick={() => toggleConversationVisible(conversation.phone)}
>
<PhoneFormatter>{conversation.phone}</PhoneFormatter>
</div>
<Button
type="danger"
shape="circle-outline"
onClick={() => closeConversation(conversation.phone)}
>
X
</Button>
</div>
) : null
}
style={{
width: conversation.open ? "400px" : "125px",
width: conversation.open ? "400px" : "175px",
margin: "0px 10px"
}}
size="small"
onClick={() => toggleConversationVisible(conversation.id)}
>
{conversation.open ? (
<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 className="messages" style={{ height: "400px" }}>
<ul>
{messages.map(item => (
<li
key={item.sid}
className={`${
item.direction === "inbound" ? "sent" : "replies"
}`}
>
<p> {item.body}</p>
</li>
))}
</ul>
</div>
<Input.Search
placeholder={t("messaging.labels.typeamessage")}
enterButton={<Icon component={MdSend} />}
/>
</div>
) : (
<PhoneFormatter>{conversation.phone}</PhoneFormatter>
<div style={{ display: "flex" }}>
<div onClick={() => toggleConversationVisible(conversation.phone)}>
<PhoneFormatter>{conversation.phone}</PhoneFormatter>
</div>
<Button
type="dashed"
shape="circle-outline"
onClick={() => closeConversation(conversation.phone)}
>
X
</Button>
</div>
)}
</Card>
</div>

23
client/src/components/chat-open-button/chat-open-button.component.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { openConversation } from "../../redux/messaging/messaging.actions";
import { Icon } from "antd";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = dispatch => ({
openConversation: phone => dispatch(openConversation(phone))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(function ChatOpenButton({ openConversation, phone }) {
return (
<Icon
style={{ margin: 4 }}
type="message"
onClick={() => openConversation(phone)}
/>
);
});

9
client/src/components/chat-overlay/chat-overlay.container.jsx
View File

@@ -1,4 +1,4 @@
import { Affix, Button, Badge } from "antd";
import { Affix, Badge } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -7,8 +7,8 @@ import {
selectChatVisible,
selectConversations
} from "../../redux/messaging/messaging.selectors";
import ChatOverlayComponent from "./chat-overlay.component";
import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
import ChatOverlayComponent from "./chat-overlay.component";
const mapStateToProps = createStructuredSelector({
chatVisible: selectChatVisible,
@@ -26,9 +26,8 @@ export default connect(
toggleChatVisible,
conversations
}) {
console.log("conversations", conversations);
return (
<Affix offsetBottom={25} style={{ padding: "10px, 10px, 10px, 10px" }}>
<Affix offsetBottom={0}>
<div>
<Badge count={10}>
<ChatOverlayComponent
@@ -38,7 +37,7 @@ export default connect(
</Badge>
{conversations
? conversations.map((conversation, idx) => (
<Badge count={5}>
<Badge key={idx} count={5}>
<ChatConversationContainer conversation={conversation} />
</Badge>
))

24
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -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}

4
client/src/pages/jobs/jobs.page.jsx
View File

@@ -34,10 +34,8 @@ export default connect(
const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
const searchTextState = useState("");
const searchText = searchTextState[0];
if (error) return <AlertComponent message={error.message} type='error' />;
//TODO Implement pagination for this.
if (error) return <AlertComponent message={error.message} type="error" />;
console.log(typeof searchText);
return (
<div>
<JobsList

4
client/src/pages/manage/manage.page.jsx
View File

@@ -135,9 +135,9 @@ export default function Manage({ match }) {
</Content>
</Layout>
<Footer>
<FooterComponent /> <ChatWindowContainer />
<FooterComponent />
</Footer>
<ChatWindowContainer />
<BackTop />
</Layout>
);

10
client/src/redux/messaging/messaging.actions.js
View File

@@ -9,3 +9,13 @@ export const toggleConversationVisible = conversationId => ({
type: MessagingActionTypes.TOGGLE_CONVERSATION_VISIBLE,
payload: conversationId
});
export const openConversation = phone => ({
type: MessagingActionTypes.OPEN_CONVERSATION,
payload: phone
});
export const closeConversation = phone => ({
type: MessagingActionTypes.CLOSE_CONVERSATION,
payload: phone
});

29
client/src/redux/messaging/messaging.reducer.js
View File

@@ -3,8 +3,8 @@ import MessagingActionTypes from "./messaging.types";
const INITIAL_STATE = {
visible: false,
conversations: [
{ id: 1, phone: "6049992002", open: false },
{ id: 2, phone: "6049992991", open: false }
{ phone: "6049992002", open: false },
{ phone: "6049992991", open: false }
]
};
@@ -21,20 +21,33 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
visible: true
};
case MessagingActionTypes.OPEN_CONVERSATION:
return {
...state,
conversations: [...state.conversations, action.payload]
};
if (state.conversations.find(c => c.phone === action.payload))
return {
...state,
conversations: state.conversations.map(c =>
c.phone === action.payload ? { ...c, open: true } : c
)
};
else
return {
...state,
conversations: [
...state.conversations,
{ phone: action.payload, open: true }
]
};
case MessagingActionTypes.CLOSE_CONVERSATION:
return {
...state,
conversations: state.conversations.filter(c => c !== action.paylod)
conversations: state.conversations.filter(
c => c.phone !== action.payload
)
};
case MessagingActionTypes.TOGGLE_CONVERSATION_VISIBLE:
return {
...state,
conversations: state.conversations.map(c =>
c.id === action.payload ? { ...c, open: !c.open } : c
c.phone === action.payload ? { ...c, open: !c.open } : c
)
};
default:

3
client/src/translations/en_us/common.json
View File

@@ -339,7 +339,8 @@
},
"messaging": {
"labels": {
"messaging": "Messaging"
"messaging": "Messaging",
"typeamessage": "Send a message..."
}
},
"notes": {

3
client/src/translations/es/common.json
View File

@@ -339,7 +339,8 @@
},
"messaging": {
"labels": {
"messaging": "Mensajería"
"messaging": "Mensajería",
"typeamessage": "Enviar un mensaje..."
}
},
"notes": {

3
client/src/translations/fr/common.json
View File

@@ -339,7 +339,8 @@
},
"messaging": {
"labels": {
"messaging": "Messagerie"
"messaging": "Messagerie",
"typeamessage": "Envoyer un message..."
}
},
"notes": {