Homec4science
Diffusion Open Access Compliance Check Tool (OACCT) (master) Browse

rOACCT/assets/src/components/SearchFilterFields.js
15ee9aa4baf1master

Last Change
Raw File

SearchFilterFields.js
View Options

import React, {useState, useCallback, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Input from '@material-ui/core/Input';
// import Api from '../services/Api';
import { getListOfInstitution } from '../services/requests/Institution'
import { getListOfFunder } from '../services/requests/Funder'
import { getListOfJournal } from '../services/requests/Journal'
import JournalCard from "./journalCard"
import { Container, Row, Col } from 'react-bootstrap';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
},
formControl: {
margin: theme.spacing(1),
width: 200
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
export default function SearchFilterFields() {
const classes = useStyles();
//declare state hook for functional component
// const [queryJournal, setQueryJournal ] = useState(''); //query storage
const [institList, setInstitList] = useState([]);
const [fundList, setFundList] = useState([]);
const [journalList, setJournalList] = useState([]);
const [instit, setInstit] = useState([]);
const [fund, setFund] = useState([]);
const [journal, setJournal] = useState([]);
const getInstitListFromApi = useCallback(async () => {
try {
const response = await getListOfInstitution()
setInstitList(response.data)
} catch (error) {
alert(`error 700 from Get Institution- ${error.message}`)
}
}, [])
const getFundListFromApi = useCallback(async () => {
try {
const response = await getListOfFunder()
setFundList(response.data)
} catch (error) {
alert(`error 700 from Get Funder- ${error.message}`)
}
}, [])
const getJournalListFromApi = useCallback(async () => {
try {
const response = await getListOfJournal()
setJournalList(response.data)
} catch (error) {
alert(`error 700 from Get Journal- ${error.message}`)
}
}, [])
useEffect(() => {
getInstitListFromApi(),
getFundListFromApi(),
getJournalListFromApi()
}, [])
function handleInstit(e) {
const {value} = e.target
setInstit(value)
}
function handleFunder(e) {
const {value} = e.target
setFund(value)
}
function handleJournal(e) {
const {value} = e.target
setJournal(value)
}
console.log(`Selected Institution: ${instit}, Selected Funder: ${fund}, Selected Journal: ${journal}`)
// const searchJournals = (e) => {
// e.preventDefault();
// console.log("submitting")
// const query = "name" //test purpose
// // Api.get(`journal/?search=${queryJournal}`)
// // .then(res => {
// // const data = res.data;
// // setJournals(data);
// // console.log(data);
// // })
// }
return (
<div className="searchfilter">
<Container fluid>
<Col md={{ span: 6, offset: 3 }}>
<form style={{ marginTop: "8rem"}} className={classes.root} noValidate autoComplete="on" onSubmit={console.log("submit")} color="inherit">
<Row md={{ span: 6, offset: 3 }}>
<Col >
<FormControl className={classes.formControl}>
<InputLabel id="institution">Institutions</InputLabel>
<Select
labelId="institution"
id="institution"
value={[instit]}
onChange={handleInstit}
>
{institList.map(item =>(
<MenuItem key={item.pk} value={item.name}>{item.name}</MenuItem>
))}
</Select>
</FormControl>
</Col>
<Col>
<FormControl className={classes.formControl}>
<InputLabel id="funder">Funders</InputLabel>
<Select
labelId="funder"
id="funder"
value={[fund]}
onChange={handleFunder}
>
{fundList.map(item =>(
<MenuItem key={item.pk} value={item.name}>{item.name}</MenuItem>
))}
</Select>
</FormControl>
</Col>
<Col>
<FormControl className={classes.formControl}>
{/* <InputLabel id="Journals">Journal or ISSN</InputLabel> */}
{/* <Input type='text 'name="queryJournal"
placeholder="Enter Journal Title or ISSN"
value={[journal]}
onChange={handleJournal}
inputProps={{'object': 'description'}} /> */}
<Autocomplete
freeSolo
id="journal"
disableClearable
options={journalList.map((option) => option.name)}
renderInput={(params) => (
<TextField
{...params}
label="Search Journal"
// margin="normal"
value={journal}
variant="outlined"
onChange={handleJournal}
InputProps={{ ...params.InputProps, type: 'search' }}
/>
)}
/>
</FormControl>
</Col>
<Col>
<FormControl className={classes.formControl} style={{margin: '0', top: '50%', msTransform: "translateY(-50%)", transform: "translateY(-50%)"}}>
<Button style={{width: '99%'}}variant="contained" color="secondary" type="submit" >
Search
</Button>
</FormControl>
</Col>
</Row>
</form>
</Col>
{/* Result serach
<div className="card-list" style={{ marginTop: "4rem"}}>
{journal.map(journal =>(
<JournalCard journal={journal} key={journal.id}/>
))}
</div> */}
</Container>
</div>
);
}
c4science · Help