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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import React, {useState, useContext} from 'react'
import Context from 'context';
import fetchJson from 'lib/fetchJson'
import useNotes from '../hooks/useNotes'
import {addNote, updateNote} from '../helpers/noteActions.js'
const Note = ({action, setAction, fetchedNote}) => {
const [text, setText] = useState('')
const {mutateNotes} = useNotes()
const [errorMsg, setErrorMsg] = useState('')
const {setPopup} = useContext(Context)
const handleSubmit = e => {
e.preventDefault()
fetchedNote
? updateNote(e, fetchedNote, mutateNotes, setAction, setPopup)
: addNote(e, mutateNotes, setAction, setPopup)
}
// if (!fetchedNote) return <p>Loading...</p>
// if (fetchedNote.error) {
// setFetchedNote()
// setAction('')
// }
return (
<div className='note'>
<h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</h2>
<form onSubmit={handleSubmit} className='note__form'>
<input
className='note__title'
name='title'
type='text'
placeholder='Title'
defaultValue={fetchedNote ? fetchedNote.title : ''}
/>
<textarea
required
className='note__text'
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>
<style jsx>{`
.note {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
padding: 1em 1em 2em;
animation: fade-in .3s;
}
@keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
h2 {
font-size: 1.2em;
margin-bottom: .5em;
}
.note__form {
display: flex;
flex-direction: column;
width: 100%;
flex-grow: 1;
}
.note__title {
margin-bottom: .5rem;
height: 3rem;
border: none;
padding: 0.5rem;
font-size: 1rem;
// font-weight: 600;
border: 1px dashed #666;
}
.note__title:placeholder {
font: inherit;
}
.note__text {
font-size: 1rem;
flex-grow: 1;
resize: none;
height: 100%;
width: 100%;
border: none;
border: 1px dashed #666;
padding: 0.5rem;
}
.note__text:placeholder {
font: inherit;
}
.note__close {
position: absolute;
top: 8px;
right: 15px;
transform: rotate(45deg);
font-size: 26px;
cursor: pointer;
transition: .3s transform;
}
.note__close:hover {
transform: rotate(135deg);
}
.note__buttons {
text-align: right;
}
`}</style>
</div>
)
}
export default Note
|
