Commit 97ed3abc authored by Michael Henretty's avatar Michael Henretty
Browse files

add feature to save accent locally

parent 08ce1ec1
......@@ -139,6 +139,11 @@ button:disabled {
color: #BDBDBD;
}
button.dark {
background-color: black;
color: white;
}
select {
display: block;
background: none;
......
import { h, Component } from 'preact';
import User from '../../user';
import { ACCENTS, default as User } from '../../user';
interface Props {
user: User;
......@@ -14,6 +14,7 @@ export default class Profile extends Component<Props, State> {
super(props);
this.saveEmail = this.saveEmail.bind(this);
this.configSendEmails = this.configSendEmails.bind(this);
this.saveDemographics = this.saveDemographics.bind(this);
}
private saveEmail() {
......@@ -26,16 +27,28 @@ export default class Profile extends Component<Props, State> {
this.props.user.setSendEmails(el.checked);
}
private saveDemographics() {
let el = document.getElementById('profile-accent') as HTMLSelectElement;
this.props.user.setAccent(el.options[el.selectedIndex].value);
}
render() {
let user = this.props.user.getState();
let accentOptions = [];
Object.keys(ACCENTS).forEach(accent => {
accentOptions.push(
<option value={accent} selected={user.accent === accent}>
{ACCENTS[accent]}
</option>);
});
return <div id="profile-container" className={this.props.active}>
<h2>Profile Data</h2>
<div className="input-and-button">
<label for="email">Your email address</label>
<input id="email" type="email" name="email" value={user.email}/>
<button onClick={this.saveEmail}>Save</button>
</div>
<button onClick={this.saveEmail}>Save</button> </div>
<div id="opt-in">
<input onClick={this.configSendEmails} id="send-emails"
type="checkbox" checked={user.sendEmails} />
......@@ -48,24 +61,8 @@ export default class Profile extends Component<Props, State> {
<h2>Demographic Data</h2>
<label for="profile-accent">Your English accent</label>
<select id="profile-accent">
<option>--</option>
<option>United States</option>
<option>England</option>
<option>Scotland</option>
<option>Wales</option>
<option>Ireland</option>
<option>Canada</option>
<option>
West Indies and Bermuda (Bahamas, Bermuda, Jamaica, Trinidad)
</option>
<option>Australia</option>
<option>New Zealand</option>
<option>South Atlantic (Falkland Islands, Saint Helena, )</option>
<option>Southern Africa (South Africa, Zimbabwe, Namibia)</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>Malaysia</option>
<option>Singapore</option>
<option value="">--</option>
{accentOptions}
</select>
<label for="profile-age">Your age</label>
<select id="profile-age">
......@@ -87,6 +84,9 @@ export default class Profile extends Component<Props, State> {
<option>Female</option>
<option>Other</option>
</select>
<button class="dark" onClick={this.saveDemographics}>
Save changes
</button>
</div>;
}
}
......@@ -2,10 +2,29 @@ import { generateGUID } from './utility';
const USER_KEY = 'userdata';
export const ACCENTS = {
'us': 'United States',
'england': 'England',
'scotland': 'Scotland',
'wales': 'Wales',
'ireland': 'Ireland',
'canada': 'Canada',
'bermuda': 'West Indies and Bermuda (Bahamas, Bermuda, Jamaica, Trinidad)',
'australia': 'Australia',
'newzealand': 'New Zealand',
'southatlandtic': 'South Atlantic (Falkland Islands, Saint Helena)',
'african': 'Southern Africa (South Africa, Zimbabwe, Namibia)',
'philippines': 'Philippines',
'hongkong': 'Hong Kong',
'malaysia': 'Malaysia',
'singapore': 'Singapore',
};
interface UserState {
userId: string;
email: string;
sendEmails: boolean;
accent: string;
clips: number;
}
......@@ -34,9 +53,10 @@ export default class User {
userId: generateGUID(),
email: '',
sendEmails: false,
accent: '',
clips: 0
};
this.store();
this.save();
}
}
......@@ -44,7 +64,7 @@ export default class User {
return localStorage && localStorage.getItem(USER_KEY);
}
private store(): void {
private save(): void {
localStorage && (localStorage[USER_KEY] = JSON.stringify(this.state));
}
......@@ -54,12 +74,22 @@ export default class User {
public setEmail(email: string): void {
this.state.email = email;
this.store();
this.save();
}
public setSendEmails(value: boolean): void {
this.state.sendEmails = value;
this.store();
this.save();
}
public setAccent(accent: string): void {
if (!ACCENTS[accent]) {
console.error('cannot set unrecognized accent', accent);
return;
}
this.state.accent = accent;
this.save();
}
public getState(): UserState {
......
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