Page MenuHomec4science
Files F122175323

ResultCard.js
No OneTemporary
Actions

File Metadata

Created
Wed, Jul 16, 08:49

ResultCard.js
View Options

import React from "react"
import { makeStyles } from '@material-ui/core/styles';
import TermCard from "../components/TermCard"
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Badge from '@material-ui/core/Badge';
import DescriptionIcon from '@material-ui/icons/Description'
import { HiOutlineDocumentDuplicate } from "react-icons/hi";
import { HiOutlineDocument } from "react-icons/hi";
const useStyles = makeStyles((theme) =>({
card: {
width: '100%',
marginTop: "1rem",
},
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}))
function ResultCard({result}) {
const classes = useStyles();
//create one array to organize the frontend output
const termresult = []
const termArray = result?.map(i=>(
// get condition details
i.term?.map(j =>(
// termresult.push([j, i.id, i.comment, i.condition_type])
termresult.push([j, [i.id, i.comment, i.condition_type]])
))
))
//groupyBy array
function groupBy(objectArray, property) {
// console.log(objectArray)
return objectArray.reduce((acc, obj) => {
// console.log(obj[0])
const key = obj[0][property][0].description;
if (!acc[key]) {
acc[key] = [];
}
// Add object to list for given key's value
acc[key].push(obj);
return acc;
}, {});
}
const groupedTerm = groupBy(termresult, 'version')
//first version
// console.log(groupedTerm[1])
//convert object into array
const termItem = Object.entries(groupedTerm);
console.log(termItem)
const displayVersion =
termItem?.map(item =>(
<div>
<Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}></Typography>
{item?.map(i => (
<Badge anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
style={{
padding: "1px",
color: "black",
}}
badgeContent={typeof i === "object" && i.length} >{typeof i === "string" && i} {typeof i === "object" && i.length > 1 ? <HiOutlineDocumentDuplicate />: typeof i === "object" && <HiOutlineDocument/>}</Badge>
))
}
</AccordionSummary>
{item?.map(j => (
<AccordionDetails>
<Typography>
{typeof j === "object" &&
<TermCard term={j}/>
}
</Typography>
</AccordionDetails>
))
}
</Accordion>
</div>
))
return (
//level 0
<div key={result.id}>
{displayVersion}
</div>
)
}
export default ResultCard

Event Timeline

c4science · Help