Use translation files in more side content components

Author: RichDom2185

src/commons/sideContent/content/SideContentContestVoting.tsx

@@ -2,6 +2,7 @@ import { Button, Card, Classes, Collapse, Elevation, Icon, Pre, Tooltip } from '
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ContestEntry } from '../../assessment/AssessmentTypes';
 
@@ -34,6 +35,7 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
   handleContestEntryClick,
   handleVotingSubmissionChange
 }) => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'contestVoting' });
   const [showContestEntries, setShowContestEntries] = useState(true);
   const [currentDraggedItem, setCurrentDraggedItem] = useState<HTMLElement | null>(null);
   const [hoveredTier, setHoveredTier] = useState<string | null>(null);
@@ -166,21 +168,22 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
             </div>
           </div>
         ) : (
-          <div className="noResults">There are no eligible entries for voting found.</div>
+          <div className="noResults">{t('noEntries')}</div>
         )}
       </div>
     ),
     [
-      isValid,
-      canSave,
+      tierBoard,
       sortedContestEntries,
-      handleContestEntryClick,
-      handleDragEnd,
-      handleDragEnter,
-      handleDragLeave,
       handleDragOver,
+      handleDragLeave,
+      handleDragEnter,
       handleDrop,
-      tierBoard
+      t,
+      isValid,
+      canSave,
+      handleDragEnd,
+      handleContestEntryClick
     ]
   );
 
@@ -209,15 +212,11 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
       <Button
         className="collapse-button"
         icon={showContestEntries ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT}
-        minimal={true}
+        variant="minimal"
         onClick={() => setShowContestEntries(!showContestEntries)}
       >
-        <span>Contest Voting</span>
-        <Tooltip
-          content={
-            <span>Rank your favourite contest entries from tiers D (worst) to S (best)!</span>
-          }
-        >
+        <span>{t('title')}</span>
+        <Tooltip content={<span>{t('tooltip')}</span>}>
           <Icon icon={IconNames.HELP} />
         </Tooltip>
       </Button>

src/commons/sideContent/content/SideContentFaceapiDisplay.tsx

@@ -1,8 +1,10 @@
 import { Button, Divider } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 const SideContentFaceapiDisplay: React.FC = () => {
+  const { t } = useTranslation('sideContent', { keyPrefix: 'faceapiDisplay' });
   const browserWindow = window as any;
 
   const takePhotoA = () => browserWindow.video.takePhotoA();
@@ -25,7 +27,7 @@ const SideContentFaceapiDisplay: React.FC = () => {
           style={{ height: 20 }}
           icon={IconNames.CAMERA}
           onClick={takePhoto}
-          text={'Take picture'}
+          text={t('takePicture')}
         />
       </div>
       <Divider />
@@ -39,7 +41,7 @@ const SideContentFaceapiDisplay: React.FC = () => {
           style={{ height: 20 }}
           icon={IconNames.RESET}
           onClick={resetPhoto}
-          text={'Reset'}
+          text={t('reset')}
         />
       </div>
     </div>