Skip to content
This repository was archived by the owner on Oct 30, 2025. It is now read-only.

Commit 3c0c224

Browse files
RonLekRonLek
committed
[REF|NEW] Changes Home strings to localized string resources
1 parent fca953b commit 3c0c224

4 files changed

Lines changed: 120 additions & 30 deletions

File tree

‎client/src/components/Home/index.js‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import Countup from "./../common/Countup";
2121
import { rcApiDomain } from "../../utils/constants";
2222
import VisibilitySensor from "react-visibility-sensor";
2323
import RCSwitch from "../RCSwitch";
24+
import { Trans, useTranslation } from 'react-i18next';
2425

2526
import "./index.css";
2627

@@ -30,6 +31,9 @@ export default function Home(props) {
3031
const [carouselValue, setCarouselValue] = useState(0);
3132
const [startCounter, setStartCounter] = useState(false);
3233
const [demoMode, setDemoMode] = useState(false);
34+
35+
const { t, i18n } = useTranslation();
36+
3337
const carouselItems = [
3438
{
3539
name: "Data protection solutions",
@@ -162,7 +166,7 @@ export default function Home(props) {
162166
return (
163167
<div className="home-wrapper">
164168
<div className="demo-mode-toggle">
165-
<p>Demo Mode</p>
169+
<p>{t('Demo_Mode')}</p>
166170
<RCSwitch
167171
checked={demoMode}
168172
onChange={() => setDemoMode(!demoMode)}
@@ -174,23 +178,25 @@ export default function Home(props) {
174178
<>
175179
<header className="unsigned-home-header">
176180
<h1 className="unsigned-home-heading">
177-
Real-time Collaboration
181+
{t('unsigned-home.heading')}
178182
<br />
179183
<a
180184
href="http://github.com/RocketChat/RC4Community"
181185
rel="noreferrer"
182186
target="_blank"
183187
className="powered-by-title"
184188
>
185-
<strong>Powered by RCforCommunities</strong>
189+
<strong>{t('unsigned-home.subheading')}</strong>
186190
</a>
187191
</h1>
188192

189193
<p className="unsigned-home-text">
194+
<Trans i18nKey="unsigned-home.description">
190195
<strong>Monitor</strong> your <strong>workflows</strong>,
191196
<strong>collaborate</strong> and <strong>access data</strong>{" "}
192197
any time you need it, all in one{" "}
193198
<strong>productivity-amplifying</strong> full-lifecycle platform
199+
</Trans>
194200
</p>
195201
</header>
196202
<main>
@@ -205,7 +211,7 @@ export default function Home(props) {
205211
className="stat-number"
206212
startCounter={true}
207213
/>
208-
<div className="stat-label">Users</div>
214+
<div className="stat-label">{t('unsigned-home.users-stats-label')}</div>
209215
</div>
210216
<div className="stat-container">
211217
<img
@@ -217,7 +223,7 @@ export default function Home(props) {
217223
className="stat-number"
218224
startCounter={true}
219225
/>
220-
<div className="stat-label">Messages Exchanged</div>
226+
<div className="stat-label">{t('unsigned-home.messages-exchanged-stats-label')}</div>
221227
</div>
222228
<div className="stat-container">
223229
<img
@@ -229,12 +235,12 @@ export default function Home(props) {
229235
className="stat-number"
230236
startCounter={true}
231237
/>
232-
<div className="stat-label">Online Users</div>
238+
<div className="stat-label">{t('unsigned-home.online-users-stats-label')}</div>
233239
</div>
234240
</div>
235241
<div className="button-container">
236242
<Button variant="contained" color="primary" href="/login">
237-
JOIN NOW TO EXPLORE MORE
243+
{t('unsigned-home.join-button')}
238244
</Button>
239245
</div>
240246
</main>
@@ -243,15 +249,17 @@ export default function Home(props) {
243249
<>
244250
<header className="unsigned-home-header">
245251
<h1 className="unsigned-home-heading">
246-
Welcome to our Community
252+
{t("unsigned-home-demo.heading")}
247253
<br />
248254
</h1>
249255

250256
<p className="unsigned-home-text">
257+
<Trans i18nKey="unsigned-home-demo.description">
251258
<strong>Monitor</strong> your <strong>workflows</strong>,
252259
<strong>collaborate</strong> and <strong>access data</strong>{" "}
253260
any time you need it, all in one{" "}
254261
<strong>productivity-amplifying</strong> full-lifecycle platform
262+
</Trans>
255263
</p>
256264
<br />
257265

@@ -263,10 +271,10 @@ export default function Home(props) {
263271
displayEmpty
264272
inputProps={{ "aria-label": "Without label" }}
265273
>
266-
<MenuItem value="">All Communities</MenuItem>
267-
<MenuItem value={10}>Rooms</MenuItem>
268-
<MenuItem value={20}>Users</MenuItem>
269-
<MenuItem value={30}>Messages</MenuItem>
274+
<MenuItem value="">{t("unsigned-home-demo.menu-item-1")}</MenuItem>
275+
<MenuItem value={10}>{t("unsigned-home-demo.menu-item-2")}</MenuItem>
276+
<MenuItem value={20}>{t("unsigned-home-demo.menu-item-3")}</MenuItem>
277+
<MenuItem value={30}>{t("unsigned-home-demo.menu-item-4")}</MenuItem>
270278
</Select>
271279

272280
<TextField
@@ -286,11 +294,11 @@ export default function Home(props) {
286294

287295
<div className="button-container">
288296
<Button variant="contained" color="primary" href="/login">
289-
JOIN TO EXPLORE
297+
{t('unsigned-home-demo.join-button')}
290298
</Button>
291299
</div>
292300
</header>
293-
<h1 className="stats-heading">Get More Done, Together!</h1>
301+
<h1 className="stats-heading">{t('unsigned-home-demo.stats-heading')}</h1>
294302
<div className="main-stats-container">
295303
<div className="stat-container">
296304
<img
@@ -304,7 +312,7 @@ export default function Home(props) {
304312
startCounter={startCounter}
305313
/>
306314
</VisibilitySensor>
307-
<div className="stat-label">Users</div>
315+
<div className="stat-label">{t('unsigned-home-demo.users-stats-label')}</div>
308316
</div>
309317
<div className="stat-container">
310318
<img
@@ -319,7 +327,7 @@ export default function Home(props) {
319327
/>
320328
</VisibilitySensor>
321329

322-
<div className="stat-label">Messages Exchanged</div>
330+
<div className="stat-label">{t('unsigned-home-demo.messages-exchanged-stats-label')}</div>
323331
</div>
324332
<div className="stat-container">
325333
<img
@@ -333,10 +341,10 @@ export default function Home(props) {
333341
startCounter={startCounter}
334342
/>
335343
</VisibilitySensor>
336-
<div className="stat-label">Online Users</div>
344+
<div className="stat-label">{t('unsigned-home-demo.online-users-stats-label')}</div>
337345
</div>
338346
</div>
339-
<h1 className="featured-content-heading">Featured Content</h1>
347+
<h1 className="featured-content-heading">{t('unsigned-home-demo.blogs-heading')}</h1>
340348
<Carousel
341349
onChange={onCarouselChange}
342350
value={carouselValue}
@@ -367,27 +375,27 @@ export default function Home(props) {
367375
},
368376
]}
369377
/>
370-
<h1 className="select-role-heading">Select Your Role</h1>
378+
<h1 className="select-role-heading">{t('unsigned-home-demo.select-role-heading')}</h1>
371379
<div className="select-role-buttons-row">
372380
<div className="select-role-button">
373381
<RiAdminLine className="select-role-button-icon" />
374-
<span>Admin</span>
382+
<span>{t('unsigned-home-demo.admin-role')}</span>
375383
</div>
376384
<div className="select-role-button">
377385
<FaLaptopCode className="select-role-button-icon" />
378-
<span>Developer</span>
386+
<span>{t('unsigned-home-demo.developer-role')}</span>
379387
</div>
380388
<div className="select-role-button">
381389
<BsChatDots className="select-role-button-icon" />
382-
<span>Live Chat User</span>
390+
<span>{t('unsigned-home-demo.live-chat-user-role')}</span>
383391
</div>
384392
<div className="select-role-button">
385393
<FaRegSun className="select-role-button-icon" />
386-
<span>GSoC Student</span>
394+
<span>{t('unsigned-home-demo.gsoc-student-role')}</span>
387395
</div>
388396
</div>
389397
<div className="communities-wrapper">
390-
<h1>Community Activity</h1>
398+
<h1>{t('unsigned-home-demo.community-activity-heading')}</h1>
391399
{activityItems.map((item) => (
392400
<div className="community-activity-wrapper">
393401
<div className="community-activity-content">
@@ -430,12 +438,12 @@ export default function Home(props) {
430438
<h2>
431439
{getGreetings()}, {props.authState.user.name}
432440
</h2>
433-
<p>We're ready to go.</p>
441+
<p>{t('signed-home.heading')}</p>
434442
</header>
435443
<div class="signed-home-main">
436444
<div>
437445
<div class="signed-home-shortcut-container">
438-
<h5>Start something new</h5>
446+
<h5>{t('signed-home.start-heading')}</h5>
439447
<div
440448
className="signed-home-shortcut"
441449
onClick={() => {
@@ -447,11 +455,11 @@ export default function Home(props) {
447455
className="shortcut-icon-medium"
448456
alt="room"
449457
/>
450-
Create a room
458+
{t('signed-home.create-room')}
451459
</div>
452460
</div>
453461
<div className="signed-home-shortcut-container">
454-
<h5>Explore more</h5>
462+
<h5>{t('signed-home.explore-heading')}</h5>
455463
<div
456464
className="signed-home-shortcut"
457465
onClick={() => {
@@ -463,7 +471,7 @@ export default function Home(props) {
463471
className="shortcut-icon-small"
464472
alt="search"
465473
/>
466-
Discover existing rooms
474+
{t('signed-home.discover-rooms')}
467475
</div>
468476
</div>
469477
</div>

‎client/src/i18n.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import i18n from 'i18next'
2+
import LanguageDetector from "i18next-browser-languagedetector"
3+
import {initReactI18next} from 'react-i18next'
4+
import XHR from 'i18next-xhr-backend'
5+
import languageEN from './locate/en/translate.json'
6+
7+
i18n
8+
.use(XHR)
9+
.use(LanguageDetector)
10+
.use(initReactI18next)
11+
.init({
12+
resources: {
13+
// Add language resources here
14+
en: languageEN,
15+
},
16+
/* default language when load the website in browser */
17+
lng: "en",
18+
/* When react i18next not finding any language to as default in borwser */
19+
fallbackLng: "en",
20+
/* debugger For Development environment */
21+
debug: true,
22+
ns: ["translations"],
23+
defaultNS: "translations",
24+
keySeparator: ".",
25+
interpolation: {
26+
escapeValue: false,
27+
formatSeparator: ","
28+
},
29+
react: {
30+
wait: true,
31+
bindI18n: 'languageChanged loaded',
32+
bindStore: 'added removed',
33+
nsMode: 'default'
34+
}
35+
})
36+
37+
export default i18n;

‎client/src/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './index.css';
44
import App from './components/App';
5+
import { I18nextProvider } from 'react-i18next';
6+
import i18n from './i18n'
57

68
ReactDOM.render(
79
<React.StrictMode>
8-
<App />
10+
<I18nextProvider i18n={i18n}>
11+
<App />
12+
</I18nextProvider>,
913
</React.StrictMode>,
1014
document.getElementById('root')
1115
);

‎client/src/locate/en/translate.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"translations": {
3+
"Demo_Mode": "Demo Mode",
4+
"unsigned-home": {
5+
"heading": "Real-time Collaboration",
6+
"subheading": "Powered by Communities",
7+
"description": "<strong>Monitor</strong> your <strong>workflows</strong>, <strong>collaborate</strong> and <strong>access data</strong> any time you need it, all in one <strong>productivity-amplifying</strong> full-lifecycle platform",
8+
"users-stats-label": "Users",
9+
"messages-exchanged-stats-label": "Messages Exchanged",
10+
"online-users-stats-label": "Online Users",
11+
"join-button": "JOIN NOW TO EXPLORE MORE"
12+
},
13+
"unsigned-home-demo": {
14+
"heading": "Welcome to our Community",
15+
"description": "<strong>Monitor</strong> your <strong>workflows</strong>, <strong>collaborate</strong> and <strong>access data</strong> any time you need it, all in one <strong>productivity-amplifying</strong> full-lifecycle platform",
16+
"menu-item-1": "All Communities",
17+
"menu-item-2": "Rooms",
18+
"menu-item-3": "Users",
19+
"menu-item-4": "Messages",
20+
"join-button": "JOIN TO EXPLORE",
21+
"stats-heading": "Get More Done, Together!",
22+
"users-stats-label": "Users",
23+
"messages-exchanged-stats-label": "Messages Exchanged",
24+
"online-users-stats-label": "Online Users",
25+
"blogs-heading": "Featured Content",
26+
"select-role-heading": "Select Your Role",
27+
"admin-role": "Admin",
28+
"developer-role": "Developer",
29+
"live-chat-user-role": "Live Chat User",
30+
"gsoc-student-role": "GSoC Student",
31+
"community-activity-heading": "Community Activity"
32+
},
33+
"signed-home": {
34+
"heading": "We're ready to go.",
35+
"start-heading": "Start something new",
36+
"create-room": "Create a room",
37+
"explore-heading": "Explore more",
38+
"discover-rooms": "Discover existing rooms"
39+
}
40+
}
41+
}

0 commit comments

Comments
 (0)