Update dataviz to use translations

Author: RichDom2185

src/commons/sideContent/content/SideContentCseMachine.tsx

@@ -548,9 +548,12 @@ const makeCseMachineTabFrom = (location: NonStoryWorkspaceLocation): SideContent
   id: SideContentType.cseMachine
 });
 
-const ItalicLink: React.FC<{ href: string; children?: React.ReactNode }> = ({ href, children }) => {
+export const ItalicLink: React.FC<{ href: string; children?: React.ReactNode }> = ({
+  href,
+  children
+}) => {
   return (
-    <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
+    <a href={href} rel="noopener noreferrer" target="_blank">
       <i>{children}</i>
     </a>
   );

src/commons/sideContent/content/SideContentDataVisualizer.tsx

@@ -4,6 +4,7 @@ import { HotkeyItem } from '@mantine/hooks';
 import { bindActionCreators } from '@reduxjs/toolkit';
 import classNames from 'classnames';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { connect, MapDispatchToProps } from 'react-redux';
 import HotKeys from 'src/commons/hotkeys/HotKeys';
 
@@ -12,6 +13,7 @@ import { Step } from '../../../features/dataVisualizer/dataVisualizerTypes';
 import { Links } from '../../utils/Constants';
 import { beginAlertSideContent } from '../SideContentActions';
 import { SideContentLocation, SideContentTab, SideContentType } from '../SideContentTypes';
+import { ItalicLink } from './SideContentCseMachine';
 
 type State = {
   steps: Step[];
@@ -127,36 +129,7 @@ class SideContentDataVisualizerBase extends React.Component<OwnProps & DispatchP
               ))}
             </div>
           ) : (
-            <p id="data-visualizer-default-text" className={Classes.RUNNING_TEXT}>
-              The data visualizer helps you to visualize data structures.
-              {this.state.steps}
-              <br />
-              <br />
-              It is activated by calling the function{' '}
-              <code>
-                draw_data(x<sub>1</sub>, x<sub>2</sub>, ... x<sub>n</sub>)
-              </code>
-              , where{' '}
-              <code>
-                x<sub>k</sub>
-              </code>{' '}
-              would be the{' '}
-              <code>
-                k<sup>th</sup>
-              </code>{' '}
-              data structure that you want to visualize and <code>n</code> is the number of
-              structures.
-              <br />
-              <br />
-              The data visualizer uses box-and-pointer diagrams, as introduced in{' '}
-              <a href={Links.textbookChapter2_2} rel="noopener noreferrer" target="_blank">
-                <i>
-                  Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 2,
-                  Section 2
-                </i>
-              </a>
-              .
-            </p>
+            <DataVisualizerDefaultText />
           )}
         </div>
       </HotKeys>
@@ -199,4 +172,38 @@ const makeDataVisualizerTabFrom = (location: SideContentLocation): SideContentTa
   id: SideContentType.dataVisualizer
 });
 
+const DataVisualizerDefaultText: React.FC = () => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'dataVisualizer' });
+  return (
+    <p id="data-visualizer-default-text" className={Classes.RUNNING_TEXT}>
+      {t('defaultText')}
+      <br />
+      <br />
+      <Trans
+        ns="sideContent"
+        i18nKey="dataVisualizer.instructions"
+        components={[
+          <code>
+            draw_data(x<sub>1</sub>, x<sub>2</sub>, ... x<sub>n</sub>)
+          </code>,
+          <code>
+            x<sub>k</sub>
+          </code>,
+          <code>
+            k<sup>th</sup>
+          </code>,
+          <code>n</code>
+        ]}
+      />
+      <br />
+      <br />
+      <Trans
+        ns="sideContent"
+        i18nKey="dataVisualizer.reference"
+        components={[<ItalicLink href={Links.textbookChapter2_2} />]}
+      />
+    </p>
+  );
+};
+
 export default makeDataVisualizerTabFrom;

src/i18n/locales/en/sideContent/dataVisualizer.json

@@ -1,7 +1,7 @@
 {
   "defaultText": "The data visualizer helps you to visualize data structures.",
-  "instructions": "It is activated by calling the function draw_data(x₁, x₂, ... xₙ), where xₖ would be the kᵗʰ data structure that you want to visualize and n is the number of structures.",
-  "reference": "The data visualizer uses box-and-pointer diagrams, as introduced in Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 2, Section 2.",
+  "instructions": "It is activated by calling the function <0/>, where <1/> would be the <2/> data structure that you want to visualize and <3/> is the number of structures.",
+  "reference": "The data visualizer uses box-and-pointer diagrams, as introduced in <0>Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 2, Section 2</0>.",
   "label": "Data Visualizer",
   "previous": "Previous",
   "next": "Next"

src/i18n/locales/zh-SG/sideContent/dataVisualizer.json

@@ -1,7 +1,7 @@
 {
   "defaultText": "数据可视化工具帮助您可视化数据结构。",
-  "instructions": "通过调用函数 draw_data(x₁, x₂, ... xₙ) 激活，其中 xÔéû 是您想要可视化的 kßÁù╩░ 数据结构，n 是结构的数量。",
-  "reference": "数据可视化工具使用框图和指针图，这些图基于《计算机程序的构造和解释，JavaScript 版》第 2 章第 2 节中介绍的符号。",
+  "instructions": "通过调用函数 <0/> 激活，其中 <1/> 是您想要可视化的 <2/> 数据结构，<3/> 是结构的数量。",
+  "reference": "数据可视化工具使用框图和指针图，这些图基于<0>《计算机程序的构造和解释，JavaScript 版》第 2 章第 2 节</0>中介绍的符号。",
   "label": "数据可视化工具",
   "previous": "上一个",
   "next": "下一个"