UI: Add documentation on app localization script

[samundra]

Current, application supports localization. All localization texts are updated with google spreadsheet. Link to google spreadsheet is https://docs.google.com/spreadsheets/d/1uwAk1xYNKc6S15ytl5OnPYCUKXxF8af4Cd6nFHgQCaM/edit#gid=1602672055

Whenever, we need to add/remove localization in app. This google spreadsheet has to be updated first. After google spreadsheet is updated, we have to run command yarn run fetch-language from project root directory.

OUTPUT OF yarn run fetch-language

~/personal/www/whoowesme/frontend (feature/issue-177 ✘)✹✭ ᐅ npm run fetch-language

> [email protected] fetch-language /Users/samundra/personal/www/whoowesme/frontend
> node scripts/load-language.js && eslint --fix src/i18n/languages/*.ts && prettier --write src/i18n/languages/*.ts

Read credentials.json
Read token from file token.json
Finished fetching spreadsheet
Finished fetching worksheet: Dashboard
Finished fetching worksheet: Menu
Finished fetching worksheet: ProfileMenu
Finished fetching worksheet: Common
Finished fetching worksheet: Error
Finished writing file /Users/samundra/personal/www/whoowesme/frontend/src/i18n/languages/ne.ts
Finished writing file /Users/samundra/personal/www/whoowesme/frontend/src/i18n/languages/en.ts
Finished writing file /Users/samundra/personal/www/whoowesme/frontend/src/i18n/languages/keys.ts
src/i18n/languages/en.ts 230ms
src/i18n/languages/keys.ts 21ms
src/i18n/languages/ne.ts 17ms

This will fetch latest changes from google spreadsheet and automatically updates app localization keys.

Then we can reference these updated keys in application as follows.

Import these files at top.

import { translate } from 'i18n'
import TKeys from 'i18n/translationKey

Then refer to keys as listed in google spreadsheet.

<span>{translate(TKeys.Menu.summary)}</span>

Here Menu is Google Sheet name and summary is key inside that sheet.

See screenshot below: