Convert Dynamic JSON to PDF and XML in React - reactjs

Question

In my project, I'm using ReactJS as a frontend and Flask for Backend.
Here's a code I wrote to Get a case's details in the from of JSON and also convert it to Pretty JSON.
I now require a download button with which I can take the JSON input and download it as JSON, PDF and XML.
Here's the code-
CaseTree.js
<Grid item xs={12} md={10} className={classes.rightUpperPart}>
{/* Render CaseTree in Pretty Json format */}
{
(caseReducer.isLoading || !caseReducer.caseTree ||fileReducer.isLoading || !fileReducer.file || !fileReducer.fileType) ? (
<JsonPretty data={caseReducer.caseTree}/>
) : (fileReducer.fileType === 'report' || fileReducer.fileType === 'txt') ? (
<ShowTXT data={fileReducer.file} className={classes.rightPart}/>
) : (fileReducer.fileType === 'tsv') ? (
<ShowTSV data={fileReducer.file} className={classes.rightPart}/>) : (
<pre className={classes.preStyle}>{fileReducer.file}</pre>
)
}
</Grid>
**ADD DOWNLOAD BUTTON HERE**
JSON Pretty File
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import {
Box,
Typography
} from '#material-ui/core';
import { useSelector } from 'react-redux';
// custom styles
const useStyles = makeStyles((theme) =>({
root: {
backgroundColor: '#1f4662',
color: '#fff',
fontSize: '12px',
overflow: 'auto',
padding: theme.spacing(4),
height: theme.spacing(55),
},
headerStyle: {
backgroundColor: '193549',
fontFamily: 'monospace',
color: '#ffc600',
},
preStyle: {
display: 'block',
padding: '10px 3px',
margin: '0',
color: '#fff'
}
}))
function JsonPretty({data}) {
// invoke custom styles
const classes = useStyles()
// get case Reducer
const caseReducer = useSelector(state => state.case)
// default json data
const defaultData = {
"processing": ( caseReducer.isLoading ) ? "Wait Processing..." : "Done",
"success": false,
"message": ( caseReducer.error ) ? caseReducer.error : "Please Provide a Case Name.",
}
return (
<Box component="div" className={classes.root}>
<Typography className={classes.headerStyle}>
Pretty Json Format
</Typography>
{
(data) ? (
<pre className={classes.preStyle}>
{JSON.stringify(data, null, 4)}
</pre>
) : (
<pre className={classes.preStyle}>
{JSON.stringify(defaultData, null, 4)}
</pre>
)
}
</Box>
)
}
export default JsonPretty
LoadCaseTree def
export const loadCaseTree = (case_name) => (dispatch) => {
//// dispatch laod case
dispatch({
type: LOAD_CASE_TREE
})
//// Create request data body
const data = {
case_name: case_name
}
//// Get token from localstorage
const token = localStorage.getItem('openmf_token')
//// add headers
const config = {
headers: {
'Content-Type': 'application/json'
}
}
//// If token available add to headers
if (token) {
config.headers.Authorization = `Bearer ${token}`
} else {
dispatch({ type: LOAD_CASE_TREE_FAILED })
dispatch(setAlert('Please Log In.'))
return
}
//// Send request to server
axios.post('/case/case-tree', data, config)
.then((res) => {
const case_tree_json = JSON.parse(res.data.tree)
dispatch({
type: LOAD_CASE_TREE_SUCCESSFULL,
payload: {
tree: case_tree_json,
case: res.data.case
}
})
dispatch(setAlert(res.data.message, 'success'))
})
.catch((err) => {
const res = err.response
//// check err status code
if(res && (res.status === 404 || res.status === 422 || res.status === 500)){
dispatch({
type: LOAD_CASE_TREE_FAILED,
payload: {
error: res.data.message
}
})
dispatch(setAlert(res.data.message))
return
}
//// FOr unknown reason
dispatch({
type: LOAD_CASE_TREE_FAILED,
payload: {
error: 'Something went wrong.'
}
})
//// dispatch alert
dispatch(setAlert('Something went wrong.'))
})
}
Please let me know if I've missed out on any code snippet or information.