BoostIO · Rokt33r · Dec 24, 2019 · Dec 24, 2019 · Dec 24, 2019 · Dec 24, 2019
diff --git a/src/components/NotePage/NoteList/NoteItem.tsx b/src/components/NotePage/NoteList/NoteItem.tsx
@@ -15,6 +15,7 @@ import { scaleAndTransformFromLeft } from '../../../lib/styled'
 import { PopulatedNoteDoc } from '../../../lib/db/types'
 import { useContextMenu, MenuTypes } from '../../../lib/contextMenu'
 import { useDb } from '../../../lib/db'
+import { useTranslation } from 'react-i18next'
 
 export const StyledNoteListItem = styled.div`
   margin: 0;
@@ -109,14 +110,16 @@ export default ({
   const { popup } = useContextMenu()
   const { createNote, trashNote, updateNote } = useDb()
 
+  const { t } = useTranslation()
+
   const contextMenuCallback = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation()
       event.preventDefault()
       popup(event, [
         {
           type: MenuTypes.Normal,
-          label: 'Duplicate',
+          label: t('note.duplicate'),
           onClick: async () => {
             createNote(note.storageId, {
               title: note.title,
@@ -130,14 +133,14 @@ export default ({
         },
         {
           type: MenuTypes.Normal,
-          label: 'Delete',
+          label: t('note.delete'),
           onClick: async () => {
             trashNote(note.storageId, note._id)
           }
         },
         {
           type: MenuTypes.Normal,
-          label: note.bookmarked ? 'Remove Bookmark' : 'Bookmark',
+          label: note.bookmarked ? t('bookmark.remove') : t('bookmark.add'),
           onClick: async () => {
             note.bookmarked = !note.bookmarked
             updateNote(note.storageId, note._id, note)
@@ -161,13 +164,13 @@ export default ({
         .shift()
 
       return contentToHighlight == null ? (
-        'Empty note'
+        t('note.empty')
       ) : (
         <HighlightText text={contentToHighlight} search={search} />
       )
     }
 
-    return trimmedContent.split('\n').shift() || 'Empty note'
+    return trimmedContent.split('\n').shift() || t('note.empty')
   }, [note.content, search])
 
   const handleDragStart = useCallback(
@@ -189,9 +192,11 @@ export default ({
           <div className='title'>
             <HighlightText text={note.title} search={search} />
           </div>
-          {note.title.length === 0 && <div className='title'>No title</div>}
+          {note.title.length === 0 && (
+            <div className='title'>{t('note.noTitle')}</div>
+          )}
           <div className='date'>
-            {formatDistanceToNow(new Date(note.updatedAt))} ago
+            {formatDistanceToNow(new Date(note.updatedAt))} {t('note.date')}
           </div>
           <div className='preview'>{contentPreview}</div>
           {note.tags.length > 0 && (

diff --git a/src/components/NotePage/NoteList/NoteList.tsx b/src/components/NotePage/NoteList/NoteList.tsx
@@ -13,6 +13,7 @@ import {
   iconColor
 } from '../../../lib/styled/styleFunctions'
 import { IconEdit, IconLoupe } from '../../icons'
+import { useTranslation } from 'react-i18next'
 
 export const StyledNoteListContainer = styled.div`
   display: flex;
@@ -81,6 +82,8 @@ type NoteListProps = {
   lastCreatedNoteId: string
 }
 
+const { t } = useTranslation()
+
 const NoteList = ({
   notes,
   createNote,
@@ -127,7 +130,7 @@ const NoteList = ({
             className='input'
             value={search}
             onChange={updateSearchInput}
-            placeholder='Search Notes'
+            placeholder={t('note.search')}
           />
           <IconLoupe className='icon' size='0.8em' />
         </div>
@@ -156,9 +159,9 @@ const NoteList = ({
         })}
         {notes.length === 0 ? (
           search.trim() === '' ? (
-            <li className='empty'>No notes</li>
+            <li className='empty'>{t('note.nothing')}</li>
           ) : (
-            <li className='empty'>No notes could be found.</li>
+            <li className='empty'>{t('note.nothingMessage')}</li>
           )
         ) : null}
       </ul>

diff --git a/src/components/NotePage/NotePage.tsx b/src/components/NotePage/NotePage.tsx
@@ -23,6 +23,7 @@ import {
 import { useGeneralStatus, ViewModeType } from '../../lib/generalStatus'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { escapeRegExp } from '../../lib/regex'
+import { useTranslation } from 'react-i18next'
 
 export const StyledNoteDetailNoNote = styled.div`
   text-align: center;
@@ -59,6 +60,8 @@ export default () => {
   const { push } = useRouter()
   const [lastCreatedNoteId, setLastCreatedNoteId] = useState<string>('')
 
+  const { t } = useTranslation()
+
   useEffect(() => {
     setLastCreatedNoteId('')
   }, [currentPathnameWithoutNoteId])
@@ -216,10 +219,10 @@ export default () => {
   const purgeNote = useCallback(
     (storageId: string, noteId: string) => {
       messageBox({
-        title: 'Delete a Note',
-        message: 'The note will be deleted permanently',
+        title: t('note.delete2'),
+        message: t('note.deleteMessage'),
         iconType: DialogIconTypes.Warning,
-        buttons: ['Delete Note', 'Cancel'],
+        buttons: [t('note.delete2'), t('general.cancel')],
         defaultButtonIndex: 0,
         cancelButtonIndex: 1,
         onClose: (value: number | null) => {
@@ -273,13 +276,14 @@ export default () => {
           <StyledNoteDetailNoNote>
             {storageId != null ? (
               <div>
-                <h1>Command(⌘) + N</h1>
-                <h2>to create a new note</h2>
+                <h1>{t('note.createKeyMac')}</h1>
+                <h1>{t('note.createKeyWinLin')}</h1>
+                <h2>{t('note.createkeymessage1')}</h2>
               </div>
             ) : (
               <div>
-                <h1>Select a storage</h1>
-                <h2>to create a new note</h2>
+                <h1>{t('note.createkeymessage2')}</h1>
+                <h2>{t('note.createkeymessage3')}</h2>
               </div>
             )}
           </StyledNoteDetailNoNote>

diff --git a/src/components/PreferencesModal/AboutTab.tsx b/src/components/PreferencesModal/AboutTab.tsx
@@ -9,6 +9,7 @@ import {
 import { openNew } from '../../lib/utils/platform'
 import Image from '../atoms/Image'
 import AppLink from '../atoms/AppLink'
+import { useTranslation } from 'react-i18next'
 
 const AboutContents = styled.div`
   max-width: 360px;
@@ -79,6 +80,7 @@ interface PrimaryLinkProps {
   href: string
   children: string
 }
+const { t } = useTranslation()
 
 const PrimaryLink = ({ href, children }: PrimaryLinkProps) => {
   const handleClick = useCallback(
@@ -102,23 +104,20 @@ const AboutTab = () => {
       <Section>
         <AboutContents>
           <div className='about-outline'>
-            <SectionHeader>About</SectionHeader>
+            <SectionHeader>{t('about.about')}</SectionHeader>
             <div className='about-outline-basic'>
               <div className='about-outline-basic-logo'>
                 <Image src={'/app/static/logo.svg'} />
               </div>
               <div className='about-outline-basic-info'>
                 <h4>Boost Note {process.env.VERSION}</h4>
-                <p>
-                  An open source note-taking app made for programmers just like
-                  you.
-                </p>
+                <p>{t('about.boostnoteDescription')}</p>
                 <p>
                   <PrimaryLink href='https://boostnote.io/'>
-                    Official Website
+                    {t('about.website')}
                   </PrimaryLink>
                   <PrimaryLink href='https://boostnote.io/wiki/'>
-                    Boost Note for Team
+                    {t('about.boostWiki')}
                   </PrimaryLink>
                 </p>
               </div>
@@ -130,48 +129,48 @@ const AboutTab = () => {
             </SectionSubtleText>
           </div>
           <div className='about-community'>
-            <SectionHeader>Cross-platform</SectionHeader>
+            <SectionHeader>{t('about.platform')}</SectionHeader>
             <AppLink />
           </div>
           <div className='about-community'>
-            <SectionHeader>Community</SectionHeader>
+            <SectionHeader>{t('about.community')}</SectionHeader>
             <div className='about-community-links'>
               <ul>
                 <li>
                   <PrimaryLink href='https://github.com/BoostIO/BoostNote.next'>
-                    GitHub Repository
+                    {t('about.github')}
                   </PrimaryLink>
                 </li>
                 <li>
                   <PrimaryLink href='https://github.com/BoostIO/BoostNote.next'>
-                    Bounty on IssueHunt
+                    {t('about.bounty')}
                   </PrimaryLink>
                 </li>
                 <li>
                   <PrimaryLink href='https://medium.com/boostnote'>
-                    Blog
+                    {t('about.blog')}
                   </PrimaryLink>
                 </li>
               </ul>
               <ul>
                 <li>
                   <PrimaryLink href='https://boostnote-group.slack.com/join/shared_invite/enQtMzkxOTk4ODkyNzc0LWQxZTQwNjBlMDI4YjkyYjg2MTRiZGJhNzA1YjQ5ODA5M2M0M2NlMjI5YjhiYWQzNzgzYmU0MDMwOTlmZmZmMGE'>
-                    Slack Group
+                    {t('about.slack')}
                   </PrimaryLink>
                 </li>
                 <li>
                   <PrimaryLink href='https://twitter.com/boostnoteapp'>
-                    Twitter Account
+                    {t('about.twitter')}
                   </PrimaryLink>
                 </li>
                 <li>
                   <PrimaryLink href='https://www.facebook.com/groups/boostnote/'>
-                    Facebook Group
+                    {t('about.facebook')}
                   </PrimaryLink>
                 </li>
                 <li>
                   <PrimaryLink href='https://www.reddit.com/r/Boostnote/'>
-                    Reddit
+                    {t('about.reddit')}
                   </PrimaryLink>
                 </li>
               </ul>

diff --git a/src/components/PreferencesModal/BillingTab.tsx b/src/components/PreferencesModal/BillingTab.tsx
@@ -11,6 +11,7 @@ import { usePreferences } from '../../lib/preferences'
 import { getSubscription, Subscription } from '../../lib/accounts'
 import LoginButton from '../atoms/LoginButton'
 import { openNew } from '../../lib/utils/platform'
+import { useTranslation } from 'react-i18next'
 
 const BillingContent = styled.div`
   .billing-lead {
@@ -66,88 +67,94 @@ const BillingTab = () => {
   const loggedIn = user != null
   const hasSubscription = subscription != null
 
+  const { t } = useTranslation()
+
   return (
     <Section>
-      <SectionHeader>Billing</SectionHeader>
+      <SectionHeader>{t('billing.billing')}</SectionHeader>
       <BillingContent>
         {!loggedIn && (
           <div className='billing-lead'>
-            <p>Please sign in to upgrade your plan.</p>
+            <p>{t('billing.message')}</p>
           </div>
         )}
         <SectionTable>
           <thead>
             <th></th>
             <th className='billing-plan'>
-              <span className='billing-name'>Basic</span>
+              <span className='billing-name'>{t('billing.basic')}</span>
               <span className='billing-price'>$0</span>
               {!hasSubscription && (
                 <SectionSecondaryButton disabled>
-                  Current
+                  {t('billing.current')}
                 </SectionSecondaryButton>
               )}
             </th>
             <th className='billing-plan'>
-              <span className='billing-name'>Premium</span>
-              <span className='billing-price'>$3/Month (USD) *</span>
+              <span className='billing-name'>{t('billing.premium')}</span>
+              <span className='billing-price'>{t('billing.price')}</span>
               {!loggedIn && (
                 <LoginButton ButtonComponent={SectionPrimaryButton}>
-                  Sign In
+                  {t('general.signin')}
                 </LoginButton>
               )}
               {loggedIn && (
-                <SectionPrimaryButton onClick={() => openNew('https://note.boostio.co/subscription')}>
+                <SectionPrimaryButton
+                  onClick={() =>
+                    openNew('https://note.boostio.co/subscription')
+                  }
+                >
                   {hasSubscription ? 'Manage' : 'Upgrade'}
                 </SectionPrimaryButton>
               )}
             </th>
           </thead>
           <tbody>
             <tr>
-              <th>Web App</th>
+              <th>{t('billing.browser')}</th>
               <td>〇</td>
               <td>〇</td>
             </tr>
             <tr>
-              <th>Desktop App (Mac/Windows/Linux)</th>
+              <th>{t('billing.desktop')}</th>
               <td>〇</td>
               <td>〇</td>
             </tr>
             <tr>
-              <th>Mobile App (Will be launched at Jan, 2020)</th>
+              <th>{t('billing.mobile')}</th>
               <td>〇</td>
               <td>〇</td>
             </tr>
             <tr>
-              <th>Syncing Multiple Devices</th>
+              <th>{t('billing.sync')}</th>
               <td>〇</td>
               <td>〇</td>
             </tr>
             <tr>
-              <th>Local Storage</th>
+              <th>{t('billing.local')}</th>
               <td>〇</td>
               <td>〇</td>
             </tr>
             <tr>
-              <th>Cloud Storage</th>
+              <th>{t('billing.cloud')}</th>
               <td>〇</td>
               <td>〇</td>
             </tr>
             <tr>
-              <th>Cloud Storage Size</th>
+              <th>{t('billing.storageSize')}</th>
               <td>100MB</td>
               <td>2GB</td>
             </tr>
           </tbody>
         </SectionTable>
         {loggedIn && (
           <div className='billing-extra'>
-            <p>
-              * If you need more cloud storage, you can add it at any time by
-              paying $5 (USD) for every 5GB. Click the "Add Extra Storage"
-              button below.
-            </p>
-            <SectionPrimaryButton onClick={() => openNew('https://note.boostio.co/subscription')}>Add Extra Storage</SectionPrimaryButton>
+            <p>{t('billing.addStorageDescription')}</p>
+            <SectionPrimaryButton
+              onClick={() => openNew('https://note.boostio.co/subscription')}
+            >
+              {t('billing.addStorage')}
+            </SectionPrimaryButton>
           </div>
         )}
       </BillingContent>