Page MenuHomec4science
Files F66324025

ResultCard.js
No OneTemporary
Actions

File Metadata

Created
Sun, Jun 9, 19:59

ResultCard.js
View Options

import React from "react"
import { makeStyles } from '@material-ui/core/styles';
import "./ResultCard.css"
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 { HiOutlineDocumentDuplicate } from "react-icons/hi";
import { HiOutlineDocument } from "react-icons/hi";
import Grid from '@material-ui/core/Grid'
import Box from '@material-ui/core/Box'
import Container from '@material-ui/core/Container';
const useStyles = makeStyles((theme) =>({
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
}))
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)
//manage the display order
function orderVersion (version) {
if (version[0] ==="Submitted version") {
version.unshift(3)
}
else if (version[0] === "Published version") {
version.unshift(1)
}
else if (version[0] === "Accepted version") {
version.unshift(2)
}
}
//apply the function for each version
termItem?.map(i=>(
orderVersion(i)
))
termItem.sort()
console.log(termItem)
const displayVersion =
termItem?.map(item =>(
<div className={classes.root} >
<Accordion className="term-version">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>
{item?.map(i => (
<Badge anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
style={{
padding: "0.1rem",
color: "black",
}}
badgeContent={typeof i === "object" && i.length} >{typeof i === "string" && i} {typeof i === "object" && i.length > 1 ? <HiOutlineDocumentDuplicate />: typeof i === "object" && <HiOutlineDocument/>}</Badge>
))
}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<Container maxWidth="xl" >
<Grid container spacing={0.5} direction="row">
{item?.map(j => (
typeof j === "object" &&
j?.map(k => (
<TermCard term={k}/>
))
))
}
</Grid>
</Container>
</Typography>
</AccordionDetails>
</Accordion>
</div>
))
return (
//level 0
<div className={classes.root} >
{displayVersion}
</div>
)
}
export default ResultCard

Event Timeline

c4science · Help