I have two buttons create signature and Create delivery in PageOne.tsx , at the moment when state is InDelivery then both are visible.
My point is how to hide Create delivery button in the beginning, but when user clicks create signature button which is in PageTwo and inside that page user clicks Submit button which takes user back to this PageOne.tsx.
Then here only Create delivery button should be visible, would appreciate if somebody use my code and provide working example, (I'm new to react) my code:
import React, { ReactNode, useContext, useEffect, useState } from "react";
export function PageOne(props: React.PropsWithChildren<OrderDetailsDto>) {
const [deliveredd, setDeliveredd] = useState(false);
const RedirectToSign = () => {
setDeliveredd(true);
history.push("/PageTwo/" + orderId);
};
const RedirectToDeliv = () => {
history.push("/PageThree/" + orderId);
};
const SignatureButton = () => {
if (initialRequest.type == ApiRequestStatus.Complete) {
var state = initialRequest.responsePayload.order?.state as OrderState;
if (state == OrderState.InDelivery || state == OrderState.Delivered) {
return (
<div onClick={RedirectToSign} className="Button">
create signature
</div>
);
}
}
};
const UpdateButton = () => {
if (state === OrderState.InDelivery) {
return (
<div onClick={RedirectToDeliv} className="Button">
Create delivery
</div>
);
}
}
console.log(deliveredd);
return (
<div className="orderDetails">
{UpdateButton()}
{SignatureButton()}
</div>
);
}
my PageTwo would be something like this :
import React from "react";
import { Button, Form, Input } from "antd";
export function PageTwo(props: React.PropsWithChildren<CreateSignatureProps>) {
const SendSignature = (values: Values) => {
api.cargoApi
.apiCargSignaturePost(request)
.then((response) => history.push("/PageOne/" + orderId));
}
return (
<Form onFinish={SendSignature}>
<Form.Item>
<Button type="primary" htmlType="submit">
{t("signature.create")}
</Button>
</Form.Item>
</Form>
);
}