Commit 6fdaba8e authored by MrMan's avatar MrMan

Convert matches page

parent 2dd04319
import React from "react";
import { UNIT_PLURALS } from "../util";
import { generateI18NTemplateFn } from "../i18n";
class DistanceDescription extends React.Component {
constructor(props) {
super(props);
this.i18n = generateI18NTemplateFn("en-US");
this.state = {
distance: props.distance || 0,
unit: props.unit || "mile"
distance: props.distance || 0
};
}
......@@ -22,9 +22,9 @@ class DistanceDescription extends React.Component {
}
// Determine how to express units
let unit = (this.state.distance == 1) ? this.state.unit : UNIT_PLURALS[this.state.unit];
let unit = (this.state.distance == 1) ? this.i18n`distances.mile.single` : this.i18n`distances.mile.multiple`;
return (<span><i className={`fa ${distanceIconClass}`}></i> {this.state.distance} {unit} away</span>);
return (<span><i className={`fa ${distanceIconClass}`}></i> {this.i18n`distances.unitsAway ${this.state.distance} ${unit}`}</span>);
}
}
......
......@@ -8,6 +8,7 @@ import MomentFuzzyDate from "./moment-fuzzy-date";
import PictureStrip from "./picture-strip";
import Actions from "../actions";
import _ from "lodash";
import { generateI18NTemplateFn } from "../i18n";
const DEFAULT_STATE = {recPhotoIndex: 0, rec: null, detailVisible: true};
......@@ -16,6 +17,7 @@ class MatchesPage extends React.Component {
super(props);
this.unsubFunctions = {};
this.state = DEFAULT_STATE;
this.i18n = generateI18NTemplateFn("en-US");
// Set rec if available through the TinderRecommendationStore
if (_.isNull(this.state.rec) && !_.isNull(TinderRecommendationStore.state.currentRec)) {
......@@ -79,9 +81,9 @@ class MatchesPage extends React.Component {
let detailFragment = (
<div className={`match-detail picture-overlay-text ${this.state.detailVisible ? "visible" : "invisible"}`} >
<p className="picture-overlay-text"><DistanceDescription distance={this.state.rec.distance_mi}/></p>
<p className="picture-overlay-text"><i className="fa fa-users"></i> {this.state.rec.common_friend_count} friends in common</p>
<p className="picture-overlay-text"><i className="fa fa-thumbs-up"></i> {this.state.rec.common_like_count} common interests</p>
<p className="picture-overlay-text"><i className="fa fa-clock-o"></i> last active <MomentFuzzyDate date={this.state.rec.ping_time}/></p>
<p className="picture-overlay-text"><i className="fa fa-users"></i> {this.i18n`pages.matches.friendsInCommon ${this.state.rec.common_friend_count}`}</p>
<p className="picture-overlay-text"><i className="fa fa-thumbs-up"></i> {this.i18n`pages.matches.commonInterests ${this.state.rec.common_like_count}`}</p>
<p className="picture-overlay-text"><i className="fa fa-clock-o"></i> {this.i18n`pages.matches.lastActive`} <MomentFuzzyDate date={this.state.rec.ping_time}/></p>
</div>
);
......
......@@ -196,7 +196,7 @@ class PreferencesPage extends React.Component {
value={this.state.prefs.distance_filter}/>
</div>
<div className="pure-u-1-2 hacked-vertical-center">
<span className="large">{this.i18n`pages.preferences.milesAway`}</span>
<span className="large">{this.i18n`distances.milesAway`}</span>
</div>
</div>
</CollapsibleLabeledFormSection>
......
......@@ -9,9 +9,19 @@ const LOCALE_LOOKUP = {
};
export function generateI18NTemplateFn(locale=DEFAULT_LOCALE) {
return (args, values) => {
return (args, ...values) => {
let translations = LOCALE_LOOKUP[locale];
let keypath = _.first(args);
return _.get(translations, keypath, `${KEYPATH_INVALID_MESSAGE} [${keypath}]`);
let keypath = _.first(args).trim();
let translated = _.get(translations, keypath);
// Exit early if translation failed
if (_.isNull(translated)) {
return `${KEYPATH_INVALID_MESSAGE} [${keypath}]`;
}
// Add in provided values if present
translated = _.reduce(values, (acc,v) => acc.replace("{}", v), translated);
return translated;
};
}
......@@ -2,9 +2,9 @@ export default {
app: {
name: "Kindling",
subtitle: "Unofficial Tinder™ client for FirefoxOS",
tagline: {
tagline: {
first: "Find some",
last: "human warmth"
last: "human warmth"
}
},
nav: {
......@@ -14,6 +14,14 @@ export default {
logout: "Logout"
}
},
distances: {
mile: {
single: "mile",
multiple: "miles"
},
milesAway: "{} miles away",
unitsAway: "{} {} away"
},
pages: {
preferences: {
pageSubtitle: 'Manage who you can find',
......@@ -25,8 +33,12 @@ export default {
customLocation: "Custom Location",
updatePreferences: "Update Preferences",
undoChanges: "Undo all changes",
milesAway: "miles away",
inbetweenAges: "to"
},
matches: {
friendsInCommon: "{} friends in common",
commonInterests: "{} common interests",
lastActive: "last active"
}
}
};
......@@ -19,10 +19,6 @@ const re_login_resp_success_info = {
expiresIn: /expires_in=([\d]+)/
};
export const UNIT_PLURALS = {
mile: "miles"
};
/**
* Generate a URL with the appropriate query parameters attached
*
......
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