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 --- package-lock.json | 138 +++++++++++++++++++++++++++++++++++++++++++------- package.json | 1 + src/SignUpConfirm.tsx | 19 +++++-- src/SignUpForm1.tsx | 6 +-- src/SignUpForm2.tsx | 18 +++---- src/SignUpForm3.tsx | 104 +++++++++++++++++++++++++++++++++++++ src/routes.tsx | 2 + src/signUpSchema.ts | 28 ++++++---- 8 files changed, 272 insertions(+), 44 deletions(-) create mode 100644 src/SignUpForm3.tsx diff --git a/package-lock.json b/package-lock.json index 16b0459..a13efa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.52.2", + "react-query": "^3.39.3", "react-router-dom": "^6.25.1", "validator": "^13.12.0", "zod": "^3.23.8" @@ -30,6 +31,17 @@ "vite": "^5.3.4" } }, + "node_modules/@babel/runtime": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz", + "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -1318,8 +1330,15 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "node_modules/big-integer": { + "version": "1.6.52", + "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", + "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", + "engines": { + "node": ">=0.6" + } }, "node_modules/brace-expansion": { "version": "2.0.1", @@ -1342,6 +1361,21 @@ "node": ">=8" } }, + "node_modules/broadcast-channel": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", + "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "detect-node": "^2.1.0", + "js-sha3": "0.8.0", + "microseconds": "0.2.0", + "nano-time": "1.0.0", + "oblivious-set": "1.0.0", + "rimraf": "3.0.2", + "unload": "2.2.0" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1388,8 +1422,7 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "node_modules/cross-spawn": { "version": "7.0.3", @@ -1434,6 +1467,11 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/detect-node": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1811,8 +1849,7 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "dev": true + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "node_modules/fsevents": { "version": "2.3.3", @@ -1833,7 +1870,6 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", "deprecated": "Glob versions prior to v9 are no longer supported", - "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -1865,7 +1901,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1875,7 +1910,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -1972,7 +2006,6 @@ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.", - "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -1981,8 +2014,7 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/is-extglob": { "version": "2.1.1", @@ -2029,6 +2061,11 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "node_modules/js-sha3": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", + "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2123,6 +2160,15 @@ "loose-envify": "cli.js" } }, + "node_modules/match-sorter": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", + "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==", + "dependencies": { + "@babel/runtime": "^7.23.8", + "remove-accents": "0.5.0" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -2145,6 +2191,11 @@ "node": ">=8.6" } }, + "node_modules/microseconds": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", + "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" + }, "node_modules/minimatch": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", @@ -2166,6 +2217,14 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/nano-time": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", + "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", + "dependencies": { + "big-integer": "^1.6.16" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -2190,11 +2249,15 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/oblivious-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", + "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dev": true, "dependencies": { "wrappy": "1" } @@ -2271,7 +2334,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2416,6 +2478,31 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-query": { + "version": "3.39.3", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", + "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "broadcast-channel": "^3.4.1", + "match-sorter": "^6.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-router": { "version": "6.25.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz", @@ -2446,6 +2533,16 @@ "react-dom": ">=16.8" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, + "node_modules/remove-accents": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", + "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2470,7 +2567,6 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "deprecated": "Rimraf versions prior to v4 are no longer supported", - "dev": true, "dependencies": { "glob": "^7.1.3" }, @@ -2701,6 +2797,15 @@ "node": ">=14.17" } }, + "node_modules/unload": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", + "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", + "dependencies": { + "@babel/runtime": "^7.6.2", + "detect-node": "^2.0.4" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -2800,8 +2905,7 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "dev": true + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, "node_modules/yocto-queue": { "version": "0.1.0", diff --git a/package.json b/package.json index 000b4c5..9955903 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.52.2", + "react-query": "^3.39.3", "react-router-dom": "^6.25.1", "validator": "^13.12.0", "zod": "^3.23.8" 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