Adding translations

src/core/client/stream/tabs/profile/components/CommentsHistory.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 import { CommentsHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql";
@@ -13,7 +14,9 @@ const CommentsHistory: StatelessComponent<CommentHistoryProps> = props => {
   const comments = props.me.comments.edges.map(edge => edge.node);
   return (
     <HorizontalGutter size="double">
-      <Typography variant="heading3">Comment History</Typography>
+      <Localized id="commentHistory-commentHistory">
+        <Typography variant="heading3">Comment History</Typography>
+      </Localized>
       {comments.map(comment => (
         <HistoryComment
           key={comment.id}

src/core/client/stream/tabs/profile/components/HistoryComment.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 import Timestamp from "talk-stream/components/Timestamp";
@@ -32,13 +33,15 @@ const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
         <HorizontalGutter className={styles.sideBar}>
           <Flex direction="row" alignItems="center" itemGutter="half">
             <Icon className={styles.icon}>launch</Icon>
-            <BaseButton
-              className={styles.button}
-              onClick={props.goToConversation}
-              anchor
-            >
-              View Conversation
-            </BaseButton>
+            <Localized id="commentHistory-viewConversation">
+              <BaseButton
+                className={styles.button}
+                onClick={props.goToConversation}
+                anchor
+              >
+                View Conversation
+              </BaseButton>
+            </Localized>
           </Flex>
           <Flex direction="row" alignItems="center" itemGutter="half">
             <Icon className={styles.icon}>schedule</Icon>
@@ -54,7 +57,9 @@ const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
           className={styles.text}
         >
           <Icon className={styles.icon}>reply</Icon>
-          <span>Replies {props.comment.replyCount}</span>
+          <Localized id="commentHistory-replies">
+            <span>Replies {props.comment.replyCount}</span>
+          </Localized>
         </Flex>
       )}
     </HorizontalGutter>

src/locales/en-US/stream.ftl

@@ -68,3 +68,8 @@ comments-editCommentForm-rte =
 comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
 comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
 comments-editedMarker-edited = Edited
+
+## Comment History
+commentHistory-viewConversation = View Conversation
+commentHistory-replies = Replies
+commentHistory-commentHistory = Comment History