Skip to content

Commit e97f821

Browse files
author
Natacha Ségala
committed
Add support for internationalisation
1 parent ff8a8e3 commit e97f821

20 files changed

+547
-99
lines changed

‎.babelrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
"plugins": [
1818
"syntax-dynamic-import",
1919
"transform-object-rest-spread",
20+
[
21+
"react-intl", {
22+
"messagesDir": "./build/messages",
23+
"enforceDescriptions": false
24+
}
25+
],
2026
[
2127
"transform-class-properties",
2228
{

‎app/controllers/registrations_controller.rb

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ def new
88
yield resource if block_given?
99

1010
programs = Program.all
11+
languages = Language.all
1112
timezones = ActiveSupport::TimeZone.all
12-
@data = { :programs => programs, :timezones => timezones }
13+
@data = { :programs => programs, :timezones => timezones, :languages => languages}
1314

1415
validate_role_params
1516
respond_with(resource, render: :new)
@@ -20,9 +21,11 @@ def create
2021
validate_role_params
2122

2223
programs = params[:user][:programs]
24+
languages = params[:user][:languages]
25+
2326
build_resource(sign_up_params)
2427

25-
@registration = Contexts::Users::Creation.new(resource, resource_name, @role_id, programs)
28+
@registration = Contexts::Users::Creation.new(resource, resource_name, @role_id, programs, languages)
2629

2730
@registration.execute
2831

@@ -114,6 +117,7 @@ def sign_up_params
114117
:thumbnail_image,
115118
:timezone,
116119
:programs => '',
120+
:languages => '',
117121
:role_ids => []
118122
)
119123
end
@@ -132,6 +136,7 @@ def account_update_params
132136
:city,
133137
:thumbnail_image,
134138
:timezone,
139+
:languages => '',
135140
:programs => []
136141
)
137142
end

‎app/controllers/user_profiles_controller.rb

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@ def show
55
unless current_user.present?
66
redirect_to root_path
77
end
8-
9-
user = UserDecorator.new(current_user).decorate
8+
user = UserDecorator.new(current_user)
9+
current_user = user.decorate
1010
programs = Program.all
11+
languages = Language.all
1112
timezones = ActiveSupport::TimeZone.all
1213

1314
@data = {
1415
:programs => programs,
1516
:currentUser => user,
16-
:timezones => timezones
17+
:timezones => timezones,
18+
:languages => languages
1719
}
1820

1921
render :show

‎app/javascript/components/AvailabilitiesTable.js

Lines changed: 111 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33
import _ from 'lodash';
44
import FlatButton from 'material-ui/FlatButton';
55
import RaisedButton from 'material-ui/RaisedButton';
6+
import { FormattedMessage } from 'react-intl';
67

78
import {
89
Table,
@@ -36,10 +37,33 @@ class AvailabilitiesTable extends Component {
3637
const tableContent = _.map(availabilities, ({ day, start_time, end_time, id }) => {
3738
return(
3839
<TableRow className='availabilitiesTableRow' key={ 'body' + day + start_time + end_time }>
39-
<TableRowColumn>{ day }</TableRowColumn>
40-
<TableRowColumn>From: { start_time }</TableRowColumn>
41-
<TableRowColumn>To: { end_time }</TableRowColumn>
42-
<TableRowColumn >Timezone: { timezone }</TableRowColumn>
40+
<TableRowColumn>
41+
<FormattedMessage
42+
id='Availabilities.day'
43+
values={ { day } }
44+
/>
45+
</TableRowColumn>
46+
<TableRowColumn>
47+
<FormattedMessage
48+
id='Availabilities.tableFrom'
49+
defaultMessage='From'
50+
values={ { start_time } }
51+
/>
52+
</TableRowColumn>
53+
<TableRowColumn>
54+
<FormattedMessage
55+
id='Availabilities.tableTo'
56+
defaultMessage='To'
57+
values={ { end_time } }
58+
/>
59+
</TableRowColumn>
60+
<TableRowColumn >
61+
<FormattedMessage
62+
id='Availabilities.tableTimezone'
63+
defaultMessage='Timezone'
64+
values={ { timezone } }
65+
/>
66+
</TableRowColumn>
4367
{ this.renderDeleteRow(id) }
4468
</TableRow>
4569
);
@@ -49,18 +73,54 @@ class AvailabilitiesTable extends Component {
4973
return(
5074
<div key={ 'list' + day + start_time + end_time + timezone } className='availabilityIndexItemContainer'>
5175
<li>
52-
<span>Day: </span>{ day }
76+
<span>
77+
<FormattedMessage
78+
id='Availabilities.day'
79+
defaultMessage='Day'
80+
/>
81+
</span>
82+
<FormattedMessage
83+
id='Availabilities.day'
84+
values={ { day } }
85+
/>
5386
</li>
5487

5588
<li>
56-
<span>From: </span>{ start_time }
89+
<span>
90+
<FormattedMessage
91+
id='Availabilities.from'
92+
defaultMessage='From:'
93+
/>
94+
</span>
95+
<FormattedMessage
96+
id='Availabilities.from'
97+
values={ { start_time } }
98+
/>
5799
</li>
58100
<li>
59-
<span>To: </span>{ end_time }
101+
<span>
102+
<FormattedMessage
103+
id='Availabilities.to'
104+
defaultMessage='To:'
105+
/>
106+
</span>
107+
<FormattedMessage
108+
id='Availabilities.to'
109+
values={ { end_time } }
110+
/>
60111
</li>
61112

62113
<li>
63-
<span>Timezone: </span>{ timezone }
114+
<span>
115+
<FormattedMessage
116+
id='Availabilities.timezone'
117+
defaultMessage='Timezone:'
118+
/>
119+
</span>
120+
<FormattedMessage
121+
id='Availabilities.timezone'
122+
values={ { timezone } }
123+
/>
64124
</li>
65125

66126
{ this.renderDeleteListContent(id) }
@@ -75,16 +135,36 @@ class AvailabilitiesTable extends Component {
75135
<Table selectable={ false } >
76136
<TableHeader displaySelectAll={ false }>
77137
<TableRow>
78-
<TableHeaderColumn key='day' >Day</TableHeaderColumn>
79-
<TableHeaderColumn key='start_time'>Start time</TableHeaderColumn>
80-
<TableHeaderColumn key='end_time'>End Time</TableHeaderColumn>
81-
<TableHeaderColumn key='timezone'>Timezone</TableHeaderColumn>
138+
<TableHeaderColumn key='day' >
139+
<FormattedMessage
140+
id='Availabilities.day'
141+
defaultMessage='Day'
142+
/>
143+
</TableHeaderColumn>
144+
<TableHeaderColumn key='start_time'>
145+
<FormattedMessage
146+
id='Availabilities.startTime'
147+
defaultMessage='Start Time'
148+
/>
149+
</TableHeaderColumn>
150+
<TableHeaderColumn key='end_time'>
151+
<FormattedMessage
152+
id='Availabilities.endTime'
153+
defaultMessage='End Time'
154+
/>
155+
</TableHeaderColumn>
156+
<TableHeaderColumn key='timezone'>
157+
<FormattedMessage
158+
id='Availabilities.timezone'
159+
defaultMessage='Timezone:'
160+
/>
161+
</TableHeaderColumn>
82162
{ this.renderDeleteColumn() }
83163
</TableRow>
84164
</TableHeader>
85165

86166
<TableBody displayRowCheckbox={ false }>
87-
{ tableContent}
167+
{ tableContent }
88168
</TableBody>
89169
</Table>
90170
{ this.renderSnackBar() }
@@ -101,7 +181,12 @@ class AvailabilitiesTable extends Component {
101181
if (this.props.deletable) {
102182
return (
103183
<li className='availabilitiesTableButton'>
104-
<RaisedButton primary fullWidth label='Delete' onClick={ this.handleDelete(id) } />
184+
<RaisedButton primary fullWidth onClick={ this.handleDelete(id) } >
185+
<FormattedMessage
186+
id='Delete'
187+
defaultMessage='Delete'
188+
/>
189+
</RaisedButton>
105190
</li>
106191
);
107192
}
@@ -112,7 +197,12 @@ class AvailabilitiesTable extends Component {
112197
if (this.props.deletable) {
113198
return (
114199
<TableRowColumn >
115-
<FlatButton label='Delete' primary onClick={ this.handleDelete(id) } />
200+
<FlatButton primary onClick={ this.handleDelete(id) } >
201+
<FormattedMessage
202+
id='Delete'
203+
defaultMessage='Delete'
204+
/>
205+
</FlatButton>
116206
</TableRowColumn>
117207
);
118208
}
@@ -121,7 +211,12 @@ class AvailabilitiesTable extends Component {
121211
renderDeleteColumn() {
122212
if (this.props.deletable) {
123213
return (
124-
<TableHeaderColumn key='delete'>Delete</TableHeaderColumn>
214+
<TableHeaderColumn key='delete'>
215+
<FormattedMessage
216+
id='Delete'
217+
defaultMessage='Delete'
218+
/>
219+
</TableHeaderColumn>
125220
);
126221
}
127222
}

‎app/javascript/components/Homepage.js

Lines changed: 61 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import _ from 'lodash';
44

5+
import { FormattedMessage } from 'react-intl';
6+
57
import FlatButton from 'material-ui/FlatButton';
68
import RaisedButton from 'material-ui/RaisedButton';
79

@@ -33,7 +35,10 @@ class Homepage extends Component {
3335
/>
3436
</h1>
3537
<h2 className='homepageCaptionItem homepageSubtitle'>
36-
Connect and share with our community of clients and volunteers
38+
<FormattedMessage
39+
id='Homepage.subtitle'
40+
defaultMessage='Connect and share with our community of clients and volunteers'
41+
/>
3742
</h2>
3843
{ this.renderDesktopNavigation() }
3944
</div>
@@ -53,22 +58,47 @@ class Homepage extends Component {
5358
{ this.renderMobileNavigation() }
5459
</div>
5560
<main className='homepageMainContainer'>
56-
<h3>How this free service works:</h3>
61+
62+
<h3>
63+
<FormattedMessage
64+
id='Homepage.list'
65+
defaultMessage='How this free service works:'
66+
/>
67+
</h3>
68+
5769
<ul className='homepageMainList'>
5870
<li className='homepageMainListItem'>
59-
Clients post what they need help with, such as English language tutoring.
71+
<FormattedMessage
72+
id='Homepage.listItem1'
73+
defaultMessage='Clients post what they need help with, such as English language tutoring.'
74+
/>
6075
</li>
6176
<li className='homepageMainListItem'>
62-
Volunteers post what they can help with.
77+
<FormattedMessage
78+
id='Homepage.listItem2'
79+
defaultMessage='Volunteers post what they can help with.'
80+
/>
6381
</li>
6482
<li className='homepageMainListItem'>
65-
Clients contact volunteers matching their needs and availability.
83+
<FormattedMessage
84+
id='Homepage.listItem3'
85+
defaultMessage='Clients contact volunteers matching their needs and availability.'
86+
/>
6687
</li>
6788
<li className='homepageMainListItem'>
68-
After working together, volunteers and clients review each other.
89+
<FormattedMessage
90+
id='Homepage.listItem4'
91+
defaultMessage='After working together, volunteers and clients review each other.'
92+
/>
6993
</li>
7094
</ul>
71-
Questions? Email us at <a className="homepageMailToLink" href="mailto:[email protected]?Subject=Question" target="_blank" rel='noopener noreferrer'>[email protected]</a>
95+
<FormattedMessage
96+
id='Homepage.question'
97+
defaultMessage='Questions? Email us at '
98+
/>
99+
<a className="homepageMailToLink" href="mailto:[email protected]" target="_blank" rel='noopener noreferrer'>
100+
[email protected]
101+
</a>
72102
</main>
73103
</div>
74104
);
@@ -92,10 +122,20 @@ class Homepage extends Component {
92122
<RaisedButton primary label='Sign in' onClick={ this.handleSignIn } />
93123
</div>
94124
<div className='homepageButton'>
95-
<FlatButton className='homepageButton' primary label='Sign up as a volunteer' onClick={ this.handleSignUpVolunteer } />
125+
<FlatButton className='homepageButton' primary onClick={ this.handleSignUpVolunteer } >
126+
<FormattedMessage
127+
id='signUpVolunteer'
128+
defaultMessage='Sign up as a volunteer'
129+
/>
130+
</FlatButton>
96131
</div>
97132
<div className='homepageButton'>
98-
<FlatButton className='homepageButton' primary label='Sign up as a client' onClick={ this.handleSignUpClient } />
133+
<FlatButton className='homepageButton' primary label='Sign up as a client' onClick={ this.handleSignUpClient } >
134+
<FormattedMessage
135+
id='signUpClient'
136+
defaultMessage='Sign up as a client'
137+
/>
138+
</FlatButton>
99139
</div>
100140
</div>
101141
];
@@ -107,8 +147,18 @@ class Homepage extends Component {
107147
return [
108148
<div key={ 1 } className='homepageMobileNavigation' >
109149
<RaisedButton primary fullWidth label='Sign in' onClick={ this.handleSignIn } />
110-
<FlatButton primary fullWidth label='Sign up as a volunteer' onClick={ this.handleSignUpVolunteer } />
111-
<FlatButton primary fullWidth label='Sign up as a client' onClick={ this.handleSignUpClient } />
150+
<FlatButton primary fullWidth onClick={ this.handleSignUpVolunteer } >
151+
<FormattedMessage
152+
id='signUpVolunteer'
153+
defaultMessage='Sign up as a volunteer'
154+
/>
155+
</FlatButton>
156+
<FlatButton primary fullWidth onClick={ this.handleSignUpClient } >
157+
<FormattedMessage
158+
id='signUpClient'
159+
defaultMessage='Sign up as a client'
160+
/>
161+
</FlatButton>
112162
</div>
113163
];
114164
}

0 commit comments

Comments
 (0)