1. src/screens/SignUp.js
import { faInstagram } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Helmet } from 'react-helmet-async'
import { useForm } from 'react-hook-form'
import { useNavigate } from 'react-router-dom'
///6. react-router-dom으로부터 useNavigate를 불러옴.
import styled from 'styled-components'
import AuthLayout from '../components/auth/AuthLayout'
import BottomBox from '../components/auth/BottomBox'
import Button from '../components/auth/Button'
import FormBox from '../components/auth/FormBox'
import Input from '../components/auth/Input'
import PageTitle from '../components/PageTitle'
import routes from '../routes'
import { FatLink } from '../styles'
import { gql, useMutation } from '@apollo/client'
///1. '@apollo/clinet로부터 gql, useMutation을 불러옴
const HeaderContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`
const Subtitle = styled(FatLink)`
font-size: 16px;
text-align: center;
margin-top: 10px;
`
const CREATE_ACCOUNT_MUTATION = gql`
mutation createAccount(
$username: String!
$email: String!
$password: String!
) {
createAccount(username: $username, email: $email, password: $password) {
ok
}
}
`
///2. CREATE_ACCOUNT_MUTATION을 만듬.
function SignUp() {
const navigate = useNavigate()
//7.useNavigate를 이용해 navigate를 만들어줌,
const onCompleted = (data) => {
const { username, password } = getValues()
const {
createAccount: { ok },
} = data
if (!ok) {
return
}
//5.onCompleted 함수를 만들어줌.
//server로부터 ok Data만 받음.
navigate(routes.home, {
state: { message: 'Account created. Please log in', username, password },
})
//8.onCompleted Fn안에 createAccount mutation이 잘 실행되면,
//navigate를 이용해서 homme으로 page이동, 이동할때, state에 message, username,
//password를 같이 보내줌.
//username과 password는 getValues()로 값을 얻음.
//반드시 state:{] 형식으로 보내줄것!!
}
const [createAccount, { loading }] = useMutation(CREATE_ACCOUNT_MUTATION, {
onCompleted,
})
///3. const[createAccount, {loading}]=useMutaion(CREATE_ACCOUNT_MUTAION,{
onCompleted }) 만들어줌..
const {
register,
handleSubmit,
getValues,
formState: { errors },
} = useForm({ mode: 'onBlur' })
const onValid = (data) => {
if (loading) {
return
}
const { username, email, password } = getValues()
createAccount({
variables: {
username,
email,
password,
},
})
//4. react-hook-form의 onValid에서 getValue로 username, email, password를
//얻은 다음, createAccount mutation의 variables에 값을 넣어준다.
}
return (
<AuthLayout>
<PageTitle title="SignUp" />
<Helmet>Sign Up</Helmet>
<FormBox>
<HeaderContainer>
<FontAwesomeIcon icon={faInstagram} size="3x" />
<Subtitle>
Sign up to see photos and videos from your friends.
</Subtitle>
</HeaderContainer>
<form onSubmit={handleSubmit(onValid)}>
<Input
{...register('email', { required: true, minLength: 5 })}
type="text"
placeholder="Email"
/>
{errors.email && (
<span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
This field is required and minLength is five!!
</span>
)}
<Input
{...register('username', { required: true, minLength: 5 })}
type="text"
placeholder="Username"
/>
{errors.username && (
<span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
This field is required and minLength is five!!
</span>
)}
<Input
{...register('password', { required: true, minLength: 5 })}
type="password"
placeholder="Password"
/>
{errors.password && (
<span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
This field is required and minLength is five!!
</span>
)}
<Button type="submit" value="Sign Up" />
</form>
</FormBox>
<BottomBox cta="Have an account?" linkText="Log In" link={routes.home} />
</AuthLayout>
)
}
export default SignUp
56개의 댓글
Delta Executor site gives you instruments for your PC. It is without a doubt seen as the most adaptable contraption. https://deltaexploits.com/
Here you will get PS2 Roms 100 free, we are giving you direct download joins ISO document and Roms, you can play this game in PS2 emulators like PCSX2, PS2emu, NeutrinoSX2, Play Macintosh, and so forth.
The Roblox specialist that individuals need the most is delta executor site. Notwithstanding the way that it has just been accessible for a brief time frame, its prominence has surpassed that of the Roblox projects. https://krnl.vip/ps2-roms-iso/ https://deltaexecutor.io/
VidMate app also offers a wide range of movies, including popular and recent releases, as well as classic and cult films. Users can download and play offline. https://vidmates.app/
Wink Apk is a modern video enhancing tool equipped with powerful AI technology that allows users to easily edit videos like a professional.
https://winkmod.net
Saveinstaa.com is available in several languages, making it accessible to a broader audience around the world. https://saveinstaa.com/
Official Gogoanime to watch all anime series in HD quality with SUB and DUB, No Ads 100% FREE GUARANTEED!
PikaShow APK Download is a Streaming Platform For Android 2024! Includes Live Cricket, TV Shows, Movies, Download Videos, and many more. https://pikashowsapks.net/
PikaShow APK is Best Streaming Platform Includes Live Cricket, TV Shows, Download Videos. Get PikaShow App for iOS, PC and Android. https://pikashows.com.co/
Insta Pro is a modified version of Instagram that allows users to download photos & videos from Insta. Download Instagram Pro Latest Version 2024. https://instapro.dev/
Insta Pro is a modified version of Instagram that allows users to download photos & videos from Insta. Download Instagram Pro Latest Version 2024. https://instapro.dev/
Insta Pro is a modified version of Instagram that allows users to download photos & videos from Insta. Download Instagram Pro Latest Version 2024. https://instapro.dev/
Insta Pro is a modified version of Instagram that allows users to download photos & videos from Insta. Download Instagram Pro Latest Version 2024. https://instapro.dev/
Insta Pro is a modified version of Instagram that allows users to download photos & videos from Insta. Download Instagram Pro Latest Version 2024. https://instapro.dev/
Download Insta Pro APK Updated Version For Android. Instagram Pro Developed by Sam Provides Extra Features like Hide Stories, App Lock & Font Styles. https://instapro.net.co/
Panda Master Apk Latest Version Download
Vegas Sweeps Apk Latest Version v1.0.60 Download
In conclusion, the sign-up functionality efficiently combines React Hook Form with Apollo Client's useMutation for a smooth account creation process. By leveraging real-time validation and GraphQL mutation, the app ensures a streamlined user experience. For Geometry Dash Pro, this approach can be applied to enhance user registration systems, allowing players to quickly create accounts, save progress, and seamlessly jump into the game without unnecessary delays, much like advancing through challenging game levels. https://geometrydashpro.fun/
Android용 Minecraft 를 무료로 다운로드하세요. 당사 사이트와 같이 신뢰할 수 있는 소스에서 다운로드하세요. https://minescraft.app
Android용 Minecraft 를 무료로 다운로드하세요. 당사 사이트와 같이 신뢰할 수 있는 소스에서 다운로드하세요. https://minescraft.app
Android용 Minecraft 를 무료로 다운로드하세요. 당사 사이트와 같이 신뢰할 수 있는 소스에서 다운로드하세요. https://minescraft.app
Android용 Minecraft 를 무료로 다운로드하세요. 당사 사이트와 같이 신뢰할 수 있는 소스에서 다운로드하세요. https://minescraft.app
Android용 Minecraft 를 무료로 다운로드하세요. 당사 사이트와 같이 신뢰할 수 있는 소스에서 다운로드하세요. https://minescraft.app
Want to make your photos look stunning? Wink Mod APK is the perfect app for you, offering powerful features and an easy-to-use interface. https://winksapk.com/
For a fast and efficient browsing experience, I highly recommend using UC Browser from https://getucbrowser.com/ website. Its speed and user-friendly features make it an excellent choice.
Meitu Mod APK from https://meituapp.net/ is fantastic! It unlocks all the premium features for free, making it the best photo editing app I've used. Highly recommend for stunning edits.
useMutation(3)_signUp_useNavigate is a React hook that facilitates user sign-up processes while allowing for navigation upon successful registration. Just as vn mod apk adds enhanced functionalities to apps, this hook streamlines user interactions and improves the overall experience in web applications.https://vnproapk.net/
Pikashow boasts an impressive library of movies, TV shows, sports, and live channels. It includes Hollywood and Bollywood titles https://pikashow.tools/
download pgsharp app from their official site for pokemon go spoofing location http://pgsharpapk.com.br/
need a quick and easy percentage to gpa converter? check out this amazing tool today.
https://cgpacalcs.com/percentage-to-gpa-calculator/
That's Not My Neighbor is a thrilling horror game that immerses players in a mysterious neighborhood. https://thatsnotmy-neighbor.io/
This app is a blast! Bombitup makes it so easy to send multiple messages at once. Perfect for harmless fun https://bombitups.com/
Looking for a new way to enjoy fun on your phone? Game Vault 777 APK is where it's at! The graphics are amazing, and the game variety is top-notch. https://getgamevaults.com/
In the life simulation game BitLife, players take charge of a stranger's whole existence. It was made available by Candy Writer, a free software that, despite being relatively unknown on Google Play, had a significant impact on the gaming industry. With the use of a list of instructions, random events, and humor, https://bitlifeonline.com lets users experience what would happen if they majored in acting or what they would do in their later years.