String IDs in the site do not match IDs in JSON files

I'm going to present an issue regarding the strings in staging.busy.org. There are cases when the id of the used string does not match the string in the locale JSON files. It results in text that is translated but the translation is not visible on the site.

VoteActionMessage.js

VoteActionMessage.js	en.json	text
user_upvoted_post	user_upvoted	"{username} upvoted"
user_downvoted_post	user_downvoted	"{username} downvoted"
user_unvoted_post	user_unvoted	"{username} unvoted"
voting_weight	vote_weight	"Vote weight"

You can see here that the strings were translated to Czech. The mismatching IDs causes trouble and the strings would actually not be seen as translated.

Another issue is that the messages with IDs in {upvoted, downvoted, unvoted} are capitalized although the text should have only the first letter in capital.

Error401.js

This file contains a message for the page warning the user that hey have to login to proceed. You can see it if you go to <staging.busy.org/wallet> while not logged in.

Error401.js	en.json
@statics/need_login	missing
@statics/here_link	missing
@statics/homepage	missing

You can see that I tried to fix this minor issue in a PR but Sekhmet also suggested another change that would require more knowledge. First new ids were suggested so that they are easier to recognize.

old ID	new ID
need_login	login_required
homepage	homepage_link
here_link	??

<p>
  <FormattedMessage
    id="@statics/need_login"
    defaultMessage="You need to login to use this feature, please"
  />{' '}
  <a href={SteemConnect.getLoginURL()}>
  <FormattedMessage id="login" defaultMessage="Login" />
  </a>
  <br />
  <FormattedMessage id="@statics/here_link" defaultMessage="Here's a link to the" />
  <Link to="/">
  <FormattedMessage id="@statics/homepage" defaultMessage="home page" />
  </Link>
   .
</p>

I had one solution in mind regarding no prior knowledge of JS or React. I changed the ids and merged some strings together in order to work with them easily. This, however, doesn't work well.

<FormattedMessage
  id="login_required"
  defaultMessage="You need to {login} to use this feature."
  values={{
    login: <Link to={SteemConnect.getLoginURL()}>login</Link>,
  }}
/>
<br />
<FormattedMessage
  id="homepage_link"
  defaultMessage="Here's a link to the {home_page}."
  values={{
    home_page: <Link to="/">home page</Link>,
  }}
/>

To have the link embedded in the string, it should probably look like this. This is probably incorrect way of doing it but it is only a suggestion and my way of understanding the issue. Those sentences must be easy to manipulate so that they can be translated without difficulties.

<FormattedMessage
  id="login_required"
  defaultMessage="You need to <a href="{SteemConnect.getLoginURL()}">login</a> to use this feature."
/>
<br />
<FormattedMessage
  id="homepage_link"
  defaultMessage="Here's a link to the <a href="/">home page</a>."
/>

---

Posted on Utopian.io - Rewarding Open Source Contributors

---