react-query で取得した値でセレクトボックスを出すところまで実装

6 files changed, 150 insertions, 27 deletions

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 <Navigate replace to="/sign-up/form1" />
   }
 
+  const { form1, form2, form3 } = data
+  const form: FormData = { ...form1, ...form2, ...form3 }
+
   return (
     <>
       <h1>会員登録 確認画面</h1>
@@ -20,14 +22,21 @@ export const SignUpConfirm = () => {
         <div className="signUpForm">
           <p>お名前: {form.name}</p>
           <p>名前カナ: {form.kana}</p>
-          <p>電話番号: {form.tel1}-{form.tel2}-{form.tel3}</p>
+          <p>電話番号: {displayTel(form)}</p>
         </div>
         <h2>ログイン関連の情報</h2>
         <div className="signUpForm">
           <p>メールアドレス: {form.email}</p>
           <p>パスワード: セキュリティ上の理由のため非表示</p>
         </div>
+        <h2>プログラミング関連の情報</h2>
+        <div className="signUpForm">
+          <p>GitHubのアカウントはある？: {form.hasGitHubRepo ? 'ある' : 'ない'}</p>
+          <p>GitHub の username: {form.gitHubUsername}</p>
+          <p>お気に入りの GitHub リポジトリ: {form.repoName}</p>
+        </div>
       </div>
+      <button>送信</button>
     </>
   );
 }
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<Form1>({
+  const { register, handleSubmit, formState: { errors } } = useForm<Form1Data>({
     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<Form2>({
+  const { register, handleSubmit, formState: { errors } } = useForm<Form2Data>({
     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 <Navigate replace to="/sign-up/form1" />
   }
 
-  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 = () => {
           <div className="error">{errors.password?.message}</div>
         </div>
         <div>
-          <button type="submit">確認画面へ</button>
+          <button type="submit">次へ</button>
         </div>
       </form>
     </>
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 (
+    <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;
+
+  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 <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 >
+    </>
+  );
+}
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: <SignUp /> },
   { path: '/sign-up/form1', element: <SignUpForm1 /> },
   { path: '/sign-up/form2', element: <SignUpForm2 /> },
+  { path: '/sign-up/form3', element: <SignUpForm3 /> },
   { path: '/sign-up/confirm', element: <SignUpConfirm /> },
 ]);
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 = <Form1 extends z.ZodTypeAny>(schema: Form1) => (
+const addTelRefine = <Form1Data extends z.ZodTypeAny>(schema: Form1Data) => (
   schema.refine(
     ({ tel1, tel2, tel3 }) => (tel1.length > 0 && tel2.length > 0 && tel3.length > 0),
     {
@@ -30,9 +30,6 @@ const addRefine = <Form1 extends z.ZodTypeAny>(schema: Form1) => (
     }
   ))
 
-
-export type Form1 = z.infer<typeof form1SchemaWithoutRefine>
-
 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<typeof form2Schema>
+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<typeof formSchemaWithoutRefine>
+export type Form1Data = z.infer<typeof form1SchemaWithoutRefine>
+export type Form2Data = z.infer<typeof form2Schema>
+export type Form3Data = z.infer<typeof form3Schema>
+export type FormData = z.infer<typeof formSchemaWithoutRefine>
 
-export const form1Schema = addRefine(form1SchemaWithoutRefine)
-export const formSchema = addRefine(formSchemaWithoutRefine)
+export const displayTel = ({ tel1, tel2, tel3 }: Form1Data) => (`${tel1}-${tel2}-${tel3}`)