From edddd70996b05c4e091b6aa0af6c7f3ef7e690ee Mon Sep 17 00:00:00 2001 From: Masaya Tojo Date: Mon, 2 Sep 2024 00:42:51 +0900 Subject: react-query で取得した値でセレクトボックスを出すところまで実装 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SignUpConfirm.tsx | 19 ++++++--- src/SignUpForm1.tsx | 6 +-- src/SignUpForm2.tsx | 18 ++++----- src/SignUpForm3.tsx | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/routes.tsx | 2 + src/signUpSchema.ts | 28 +++++++++----- 6 files changed, 150 insertions(+), 27 deletions(-) create mode 100644 src/SignUpForm3.tsx (limited to 'src') diff --git a/src/SignUpConfirm.tsx b/src/SignUpConfirm.tsx index 295bad6..63b9d10 100644 --- a/src/SignUpConfirm.tsx +++ b/src/SignUpConfirm.tsx @@ -1,17 +1,19 @@ import './SignUp.css' import { useLocation, Navigate } from 'react-router-dom'; -import { Form } from './signUpSchema' +import { Form1Data, Form2Data, Form3Data, FormData, displayTel } from './signUpSchema' export const SignUpConfirm = () => { const location = useLocation() - const form = location.state as Form | null; + const data = location.state as { form1: Form1Data, form2: Form2Data, form3: Form3Data } | null; - // form1 のデータがない場合は form1 にリダイレクトする - if (form === null) { + if (data === null) { return } + const { form1, form2, form3 } = data + const form: FormData = { ...form1, ...form2, ...form3 } + return ( <>

会員登録 確認画面

@@ -20,14 +22,21 @@ export const SignUpConfirm = () => {

お名前: {form.name}

名前カナ: {form.kana}

-

電話番号: {form.tel1}-{form.tel2}-{form.tel3}

+

電話番号: {displayTel(form)}

ログイン関連の情報

メールアドレス: {form.email}

パスワード: セキュリティ上の理由のため非表示

+

プログラミング関連の情報

+
+

GitHubのアカウントはある？: {form.hasGitHubRepo ? 'ある' : 'ない'}

+

GitHub の username: {form.gitHubUsername}

+

お気に入りの GitHub リポジトリ: {form.repoName}

+
+ ); } diff --git a/src/SignUpForm1.tsx b/src/SignUpForm1.tsx index 76c6020..4be29e9 100644 --- a/src/SignUpForm1.tsx +++ b/src/SignUpForm1.tsx @@ -2,15 +2,15 @@ import './SignUp.css' import { useForm } from 'react-hook-form' import { zodResolver } from "@hookform/resolvers/zod" import { useNavigate } from 'react-router-dom'; -import { Form1, form1Schema } from './signUpSchema' +import { Form1Data, form1Schema } from './signUpSchema' export const SignUpForm1 = () => { - const { register, handleSubmit, formState: { errors } } = useForm({ + const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(form1Schema), }); const navigate = useNavigate(); - const onsubmit = (state: Form1) => { + const onsubmit = (state: Form1Data) => { navigate('/sign-up/form2', { state }) } const onerror = (err: any) => console.log(err); diff --git a/src/SignUpForm2.tsx b/src/SignUpForm2.tsx index f355225..177373d 100644 --- a/src/SignUpForm2.tsx +++ b/src/SignUpForm2.tsx @@ -2,14 +2,14 @@ import './SignUp.css' import { useForm } from 'react-hook-form' import { zodResolver } from "@hookform/resolvers/zod" import { useLocation, Navigate, useNavigate } from 'react-router-dom'; -import { Form1, Form2, form2Schema } from './signUpSchema' +import { Form1Data, Form2Data, form2Schema } from './signUpSchema' export const SignUpForm2 = () => { - const { register, handleSubmit, formState: { errors } } = useForm({ + const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(form2Schema), }); const location = useLocation(); - const form1 = location.state as Form1 | null; + const form1 = location.state as Form1Data | null; const navigate = useNavigate(); // form1 のデータがない場合は form1 にリダイレクトする @@ -17,13 +17,11 @@ export const SignUpForm2 = () => { return } - const onsubmit = (form2: Form2) => { - const state = { - ...form1, - ...form2, - } - navigate('/sign-up/confirm', { state }) + const onsubmit = (form2: Form2Data) => { + const state = { form1, form2 } + navigate('/sign-up/form3', { state }) } + const onerror = (err: any) => console.log(err); return ( @@ -41,7 +39,7 @@ export const SignUpForm2 = () => {
{errors.password?.message}
- +
diff --git a/src/SignUpForm3.tsx b/src/SignUpForm3.tsx new file mode 100644 index 0000000..bfd71d0 --- /dev/null +++ b/src/SignUpForm3.tsx @@ -0,0 +1,104 @@ +import './SignUp.css' +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 ( + + + + ) +} + + +export const SignUpForm3Main = () => { + const { register, watch, setValue, handleSubmit, formState: { errors } } = useForm({ + 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; + + console.log(gitHubUsername) + console.log(repoQueryEnabled) + + 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']))) : + [] + + // TODO: watchHasGitHubRepo が false の場合は gitHubUsername と repoName が '' になって欲しい + + // form1, form2 のデータがない場合は form1 にリダイレクトする + if (formData === null) { + return + } + + 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 ( + <> +

会員登録 フェーズ 3

+
+
+ + +
{errors.hasGitHubRepo?.message}
+
+ { + (watchHasGitHubRepo && +
+ + +
+ ) + } + { + repoQueryEnabled && ( + ( + reposIsLoading ? 'Loading...' : + reposIsError ? `Error: ${reposError}` : +
+ + +
+ ) + ) + } +
+ +
+
+ + ); +} diff --git a/src/routes.tsx b/src/routes.tsx index 1a3daa1..c85de49 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -3,6 +3,7 @@ import { Top } from './Top'; import { SignUp } from './SignUp'; import { SignUpForm1 } from './SignUpForm1'; import { SignUpForm2 } from './SignUpForm2'; +import { SignUpForm3 } from './SignUpForm3'; import { SignUpConfirm } from './SignUpConfirm'; export const routes = createBrowserRouter([ @@ -10,5 +11,6 @@ export const routes = createBrowserRouter([ { path: '/sign-up', element: }, { path: '/sign-up/form1', element: }, { path: '/sign-up/form2', element: }, + { path: '/sign-up/form3', element: }, { path: '/sign-up/confirm', element: }, ]); diff --git a/src/signUpSchema.ts b/src/signUpSchema.ts index 4d8b71f..3b75ba1 100644 --- a/src/signUpSchema.ts +++ b/src/signUpSchema.ts @@ -11,7 +11,7 @@ const form1SchemaWithoutRefine = z.object({ tel3: z.string(), }) -const addRefine = (schema: Form1) => ( +const addTelRefine = (schema: Form1Data) => ( schema.refine( ({ tel1, tel2, tel3 }) => (tel1.length > 0 && tel2.length > 0 && tel3.length > 0), { @@ -30,9 +30,6 @@ const addRefine = (schema: Form1) => ( } )) - -export type Form1 = z.infer - export const form2Schema = z.object({ email: z.string().min(1, { message: '必須項目です' }).email({ message: 'メールアドレスを入力してください' }), password: z.string() @@ -41,11 +38,24 @@ export const form2Schema = z.object({ .max(128, { message: '128文字以下で入力してください' }) }) -export type Form2 = z.infer +const favLangSchema = z.object({ + name: z.string() +}) + +export const form3Schema = z.object({ + // favLangs: z.array(favLangSchema), + hasGitHubRepo: z.boolean(), + gitHubUsername: z.string(), + repoName: z.string(), +}) -const formSchemaWithoutRefine = form1SchemaWithoutRefine.merge(form2Schema) +const formSchemaWithoutRefine = form1SchemaWithoutRefine.merge(form2Schema).merge(form3Schema) +export const form1Schema = addTelRefine(form1SchemaWithoutRefine) +export const formSchema = addTelRefine(formSchemaWithoutRefine) -export type Form = z.infer +export type Form1Data = z.infer +export type Form2Data = z.infer +export type Form3Data = z.infer +export type FormData = z.infer -export const form1Schema = addRefine(form1SchemaWithoutRefine) -export const formSchema = addRefine(formSchemaWithoutRefine) +export const displayTel = ({ tel1, tel2, tel3 }: Form1Data) => (`${tel1}-${tel2}-${tel3}`) -- cgit v1.2.3