apps/Notes/components/NoteEdit.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import styles from '../Notes.module.scss'
import React from 'react'
import useNotes from '../hooks/useNotes'
import usePopup from 'hooks/usePopup'
import {addNote, updateNote} from '../helpers/noteActions.js'

const NoteEdit = ({setAction, fetchedNote}) => {
  const {mutateNotes} = useNotes()
  const {setPopup} = usePopup()

  const handleSubmit = e => {
    e.preventDefault()

    fetchedNote
      ? updateNote(e, fetchedNote, mutateNotes, setAction, setPopup)
      : addNote(e, mutateNotes, setAction, setPopup)
  }

  return (
    <div className={styles.noteEdit}>
      <h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</h2>
      <form onSubmit={handleSubmit}>
        <input
          name='title'
          type='text'
          maxLength={1000}
          placeholder='Title'
          defaultValue={fetchedNote ? fetchedNote.title : ''}
        />
        <textarea
          required
          placeholder='Note'
          name='content'
          defaultValue={fetchedNote ? fetchedNote.content : ''}
        />
        <div className='note__buttons'>
          <span
            className='window__button'
            onClick={() => {setAction(fetchedNote ? 'showNote' : '')}}
          >
            Cancel
          </span>
          <input
            className='window__button'
            type="submit"
            value={fetchedNote ? 'Save note' : 'Add note'}
          />
        </div>
      </form>
    </div>
  )
}

export default NoteEdit