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
|
import './SignUp.css'
import { useEffect } from 'react';
import { useForm } from 'react-hook-form'
import { zodResolver } from "@hookform/resolvers/zod"
import { useLocation, Navigate, useNavigate } from 'react-router-dom';
import { Form1Data, Form2Data, Form3Data, form3Schema } from './signUpSchema'
import { useQuery, QueryClient, QueryClientProvider } from 'react-query'
export const SignUpForm3 = () => {
const queryClient = new QueryClient()
return (
<QueryClientProvider client={queryClient}>
<SignUpForm3Main />
</QueryClientProvider>
)
}
export const SignUpForm3Main = () => {
const { register, watch, setValue, handleSubmit, formState: { errors } } = useForm<Form3Data>({
resolver: zodResolver(form3Schema),
});
const location = useLocation();
const formData = location.state as { form1: Form1Data, form2: Form2Data } | null;
const navigate = useNavigate();
const watchHasGithubRepo = watch("hasGithubRepo", false)
const githubUsername = watch("githubUsername", '')
const repoQueryEnabled = watchHasGithubRepo && githubUsername.length > 0;
const { data: reposData, isLoading: reposIsLoading, isError: reposIsError, error: reposError } = useQuery({
queryKey: ['githubRepos', githubUsername],
queryFn: async () => {
const res = await fetch(`https://api.github.com/users/${githubUsername}/repos?sort=updated&direction=desc&per_page=100`)
if (res.ok) { return res.json(); }
throw new Error(res.statusText)
},
enabled: repoQueryEnabled,
})
const repoNames: [string] = (repoQueryEnabled && !reposIsLoading && !reposIsError) ?
(reposData.map((json: any) => (json['name']))) :
[]
useEffect(() => {
setValue('githubUsername', '')
setValue('repoName', '')
}, [watchHasGithubRepo])
// form1, form2 のデータがない場合は form1 にリダイレクトする
if (formData === null) {
return <Navigate replace to="/sign-up/form1" />
}
const { form1, form2 } = formData;
const onsubmit = (form3: Form3Data) => {
const state = { form1, form2, form3 }
navigate('/sign-up/confirm', { state })
}
const onerror = (err: any) => console.log(err);
return (
<>
<h1>会員登録 フェーズ 3</h1>
<form className="SignUpForm" onSubmit={handleSubmit(onsubmit, onerror)}>
<div>
<label htmlFor="hasGithubRepo">GitHubのリポジトリある？: </label>
<input id="hasGithubRepo" type="checkbox" {...register('hasGithubRepo')}></input>
<div className="error">{errors.hasGithubRepo?.message}</div>
</div>
{
(watchHasGithubRepo &&
<div>
<label htmlFor="githubUsername">github username: </label>
<input id="githubUsername" type="text" {...register('githubUsername')}></input>
</div>
)
}
{
repoQueryEnabled && (
(
reposIsLoading ? 'Loading...' :
reposIsError ? `Error: ${reposError}` :
<div>
<label htmlFor="repoName">お気に入りのリポジトリを選んでください:</label>
<select id="repoName" {...register('repoName')}>
{repoNames.map((repoName) => (
<option key={repoName} value={repoName}>{repoName}</option>
))}
</select>
</div>
)
)
}
<div>
<button type="submit">確認画面へ</button>
</div>
</form >
</>
);
}
|
