Diffusion Open Access Compliance Check Tool (OACCT) (paginated-inlines) Browse

SearchFilterFields.js
15ee9aa4baf1paginated-inlines

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>


			);
			}

rOACCT/assets/src/components/SearchFilterFields.js15ee9aa4baf1paginated-inlines

SearchFilterFields.jsView Options

rOACCT/assets/src/components/SearchFilterFields.js
15ee9aa4baf1paginated-inlines

SearchFilterFields.js
View Options