Page MenuHomec4science
Files F68510888

SearchFilterFields.js
No OneTemporary
Actions

File Metadata

Created
Thu, Jun 27, 18:00

SearchFilterFields.js
View Options

import React, {useContext} 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"
import {Context} from "../Context"
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 [fundList] = useGetFieldList()
const {getSelectedInstitId,institList, journalList,getSelectedJournalId,institId, journalId} = useContext(Context)
// const [instit, setInstit] = React.useState('')
const [fund, setFund] = React.useState('')
// const [journal, setJournal] = React.useState('')
function handleInstit(e, newInputValue) {
getSelectedInstitId(newInputValue)
console.log(newInputValue)
}
function handleFunder(e, newInputValue) {
setFund(newInputValue)
}
function handleJournal(e, newInputValue) {
getSelectedJournalId(newInputValue)
}
function handleSubmit(e) {
alert(`Submit Institution: ID: ${institId} , Submit Funder: ${fund}, Submit Journal ID: ${journalId}`)
e.preventDefault()
}
console.log(`Selected Institution ID: ${institId}, Selected Funder: ${fund}, Selected Journal ID: ${journalId}`)
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.name)}
// getOptionLabel={(option) => option.name}
// filterOptions={filterOptions}
onInputChange={handleInstit}
renderInput={(params) => (
<TextField
{...params}
label="Swiss Institutions"
// margin="normal"
value={institId}
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={journalId}
variant="outlined"
/>
)}
/>
</FormControl>
</Col>
<Col>
<FormControl className={classes.formControl}>
<Button
className="App-btn"
variant="contained"
type="submit"
>
Check
</Button>
</FormControl>
</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