cat-soft.nl
A React application to shows Mastodon posts on a map.
mastodon
react
map
freekdk.nl
1import {useForm} from "react-hook-form";
2import {form} from "../config/form";
3import {FormError} from "./form/FormError";
4import {FormLocationPicker} from "./form/FormLocationPicker";
5import {useState} from "react";
6import {PostPreview} from "./form/PostPreview";
7
8export function PostCreateForm() {
9 const [showResult, setShowResult] = useState(false)
10 const [postData, setPostData] = useState({})
11
12 const {
13 register,
14 handleSubmit,
15 watch,
16 setValue,
17 formState: { errors },
18 } = useForm()
19
20 const onSubmit = (data) => {
21 setShowResult(true)
22 setPostData(data)
23 }
24
25 return (
26 <>
27 <form onSubmit={handleSubmit(onSubmit)}>
28 <label htmlFor="handle">
29 Mastodon kaart account handle*
30
31 <FormError
32 errors={errors}
33 name="handle"
34 />
35 </label>
36 <input id="handle" type="text" {...register("handle",
37 {
38 required: form.error.message.required,
39 pattern: {
40 value: form.data.mastodon.handleRegex,
41 message: form.error.message.handle
42 }
43 }
44 )}
45 />
46
47 <label htmlFor="title">
48 Titel*
49
50 <FormError
51 errors={errors}
52 name="title"
53 />
54 </label>
55 <input id="title" type="text" {...register("title",
56 {
57 required: form.error.message.required,
58 }
59 )}
60 />
61
62 <label htmlFor="msg">
63 Bericht
64
65 <FormError
66 errors={errors}
67 name="msg"
68 />
69 </label>
70 <textarea id="msg" {...register("msg")} />
71
72 <FormLocationPicker
73 errors={errors}
74 register={register}
75 watch={watch}
76 setValue={setValue}
77 />
78
79 <input type="submit" value="Bericht genereren" />
80 </form>
81
82 {showResult && (
83 <>
84 <h3>Resultaat</h3>
85
86 <p>Post het onderstaande bericht op Mastodon om uw bericht op de kaart te tonen.</p>
87
88 <PostPreview
89 postData={postData}
90 />
91 </>
92 )
93 }
94 </>
95 )
96}