Commit 1ae060b4 authored by MrMan's avatar MrMan

Update code around matches pages

- Clear out message state
- Rename seen property
- Better handle updates
- Support pending message sends
parent 13276040
......@@ -9,7 +9,7 @@ const DEFAULT_STATE = {
matchId: null,
matchedUser: null, // User that was matched to logged in user
matchedUserId: null, // ID of the user that was matched to logged in user
unseenMessageCount: 0,
unseenByUserMessageCount: 0,
lastMessageSentDate: null
};
......@@ -25,7 +25,7 @@ class MatchConvoLink extends React.Component {
matchId: props.matchId || this.state.matchId,
matchedUserId: props.matchedUserId || this.state.matchedUserId,
matchedUser: props.matchedUser || this.state.matchedUser,
unseenMessageCount: props.unseenMessageCount || this.state.unseenMessageCount,
unseenByUserMessageCount: props.unseenByUserMessageCount || this.state.unseenByUserMessageCount,
lastMessageSentDate: props.lastMessageSentDate || this.state.lastMessageSentDate
});
......
......@@ -38,12 +38,19 @@ class MatchConvoPage extends React.Component {
console.log("[MATCH CONVO PAGE] Attempting to send message to match:", {
messageText: msg,
matchId: matchId});
matchId: matchId
});
// Clear out the message text
this.setState({messageText: ""});
// Sent the message to the match
Actions.sendMessageToMatch(matchId, msg);
}
render() {
let messages = _.get(this.props, "match.messages", []);
let pendingMessages = _.get(this.props, "match.pendingMessages", []);
// Generate list of messages
let messageListElements = messages.map((m,i) => {
......@@ -61,6 +68,20 @@ class MatchConvoPage extends React.Component {
);
});
// Generate list of pending messaegs
let pendingMessageListElements = pendingMessages.map((m,i) => {
return (
<div key={m._id + '-msg-' + i} className="pure-u-1">
<div className={`match-convo-message pending`}>
<div className="match-convo-message slim-padding">{m.message}</div>
<div className="match-convo-sent-date no-vertical-margins right-aligned-text slim-right-padding">
<i className="fa fa-circle-o-notch fa-spin"></i> {this.state.i18n`pages.matchConvo.sending`}
</div>
</div>
</div>
);
});
let closeButton = "";
if (this.props.showCloseButton) {
closeButton = (
......@@ -78,6 +99,7 @@ class MatchConvoPage extends React.Component {
<div className="match-convo-page-messages-container">
<div className="pure-g">
{messageListElements}
{pendingMessageListElements}
</div>
</div>
......
......@@ -94,11 +94,11 @@ class MatchesPage extends React.Component {
} else {
// Generate list of matches
let matchLinks = _.map(this.state.matches, m => {
let unseen = _.reduce(m.messages, (acc, m) => !m.seen ? acc+1 : acc , 0);
let unseenByUserMessageCount = _.reduce(m.messages, (acc, m) => !m.seenByUser ? acc+1 : acc , 0);
let lastMessageSentDate = _.get(_.last(m.messages), "sent_date", null);
return (
<div key={m.id} onClick={() => this.showMatchConvoContainerWithMatch(m)} >
<MatchConvoLink unseenMessageCount={unseen}
<MatchConvoLink unseenByUserMessageCount={unseenByUserMessageCount}
matchId={m.id}
matchedUserId={m.matchedUserId}
lastMessageSentDate={lastMessageSentDate} />
......
......@@ -75,6 +75,9 @@ export default {
noMatchesFound: "No matches found",
lastMessageSent: "Last message sent",
noMessagesSent: "No messages sent"
},
matchConvo: {
sending: "Sending..."
}
}
};
......@@ -82,7 +82,11 @@ export default {
pageSubtitle: "Habla con sus parejas",
findSomeoneNew: "Buscar un pareja nuevo",
noMatchesFound: "No mas parejas",
lastMessageSent: "Último mensaje enviado"
lastMessageSent: "Último mensaje enviado",
noMessagesSent: "No hay mensajes enviados"
},
matchConvo: {
sending: "Enviando..."
}
}
};
......@@ -73,7 +73,11 @@ export default {
pageSubtitle: "合わせた人と話す",
findSomeoneNew: "新しい人を探す",
noMatchesFound: "よく合わせる人わ見つけられませんでした",
lastMessageSent: "最後通信したのメッセージ"
lastMessageSent: "最後通信したのメッセージ",
noMessagesSent: "メッセージはまだ送ってありません"
},
matchConvo: {
sending: "送っています…"
}
}
};
......@@ -8,7 +8,7 @@ import LocalStorageBackupMixinGenerator from "../mixins/localstorage-backup";
import _ from "lodash";
const DEFAULT_STATE = {matches: {}, matchedUserInfo: {}, tinderAccessToken: null};
const MATCH_DEFAULT_STATE = {messages: []};
const MATCH_DEFAULT_STATE = {messages: [], pendingMessages: []};
const LocalStorageBackupMixin = LocalStorageBackupMixinGenerator(Constants.LOCALSTORAGE_KEY_TINDER_MATCH_STORE_STATE);
function generateTinderURLForMatchMessageSend(matchId) {
......@@ -131,14 +131,36 @@ let TinderMatchStore = Reflux.createStore({
return;
}
// Update the messages for that match preemptively
this.state.matches[matchId].pendingMessages.push({matchId, message});
this.backupState();
this.trigger(this.state);
// Attempt to send message to match
console.log("[TINDER MATCH STORE] Attempting to send message to match with id:", matchId);
TinderAPI.POSTWithToken(generateTinderURLForMatchMessageSend(matchId),
{message},
this.state.tinderAccessToken)
.then(resp => resp.json())
.then(resp => {
Actions.receivedSentMessageReceipt(matchId, resp);
.then(msg => {
// Move the proof of the pending message to
let relevantPendingMessage = _.find(this.state.matches[matchId].pendingMessages,
p => p.message === msg.message);
// Trim pending message array
let trimmedPendingMessages = _.filter(this.state.matches[matchId].pendingMessages,
p => p.message !== relevantPendingMessage.message);
// Add the message object as received from tinder to the list of messages, update pending messages
this.state.matches[matchId].messages.push(msg);
this.state.matches[matchId].pendingMessages = trimmedPendingMessages;
// Alert others to the fact that we've received a sent message receipt for this match
Actions.receivedSentMessageReceipt(matchId, msg);
// Alert to received sent message receipt
this.backupState();
this.trigger(this.state);
})
.catch(err => {
console.log(`[TINDER MATCH STORE] Failed to send message to match with ID ${matchId}:`, err);
......@@ -182,17 +204,44 @@ let TinderMatchStore = Reflux.createStore({
// Augment and add messages to state
_.forEach(m.messages, m => {
// Append augmented messages, initialized with false seen flag
this.state.matches[matchId].messages.push(_.extend(m, {seen: false}));
// TODO: this is really inefficient... maybe use a set or a map for messages instead??
let messageAlreadyExists = _.find(this.state.matches[matchId].messages,
_.matchesProperty('id', m.id));
// Append augmented messages, initialized with false seenByUser flag
if (!messageAleradyExists) {
this.state.matches[matchId].messages.push(_.extend(m, {seenByUser: false}));
}
});
// Determine ID of matched user by finding a message and using to or from user IDs
let matchedUserId = m.person._id;
// Save important information from the match for a brand new match
if (!_.has(this.state.matches, matchId)) {
// Handle brand new match
let matchedUserId = "";
if(!_.isUndefined(m.person)) {
// If m.person has been provided, use that to find the matched user ID, and use it to update the state
// Initial match object should contain at least
matchedUserId = m.person._id;
} else if(!_.isEmpty(m.messages)) {
// Attempt to derive matched user ID from a message
let first = _.first(m.messages);
matchedUserId = m.message.to === currentUser._id ? m.message.from : m.message.to;
}
// Save matched user ID, initial match object to internal matches
this.state.matches[matchId].matchedUserId = matchedUserId;
this.state.matches[matchId].matchObj = m;
}
// If there is pre-existing match object, but we're getting piecemeal updates, there's a problem
if (!_.has(this.state.matches, matchId) && _.isUndefined(m.person)) {
// TODO: Need to request fresh updates/specific match info in hopes of getting proper data
console.log("[TIDNER MATCH STORE] WARNING: no preexisting match object, but we're gettin piecemeal updates. Need to request a full updates object");
}
// Set match ID and matched user ID
this.state.matches[matchId].id = matchId;
this.state.matches[matchId].matchObj = m;
this.state.matches[matchId].matchedUserId = matchedUserId;
});
// Save state and alert listeners to updates
......
......@@ -243,6 +243,12 @@ section.collapsible-labeled-form-section > label {
padding: .25em;
}
.match-convo-message.pending {
background-color: #888;
opacity: 0.7;
color: white;
}
.match-convo-message.received {
background-color: #95a5a6;
color: white;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment