Page MenuHomec4science
Files F70463195

SearchFilterFields.js
No OneTemporary
Actions

File Metadata

Created
Sat, Jul 6, 23:53

SearchFilterFields.js
View Options

import React 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 custom hook for api call
import useGetFieldList from "../components/useGetFieldList"
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();
//call the custom hook for listing field with api
const [institList,fundList,journalList] = useGetFieldList()
const [instit, setInstit] = React.useState('')
const [fund, setFund] = React.useState('')
const [journal, setJournal] = React.useState('')
console.log(institList)
function handleInstit(e, newInputValue, id) {
console.log(id)
setInstit(newInputValue)
}
function handleFunder(e, newInputValue) {
setFund(newInputValue)
}
function handleJournal(e, newInputValue) {
setJournal(newInputValue)
}
function handleSubmit(e) {
alert(`Submit Institution: ID: ${instit}name: ${instit}, Submit Funder: ${fund}, Submit Journal: ${journal}`)
e.preventDefault()
}
console.log(`Selected Institution: ${instit}, Selected Funder: ${fund}, Selected Journal: ${journal}`)
return (
<div className="searchfilter">
<Container className= "App-check-form" fluid>
<Col md={{ span: 6, offset: 3 }}>
<form style={{ marginTop: "8rem"}} className={classes.root} noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
<Row md={{ span: 6, offset: 3 }}>
<Col >
<FormControl className={classes.formControl}>
<Autocomplete
freeSolo
id="institution"
options={institList.map((option) => option.website)}
// getOptionLabel={(option) => option.name}
// filterOptions={filterOptions}
onInputChange={handleInstit}
renderInput={(params) => (
<TextField
{...params}
label="Swiss Institutions"
// margin="normal"
value={instit}
variant="outlined"
/>
)}
/>
</FormControl>
</Col>
<Col>
<FormControl className={classes.formControl}>
<Autocomplete
freeSolo
id="funder"
options={fundList.map((option) => option.name)}
onInputChange={handleFunder}
renderInput={(params) => (
<TextField
{...params}
label="Funder"
// margin="normal"
value={[fund]}
variant="outlined"
/>
)}
/>
</FormControl>
</Col>
<Col>
<FormControl className={classes.formControl}>
<Autocomplete
freeSolo
id="journal"
options={journalList.map((option) => option.name)}
onInputChange={handleJournal}
renderInput={(params) => (
<TextField
{...params}
label="Journal"
// margin="normal"
value={journal}
variant="outlined"
/>
)}
/>
</FormControl>
</Col>
<Col>
<div className="container">
<div className="center">
<Button
className="App-btn"
variant="contained"
type="submit"
color="inherit"
>
Check
</Button>
</div>
</div>
</Col>
</Row>
</form>
</Col>
{/* <div className="card-list" style={{ marginTop: "4rem"}}>
{journal.map(journal =>(
<JournalCard journal={journal} key={journal.id}/>
))}
</div> */}
</Container>
</div>
);
}

Event Timeline

c4science · Help