Skip to content
This repository has been archived by the owner on Mar 6, 2023. It is now read-only.

Commit

Permalink
fix: bug when API throw an error
Browse files Browse the repository at this point in the history
  • Loading branch information
@pom421
pom421 committed Mar 25, 2020
1 parent e7fee14 commit 8fa1a32
Showing 1 changed file with 80 additions and 71 deletions.
151 changes: 80 additions & 71 deletions src/pages/actDetail/[id].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,9 @@ import { isAllowed, ACT_CONSULTATION, ACT_MANAGEMENT } from "../../utils/roles"
import { logError } from "../../utils/logger"
import { profiles } from "../../utils/actsConstants"

const ActDetail = ({ initialAct, id, error, currentUser }) => {
const ActDetail = ({ initialAct: act, id, error, currentUser }) => {
const router = useRouter()
const [isError, setIsError] = useState(error)
const [act, setAct] = useState(initialAct)

const [modal, setModal] = useState(false)
const toggle = () => setModal(!modal)
Expand Down Expand Up @@ -56,76 +55,83 @@ const ActDetail = ({ initialAct, id, error, currentUser }) => {
<Layout page="actsList" currentUser={currentUser}>
<Title1 className="mt-5 mb-5">{`Acte n° ${(act && act.internalNumber) || ""}`}</Title1>

<Container style={{ maxWidth: 780 }}>
<div className="px-2 py-2">
<Title2 className="mb-4 mt-3">{"Identification de l'acte"}</Title2>
<Row>
<Col className="mr-3">
<ColumnAct header={"Numéro de PV"} content={act && act.pvNumber} />
</Col>{" "}
<Col className="mr-3">
<ColumnAct header={"Demandeur"} content={act && act.asker && act.asker.name} />
</Col>
<Col className="mr-3">
<ColumnAct
header={"Date"}
content={act && act.examinationDate && moment(act.examinationDate).format(FORMAT_DATE)}
/>
</Col>
<Col className="mr-3">
{act && act.periodOfDay && <ColumnAct header={"Créneau horaire"} content={act.periodOfDay} />}
</Col>
</Row>
{getProfiledRender({ profile: act.profile, act })}
</div>

{!isEmpty(isError) && (
{!isEmpty(isError) && (
<Container style={{ maxWidth: 780 }}>
<Alert color="danger" className="mt-5 mb-5">
{isError.general || "Erreur serveur"}
{isError || "Erreur serveur"}
</Alert>
)}
</Container>

<Container style={{ maxWidth: 780 }} className="mt-4">
{isAllowed(currentUser.role, ACT_MANAGEMENT) && (
<Row>
<Col>
<Button block outline color="danger" onClick={toggle}>
<DeleteForeverOutlinedIcon width={24} />
{" Supprimer l'acte"}
</Button>{" "}
</Col>
<Col>
<Button block outline color="info" onClick={() => editAct(id)}>
<EditOutlinedIcon width={24} />
{" Modifier l'acte"}
</Button>{" "}
<div>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Voulez-vous vraiment supprimer cet acte?</ModalHeader>
<ModalBody>
Si vous supprimez cet acte, il ne serait plus visible ni modifiable dans la liste des
actes. Merci de confirmer votre choix.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={deleteAct}>
Supprimer
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Annuler
</Button>
</ModalFooter>
</Modal>
</div>
</Col>
</Row>
)}
<div className="text-center mt-5">
<Link href="/actsList">
<a>Retour à la liste des actes</a>
</Link>
</div>
</Container>
</Container>
)}
{isEmpty(isError) && (
<>
<Container style={{ maxWidth: 780 }}>
<div className="px-2 py-2">
<Title2 className="mb-4 mt-3">{"Identification de l'acte"}</Title2>
<Row>
<Col className="mr-3">
<ColumnAct header={"Numéro de PV"} content={act && act.pvNumber} />
</Col>{" "}
<Col className="mr-3">
<ColumnAct header={"Demandeur"} content={act && act.asker && act.asker.name} />
</Col>
<Col className="mr-3">
<ColumnAct
header={"Date"}
content={act && act.examinationDate && moment(act.examinationDate).format(FORMAT_DATE)}
/>
</Col>
<Col className="mr-3">
{act && act.periodOfDay && (
<ColumnAct header={"Créneau horaire"} content={act.periodOfDay} />
)}
</Col>
</Row>
{getProfiledRender({ profile: act.profile, act })}
</div>
</Container>

<Container style={{ maxWidth: 780 }} className="mt-4">
{isAllowed(currentUser.role, ACT_MANAGEMENT) && (
<Row>
<Col>
<Button block outline color="danger" onClick={toggle}>
<DeleteForeverOutlinedIcon width={24} />
{" Supprimer l'acte"}
</Button>{" "}
</Col>
<Col>
<Button block outline color="info" onClick={() => editAct(id)}>
<EditOutlinedIcon width={24} />
{" Modifier l'acte"}
</Button>{" "}
<div>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Voulez-vous vraiment supprimer cet acte?</ModalHeader>
<ModalBody>
Si vous supprimez cet acte, il ne serait plus visible ni modifiable dans la liste
des actes. Merci de confirmer votre choix.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={deleteAct}>
Supprimer
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Annuler
</Button>
</ModalFooter>
</Modal>
</div>
</Col>
</Row>
)}
<div className="text-center mt-5">
<Link href="/actsList">
<a>Retour à la liste des actes</a>
</Link>
</div>
</Container>
</>
)}
</Layout>
)
}
Expand All @@ -139,12 +145,15 @@ ActDetail.getInitialProps = async ctx => {
try {
const response = await fetch(API_URL + ACT_DETAIL_ENDPOINT + "/" + id, { headers: authHeaders })
json = await handleAPIResponse(response)

return { initialAct: json, id }
} catch (error) {
logError(error)
redirectIfUnauthorized(error, ctx)

return { error: "Erreur serveur" }
const message = error.status && error.status === 404 ? "L'acte n'a pu être trouvé." : "Erreur serveur."

return { error: message }
}
}

Expand Down

0 comments on commit 8fa1a32

Please sign in to comment.