Fakultas Ilmu Komputer UI

Commit 970a4d19 authored by Nurul Srianda Putri's avatar Nurul Srianda Putri
Browse files

[GREEN] implement form submission & form page state

parent 662d5fd3
Pipeline #72119 failed with stages
in 4 minutes and 48 seconds
......@@ -7,41 +7,58 @@ import Stepper from '../components/Stepper/Stepper'
import {useSelector} from 'react-redux'
import {getEmail, isLoggedIn} from '../store/auth/authSlice'
import {useState} from 'react'
import {useForm} from 'react-hook-form'
const FormIUMK = () => {
const {register, handleSubmit, errors} = useForm({
mode: 'onChange',
reValidateMode: 'onChange',
})
const name = useSelector(getEmail)
const loggedIn = useSelector(isLoggedIn)
const [pageNumber, setPageNumber] = useState(1)
const [data, setData] = useState({})
const [employeeData, setEmployeeData] = useState(null)
const onSubmit = (input) => {
if (pageNumber != 3) {
if (pageNumber == 1) {
setData({...data, ...input})
} else {
setData({...data, ...input, ...{karyawan: employeeData}})
}
}
setPageNumber(pageNumber + 1)
}
return (
<div>
<Navbar isLoggedIn={loggedIn} name={name} />
<Stepper currentPage={pageNumber} setCurrentPage={setPageNumber} />
<div className="bg-white flex flex-col ml-80 mr-80 pt-8 pb-20 px-5">
{pageNumber == 1 && <FormIUMK1 />}
{pageNumber == 2 && <FormIUMK2 />}
{pageNumber == 1 && (
<FormIUMK1
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
/>
)}
{pageNumber == 3 && <FormIUMK3 />}
{pageNumber == 2 && (
<FormIUMK2
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
setEmployeeData={setEmployeeData}
/>
)}
{pageNumber == 3
? <button
className="bg-poporange text-white heading-3 px-10 md:px-32 lg:px-32 xl:px-32 2xl:px-32 py-2.5 mr-6 mb-10 float-right shadow rounded-lg submit self-end"
data-testid="submit-button"
onClick={() => setPageNumber(pageNumber + 1)}
>
Submit
</button>
: <button
className="bg-poporange text-white heading-3 px-10 md:px-32 lg:px-32 xl:px-32 2xl:px-32 py-2.5 mr-6 mb-10 float-right shadow rounded-lg submit self-end"
data-testid="lanjut-button"
onClick={() => setPageNumber(pageNumber + 1)}
>
Lanjut
</button>
}
{pageNumber == 3 && <FormIUMK3 data={data} />}
</div>
</div>
)
}
export default FormIUMK
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment