6 files changed, 47 insertions, 38 deletions
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index e7966e4..0838cea 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -1,10 +1,12 @@
 import styles from '../Notes.module.scss'
 import React, {useState} from 'react'
+import useSettings from 'hooks/useSettings'
 import useNotes from '../hooks/useNotes'
 import {handleSelect, handleSelectAll, handleExport} from '../helpers/export'
 
 const Export = ({setAction}) => {
   const {notes} = useNotes()
+  const {t} = useSettings()
   const [ids, setIds] = useState(notes.map(n => n.noteId))
   const sortFn = (a, b) => new Date(b.updated_at) - new Date(a.updated_at)
 
@@ -13,17 +15,17 @@ const Export = ({setAction}) => {
   return (
     <section>
       <div className='window__submenu'>
-        <div onClick={() => {setAction('')}}>Back</div>
+        <div onClick={() => {setAction('')}}>{t('back')}</div>
       </div>
       <div className={`window__scroll ${styles.export}`}>
-        <h3>Click to export your notes:</h3>
+        <h3>{t('notes_click_to_export')}</h3>
         <input
           className="window__button"
           type="submit"
-          value="Export"
+          value={t('export')}
           onClick={e => handleExport(e, ids, notes)}
         />
-        <p>Notes to export:</p>
+        <p>{t('notes_to_export')}</p>
         <div className={styles.export__select}>
           <input
             type="checkbox"
@@ -31,7 +33,7 @@ const Export = ({setAction}) => {
             onChange={e => handleSelectAll(e, notes, setIds)}
             checked={notes.length === ids.length}
           />
-          <label htmlFor='selectAll'>Select all</label>
+          <label htmlFor='selectAll'>{t('select_all')}</label>
         </div>
         <ul>
           {notes.sort(sortFn).map(note => (
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
index 700acb4..ad2b831 100644
--- a/apps/Notes/components/Import.js
+++ b/apps/Notes/components/Import.js
@@ -1,10 +1,11 @@
 import styles from '../Notes.module.scss'
 import React, {useState} from 'react'
-import fetchJson from 'lib/fetchJson'
+import useSettings from 'hooks/useSettings'
 import useNotes from '../hooks/useNotes'
 import {state, color, handleImport, handleChange} from '../helpers/import'
 
 const Import = ({setAction}) => {
+  const {t} = useSettings()
   const [files, setFiles] = useState()
   const [done, setDone] = useState([])
   const {mutateNotes} = useNotes()
@@ -12,14 +13,14 @@ const Import = ({setAction}) => {
   return (
     <section className={styles.import}>
       <div className='window__submenu'>
-        <div onClick={() => {setAction('')}}>Back</div>
+        <div onClick={() => {setAction('')}}>{t('back')}</div>
       </div>
       <div className='window__scroll'>
         <form onSubmit={e => handleImport(e, files, mutateNotes, setDone)}>
-          Import new notes:
+          {t('notes_import')}
           <div>
             <label className="window__button">
-              Choose files
+              {t('choose_files')}
               <input
                 name="import"
                 type="file"
@@ -31,14 +32,14 @@ const Import = ({setAction}) => {
           </div>
           {files && (
             <>
-              <p>Notes to import:</p>
+              <p>{t('notes_to_import')}</p>
               <ul>
                 {[...files].map((f, i) => <li style={color(done[i])} key={f.name}>{f.name} {state(done[i])}</li>)}
               </ul>
               {
                 done.length === 0
-                  ? <input type="submit" value="Import" className="window__button" />
-                  : <p>Import finished.<br/><br/>Go back to notes list or choose other notes to import.</p>
+                  ? <input type="submit" value={t('import')} className="window__button" />
+                  : <p>{t('import_finished')}<br/><br/>{t('notes_import_go_back')}</p>
               }
             </>
           )}
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 1fd03af..9655d74 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,6 +1,7 @@
 import styles from '../Notes.module.scss'
 import React, {useState, useEffect} from 'react'
-import useUser from 'lib/useUser'
+import useUser from 'hooks/useUser'
+import useSettings from 'hooks/useSettings'
 import useNotes from '../hooks/useNotes'
 import useSort from '../hooks/useSort'
 import ListItem from './ListItem'
@@ -13,6 +14,7 @@ const List = () => {
   const [loading, setLoading] = useState(false)
   const {notes, error} = useNotes()
   const [sortedBy, sortBy, sortFn] = useSort(3)
+  const {t} = useSettings()
   const {user} = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
@@ -32,16 +34,16 @@ const List = () => {
     action === '' ? (
       <>
         <div className='window__submenu'>
-          <div onClick={() => setAction('addNote')}>New note</div>
-          <div onClick={() => setAction('importNotes')}>Import</div>
-          <div onClick={() => setAction('exportNotes')}>Export</div>
+          <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
+          <div onClick={() => setAction('importNotes')}>{t('import')}</div>
+          <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
         </div>
         <table className={styles.notesList}>
           <thead>
             <tr>
-              <th onClick={() => sortBy(1)}>Title {sortedBy(1)}</th>
-              <th onClick={() => sortBy(2)}>Created {sortedBy(2)}</th>
-              <th onClick={() => sortBy(3)}>Modified {sortedBy(3)}</th>
+              <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
+              <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
+              <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
             </tr>
           </thead>
           <tbody>
@@ -57,7 +59,7 @@ const List = () => {
                   />
                 ))) : (
                   <tr>
-                    <td>Your notes list is empty.</td>
+                    <td>{t('notes_list_empty')}</td>
                   </tr>
                 )}
           </tbody>
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 4a404db..4a2d6f6 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -1,8 +1,9 @@
 import styles from '../Notes.module.scss'
 import React from 'react'
 import {getNote, exportNote, removeNote} from '../helpers/noteActions.js'
-import useNotes from '../hooks/useNotes'
+import useSettings from 'hooks/useSettings'
 import usePopup from 'hooks/usePopup'
+import useNotes from '../hooks/useNotes'
 import {faEdit, faDownload, faTrash } from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
@@ -13,13 +14,14 @@ const datestring = date => {
 };
 
 const ListItem = ({note, setAction, setFetchedNote, setLoading}) => {
+  const {t} = useSettings()
   const {setPopup} = usePopup()
   const {mutateNotes} = useNotes()
 
   const handleNoteAction = async (a, note, e) => {
     if (e) e.stopPropagation()
     setLoading(true)
-    await getNote(note, setFetchedNote, setPopup, () => setAction(a))
+    await getNote(note, setFetchedNote, t, setPopup, () => setAction(a))
   }
 
   return (
@@ -36,7 +38,7 @@ const ListItem = ({note, setAction, setFetchedNote, setLoading}) => {
         <span onClick={e => {e.stopPropagation(); exportNote(note)}}>
           <FontAwesomeIcon icon={faDownload} />
         </span>
-        <span onClick={e => removeNote(e, note._id, mutateNotes, setPopup, setAction)}>
+        <span onClick={e => removeNote(e, note._id, mutateNotes, t, setPopup, setAction)}>
           <FontAwesomeIcon icon={faTrash} />
         </span>
       </td>
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
index 40a33c0..f9cc3f2 100644
--- a/apps/Notes/components/NoteEdit.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -1,24 +1,26 @@
 import styles from '../Notes.module.scss'
 import React from 'react'
-import useNotes from '../hooks/useNotes'
 import usePopup from 'hooks/usePopup'
+import useSettings from 'hooks/useSettings'
+import useNotes from '../hooks/useNotes'
 import {addNote, updateNote} from '../helpers/noteActions.js'
 
 const NoteEdit = ({setAction, fetchedNote}) => {
-  const {mutateNotes} = useNotes()
+  const {t} = useSettings()
   const {setPopup} = usePopup()
+  const {mutateNotes} = useNotes()
 
   const handleSubmit = e => {
     e.preventDefault()
 
     fetchedNote
-      ? updateNote(e, fetchedNote, mutateNotes, setAction, setPopup)
-      : addNote(e, mutateNotes, setAction, setPopup)
+      ? updateNote(e, fetchedNote, mutateNotes, setAction, t, setPopup)
+      : addNote(e, mutateNotes, setAction, t, setPopup)
   }
 
   return (
     <div className={styles.noteEdit}>
-      <h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</h2>
+      <h2>{fetchedNote ? t('notes_edit') : t('notes_add_new')}</h2>
       <form onSubmit={handleSubmit}>
         <input
           name='title'
@@ -38,12 +40,12 @@ const NoteEdit = ({setAction, fetchedNote}) => {
             className='window__button'
             onClick={() => {setAction(fetchedNote ? 'showNote' : '')}}
           >
-            Cancel
+            {t('cancel')}
           </span>
           <input
             className='window__button'
             type="submit"
-            value={fetchedNote ? 'Save note' : 'Add note'}
+            value={fetchedNote ? t('notes_save') : t('notes_add')}
           />
         </div>
       </form>
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index 6926b09..02937f8 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -1,12 +1,14 @@
 import styles from '../Notes.module.scss'
 import React from 'react';
-import useNotes from '../hooks/useNotes'
+import useSettings from 'hooks/useSettings'
 import usePopup from 'hooks/usePopup'
+import useNotes from '../hooks/useNotes'
 import {removeNote, exportNote} from '../helpers/noteActions.js'
 import copyToClipboard from '../helpers/copyToClipboard.js'
 import Splash from 'components/Splash'
 
 const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
+  const {t} = useSettings()
   const {setPopup} = usePopup()
   const {mutateNotes} = useNotes()
 
@@ -21,19 +23,17 @@ const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
   return (
     <section className={styles.noteView}>
       <div className='window__submenu'>
-        <div onClick={() => {setFetchedNote(); setAction('')}}>Back</div>
-        <div onClick={() => copyToClipboard(content, setPopup)}>Copy</div>
-        <div onClick={() => {setAction('editNote')}}>Edit</div>
-        <div onClick={() => exportNote(fetchedNote)}>Export</div>
-        <div onClick={e => {removeNote(e, _id, mutateNotes, setPopup, setAction)}}>Remove</div>
+        <div onClick={() => {setFetchedNote(); setAction('')}}>{t('back')}</div>
+        <div onClick={() => copyToClipboard(content, t, setPopup)}>{t('copy')}</div>
+        <div onClick={() => {setAction('editNote')}}>{t('edit')}</div>
+        <div onClick={() => exportNote(fetchedNote)}>{t('export')}</div>
+        <div onClick={e => {removeNote(e, _id, mutateNotes, t, setPopup, setAction)}}>{t('remove')}</div>
       </div>
 
       <div className='window__scroll'>
         <h2>{title}</h2>
         <p>{content}</p>
       </div>
-      <style jsx>{`
-      `}</style>
     </section>
   )
 }