import React, {useEffect} from"react";import {ViewDocumentComponent,useTDBDocuments} from"@terminusdb/terminusdb-documents-ui-template"exportconstDocumentView= ({tdbClient,type, documentID}) => { const {frames,selectedDocument,error,deleteDocument,getSelectedDocument,getDocumentById,getDocumentFrames,setError } =useTDBDocuments(tdbClient)useEffect(() => {getDocumentFrames()getSelectedDocument(documentID) }, [] )asyncfunctioncallDeleteDocument(){var answer =window.confirm("Are you sure you want to delete this document");if (answer) {constdelCall=awaitdeleteDocument(documentID)if(delCall){//do something after delete document } } }constcloseButtonClick= () =>{// do something after click the close panel button the interface// like navigate to the list of documents }constgotToEditDocument= () =>{// do something after click the edit button like navigate to the // edit page }if(!frames) return <div>{`Fetching frames for document type ${type} ...`}</div>consterrorMessage=typeof error ==="object"?JSON.stringify(error,null,4) : errorreturn <React.Fragment> {error && <div>Server Error: {errorMessage} </div>} <ViewDocumentComponenttype={type}getDocumentById={getDocumentById}documentJson={selectedDocument}frames={frames}closeButtonClick={closeButtonClick}documentID={documentID}deleteDocument={callDeleteDocument}editDocument= {gotToEditDocument} /> </React.Fragment>}
View the ViewDocumentComponent integrated inside a dashboard here