Use intl in profile general tab titles

packages/concordia-app/public/locales/en/translation.json

@@ -2,11 +2,26 @@
   "board.header.no.topics.message": "There are no topics yet!",
   "board.sub.header.no.topics.guest": "Sign up and be the first to post.",
   "board.sub.header.no.topics.user": "Be the first to post.",
+  "custom.loading.tab.pane.default.generic.message": "Magic in the background",
   "post.create.form.send.button": "Post",
   "post.form.content.field.placeholder": "Message",
   "post.form.subject.field.placeholder": "Subject",
   "post.list.row.author.pre": "Post by",
   "post.list.row.post.id": "#{{id}}",
+  "profile.general.tab.address.row.title": "Account address:",
+  "profile.general.tab.location.row.title": "Location:",
+  "profile.general.tab.number.of.posts.row.title": "Number of posts:",
+  "profile.general.tab.number.of.topics.row.title": "Number of topics created:",
+  "profile.general.tab.posts.db.address.row.title": "PostsDB:",
+  "profile.general.tab.registration.date.row.title": "Member since:",
+  "profile.general.tab.title": "General",
+  "profile.general.tab.topics.db.address.row.title": "TopicsDB:",
+  "profile.general.tab.user.db.address.row.title": "UserDB:",
+  "profile.general.tab.username.row.title": "Username:",
+  "profile.posts.tab.title": "Posts",
+  "profile.topics.tab.title": "Topics",
+  "profile.user.has.no.posts.header.message": "{{user}} has not posted yet",
+  "profile.user.has.no.topics.header.message": "{{user}} has created no topics yet",
   "register.card.header": "Sign Up",
   "register.form.button.back": "Back",
   "register.form.header.already.member.message": "There is already an account for this address.\nIf you want to create another account please change your address.",
@@ -39,11 +54,5 @@
   "topic.create.form.subject.field.placeholder": "Subject",
   "topic.list.row.author.date": "Created by {{author}}, {{timeAgo}}",
   "topic.list.row.number.of.replies": "{{numberOfReplies}} replies",
-  "topic.list.row.topic.id": "#{{id}}",
+  "topic.list.row.topic.id": "#{{id}}"
-  "custom.loading.tab.pane.default.generic.message": "Magic in the background",
-  "profile.user.has.no.topics.header.message": "{{user}} has created no topics yet",
-  "profile.user.has.no.posts.header.message": "{{user}} has not posted yet",
-  "profile.general.tab.title": "General",
-  "profile.topics.tab.title": "Topics",
-  "profile.posts.tab.title": "Posts"
 }

packages/concordia-app/src/components/CustomLoadingTabPane.jsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Dimmer, Loader, Placeholder, Segment, Tab,
+  Dimmer, Loader, Placeholder, Tab,
 } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 

packages/concordia-app/src/views/Profile/GeneralTab/index.jsx

@@ -5,6 +5,7 @@ import {
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import determineKVAddress from '../../../utils/orbitUtils';
 import databases, { USER_DATABASE } from '../../../constants/OrbitDatabases';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
@@ -24,6 +25,7 @@ const GeneralTab = (props) => {
   const [profileMeta, setProfileMeta] = useState(null);
   const users = useSelector((state) => state.orbitData.users);
   const dispatch = useDispatch();
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (profileAddress) {
@@ -85,45 +87,45 @@ const GeneralTab = (props) => {
                   <Table.Cell colSpan="3">{authorAvatar}</Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>Username:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.username.row.title')}</strong></Table.Cell>
                   <Table.Cell>{username}</Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>Account address:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.address.row.title')}</strong></Table.Cell>
                   <Table.Cell>{profileAddress}</Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>UserDB:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.user.db.address.row.title')}</strong></Table.Cell>
                   <Table.Cell>
                       {userInfoOrbitAddress || (<Placeholder><Placeholder.Line /></Placeholder>)}
                   </Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>TopicsDB:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.topics.db.address.row.title')}</strong></Table.Cell>
                   <Table.Cell>
                       {userTopicsOrbitAddress || (<Placeholder><Placeholder.Line /></Placeholder>)}
                   </Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>PostsDB:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.posts.db.address.row.title')}</strong></Table.Cell>
                   <Table.Cell>
                       {userPostsOrbitAddress || (<Placeholder><Placeholder.Line /></Placeholder>)}
                   </Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>Number of topics created:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.number.of.topics.row.title')}</strong></Table.Cell>
                   <Table.Cell>
                       {numberOfTopics}
                   </Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>Number of posts:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.number.of.posts.row.title')}</strong></Table.Cell>
                   <Table.Cell>
                       {numberOfPosts}
                   </Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>Number of posts:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.location.row.title')}</strong></Table.Cell>
                   <Table.Cell>
                       {profileMeta !== null && profileMeta[USER_LOCATION]
                         ? profileMeta[USER_LOCATION]
@@ -131,7 +133,7 @@ const GeneralTab = (props) => {
                   </Table.Cell>
               </Table.Row>
               <Table.Row>
-                  <Table.Cell><strong>Member since:</strong></Table.Cell>
+                  <Table.Cell><strong>{t('profile.general.tab.registration.date.row.title')}</strong></Table.Cell>
                   <Table.Cell>
                       {moment(userRegistrationTimestamp * 1000).format('dddd, MMMM Do YYYY, h:mm:ss A')}
                   </Table.Cell>