Commit f6d07c7e authored by MrMan's avatar MrMan

style chat screen, props over state

parent cf3dfcb2
......@@ -5,7 +5,7 @@ import MomentFuzzyDate from "./moment-fuzzy-date";
import _ from "lodash";
import { generateI18NTemplateFn } from "../i18n";
const DEFAULT_STATE = {matchId: null, userInfo: null};
const DEFAULT_STATE = {user: null, matchId: null, userInfo: null};
class MatchConvoLink extends React.Component {
constructor(props) {
......@@ -16,9 +16,9 @@ class MatchConvoLink extends React.Component {
// Process props
this.state = _.extend(this.state, {
matchId: props.matchId || null,
user: props.user || null,
unseenMessageCount: props.unseenMessageCount || 0
matchId: props.matchId || this.state.matchId,
user: props.user || this.state.user,
unseenMessageCount: props.unseenMessageCount || this.state.unseenMessageCount
});
console.log("[MATCH CONVO LINK COMPONENT] Match convo link component constructed, initial state:", this.state);
......
import React from "react";
import TinderMatchStore from "../stores/tinder-match";
import Actions from "../actions";
import MomentFuzzyDate from "./moment-fuzzy-date";
import _ from "lodash";
import { generateI18NTemplateFn } from "../i18n";
const DEFAULT_STATE = {match: null};
const DEFAULT_CLOSE_FN = () => console.log("[MATCH CONVO PAGE COMPONENT] Would have closed convo page!");
const DEFAULT_STATE = {};
class MatchConvoPage extends React.Component {
constructor(props) {
......@@ -15,42 +14,20 @@ class MatchConvoPage extends React.Component {
this.unsubFunctions = {};
this.i18n = generateI18NTemplateFn("en-US");
// Process props
this.state = _.extend(this.state, {
match: props.match || null,
showCloseButton: props.showCloseButton || false,
closeFn: props.closeFn || DEFAULT_CLOSE_FN
});
console.log("[MATCH CONVO PAGE COMPONENT] Match convo link component constructed, initial state:", this.state);
}
componentDidMount() {
this.unsubFunctions["store-tinder-match"] = TinderMatchStore.listen(store => {
console.log("[MATCH CONVO PAGE COMPONENT] Detected tinder match store update:", store);
// Update the user info state if the user info is relevant to this component
if (_.has(store.matchedUserInfo, this.state.matchId)) {
console.log(`[MATCH CONVO PAGE COMPONENT] Found match ID ${this.state.matchId} in update, updating state`);
this.setState({user: store.matchedUserInfo[this.state.matchId]});
}
});
}
componentWillUnmount() {
_.each(this.unsubFunctions, f => f());
}
render() {
console.log("[MATCH CONVO PAGE COMPONENT] Rendering link for match with ID:", this.state.matchId);
let messages = _.get(this.props, "match.messages", []);
let messages = _.get(this.state, "match.messages", []);
// Generate list of messages
let messageListElements = messages.map((m,i) => {
let receivedOrSent = m.to === this.props.viewingUser._id ? "received" : "sent";
let messageBubbles = messages.map(m => {
return (
<div key={m._id} className="pure-u-1 match-convo-message">
<div className="match-convo-message">{m.message}</div>
<p className="match-convo-sent-date">Sent <MomentFuzzyDate date={m.sent_date}/></p>
<div key={m._id + '-msg-' + i} className={`pure-u-1 match-convo-message ${receivedOrSent}`}>
<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"><MomentFuzzyDate date={m.sent_date}/></div>
</div>
);
});
......@@ -58,19 +35,23 @@ class MatchConvoPage extends React.Component {
let closeButton = "";
if (this.props.showCloseButton) {
closeButton = (
<div className="float-left slim-margin-left" onClick={this.state.closeFn}>
<div className="float-left slim-margin-left"
onClick={() => { if (this.props.closeFn) { this.props.closeFn(); }}}>
<h2><i className="fa fa-times large"></i></h2>
</div>
);
}
console.log("User?", this.state.user);
return (
<div className="match-convo-page-container">
{closeButton}
<h1 className="right-aligned-text slim-text slim-right-padding">{this.props.matchedUser.name}</h1>
<div className="match-convo-page-messages-container">
<div className="pure-g">
{messageBubbles}
{messageListElements}
</div>
<div className="match-convo-page-chat-box abs pinned-to-bottom full-width">
......
......@@ -9,7 +9,7 @@ import Constants from "../constants";
import _ from "lodash";
import { generateI18NTemplateFn } from "../i18n";
const DEFAULT_STATE = { matches: [], matchedUserInfo: {}, selectedMatch: null};
const DEFAULT_STATE = { matches: [], matchedUserInfo: {}, selectedMatch: null, user: null};
class MatchesPage extends React.Component {
constructor(props) {
......@@ -24,6 +24,12 @@ class MatchesPage extends React.Component {
this.state = _.extend(this.state, {matches});
}
// Set tinder user if user is available through the TinderUserStore
if (_.isNull(this.state.user) && !_.isNull(TinderUserStore.state.user)) {
let user = _.clone(TinderUserStore.state.user, true);
this.state = _.extend(this.state, {user});
}
console.log("[MATCHES PAGE COMPONENT] Match page constructed, initial state:", this.state);
}
......@@ -33,6 +39,11 @@ class MatchesPage extends React.Component {
this.setState({matches: store.matches, matchedUserInfo: store.matchedUserInfo});
});
this.unsubFunctions["store-tinder-user"] = TinderUserStore.listen(store => {
console.log("[MATCHES PAGE COMPONENT] Detected tinder user store update", store);
this.setState({user: store.user});
});
// Attempt to fetch updates from twitter whenever matches page loads,
// this will trigger the match store to have updates
Actions.retrieveTinderUpdates();
......@@ -70,6 +81,11 @@ class MatchesPage extends React.Component {
let convoShown = _.isNull(this.state.selectedMatch) ? "" : "onscreen";
// Generate contents for sliding container
let selectedMatch = this.state.selectedMatch;
let matchedUser = _.isNull(selectedMatch) ? {} : _.get(this.state.matchedUserInfo, this.state.selectedMatch.id);
let viewingUser = this.state.user;
return (
<div className="matches-page-container">
<LHSNav />
......@@ -91,7 +107,9 @@ class MatchesPage extends React.Component {
</div>
<div id="match-convo-sliding-container" className={`offscreen-right ${convoShown}`}>
<MatchConvoPage match={this.state.selectedMatch}
<MatchConvoPage match={selectedMatch}
matchedUser={matchedUser}
viewingUser={viewingUser}
showCloseButton={true}
closeFn={this.hideMatchConvoContainer.bind(this)}/>
</div>
......
......@@ -75,9 +75,13 @@ let TinderMatchStore = Reflux.createStore({
this.state.matches[matchId] = _.extend({}, MATCH_DEFAULT_STATE);
}
// Generate match obj with augmented messages
let augmentedMessages = _.map(m.messages, m => _.extend(m, {seen: false}));
this.state.matches[matchId].messages.push(augmentedMessages);
// 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}));
});
// Set match ID
this.state.matches[matchId].id = matchId;
});
......
......@@ -204,6 +204,26 @@ section.collapsible-labeled-form-section > label {
margin: 0;
}
.match-convo-message {
margin-bottom: .25em;
padding: .25em;
}
.match-convo-message.received {
background-color: #95a5a6;
color: white;
}
.match-convo-message.sent {
background-color: #3498db;
color: white;
}
.match-convo-sent-date {
font-style: italic;
font-size: medium;
}
/*******************/
/* Utility classes */
/*******************/
......
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