feat: Add wording translation

Author: badgooooor

public/locales/en/files.json

@@ -153,5 +153,14 @@
     "pleaseWait": "Please wait while the initial 20 copies of the updated IPNS record are stored with the help of DHT peers…"
   },
   "noPinsInProgress": "All done, no remote pins in progress.",
-  "remotePinningInProgress": "Remote pinning in progress:"
+  "remotePinningInProgress": "Remote pinning in progress:",
+  "previewNotFound": {
+    "title": "IPFS can't find this item",
+    "helpTitle": "These are common troubleshooting steps might help:",
+    "helpListItemPathTypo": "Are there typos in the path you entered?",
+    "helpListItemFileMoved": "Was the file moved, renamed, or deleted?",
+    "helpListItemBookmarkMigrated": "Did you copy a URL or bookmark from another computer? If so, you'll need to",
+    "helpListItemBookmarkMigratedLink": "point this instance at that computer's node",
+    "backButton": "Go to Home"
+  }
 }

src/files/FilesPage.js

@@ -12,14 +12,14 @@ import withTour from '../components/tour/withTour.js'
 import InfoBoxes from './info-boxes/InfoBoxes.js'
 import FilePreview from './file-preview/FilePreview.js'
 import FilesList from './files-list/FilesList.js'
+import FileNotFound from './file-not-found/FileNotFound.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Icons
 import Modals, { DELETE, NEW_FOLDER, ADD_BY_CAR, SHARE, RENAME, ADD_BY_PATH, BULK_CID_IMPORT, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
 import Header from './header/Header.js'
 import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
-import { FileNotFound } from './file-not-found/FileNotFound.js'
 
 const FilesPage = ({
   doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doAddCarFile, doFilesBulkCidImport, doFilesAddPath, doUpdateHash,
@@ -229,7 +229,7 @@ const FilesPage = ({
 
       <MainView t={t} files={files} remotePins={remotePins} pendingPins={pendingPins} failedPins={failedPins} doExploreUserProvidedPath={doExploreUserProvidedPath}/>
 
-      <Preview files={files} path={filesPathInfo.path} onDownload={() => onDownload([files])} />
+      <Preview files={files} path={filesPathInfo.path} t={t} onDownload={() => onDownload([files])} />
 
       <InfoBoxes isRoot={filesPathInfo.isMfs && filesPathInfo.isRoot}
         isCompanion={false}
@@ -265,13 +265,13 @@ const FilesPage = ({
   )
 }
 
-const Preview = ({ files, path, onDownload }) => {
+const Preview = ({ files, path, t, onDownload }) => {
   if (files && files.type === 'file') {
     return (<FilePreview {...files} onDownload={onDownload} />)
   }
 
   return (
-    <FileNotFound path={path} />
+    <FileNotFound path={path} t={t} />
   )
 }
 

src/files/file-not-found/FileNotFound.js

@@ -3,29 +3,30 @@ import React from 'react'
 import Button from '../../components/button/button'
 
 import GlyphAttention from '../../icons/GlyphAttention.js'
+import { withTranslation } from 'react-i18next'
 
-const FileNotFound = ({ path }) => {
+const FileNotFound = ({ path, t }) => {
   return (
     <div
       className='mb3 pa4-l pa2 mw9 center'
       style={{ background: 'rgba(251, 251, 251)' }}
     >
       <div className='flex flex-row items-center mb3'>
         <GlyphAttention style={{ height: 76 }} className='fill-red mr' role='presentation' />
-        <div className='red fw6 truncate'>IPFS can't find this item</div>
+        <div className='red fw6 truncate'>{t('previewNotFound.title')}</div>
       </div>
       <div className='mb3 charcoal fw6 truncate'>{path}</div>
-      <div className='mb3'>These are common troubleshooting steps might help:</div>
+      <div className='mb3'>{t('previewNotFound.helpTitle')}</div>
       <ul>
-        <li>Are there typos in the path you entered?</li>
-        <li>Was the file moved, renamed, or deleted?</li>
-        <li>Did you copy a URL or bookmark from another computer? If so, you'll need to <a href="#/peers">point this instance at that computer's node</a>.</li>
+        <li>{t('previewNotFound.helpListItemPathTypo')}</li>
+        <li>{t('previewNotFound.helpListItemFileMoved')}</li>
+        <li>{t('previewNotFound.helpListItemBookmarkMigrated')} <a href="#/peers">{t('previewNotFound.helpListItemBookmarkMigratedLink')}</a>.</li>
       </ul>
       <a href="#/files">
-        <Button className='ma2 tc' bg='bg-teal'>Go to Home</Button>
+        <Button className='ma2 tc' bg='bg-teal'>{t('previewNotFound.backButton')}</Button>
       </a>
     </div>
   )
 }
 
-export { FileNotFound }
+export default withTranslation('files')(FileNotFound)