apps/Notes/components/NoteView.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import styles from '../Notes.module.scss'
import React, {useContext} from 'react';
import Context from 'context';
import useNotes from '../hooks/useNotes'
import {removeNote} from '../helpers/noteActions.js'
import copyToClipboard from '../helpers/copyToClipboard.js'

const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
  const {mutateNotes} = useNotes()
  const {setPopup} = useContext(Context)

  if (!fetchedNote) return <p>Loading...</p>
  if (fetchedNote.error) {
    setFetchedNote()
    setAction('')
  }

  const {_id, content, title} = fetchedNote

  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={e => { removeNote(e, _id, mutateNotes, setPopup, setAction) }}>Remove</div>
      </div>

      <div className='window__scroll'>
        <h2>{title}</h2>
        <p>{content}</p>
      </div>
      <style jsx>{`
      `}</style>
    </section>
  )
}

export default NoteView