Filter/page change updates footprints, no area yet (229edeca) · Commits · aflab / astrogeology / Asc Geostac

src/components/presentational/FootprintResults.jsx

+6 −4

Original line number	Diff line number	Diff line
		@@ -30,9 +30,9 @@ function LoadingFootprints() {
		return (
		<div className="resultsList">
		{ Array(5).fill(null).map((_, i) => (
		<Card sx={{ width: 250, margin: 1}}>
		<Card sx={{ width: 250, margin: 1}} key={i}>
		<CardContent sx={{padding: 0.9, paddingBottom: 0}}>
		<div className="resultContainer" key={i}>
		<div className="resultContainer">
		<div className="resultImgDiv">
		<Skeleton variant="rectangular" width={32} height={32}/>
		</div>
		@@ -136,7 +136,9 @@ export default function FootprintResults(props) {
		let itemCollectionUrls = [];
		for(const collection of props.target.collections) {
		// Get "items" link for each collection
		let newItemCollectionUrl = collection.links.find(obj => obj.rel === "items").href
		let newItemCollectionUrl =
		collection.links.find(obj => obj.rel === "items").href
		+ props.queryString;
		itemCollectionUrls.push(newItemCollectionUrl);
		}

		@@ -207,7 +209,7 @@ export default function FootprintResults(props) {
		// setFeatures(getFeatures);
		// }, 1000);

		}, [props.target.name]);
		}, [props.target.name, props.queryString]);

		return (
		<div style={css.root} className="scroll-parent">

src/components/presentational/SearchAndFilterInput.jsx

+75 −22

Original line number	Diff line number	Diff line
		@@ -95,32 +95,40 @@ let css = {
		*
		*/
		export default function SearchAndFilterInput(props) {

		// Allows showing/hiding of fields
		const keywordDetails = React.useRef(null);
		const dateDetails = React.useRef(null);

		// React States
		const [sortVal, setSortVal] = React.useState("");
		const [sortAscCheckVal, setSortAscCheckVal] = React.useState(false);
		const [areaCheckVal, setAreaCheckVal] = React.useState(false);
		// Sort By
		const [sortVal, setSortVal] = React.useState(""); // Sort By What?
		const [sortAscCheckVal, setSortAscCheckVal] = React.useState(false); // Sort Ascending or Descending

		// Filter by X checkboxes
		const [areaCheckVal, setAreaCheckVal] = React.useState(false); // Area
		const [keywordCheckVal, setKeywordCheckVal] = React.useState(false); // Keyword
		const [dateCheckVal, setDateCheckVal] = React.useState(false); // Date

		// Filter by X values
		const [keywordTextVal, setKeywordTextVal] = React.useState(""); // Keyword
		const [dateFromVal, setDateFromVal] = React.useState(null); // From Date
		const [dateToVal, setDateToVal] = React.useState(null); // To Date

		const [keywordCheckVal, setKeywordCheckVal] = React.useState(false);
		const [keywordTextVal, setKeywordTextVal] = React.useState("");
		// Page Number
		const [pageNumber, setPageNumber] = React.useState(1);

		const [dateCheckVal, setDateCheckVal] = React.useState(false);
		const [dateFromVal, setDateFromVal] = React.useState(null);
		const [dateToVal, setDateToVal] = React.useState(null);
		// Pagination
		const [maxPages, setMaxPages] = React.useState(10);
		const [maxNumberFootprints, setMaxNumberFootprints] = React.useState(10);
		const [numberReturned, setNumberReturned] = React.useState(10);
		const [limitVal, setLimitVal] = React.useState(10);
		const [limitVal, setLimitVal] = React.useState(10); // Max Number of footprints requested per collection

		const [applyChipVisStyle, setApplyChipVisStyle] = React.useState(
		css.chipHidden
		);
		const [gotoPage, setGotopage] = React.useState("Apply to go to page 2");
		// Apply/Alert Chip
		const [applyChipVisStyle, setApplyChipVisStyle] = React.useState(css.chipHidden);
		const [chipMessage, setChipMessage] = React.useState("Apply to go to page 2");

		const setApplyChip = (value) => {
		setGotopage(value);
		setChipMessage(value);
		setApplyChipVisStyle(css.chipShown);
		};

		@@ -154,6 +162,46 @@ export default function SearchAndFilterInput(props) {
		// dateDetails.current.open = false;
		};

		const buildQueryString = () => {
		let myQueryString = "?";

		// Page Number
		if (pageNumber != 1) myQueryString += "page=" + pageNumber + "&";

		// Number of footprints requested per request
		if (limitVal != 10) myQueryString += "limit=" + limitVal + "&"

		// Date
		if (dateCheckVal) {
		let d = new Date();
		let fromDate = "1970-01-01T00:00:00Z"; // From start of 1970 by default
		let toDate = d.getFullYear() + "-12-31T23:59:59Z"; // To end of current year by default

		// From
		if(dateFromVal instanceof Date && !isNaN(dateFromVal.valueOf())) {
		fromDate = dateFromVal.toISOString();
		}

		// To
		if(dateToVal instanceof Date && !isNaN(dateToVal.valueOf())) {
		toDate = dateToVal.toISOString();
		}

		myQueryString += "datetime=" + fromDate + "/" + toDate + "&";
		}

		// Keyword
		if(keywordCheckVal) myQueryString += "keywords=[" + keywordTextVal.split(" ") + "]&";

		// Area
		if(areaCheckVal) console.log("Warning: Area not Supported!")

		// Sorting
		// Not Supported?

		props.setQueryString(myQueryString);
		}

		// Sorting
		const handleSortChange = (event) => {
		setSortVal(event.target.value);
		@@ -211,6 +259,13 @@ export default function SearchAndFilterInput(props) {
		setApplyChip("Apply to show " + value + " footprints");
		};

		// Pagination
		const handlePageChange = (event, value) => {
		setPageNumber(value);
		setCurrentPage(value);
		setApplyChip("Apply to go to page " + value);
		};

		// resets pagination and limit when switching targets
		useEffect(() => {
		setTimeout(() => {
		@@ -223,11 +278,9 @@ export default function SearchAndFilterInput(props) {
		}, 2000);
		}, [props.target.name]);

		// Pagination
		const handlePageChange = (event, value) => {
		setCurrentPage(value);
		setApplyChip("Apply to go to page " + value);
		};
		useEffect(() => {
		buildQueryString();
		}, [sortVal, sortAscCheckVal, areaCheckVal, keywordCheckVal, keywordTextVal, dateCheckVal, dateFromVal, dateToVal, limitVal, pageNumber])

		/* Control IDs for reference:
		applyButton
		@@ -429,7 +482,7 @@ export default function SearchAndFilterInput(props) {
		<div style={applyChipVisStyle}>
		<Chip
		id="applyChip"
		label={gotoPage}
		label={chipMessage}
		icon={<FlagIcon />}
		onClick={handleApply}
		variant="outlined"

src/components/presentational/Sidebar.jsx

+4 −2

Original line number	Diff line number	Diff line
		@@ -46,10 +46,11 @@ export default function Sidebar(props) {
		);

		const [showSidePanel, setShowSidePanel] = React.useState(true);
		const [sidePanelSubStyle, setSidePanelSubStyle] = React.useState(css.shown);

		const [expandResults, setExpandResults] = React.useState(true);

		const [queryString, setQueryString] = React.useState("?");

		const showHideSort = () => {
		setShowSidePanel(!showSidePanel);
		};
		@@ -72,6 +73,7 @@ export default function Sidebar(props) {
		>
		<SearchAndFilterInput
		target={props.target}
		setQueryString={setQueryString}
		footprintNavClick={props.footprintNavClick}
		/>
		{!expandResults && <OutPortal node={footprintResultPortalNode} />}
		@@ -81,7 +83,7 @@ export default function Sidebar(props) {
		)}
		</div>
		<InPortal node={footprintResultPortalNode}>
		<FootprintResults target={props.target} changeLayout={handlePanelLayout} />
		<FootprintResults target={props.target} queryString={queryString} changeLayout={handlePanelLayout} />
		</InPortal>
		</>
		);