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

General formatting for messaging + reshaping of messaging components and their structure.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-21 13:20:41 -08:00
parent 9b39f28ced
commit 0639131936
17 changed files with 273 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.6.1" version="1.2">
<babeledit_project version="1.2" be_version="2.6.1">
<!--
BabelEdit project file
@@ -5319,6 +5319,37 @@
</folder_node>
</children>
</folder_node>
<folder_node>
<name>messaging</name>
<children>
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>messaging</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>
</folder_node>
<folder_node>
<name>notes</name>
<children>

77
client/src/components/chat-conversation/chat-conversation.component.jsx Normal file
View File

@@ -0,0 +1,77 @@
import { Card } 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 PhoneFormatter from "../../utils/PhoneFormatter";
import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
const client = twilio(
"ACf1b1aaf0e04740828b49b6e58467d787",
"0bea5e29a6d77593183ab1caa01d23de"
);
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = dispatch => ({
toggleConversationVisible: conversationId =>
dispatch(toggleConversationVisible(conversationId))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(function ChatConversationComponent({
conversation,
toggleConversationVisible
}) {
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]);
return (
<div>
<Card
style={{
width: conversation.open ? "400px" : "125px",
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>
) : (
<PhoneFormatter>{conversation.phone}</PhoneFormatter>
)}
</Card>
</div>
);
});

17
client/src/components/chat-conversation/chat-conversation.container.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import ChatConversationComponent from "./chat-conversation.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = dispatch => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(function ChatConversationContainer({ conversation }) {
return <ChatConversationComponent conversation={conversation} />;
});

0
client/src/components/chat-window/chat-window.styles.scss → client/src/components/chat-conversation/chat-conversation.styles.scss
View File

36
client/src/components/chat-overlay/chat-overlay.component.jsx Normal file
View File

@@ -0,0 +1,36 @@
import { Badge, Card, Icon } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function ChatWindowComponent({
chatVisible,
toggleChatVisible
}) {
const { t } = useTranslation();
return (
<div>
<Badge count={5}>
<Card
onClick={() => toggleChatVisible()}
style={{
width: chatVisible ? "300px" : "125px",
margin: "0px 10px"
}}
size="small"
>
{chatVisible ? (
<div className="messages" style={{ height: "400px" }}>
List of chats here.
</div>
) : (
<div>
<Icon type="message" />
<strong style={{ paddingLeft: "10px" }}>
{t("messaging.labels.messaging")}
</strong>
</div>
)}
</Card>
</Badge>
</div>
);
}

49
client/src/components/chat-overlay/chat-overlay.container.jsx Normal file
View File

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

53
client/src/components/chat-window/chat-window.component.jsx
View File

@@ -1,53 +0,0 @@
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 (
<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>
);
}

37
client/src/components/chat-window/chat-window.container.jsx
View File

@@ -1,37 +0,0 @@
import { Affix, Button, Badge } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
import ChatWindowComponent from "./chat-window.component";
const mapStateToProps = createStructuredSelector({
chatVisible: selectChatVisible
});
const mapDispatchToProps = dispatch => ({
toggleChatVisible: () => dispatch(toggleChatVisible())
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(function ChatWindowContainer({ chatVisible, toggleChatVisible }) {
return (
<Affix offsetBottom={25}>
{chatVisible ? (
<ChatWindowComponent toggleChatVisible={toggleChatVisible} />
) : (
<Badge count={5}>
<Button
type='primary'
shape='circle'
icon='message'
onClick={() => toggleChatVisible()}
/>
</Badge>
)}
</Affix>
);
});

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

@@ -25,7 +25,7 @@ const JobsAvailablePage = lazy(() =>
import("../jobs-available/jobs-available.page.container")
);
const ChatWindowContainer = lazy(() =>
import("../../components/chat-window/chat-window.container")
import("../../components/chat-overlay/chat-overlay.container")
);
const ScheduleContainer = lazy(() =>
import("../schedule/schedule.page.container")
@@ -65,13 +65,15 @@ export default function Manage({ match }) {
</Header>
<Layout>
<Content
className='content-container'
style={{ padding: "0em 4em 4em" }}>
className="content-container"
style={{ padding: "0em 4em 4em" }}
>
<ErrorBoundary>
<Suspense
fallback={
<LoadingSpinner message={t("general.labels.loadingapp")} />
}>
}
>
DELETE THIS
<Test />
<EmailOverlayContainer />
@@ -133,14 +135,9 @@ export default function Manage({ match }) {
</Content>
</Layout>
<Footer>
<FooterComponent />
{
// <Affix offsetBottom={20}>
// <ChatWindowContainer />
// </Affix>
}
<ChatWindowContainer />
<FooterComponent /> <ChatWindowContainer />
</Footer>
<BackTop />
</Layout>
);

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

@@ -1,7 +1,11 @@
import MessagingActionTypes from './messaging.types'
import MessagingActionTypes from "./messaging.types";
export const toggleChatVisible = () => ({
type: MessagingActionTypes.TOGGLE_CHAT_VISIBLE,
type: MessagingActionTypes.TOGGLE_CHAT_VISIBLE
//payload: user
});
export const toggleConversationVisible = conversationId => ({
type: MessagingActionTypes.TOGGLE_CONVERSATION_VISIBLE,
payload: conversationId
});

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

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

5
client/src/redux/messaging/messaging.selectors.js
View File

@@ -6,3 +6,8 @@ export const selectChatVisible = createSelector(
[selectMessaging],
messaging => messaging.visible
);
export const selectConversations = createSelector(
[selectMessaging],
messaging => messaging.conversations
);

6
client/src/redux/messaging/messaging.types.js
View File

@@ -1,5 +1,9 @@
const MessagingActionTypes = {
TOGGLE_CHAT_VISIBLE: "TOGGLE_CHAT_VISIBLE",
SET_CHAT_VISIBLE: "SET_CHAT_VISIBLE"
SET_CHAT_VISIBLE: "SET_CHAT_VISIBLE",
OPEN_CONVERSATION: "OPEN_CONVERSATION",
CLOSE_CONVERSATION: "CLOSE_CONVERSATION",
TOGGLE_CONVERSATION_VISIBLE: "TOGGLE_CONVERSATION_VISIBLE",
SEND_MESSAGE: "SEND_MESSAGE"
};
export default MessagingActionTypes;

2
client/src/redux/root.reducer.js
View File

@@ -10,7 +10,7 @@ const persistConfig = {
key: "root",
storage,
//whitelist: ["user"]
blacklist: ["user", "email"]
blacklist: ["user", "email", "messaging"]
};
const rootReducer = combineReducers({

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

@@ -337,6 +337,11 @@
"shops": "My Shops"
}
},
"messaging": {
"labels": {
"messaging": "Messaging"
}
},
"notes": {
"actions": {
"actions": "Actions",

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

@@ -337,6 +337,11 @@
"shops": "Mis tiendas"
}
},
"messaging": {
"labels": {
"messaging": "Mensajería"
}
},
"notes": {
"actions": {
"actions": "Comportamiento",

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

@@ -337,6 +337,11 @@
"shops": "Mes boutiques"
}
},
"messaging": {
"labels": {
"messaging": "Messagerie"
}
},
"notes": {
"actions": {
"actions": "actes",