From 79bdb88a5fc099b5871a83d18eadf9b0448b41d1 Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Thu, 30 Sep 2021 22:48:13 +0200
Subject: added favicons & notes route for phone

---
 apps/Notes/components/Export.js   | 58 +++++++++++++++++++++++++--------------
 apps/Notes/components/Import.js   |  4 ++-
 apps/Notes/components/List.js     | 12 ++++++--
 apps/Notes/helpers/import.js      |  2 +-
 apps/Notes/styles/_export.scss    | 14 ++++++++++
 apps/Notes/styles/_import.scss    |  1 -
 apps/Notes/styles/_noteView.scss  |  3 +-
 apps/Notes/styles/_notesList.scss |  4 +--
 8 files changed, 68 insertions(+), 30 deletions(-)

(limited to 'apps/Notes')

diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index 4ab1d64..516c0ec 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -3,6 +3,8 @@ import React, { useState } from 'react'
 import useSettings from 'hooks/useSettings'
 import useNotes from '../hooks/useNotes'
 import { handleSelect, handleSelectAll, handleExport } from '../helpers/export'
+import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const Export = ({ setAction }) => {
   const { notes } = useNotes()
@@ -29,29 +31,43 @@ const Export = ({ setAction }) => {
         />
         <p>{t('notes_to_export')}</p>
         <div className={styles.export__select}>
-          <input
-            type='checkbox'
-            name='selectAll'
-            onChange={e => handleSelectAll(e, notes, setIds)}
-            checked={notes.length === ids.length}
-          />
-          <label htmlFor='selectAll'>{t('select_all')}</label>
+          <label>
+            <input
+              type='checkbox'
+              name='selectAll'
+              onChange={e => handleSelectAll(e, notes, setIds)}
+              checked={notes.length === ids.length}
+              className='hidden'
+            />
+            <span style={{ color: notes.length === ids.length ? 'green' : 'brown' }}>
+              <FontAwesomeIcon icon={notes.length === ids.length ? faCheck : faTimes} />
+            </span>
+            {t('select_all')}
+          </label>
         </div>
         <ul>
-          {notes.sort(sortFn).map(note => (
-            <li key={note.noteId}>
-              <input
-                type='checkbox'
-                name={note.noteId}
-                value={note.noteId}
-                checked={ids.includes(note.noteId)}
-                onChange={() => handleSelect(note.noteId, ids, setIds)}
-              />
-              <label htlmfor={note.noteId}>
-                {note.title}
-              </label><br />
-            </li>
-          ))}
+          {notes.sort(sortFn).map(note => {
+            const checked = ids.includes(note.noteId)
+
+            return (
+              <li key={note.noteId}>
+                <label>
+                  <input
+                    type='checkbox'
+                    name={note.noteId}
+                    value={note.noteId}
+                    checked={ids.includes(note.noteId)}
+                    onChange={() => handleSelect(note.noteId, ids, setIds)}
+                    className='hidden'
+                  />
+                  <span style={{ color: checked ? 'green' : 'brown' }}>
+                    <FontAwesomeIcon icon={checked ? faCheck : faTimes} />
+                  </span>
+                  {note.title}
+                </label>
+              </li>
+            )
+          })}
         </ul>
       </div>
     </section>
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
index 5827310..fa1fa48 100644
--- a/apps/Notes/components/Import.js
+++ b/apps/Notes/components/Import.js
@@ -13,7 +13,9 @@ const Import = ({ setAction }) => {
   return (
     <section className={styles.import}>
       <div className='window__submenu'>
-        <div onClick={() => { setAction('') }}>{t('back')}</div>
+        <div>
+          <div onClick={() => { setAction('') }}>{t('back')}</div>
+        </div>
       </div>
       <div className='window__scroll'>
         <form onSubmit={e => handleImport(e, files, mutateNotes, setDone)}>
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 0e6c8fa..7d88c8d 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,4 +1,5 @@
 import styles from '../styles/Notes.module.scss'
+import { useRouter } from 'next/router'
 import React, { useState, useEffect } from 'react'
 import useUser from 'hooks/useUser'
 import useSettings from 'hooks/useSettings'
@@ -7,8 +8,9 @@ import useSort from '../hooks/useSort'
 import ListItem from './ListItem'
 import Actions from './Actions'
 import { Splash } from 'components'
+import handleLogout from 'helpers/logout'
 
-const List = () => {
+const List = ({ logout }) => {
   const [fetchedNote, setFetchedNote] = useState()
   const [action, setAction] = useState('')
   const [loading, setLoading] = useState(false)
@@ -16,7 +18,8 @@ const List = () => {
   const { notes, error } = useNotes()
   const [sortedBy, sortBy, sortFn] = useSort(3)
   const { t } = useSettings()
-  const { user } = useUser({
+  const router = useRouter()
+  const { user, mutateUser } = useUser({
     redirectToLogin: true,
     redirectToVerify: true
   })
@@ -41,6 +44,11 @@ const List = () => {
               <div className='mobile-only' onClick={() => { setShowSort(s => !s) }}>{t('sort')}</div>
               <div onClick={() => setAction('importNotes')}>{t('import')}</div>
               <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+              {logout && (
+                <div onClick={e => handleLogout(e, router, mutateUser)}>
+                  {t('logout')}
+                </div>
+              )}
             </div>
           </div>
           <div className='window__scroll'>
diff --git a/apps/Notes/helpers/import.js b/apps/Notes/helpers/import.js
index bbdceaa..01ad00e 100644
--- a/apps/Notes/helpers/import.js
+++ b/apps/Notes/helpers/import.js
@@ -24,7 +24,7 @@ export const handleImport = async (e, files, mutateNotes, setDone) => {
     try {
       const notes = await fetchJson('/api/notes', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: { 'Content-Type': 'plain/text; charset=utf-8' },
         body: JSON.stringify({ title, content })
       })
       if (i === files.length - 1) await mutateNotes(notes)
diff --git a/apps/Notes/styles/_export.scss b/apps/Notes/styles/_export.scss
index d5951f3..40aae89 100644
--- a/apps/Notes/styles/_export.scss
+++ b/apps/Notes/styles/_export.scss
@@ -6,6 +6,20 @@
     padding-bottom: 1em;
   }
 
+  label {
+    padding-top: .125em;
+    display: flex;
+    line-height: 1.25;
+
+    span {
+      flex-shrink: 0;
+      display: inline-block;
+      width: 1.5em;
+      margin-right: .5em;
+      text-align: center;
+    }
+  }
+
   &__select {
     display: inline-block;
     border-bottom: 1px dashed var(--color-decor);
diff --git a/apps/Notes/styles/_import.scss b/apps/Notes/styles/_import.scss
index 5d167a8..efdd047 100644
--- a/apps/Notes/styles/_import.scss
+++ b/apps/Notes/styles/_import.scss
@@ -4,7 +4,6 @@
     to {opacity: 1;}
   }
 
-  padding: 1rem;
   position: absolute;
   top: 0;
   right: 0;
diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss
index 63e3fa3..51e7edd 100644
--- a/apps/Notes/styles/_noteView.scss
+++ b/apps/Notes/styles/_noteView.scss
@@ -12,13 +12,14 @@
   animation: fade-in .3s;
 
   h2 {
+    padding: .75em;
     font-size: 1.25em;
     font-weight: 600;
     user-select: text;
   }
 
   p {
-    padding-top: 1em;
+    padding: .75em;
     line-height: 1.33;
     white-space: pre-line;
     user-select: text;
diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss
index 4580d62..57c606a 100644
--- a/apps/Notes/styles/_notesList.scss
+++ b/apps/Notes/styles/_notesList.scss
@@ -5,13 +5,11 @@
   }
 
   display: block;
-  overflow: auto;
   width: 100%;
   table-layout: fixed;
   word-wrap: break-word;
   height: 100%;
-  margin-top: -1em;
-  padding-top: 1em;
+  padding: .5em;
 
   & > tbody,
   & > thead {
-- 
cgit v1.2.3