|
@@ -1,4 +1,10 @@
|
1
|
|
-import React, { useState, ReactElement, FormEvent, ChangeEvent } from 'react';
|
|
1
|
+import React, {
|
|
2
|
+ useState,
|
|
3
|
+ useEffect,
|
|
4
|
+ ReactElement,
|
|
5
|
+ FormEvent,
|
|
6
|
+ ChangeEvent,
|
|
7
|
+} from 'react';
|
2
|
8
|
import { chord2fingering, chords, notes, accidentals } from './chords';
|
3
|
9
|
|
4
|
10
|
const availableChords = Object.keys(chords);
|
|
@@ -13,6 +19,15 @@ const ChordForm = ({
|
13
|
19
|
const [chord, setChord] = useState('');
|
14
|
20
|
const [error, setError] = useState('');
|
15
|
21
|
|
|
22
|
+ useEffect(() => {
|
|
23
|
+ try {
|
|
24
|
+ chord2fingering(chord);
|
|
25
|
+ setError('');
|
|
26
|
+ } catch (e) {
|
|
27
|
+ setError(e.message);
|
|
28
|
+ }
|
|
29
|
+ }, [chord]);
|
|
30
|
+
|
16
|
31
|
const handleSubmit = (e: FormEvent) => {
|
17
|
32
|
e.preventDefault();
|
18
|
33
|
setChord('');
|
|
@@ -21,14 +36,7 @@ const ChordForm = ({
|
21
|
36
|
|
22
|
37
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
23
|
38
|
const value = e.target.value;
|
24
|
|
-
|
25
|
39
|
setChord(value);
|
26
|
|
- try {
|
27
|
|
- chord2fingering(value);
|
28
|
|
- setError('');
|
29
|
|
- } catch (e) {
|
30
|
|
- setError(e.message);
|
31
|
|
- }
|
32
|
40
|
};
|
33
|
41
|
|
34
|
42
|
return (
|