react-pdf: how to view pdf and return to sender - react-pdf

Question

I have successfully implemented react-pdf. The pdf has 3 navigation
buttons - Return, Previous, and Next. The button that does not work
is "Return". The functioning components are Send.js and RenderPDF.js.
Send.js displays a list of documents with an "Invoice" button adjacent
to each item. Clicking Invoice sends a prop (pdf name) to
RenderPDF.js, which renders the pdf. I have no graceful means of
returning to Send.js after viewing the pdf. Using history.push(), I
can return to any other page in my site except Send.js. Any
suggestions?
send.js
import React, {
useContext,
useEffect,
useState
} from 'react';
import PageTitle from '../components/common/PageTitle';
import SendPageHeading from '../components/common/SendPageHeading';
import {
FetchContext
} from '../context/FetchContext';
import ButtonDanger from '../components/common/ButtonDanger';
import ButtonLookup from '../components/common/ButtonLookUp';
import FormError from '../components/FormError';
import {
RenderPDF
} from '../components/common/RenderPDF.js';
const SendItemContainer = ({
children
}) => ( <
div className = "bg-white rounded shadow-md mb-2 p-0" > {
children
} < /div>
);
const SendItem = ({
item,
handlePdfProcess,
onDelete
}) => {
return ( <
div className = "flex" >
<
div className = "flex flex-row w-full" >
<
div className = "flex flex-row w-full my-1 " >
<
div className = "relative text-sm w-8 left-0 text-gray-600" > {
item.companyKey
} <
/div> <
div className = "relative text-sm w-88 left-50 text-gray-600" > {
item.companyName
} <
/div> <
div className = "relative text-sm w-8 left-100 text-gray-600" > {
item.docType
} <
/div> <
div className = "relative text-sm w-8 left-125 text-gray-600" > {
item.docNo
} <
/div> <
div className = "relative text-sm w-24 left-175 text-gray-600" > {
item.docDate.substr(5, 2) +
'-' +
item.docDate.substr(8, 2) +
'-' +
item.docDate.substr(0, 4)
} <
/div> <
div className = "relative text-sm w-94 left-225"
style = {
item.emailTo.indexOf(' ') === -1 ?
{
color: '#212529'
} :
{
color: '#e53e3e',
fontWeight: 'bold'
}
} >
{
item.emailTo
} <
/div> <
div className = "relative text-sm w-8 left-275 text-gray-600" > {
item.emailStatus
} <
/div> <
/div> <
div className = "flex flex-row self-end mr-3" >
<
ButtonLookup text = "Invoice"
onClick = {
() => handlePdfProcess(item)
}
/> <
ButtonDanger text = "Delete"
onClick = {
() => onDelete(item)
}
/> <
/div> <
/div> <
/div>
);
};
const Send = () => {
const fetchContext = useContext(FetchContext);
const [docData, setDocData] = useState([]);
const [pdfData, setPdfData] = useState();
const [pdfFlag, setPdfFlag] = useState(false);
const [errorMessage, setErrorMessage] = useState();
useEffect(() => {
const getSend = async () => {
try {
const {
data
} = await fetchContext.authAxios.get('send');
setDocData(data);
} catch (err) {
console.log('the err', err);
}
};
getSend();
}, [fetchContext]);
const onDelete = async item => {
try {
if (window.confirm('Are you sure you want to delete this item?')) {
const {
data
} = await fetchContext.authAxios.delete(
`docData/${item.id}`
);
setDocData(docData.filter(item => item.id !== data.modifiedItem.id));
}
} catch (err) {
const {
data
} = err.response;
setErrorMessage(data.message);
}
};
const handlePdfProcess = item => {
// const docName = item.docName;
setPdfData(`${item.docName}`);
setPdfFlag(true);
console.log(`🌵 pdfFlag: ${pdfFlag}`);
};
return pdfFlag ? ( <
>
<
RenderPDF dataFromSend = {
pdfData
}
/> <
/>
) : ( <
>
<
PageTitle title = "Invoice Staging" / >
<
SendPageHeading / > {
errorMessage && < FormError text = {
errorMessage
}
/>} {
docData && docData.length ?
docData.map(item => ( <
SendItemContainer key = {
item.id
} >
<
SendItem item = {
item
}
handlePdfProcess = {
handlePdfProcess
}
/> <
SendItem item = {
item
}
onDelete = {
onDelete
}
/> <
/SendItemContainer>
)) :
'No Document Items'
} <
/>
);
};
export default Send;
< RenderPDF.js
import React, {
useState
} from 'react';
import {
Document,
Page,
pdfjs
} from 'react-pdf/dist/esm/entry.webpack';
import {
useHistory
} from 'react-router-dom';
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
export const RenderPDF = dataFromSend => {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1); //setting 1 to show fisrt page
const history = useHistory(null);
function onDocumentLoadSuccess({
numPages
}) {
setNumPages(numPages);
setPageNumber(1);
}
const findValueByPrefix = (object, prefix) => {
for (var property in object) {
if (
object.hasOwnProperty(property) &&
property.toString().startsWith(prefix)
) {
return object[property];
}
}
};
let pdfDoc = findValueByPrefix(dataFromSend, 'dataFromSend');
pdfDoc = `/pdfs/${pdfDoc}`;
console.log(`🔥 prop: ${pdfDoc}`);
function changePage(offset) {
setPageNumber(prevPageNumber => prevPageNumber + offset);
}
function previousPage() {
changePage(-1);
}
function nextPage() {
changePage(1);
}
const return2Send = () => {
let path = '/send';
history.push(path);
};
return ( <
>
<
Document file = {
pdfDoc
}
onLoadSuccess = {
onDocumentLoadSuccess
} >
<
Page pageNumber = {
pageNumber
}
/> <
/Document> <
div >
<
p >
Page {
pageNumber || (numPages ? 1 : '--')
}
of {
numPages || '--'
} <
/p> <
button type = "button"
style = {
{
marginRight: '24px'
}
}
onClick = {
return2Send
} >
Return <
/button> <
button type = "button"
disabled = {
pageNumber <= 1
}
style = {
{
marginRight: '24px'
}
}
onClick = {
previousPage
} >
Previous <
/button> <
button type = "button"
disabled = {
pageNumber >= numPages
}
onClick = {
nextPage
} >
Next <
/button> <
/div> <
/>
);
};