Fakultas Ilmu Komputer UI

Commit 1d38ebaa authored by FadhilP's avatar FadhilP
Browse files

[REFACTOR] Add error alert above submit button

parent e8dad180
import React from "react";
import {
ErrorDiv,
RowInput,
InputForm,
LabelInput,
InputSubmitForm,
} from "../../component/html/html";
ErrorDiv,
RowInput,
InputForm,
LabelInput,
InputSubmitForm,
} from "../../component/html/html";
import { useForm } from "react-hook-form";
import { css } from "@emotion/core";
function FormProgress ({ onSubmitProgress, initialProgressData = null }) {
const {register, handleSubmit, errors} = useForm({
defaultValues: initialProgressData !== null
function FormProgress({ onSubmitProgress, initialProgressData = null, error }) {
const { register, handleSubmit, errors } = useForm({
defaultValues:
initialProgressData !== null
? {
tanggal_progress: initialProgressData["tanggal_progress"],
berita_progress: initialProgressData["berita_progress"],
gambar_progress: initialProgressData["gambar_progress"]
} : {}
});
gambar_progress: initialProgressData["gambar_progress"],
}
: {},
});
return (
<form onSubmit={handleSubmit(onSubmitProgress)} css={css`
return (
<form
onSubmit={handleSubmit(onSubmitProgress)}
css={css`
display: flex;
flex-direction: column;
`}>
<RowInput>
<LabelInput htmlFor="tanggal_progress">
Tanggal<span css={css`color:red`}>*</span>
</LabelInput>
<InputForm
data-testid="tanggal-progress"
type="date"
name="tanggal_progress"
ref={register({ required: true })}
/>
{errors.tanggal_progress && <ErrorDiv>Mohon isi tanggal progress</ErrorDiv>}
</RowInput>
<RowInput>
<LabelInput htmlFor="berita_progress">
Berita<span css={css`color:red`}>*</span>
</LabelInput>
<InputForm
data-testid="berita-progress"
name="berita_progress"
ref={register({ required: true })}
/>
{errors.berita_progress && <ErrorDiv>Mohon isi berita progress</ErrorDiv>}
</RowInput>
`}
>
<RowInput>
<LabelInput htmlFor="tanggal_progress">
Tanggal
<span
css={css`
color: red;
`}
>
*
</span>
</LabelInput>
<InputForm
data-testid="tanggal-progress"
type="date"
name="tanggal_progress"
ref={register({ required: true })}
/>
{errors.tanggal_progress && (
<ErrorDiv>Mohon isi tanggal progress</ErrorDiv>
)}
</RowInput>
<RowInput>
<LabelInput htmlFor="berita_progress">
Berita
<span
css={css`
color: red;
`}
>
*
</span>
</LabelInput>
<InputForm
data-testid="berita-progress"
name="berita_progress"
ref={register({ required: true })}
/>
{errors.berita_progress && (
<ErrorDiv>Mohon isi berita progress</ErrorDiv>
)}
</RowInput>
<RowInput>
<LabelInput htmlFor="gambar_progress">
Gambar
</LabelInput>
<InputForm
data-testid="gambar-progress"
type="file"
name="gambar_progress"
ref={register({ required: false})}
/>
</RowInput>
<RowInput data-testid="save-button">
<InputSubmitForm type="submit" value="SIMPAN"/>
</RowInput>
</form>
)
<RowInput>
<LabelInput htmlFor="gambar_progress">Gambar</LabelInput>
<InputForm
data-testid="gambar-progress"
type="file"
name="gambar_progress"
ref={register({ required: false })}
/>
</RowInput>
<RowInput>
{error && (
<ErrorDiv>
<button className="btn btn-danger">
Error !, Data tidak dapat disimpan
</button>
</ErrorDiv>
)}
</RowInput>
<RowInput data-testid="save-button">
<InputSubmitForm type="submit" value="SIMPAN" />
</RowInput>
</form>
);
}
export default FormProgress;
\ No newline at end of file
export default FormProgress;
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