SearchFilterFields.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Thu, Jun 27, 18:50

SearchFilterFields.js
View Options

	import React, {useContext, useState, useEffect} 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 { searchCondi, searchorganizationonly, searchjournalonly, searchInstitFunder, searchCondi3 } from '../services/requests/Condition'
	import {getJournal} from '../services/requests/Journal'
	import {getFunder} from '../services/requests/Funder'
	import {getInstitution} from '../services/requests/Institution'
	import Accordion from '@material-ui/core/Accordion';
	import AccordionSummary from '@material-ui/core/AccordionSummary';
	import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
	import Typography from '@material-ui/core/Typography';
	import AccordionDetails from '@material-ui/core/AccordionDetails';
	import Grid from '@material-ui/core/Grid';


	import {Context} from "../Context"


	import ResultCard from "../components/ResultCard"
	import DetailCard from "../components/DetailCard"

	import TestQuery from "./TestQuery"

	import { useQuery } from "react-query"
	import CircularProgress from '@material-ui/core/CircularProgress'
	import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';

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

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

	formControl: {
	margin: theme.spacing(1),
	width: 200,
	},
	selectEmpty: {
	marginTop: theme.spacing(2),
	},

	card: {
	width: '100%',
	marginTop: "1rem",


	},

	chip: {
	margin: 0.5,

	},

	heading: {
	fontSize: theme.typography.pxToRem(15),
	fontWeight: theme.typography.fontWeightRegular,
	},

	}));

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

	//call the custom hook for listing field with api

	const { getSelectedInstitId,
	getSelectedJournalId,
	getSelectedFunderId,
	institList,
	journalList,
	funderList,
	institId,
	journalId,
	funderId,
	setInstitId,
	setJournalId,
	setFunderId,
	institName,
	journalName,
	funderName,
	}
	= useContext(Context)


	//responses
	const [conditions, setConditions] = useState([]);
	const [details, setDetails] = useState([]);
	const [result, updateResult] = useState([]);
	const [loading, setLoading] = useState(false);

	useEffect(() => {
	setDetails('null')
	}, [])

	// clear teh usestate
	// const clear = () => {
	// setState((prev) => new Map(prev.clear()));
	// }



	function handleInstit(e, newInputValue) {
	if (newInputValue){
	getSelectedInstitId(newInputValue)
	return

	}
	setInstitId("")

	}

	function handleFunder(e, newInputValue) {
	console.log(newInputValue)
	if (newInputValue){
	getSelectedFunderId(newInputValue)
	return
	}
	setFunderId("")
	}

	function handleJournal(e, newInputValue) {

	if (newInputValue){
	getSelectedJournalId(newInputValue)
	return
	}
	setJournalId("")
	}

	function handleSubmit(e) {

	e.preventDefault()

	//reset precedent results
	setConditions([])
	setDetails([])
	updateResult([])


	if (institId && !journalId && !funderId){
	//get organizations conditions
	// alert(`get api organization Condition only: ${institId}`)
	//condtion type is not journal only = 1
	// Get the user

	const sendSearchInstitOnly =
	async () => {

	try {


	const resp = await searchorganizationonly(institId,1)
	console.log(resp.data)
	setConditions(arr => [...arr, resp.data])



	} catch (err) {
	// Handle Error Here
	console.error(err);
	}


	}

	console.log(details)

	const sendGetrequest =
	async () => {
	try {
	const resp = await getInstitution(institId)
	console.log(resp.data)
	updateResult(arr => [...arr, resp.data])
	// if (details === "null") {
	// setDetails(resp.data)
	// }
	// else {
	// setDetails(prevArray => [...prevArray, resp.data])
	// }
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	sendSearchInstitOnly().then(
	sendGetrequest()
	)

	}

	else if (!institId && !journalId && funderId){
	//get funder conditions
	// alert(`get api funder Condition only: ${funderId}`)
	//condtion type is not journal only = 1

	const sendSearchOrgaOnly =
	async () => {
	try {
	const resp = await searchorganizationonly(funderId,1)
	console.log(resp.data)
	setConditions(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}

	const sendGetrequest =
	async () => {
	try {
	const resp = await getFunder(funderId)
	console.log(resp.data)
	updateResult(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}

	sendSearchOrgaOnly().then(
	sendGetrequest()
	)

	}
	else if (!funderId && !institId && journalId){
	//get journals conditions
	// alert(`get api journal Condition only: ${journalId}`)
	//condtion type is not institution only = 2
	//get journal detail

	const sendSearchJournalOnly =
	async () => {
	try {
	const resp = await searchjournalonly(journalId,2)
	console.log(resp.data)
	setConditions(arr => [...arr, resp.data])
	// setConditions(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}

	const sendGetrequest =
	async () => {
	try {
	const resp = await getJournal(journalId)
	console.log(resp.data)
	updateResult(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}

	sendSearchJournalOnly().then(
	sendGetrequest()
	)

	}

	else if (institId && funderId && !journalId) {
	//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
	//condtion type journal/condition = 3
	const sendSearchCondi =
	async () => {
	try {
	const resp = await searchInstitFunder(institId, funderId, 1)
	console.log(resp.data)
	setConditions(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}

	const sendGetInstit =
	async () => {
	try {
	const resp = await getInstitution(institId)
	console.log(resp.data)
	// detailArray.push(resp.data)
	// setDetails(detailArray)
	updateResult(arr => [...arr, resp.data])



	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	const sendGetFunder =
	async () => {
	try {
	const resp = await getFunder(funderId)
	console.log(resp.data)

	updateResult(arr => [...arr, resp.data])

	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	sendSearchCondi().then(
	sendGetInstit().then(sendGetFunder())
	)


	}
	else if (institId && journalId && !funderId) {
	//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
	//condtion type journal/condition = 3
	const sendSearchCondi =
	async () => {
	try {
	const resp = await searchCondi(journalId,institId)
	console.log(resp.data)
	setConditions(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}

	const sendGetJournal =
	async () => {
	try {
	const resp = await getJournal(journalId)
	console.log(resp.data)
	// detailArray.push(resp.data)
	// setDetails(detailArray)
	updateResult(arr => [...arr, resp.data])



	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	const sendGetInstit =
	async () => {
	try {
	const resp = await getInstitution(institId)
	console.log(resp.data)

	updateResult(arr => [...arr, resp.data])

	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	sendSearchCondi().then(
	sendGetJournal().then(sendGetInstit())
	)


	}
	else if (!institId && journalId && funderId) {
	// alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
	//condtion type journal/institution/funder conditions = 3

	const sendGetCondi =
	async () => {
	try {
	const resp = await searchCondi(journalId,funderId)
	console.log(resp.data)
	setConditions(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}


	const sendGetJournal =
	async () => {
	try {
	const resp = await getJournal(journalId)
	console.log(resp.data)
	updateResult(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	const sendGetFunder =
	async () => {
	try {
	const resp = await getFunder(funderId)
	console.log(resp.data)
	updateResult(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}


	sendGetCondi().then(
	sendGetJournal().then(
	sendGetFunder()
	)
	)
	}
	else if (institId && journalId && funderId) {
	// alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
	//condtion type journal/institution/funder conditions = 3
	console.log("main check !")
	//(institution + journal)
	const detailArray = []

	//(funder +journal)


	// const sendGetCondi1 =
	// async () => {
	// try {
	// const resp = await searchCondi(journalId,institId)
	// console.log(resp.data)
	// setConditions(arr => [...arr, resp.data])

	// } catch (err) {
	// // Handle Error Here
	// console.error(err);
	// }
	// }
	// const sendGetCondi2 =
	// async () => {
	// try {
	// const resp = await searchCondi(journalId,funderId)
	// console.log(resp.data)
	// setConditions(arr => [...arr, resp.data])

	// } catch (err) {
	// // Handle Error Here
	// console.error(err);
	// }
	// }

	const sendGetCondi =
	async () => {
	try {
	const resp = await searchCondi3(institId,journalId,funderId)
	console.log(resp.data)
	setConditions(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	const sendGetJournal =
	async () => {
	try {
	const resp = await getJournal(journalId)
	console.log(resp.data)
	updateResult(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}
	const sendGetFunder =
	async () => {
	try {
	const resp = await getFunder(funderId)
	console.log(resp.data)
	updateResult(arr => [...arr, resp.data])
	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}

	const sendGetInstit =
	async () => {
	try {
	const resp = await getInstitution(institId)
	console.log(resp.data)
	detailArray.push(resp.data)
	updateResult(arr => [...arr, resp.data])

	} catch (err) {
	// Handle Error Here
	console.error(err);
	}
	}


	// sendGetCondi1().then(sendGetCondi2())

	sendGetCondi()
	sendGetJournal().then(
	sendGetFunder().then(
	sendGetInstit()
	)
	)

	}


	// alert(`Submit Institution: ID: ${institId} , Submit Funder: ${fund}, Submit Journal ID: ${journalId}`)
	}

	// const conditionIdArray = []
	// conditions.map((item) =>(
	// conditionIdArray.push(item.id)
	// ))

	// console.log(conditionIdArray)

	console.log(`all conditions SET: ${conditions}`)
	console.log(details)

	console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)

	const isloading = <div>{loading && < CircularProgress />}</div>

	function detailsResult() {



	if (details !== 'null') {

	return (
	<div className={classes.root}>

	<Grid>

	<Accordion >
	<AccordionSummary
	expandIcon={<ExpandMoreIcon />}
	aria-controls="panel1a-content"
	id="panel1a-header"
	>

	<Typography className={classes.heading}>

	<p>Selected option(s)</p>

	</Typography>


	</AccordionSummary>

	<AccordionDetails>
	{result?.map(i => (
	<div>
	<Grid>
	<DetailCard details={i}/>
	</Grid>
	</div>

	))}
	</AccordionDetails>

	</Accordion>

	</Grid>
	</div>
	)
	}
	}

	const conditionResults =



	conditions?.map(i=> (

	<div>
	<ResultCard result={i}/>
	</div>

	))



	// conditions.map( i=> (

	// <div>
	// <ResultCard result={i}/>
	// </div>

	// ))




	return (

	<div className="searchfilter">
	<Container className= "App-check-form" fluid>
	<Row >
	<Col>
	<form style={{ marginTop: "8rem"}} noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">



	<FormControl className={classes.formControl}>
	<Autocomplete
	freeSolo
	selectOnFocus
	clearOnBlur
	id="institution"
	options={institList.map((option) => option.name)}
	renderOption={(params) => (
	<a style={{ textAlign: "left"}}>{params}</a>
	)}

	// getOptionLabel={(option) => option.name}
	// filterOptions={filterOptions}
	onInputChange={handleInstit}
	renderInput={(params) => (
	<TextField
	{...params}
	label="Swiss Institutions"
	// margin="normal"
	value={institId}
	variant="outlined"


	/>
	)}
	/>
	</FormControl>

	<FormControl className={classes.formControl}>
	<Autocomplete
	freeSolo
	id="funder"
	options={funderList.map((option) => option.name)}
	renderOption={(params) => (
	<a style={{ textAlign: "left"}}>{params}</a>
	)}
	onInputChange={handleFunder}
	renderInput={(params) => (
	<TextField
	{...params}
	label="Funder"
	// margin="normal"
	value={funderId}
	variant="outlined"
	/>
	)}
	/>
	</FormControl>

	<FormControl className={classes.formControl}>

	<Autocomplete
	freeSolo
	id="journal"
	options={journalList.map((option) => option.name)}
	renderOption={(params) => (
	<a style={{ textAlign: "left"}}>{params}</a>
	)}
	onInputChange={handleJournal}
	renderInput={(params) => (
	<TextField
	{...params}
	label="Journal"
	// margin="normal"
	value={journalId}
	variant="outlined"
	/>
	)}
	/>
	</FormControl>

	<FormControl className={classes.formControl}>

	<Button
	className="App-btn"
	variant="contained"
	type="submit"
	>
	Check
	</Button>

	</FormControl>
	</form>
	</Col>
	</Row>
	<Container className="details" fluid>
	<Row>
	<Col>
	{detailsResult()}
	</Col>
	</Row>
	</Container>

	</Container>
	<Container className="term" fluid>
	<Grid>
	<Row>
	<Col>
	{isloading}
	<Grid>
	{conditionResults}
	</Grid>
	{/* <TestQuery /> */}
	</Col>
	</Row>
	</Grid>
	</Container>
	</div>
	);
	}

SearchFilterFields.jsNo OneTemporaryActions

File Metadata

SearchFilterFields.jsView Options

Event Timeline

SearchFilterFields.js
No OneTemporary
Actions

SearchFilterFields.js
View Options