Skip to content

Commit

Permalink
create Button, Field and Form components b00tc4mp#451; create Registe…
Browse files Browse the repository at this point in the history
…r page; write register user logic; check user registered successfully in our db b00tc4mp#422
  • Loading branch information
juditta99 committed Mar 15, 2024
1 parent 9e68e68 commit 3687a6b
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 45 deletions.
6 changes: 1 addition & 5 deletions staff/judy-grayland/project/app/src/components/Button.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
function Button(props) {
return (
<button
onMouseEnter={props.handleOnMouseEnter}
onMouseLeave={props.handleOnMouseLeave}
onClick={props.handleOnClick}
>
<button type={props.type ?? 'button'} onClick={props.onClick}>
{props.children}
</button>
)
Expand Down
10 changes: 10 additions & 0 deletions staff/judy-grayland/project/app/src/components/Field.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
function Field(props) {
return (
<>
<label htmlFor={props.inputId}>{props.children}</label>
<input name={props.name} id={props.inputId} />
</>
)
}

export default Field
5 changes: 5 additions & 0 deletions staff/judy-grayland/project/app/src/components/Form.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
function Form(props) {
return <form onSubmit={props.onSubmit}>{props.children}</form>
}

export default Form
44 changes: 25 additions & 19 deletions staff/judy-grayland/project/app/src/logic/registerUser.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
import { validate, errors } from '../../../shared'
import { SystemError } from '../../../shared/errors'

async function registerUser(name, email, password) {
function registerUser(name, email, password) {
validate.text(name, 'name')
validate.email(email, 'email')
validate.password(password, 'password')

try {
const req = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, email, password }),
}

const res = await fetch(`${import.meta.env.VITE_API_URL}/users/`, req)

if (!res.ok) {
const body = await res.json()
throw new errors[body.error](body.message)
}
return null
} catch (error) {
throw error
const req = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, email, password }),
}

return fetch(`${import.meta.env.VITE_API_URL}/users`, req)
.catch((error) => {
throw new SystemError(error.message)
})
.then((res) => {
if (!res.ok) {
return res
.json()
.catch((error) => {
throw new SystemError(error.message)
})
.then((body) => {
throw new errors[body.error](body.message)
})
}
})
}

export default registerUser
67 changes: 46 additions & 21 deletions staff/judy-grayland/project/app/src/pages/Register.jsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,57 @@
import { NavLink } from 'react-router-dom'
import logic from '../logic'
import Button from '../components/Button'

function handleOnClick() {
console.log('mooo')
}

function handleOnMouseLeave() {
console.log('soooo')
}
import Form from '../components/Form'
import Field from '../components/Field'

// function handleOnClick() {
// console.log('mooo')
// }

function Register() {
function Register(props) {
function registerNewUser(event) {
event.preventDefault()

const formData = new FormData(event.currentTarget)
const data = {}

for (let [key, val] of formData.entries()) {
data[key] = val
}

console.log(data)

try {
logic.registerUser(data.name, data.email, data.password, (error) => {
if (error) {
console.error(error)

return
}
props.onSuccess()
})
} catch (error) {
console.error(error)
}
}

return (
<div>
<h3>Register</h3>
<Button
handleOnMouseEnter={() => {
console.log('boo')
}}
handleOnClick={handleOnClick}
handleOnMouseLeave={handleOnMouseLeave}
>
<h3>Send</h3>
</Button>
</div>
<>
<h1>Register</h1>
<Form onSubmit={registerNewUser}>
<Field name="name" inputId="name-input">
Name
</Field>
<Field name="email" inputId="email-input">
Email
</Field>
<Field name="password" inputId="password-input">
Password
</Field>
<Button type="submit">Send</Button>
</Form>
Already registered?<NavLink to="login"> Log in</NavLink>
</>
)
}

Expand Down

0 comments on commit 3687a6b

Please sign in to comment.