Page MenuHomec4science
Files F70371723

SearchFilterFields.js
No OneTemporary
Actions

File Metadata

Created
Sat, Jul 6, 13:57

SearchFilterFields.js
View Options

import React, {useContext, useState, useEffect} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { Container, Row, Col } from 'react-bootstrap';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { searchCondi, searchorganizationonly, searchjournalonly } from '../services/requests/Condition'
import {getJournal} from '../services/requests/Journal'
import {getFunder} from '../services/requests/Funder'
import {getInstitution} from '../services/requests/Institution'
import { Fetch } from 'react-request';
import {Context} from "../Context"
import ResultCard from "../components/ResultCard"
import DetailCard from "../components/DetailCard"
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
},
formControl: {
margin: theme.spacing(1),
width: 200,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
card: {
width: '100%',
marginTop: "1rem",
},
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
export default function SearchFilterFields() {
const classes = useStyles();
//call the custom hook for listing field with api
const { getSelectedInstitId,
getSelectedJournalId,
getSelectedFunderId,
institList,
journalList,
funderList,
institId,
journalId,
funderId,
setInstitId,
setJournalId,
setFunderId,
institName,
journalName,
funderName,
}
= useContext(Context)
//responses
const [conditions, setConditions] = useState([]);
const [details, setDetails] = useState([]);
const [details2, setDetails2] = useState([]);
useEffect(() => {
setDetails('null')
setDetails2('null')
}, [])
function handleInstit(e, newInputValue) {
if (newInputValue){
getSelectedInstitId(newInputValue)
return
}
setInstitId("")
}
function handleFunder(e, newInputValue) {
console.log(newInputValue)
if (newInputValue){
getSelectedFunderId(newInputValue)
return
}
setFunderId("")
}
function handleJournal(e, newInputValue) {
if (newInputValue){
getSelectedJournalId(newInputValue)
return
}
setJournalId("")
}
function handleSubmit(e) {
e.preventDefault()
//reset precedent results
setConditions([])
setDetails([])
setDetails2([])
if (institId && !journalId && !funderId){
//get organizations conditions
// alert(`get api organization Condition only: ${institId}`)
//condtion type is not journal only = 1
searchorganizationonly(institId,1).then(res => {
const data = res.data;
setConditions(data);
})
getInstitution(institId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
}
else if (!institId && !journalId && funderId){
//get funder conditions
// alert(`get api funder Condition only: ${funderId}`)
//condtion type is not journal only = 1
searchorganizationonly(funderId,1).then(res => {
const data = res.data;
setConditions(data);
console.log(data);
})
getFunder(funderId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
}
else if (!funderId && !institId && journalId){
//get journals conditions
// alert(`get api journal Condition only: ${journalId}`)
//condtion type is not institution only = 2
//get journal detail
searchjournalonly(journalId,2).then(res => {
const data = res.data;
setConditions(data);
console.log(data);
}
)
getJournal(journalId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
}
else if (institId && journalId && !funderId) {
//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
//condtion type journal/condition = 3
searchCondi(journalId,institId,1).then(res => {
const data = res.data;
console.log(data)
setConditions(data);
console.log(data);
})
getJournal(journalId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
getInstitution(institId).then(res=> {
const data = res.data;
setDetails2(data);
console.log(data);
})
}
else if (!institId && journalId && funderId) {
// alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
//condtion type journal/institution/funder conditions = 3
searchCondi(journalId,funderId,3).then(res => {
const data = res.data;
setConditions(data);
console.log(data);
})
}
// alert(`Submit Institution: ID: ${institId} , Submit Funder: ${fund}, Submit Journal ID: ${journalId}`)
}
console.log(details2)
console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
const detailsResult =
<div key={details.id}>
<DetailCard details={details} />
</div>
const conditionResults =
<div>
<ResultCard result={conditions} />
</div>
//work only for term display
// <div key={array.id}>
// {condition = array.condition_type.id}
// {array.term.map( term => (
// <TermCard key={term.id} term={term} condition={condition}/>
// ))}
// </div>
return (
<div className="searchfilter">
<Container className= "App-check-form" fluid>
<Row >
<Col>
<form style={{ marginTop: "8rem"}} noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
<FormControl className={classes.formControl}>
<Autocomplete
freeSolo
selectOnFocus
clearOnBlur
id="institution"
options={institList.map((option) => option.name)}
renderOption={(params) => (
<a style={{ textAlign: "left"}}>{params}</a>
)}
// getOptionLabel={(option) => option.name}
// filterOptions={filterOptions}
onInputChange={handleInstit}
renderInput={(params) => (
<TextField
{...params}
label="Swiss Institutions"
// margin="normal"
value={institId}
variant="outlined"
/>
)}
/>
</FormControl>
<FormControl className={classes.formControl}>
<Autocomplete
freeSolo
id="funder"
options={funderList.map((option) => option.name)}
renderOption={(params) => (
<a style={{ textAlign: "left"}}>{params}</a>
)}
onInputChange={handleFunder}
renderInput={(params) => (
<TextField
{...params}
label="Funder"
// margin="normal"
value={funderId}
variant="outlined"
/>
)}
/>
</FormControl>
<FormControl className={classes.formControl}>
<Autocomplete
freeSolo
id="journal"
options={journalList.map((option) => option.name)}
renderOption={(params) => (
<a style={{ textAlign: "left"}}>{params}</a>
)}
onInputChange={handleJournal}
renderInput={(params) => (
<TextField
{...params}
label="Journal"
// margin="normal"
value={journalId}
variant="outlined"
/>
)}
/>
</FormControl>
<FormControl className={classes.formControl}>
<Button
className="App-btn"
variant="contained"
type="submit"
>
Check
</Button>
</FormControl>
</form>
</Col>
</Row>
<Container className="details" fluid>
<Row>
<Col>
{detailsResult}
</Col>
</Row>
</Container>
</Container>
<Container className="term" fluid>
<Row>
<Col>
{conditionResults}
</Col>
</Row>
</Container>
</div>
);
}

Event Timeline

c4science · Help