Homec4science
Diffusion Open Access Compliance Check Tool (OACCT) (drf-api-tracking) Browse

rOACCT/assets/src/components/SearchFilterFields.js
0f039a907768drf-api-tracking

Last Change
Raw File

SearchFilterFields.js
View Options

import React, {useState} 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 '../api';
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 FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
}
}));
export default function SearchFilterFields() {
const classes = useStyles();
//declare state hook for functional component
const [query, setQuery, funder, setFunder, org, setOrg ] = useState(''); //query storage
const [journals, setJournals] = useState([]);
const handleChangeFunder = (event) => {
setFunder(event.target.value);
};
const handleChangeOrg = (event) => {
setOrg(event.target.value);
};
const searchJournals = (e) => {
e.preventDefault();
// console.log("submitting");
// const query = "name"; test purpose
API.get(`journal/?search=${query}`)
.then(res => {
const data = res.data;
setJournals(data);
console.log(data);
})
}
return (
<div className="searchfilter">
<Container fluid>
<form style={{ marginTop: "8rem"}} className={classes.root} noValidate autoComplete="on" onSubmit={searchJournals} color="inherit">
<Row md={{ span: 6, offset: 3 }}>
<Col >
<FormControl className={classes.formControl}>
<InputLabel id="Funder">Funder</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={query}
onChange={handleChangeFunder}
>
<MenuItem value={10}>Funder 1</MenuItem>
<MenuItem value={20}>Funder 2</MenuItem>
<MenuItem value={30}>Funder 3</MenuItem>
</Select>
</FormControl>
</Col>
<Col>
<FormControl className={classes.formControl}>
<InputLabel id="Funder">Organisation</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={query}
onChange={handleChangeOrg}
>
<MenuItem value={10}>Organisation 1</MenuItem>
<MenuItem value={20}>Organisation 2</MenuItem>
<MenuItem value={30}>Organisation 3</MenuItem>
</Select>
</FormControl>
</Col>
<Col>
<Input type='text 'name="query"
placeholder="Enter Journal Title or ISSN"
value={query}
onChange={(e) => setQuery(e.target.value)}
inputProps={{'object': 'description'}} />
</Col>
<Col>
<Button style={{width: '99%'}}variant="contained" color="secondary" type="submit">
Search
</Button>
</Col>
{/* Result serach */}
<div className="card-list" style={{ marginTop: "4rem"}}>
{journals.map(journal =>(
<JournalCard journal={journal} key={journal.id}/>
))}
</div>
</Row>
</form>
</Container>
</div>
);
}
c4science · Help