Commit 3c18432b authored by Michael Henretty's avatar Michael Henretty
Browse files

add ability to store age locally

parent 97ed3abc
......@@ -144,6 +144,11 @@ button.dark {
color: white;
}
button.dark:active {
background-color: white;
color: black;
}
select {
display: block;
background: none;
......@@ -866,6 +871,11 @@ header.active {
margin-bottom: 0.5rem;
}
#profile-container #save-demos {
margin-top: 1rem;
width: 100%;
}
#opt-in {
margin-top: 1rem;
}
......
import { h, Component } from 'preact';
import { ACCENTS, default as User } from '../../user';
import { ACCENTS, AGES, default as User } from '../../user';
interface Props {
user: User;
......@@ -30,6 +30,9 @@ export default class Profile extends Component<Props, State> {
private saveDemographics() {
let el = document.getElementById('profile-accent') as HTMLSelectElement;
this.props.user.setAccent(el.options[el.selectedIndex].value);
el = document.getElementById('profile-age') as HTMLSelectElement;
this.props.user.setAge(el.options[el.selectedIndex].value);
}
render() {
......@@ -43,6 +46,14 @@ export default class Profile extends Component<Props, State> {
</option>);
});
let ageOptions = [];
Object.keys(AGES).forEach(age => {
ageOptions.push(
<option value={age} selected={user.age === age}>
{AGES[age]}
</option>);
});
return <div id="profile-container" className={this.props.active}>
<h2>Profile Data</h2>
<div className="input-and-button">
......@@ -67,15 +78,7 @@ export default class Profile extends Component<Props, State> {
<label for="profile-age">Your age</label>
<select id="profile-age">
<option>--</option>
<option>&lt; 19</option>
<option>19 - 29</option>
<option>30 - 39</option>
<option>40 - 49</option>
<option>50 - 59</option>
<option>60 - 69</option>
<option>70 - 79</option>
<option>80 - 89</option>
<option>&gt; 89</option>
{ageOptions}
</select>
<label for="profile-gender">Your gender</label>
<select id="profile-gender">
......@@ -84,7 +87,7 @@ export default class Profile extends Component<Props, State> {
<option>Female</option>
<option>Other</option>
</select>
<button class="dark" onClick={this.saveDemographics}>
<button id="save-demos" class="dark" onClick={this.saveDemographics}>
Save changes
</button>
</div>;
......
......@@ -20,11 +20,24 @@ export const ACCENTS = {
'singapore': 'Singapore',
};
export const AGES = {
'teens': '< 19',
'twenties': '19 - 29',
'thirties': '30 - 39',
'fourties': '40 - 49',
'fifties': '50 - 59',
'sixties': '60 - 69',
'seventies': '70 - 79',
'eighties': '80 - 89',
'nineties': '> 89',
};
interface UserState {
userId: string;
email: string;
sendEmails: boolean;
accent: string;
age: string;
clips: number;
}
......@@ -54,6 +67,7 @@ export default class User {
email: '',
sendEmails: false,
accent: '',
age: '',
clips: 0
};
this.save();
......@@ -92,6 +106,16 @@ export default class User {
this.save();
}
public setAge(age: string): void {
if (!AGES[age]) {
console.error('cannot set unrecognized age', age);
return;
}
this.state.age = age;
this.save();
}
public getState(): UserState {
return this.state;
}
......
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