+
{
+ const keyHandler = (e, func) => {
+ e.preventDefault();
+ if (e.key === "Enter") {
+ func(e);
+ }
+ };
+
+ return (
+
{fullSidebar}
{isMobile === false && searchv2 === false ?
+
);
+};
+
+SearchSidebarDrilldown.propTypes = propTypes;
+export default SearchSidebarDrilldown;
diff --git a/src/js/components/search/collapsibleSidebar/SearchSidebarMainMenu.jsx b/src/js/components/search/collapsibleSidebar/SearchSidebarMainMenu.jsx
new file mode 100644
index 0000000000..c0a6ad8409
--- /dev/null
+++ b/src/js/components/search/collapsibleSidebar/SearchSidebarMainMenu.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { SearchFilterCategories } from "dataMapping/search/searchFilterCategories";
+import CategoryHeader from "./CategoryHeader";
+
+const propTypes = {
+ isDrilldown: PropTypes.bool,
+ sidebarHeight: PropTypes.number,
+ setLevel2: PropTypes.func
+};
+
+const SearchSidebarMainMenu = ({ isDrilldown, sidebarHeight, setLevel2 }) => (
+
+
+ goBack(e)}
+ onKeyDown={(e) => keyHandler(e, goBack)}
+ role="button"
+ tabIndex="0">
+
+
+ {list &&
+
+
+);
+
+SearchSidebarMainMenu.propTypes = propTypes;
+export default SearchSidebarMainMenu;
diff --git a/src/js/components/search/collapsibleSidebar/SearchSidebarv2.jsx b/src/js/components/search/collapsibleSidebar/SearchSidebarv2.jsx
deleted file mode 100644
index 8e7d24570e..0000000000
--- a/src/js/components/search/collapsibleSidebar/SearchSidebarv2.jsx
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * SearchSidebarv2.jsx
- * Created by Andrea Blackwell 11/05/2024
- **/
-
-import React, { useEffect, useState } from 'react';
-import { SearchFilterCategories, FilterCategoryTree } from "dataMapping/search/newSearchFilterCategories";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { throttle } from "lodash";
-
-import SearchFilter from "./SearchFilter";
-import { SearchSidebarSubmitContainer } from "../../../containers/search/SearchSidebarSubmitContainer";
-import CategoriesList from "./CateogriesList";
-import CategoryFilter from "./CategoryFilter";
-
-const SearchSidebar = () => {
- const [isOpened, setIsOpened] = useState(true);
- const [drilldown, setDrilldown] = useState(null);
- const [isDrilldown, setIsDrilldown] = useState(false);
- const [selectedCategory, setSelectedCategory] = useState(null);
- const [currentLevel, setCurrentLevel] = useState(1);
- const [initialPageLoad, setInitialPageLoad] = useState(true);
- const [windowWidth, setWindowWidth] = useState();
- const [windowHeight, setWindowHeight] = useState();
- const [sidebarHeight, setSidebarHeight] = useState();
- const toggleOpened = (e) => {
- e.preventDefault();
- setIsOpened((prevState) => !prevState);
- };
-
- const setLevel2 = (e, item) => {
- e.preventDefault();
- setSelectedCategory(item);
- setDrilldown(FilterCategoryTree[item?.categoryKey]);
- setIsDrilldown(true);
- setCurrentLevel(2);
- };
-
- const setLevel3 = (e, component) => {
- e.preventDefault();
- setDrilldown(component);
- setIsDrilldown(true);
- setCurrentLevel(3);
- };
-
- const goBack = (e) => {
- if (currentLevel === 2) {
- e.preventDefault();
- setDrilldown(null);
- setCurrentLevel(1);
- setIsDrilldown(false);
- }
- else if (currentLevel === 3) {
- setDrilldown(selectedCategory[FilterCategoryTree[selectedCategory?.categoryKey]]);
- setCurrentLevel(2);
- }
- };
-
- const keyHandler = (e, func) => {
- e.preventDefault();
- if (e.key === "Enter") {
- func(e);
- }
- };
-
- useEffect(() => {
- if (!isOpened && initialPageLoad) {
- setInitialPageLoad(false);
- }
- }, [initialPageLoad, isOpened]);
-
- const handleScroll = throttle(() => {
- const element = document.querySelector(".usda-page-header");
- if (element?.classList?.contains("usda-page-header--sticky")) {
- setWindowHeight(window.innerHeight - 100);
- setSidebarHeight(window.innerHeight - 100 - 178);
- }
- else {
- setWindowHeight(window.innerHeight - 198);
- setSidebarHeight(window.innerHeight - 198 - 178);
- }
- }, 50);
-
- useEffect(() => {
- setWindowHeight(window.innerHeight - 198);
- setSidebarHeight(window.innerHeight - 198 - 178);
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
- }, [handleScroll]);
-
- useEffect(() => {
- const handleResize = throttle(() => {
- const newWidth = window.innerWidth;
- if (windowWidth !== newWidth) {
- setWindowWidth(newWidth);
- }
- }, 50);
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }, [windowWidth]);
-
- return (
-
+ Search by...
+
+
+ {SearchFilterCategories.map((item) => (
+
-
);
-};
-
-export default SearchSidebar;
diff --git a/src/js/components/search/filters/recipient/RecipientResultsContainer.jsx b/src/js/components/search/filters/recipient/RecipientResultsContainer.jsx
index b577529fdf..600eadfb12 100644
--- a/src/js/components/search/filters/recipient/RecipientResultsContainer.jsx
+++ b/src/js/components/search/filters/recipient/RecipientResultsContainer.jsx
@@ -5,6 +5,7 @@
import React, { useEffect, useState, useRef } from 'react';
import PropTypes from "prop-types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as SearchHelper from 'helpers/searchHelper';
import { EntityDropdownAutocomplete } from "../location/EntityDropdownAutocomplete";
import PrimaryCheckboxType from "../../../sharedComponents/checkbox/PrimaryCheckboxType";
@@ -17,6 +18,7 @@ const propTypes = {
const RecipientResultsContainer = ({ selectedRecipients, updateSelectedRecipients }) => {
const [recipients, setRecipients] = useState([]);
const [searchString, setSearchString] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
const recipientRequest = useRef();
@@ -43,11 +45,15 @@ const RecipientResultsContainer = ({ selectedRecipients, updateSelectedRecipient
recipientRequest.current.cancel();
}
- recipientRequest.current = SearchHelper.fetchRecipients();
-
+ const paramObj = {
+ limit: 100
+ };
+ recipientRequest.current = SearchHelper.fetchRecipients(paramObj);
+ setIsLoading(true);
recipientRequest.current.promise
.then((res) => {
setRecipients(res.data.results);
+ setIsLoading(false);
});
};
@@ -58,14 +64,15 @@ const RecipientResultsContainer = ({ selectedRecipients, updateSelectedRecipient
const paramObj = {
search_text: term,
- limit: 50
+ limit: 100
};
recipientRequest.current = SearchHelper.fetchRecipientsAutocomplete(paramObj);
-
+ setIsLoading(true);
recipientRequest.current.promise
.then((res) => {
setRecipients(res.data.results);
+ setIsLoading(false);
});
};
@@ -83,6 +90,13 @@ const RecipientResultsContainer = ({ selectedRecipients, updateSelectedRecipient
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchString]);
+ const loadingIndicator = (
+
-
- toggleOpened(e)}
- onKeyDown={(e) => keyHandler(e, toggleOpened)}
- role="button"
- tabIndex="0">
- {isOpened ?
-
-
-
-
-
-
- {drilldown?.children && goBack(e)}
- onKeyDown={(e) => keyHandler(e, goBack)}
- role="button"
- tabIndex="0">
-
-
-
-
- Search by...
-
-
- {SearchFilterCategories.map((item) => (
-
-
-
+
+ );
+
return (
<>
Loading your data...
+
-
}
);
};
diff --git a/src/js/components/search/filters/timePeriod/DateRange.jsx b/src/js/components/search/filters/timePeriod/DateRange.jsx
index 37dc130519..a677f46aa2 100644
--- a/src/js/components/search/filters/timePeriod/DateRange.jsx
+++ b/src/js/components/search/filters/timePeriod/DateRange.jsx
@@ -45,7 +45,7 @@ const DateRange = (props) => {
const [dropdownOptionSelected, setDropdownOptionSelected] = useState(false);
const [noDates, setNoDates] = useState(false);
const prevProps = usePrevious(props);
-
+ const labelArray = [];
const onClick = (e) => {
setSelectedDropdownOption(e);
@@ -71,10 +71,12 @@ const DateRange = (props) => {
}
};
- const localRemoveDateRange = () => {
- setSelectedDropdownOption('select');
- setDropdownOptionSelected(false);
- props.removeDateRange();
+ const localRemoveDateRange = (e) => {
+ if (e.type === 'click' || e.key === "Enter") {
+ setSelectedDropdownOption('select');
+ setDropdownOptionSelected(false);
+ props.removeDateRange(e);
+ }
};
const dropdownOptions = [
@@ -206,35 +208,6 @@ const DateRange = (props) => {
const startDateDisabledDays = generateStartDateDisabledDays(earliestDate);
const endDateDisabledDays = generateEndDateDisabledDays(earliestDate);
- const lastInTimePeriod = props.timePeriod[props.timePeriod.length - 1];
-
- let dateLabel = '';
- let hideTags = 'hide';
-
- if (props.timePeriod.length > 0) {
- hideTags = '';
- let start = null;
- let end = null;
-
- if (lastInTimePeriod.start_date) {
- start = dayjs(lastInTimePeriod.start_date, 'YYYY-MM-DD').format('MM/DD/YYYY');
- }
- if (lastInTimePeriod.end_date) {
- end = dayjs(lastInTimePeriod.end_date, 'YYYY-MM-DD').format('MM/DD/YYYY');
- }
- if (start && end) {
- dateLabel = `${start} to ${end}`;
- }
- else if (start) {
- dateLabel = `${start} to present`;
- }
- else if (end) {
- dateLabel = `... to ${end}`;
- }
- else {
- hideTags = 'hide';
- }
- }
const testDates = () => {
if (props.startDate === null && props.endDate === null) {
@@ -294,6 +267,34 @@ const DateRange = (props) => {
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [props.errorState, noDates, props.startDate, props.endDate]);
+ if (props.timePeriod?.size > 0) {
+ for (const timeinput of props.timePeriod) {
+ let dateLabel = '';
+ let start = null;
+ let end = null;
+
+ if (timeinput.start_date) {
+ start = dayjs(timeinput.start_date, 'YYYY-MM-DD').format('MM/DD/YYYY');
+ }
+ if (timeinput.end_date) {
+ end = dayjs(timeinput.end_date, 'YYYY-MM-DD').format('MM/DD/YYYY');
+ }
+
+ if (start && end) {
+ dateLabel = `${start} to ${end}`;
+ }
+ else if (start) {
+ dateLabel = `${start} to present`;
+ }
+ else if (end) {
+ dateLabel = `... to ${end}`;
+ }
+
+ if (dateLabel !== '') {
+ labelArray.push(dateLabel);
+ }
+ }
+ }
return (
- { recipients.toSorted((a, b) => (a.name?.toUpperCase() < b.name?.toUpperCase() ? -1 : 1)).map((recipient) => (
-
+
- UEI: {recipient.uei ? recipient.uei : 'Not provided'}
)}
- value={{
- name: recipient.name ? recipient.name : recipient.recipient_name,
- uei: recipient.uei,
- duns: recipient.duns ? recipient.duns : null
- }}
- key={recipient.uei}
- toggleCheckboxType={toggleRecipient}
- selectedCheckboxes={selectedRecipients} />
-
-
+ ))}
+ Legacy DUNS: {recipient.duns ? recipient.duns : 'Not provided'}
-
- {recipient.name || recipient.recipient_name}
- {levelMapping[recipient.recipient_level]}
+ {isLoading ? loadingIndicator :
+
-
+
- ))}
-
+ { recipients.toSorted((a, b) => (a.name?.toUpperCase() < b.name?.toUpperCase() ? -1 : 1)).map((recipient) => (
+
-
+ UEI: {recipient.uei ? recipient.uei : 'Not provided'}
)}
+ value={{
+ name: recipient.name ? recipient.name : recipient.recipient_name,
+ uei: recipient.uei,
+ duns: recipient.duns ? recipient.duns : null
+ }}
+ key={recipient.uei}
+ toggleCheckboxType={toggleRecipient}
+ selectedCheckboxes={selectedRecipients} />
+
+
Legacy DUNS: {recipient.duns ? recipient.duns : 'Not provided'}
+
+ {recipient.name || recipient.recipient_name}
+ {levelMapping[recipient.recipient_level]}
+
-
+ {labelArray.map((dateLabel, index) =>
+ (
+
+ )
+ )}
+