searchJournalFields.js
No OneTemporary
Actions

Subscribers

None

File Metadata

	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"



	const useStyles = makeStyles((theme) => ({
	root: {
	'& > *': {

	margin: theme.spacing(1),
	display: 'grid',
	},
	}
	}));



	export default function SearchJournalFields() {
	const classes = useStyles();

	//declare state hook for functional component
	const [query, setQuery] = useState(''); //query storage
	const [journals, setJournals] = useState([]);


	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 (
	<>
	<form style={{ marginTop: "8rem"}} className={classes.root} noValidate autoComplete="on" onSubmit={searchJournals} color="inherit">



	<Input type='text 'name="query"
	placeholder="Enter Journal Title or ISSN"
	value={query}
	onChange={(e) => setQuery(e.target.value)}
	inputProps={{'object': 'description'}} />
	<Button style={{width: '99%'}}variant="contained" color="secondary" type="submit">
	Search
	</Button>
	</form>


	<div className="card-list" style={{ marginTop: "4rem"}}>
	{journals.map(journal =>(
	<JournalCard journal={journal} key={journal.id}/>
	))}
	</div>
	</>
	);
	}