\n {titleElement}\n \n );\n }\n\n if (item.link && item.link.url) {\n return (\n \n {titleElement}\n \n );\n }\n\n return titleElement;\n };\n\n return (\n <>\n {item.category ? (\n \n {parse(item.category)}\n \n ) : (\n ''\n )}\n\n {getLinkElement()}\n\n {item.details ? (\n \n {parse(item.details)}\n
\n ) : (\n ''\n )}\n {item.excerpt ? (\n \n {parse(item.excerpt)}\n
\n ) : (\n ''\n )}\n \n );\n};\n\nResultItem.propTypes = {\n item: PropTypes.object\n};\nexport default ResultItem;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { PropTypes } from 'prop-types';\nimport ResultItem from './ResultItem';\n\nconst Results = ({ results, isModal }) => {\n const elementClass = isModal ? 'div.main-footer' : 'footer.main-footer';\n const element = document.querySelector(elementClass);\n const [resultsToAdd, setResultsToAdd] = useState(5);\n const button = useRef(null);\n const newResults = results.slice(0, resultsToAdd);\n\n const addMoreResults = () => {\n if (resultsToAdd >= results.length ) return;\n setResultsToAdd(resultsToAdd + 5);\n };\n\n const handleOnIntersect = entry => {\n if (entry[0].isIntersecting && button.current) {\n button.current.click();\n }\n };\n\n const createObserver = () => {\n const options = {\n root: null,\n treshold: 0,\n rootMargin: '-90% 0% -10%'\n };\n\n const observerCallback = new IntersectionObserver(\n entries => handleOnIntersect(entries),\n options\n );\n\n observerCallback.observe(element);\n };\n \n useEffect(() => {\n createObserver();\n }, []);\n\n return (\n <>\n \n {newResults?.map((item, index) => (\n \n \n
\n ))}\n \n );\n};\n\nResults.propTypes = {\n results: PropTypes.array,\n isModal: PropTypes.string\n};\n\nexport default Results;\n","import React, { useContext } from 'react';\nimport { PropTypes } from 'prop-types';\nimport { SearchContext } from '../Contexts';\n\nconst Facets = ({ facets, facetListIndex, mainValue }) => {\n const { facetsLists, setFacetsLists, selectedFacets, setSelectedFacets } =\n useContext(SearchContext);\n\n return (\n \n {facets.map((facet, index) => {\n const { label, value, selected, childrens } = facet;\n\n const addingFields = facetValue => {\n const selectedFacetsClone = { ...selectedFacets};\n if (mainValue in selectedFacets) {\n // adding the values after the first time\n selectedFacetsClone[mainValue].push(facetValue);\n } else {\n // adding the value for the first time\n Object.assign(selectedFacetsClone, { [mainValue]: [facetValue] });\n }\n setSelectedFacets(selectedFacetsClone);\n };\n\n const removingFields = facetValue => {\n const selectedFacetsClone = { ...selectedFacets};\n // clearing value from existing on the array\n if (\n selectedFacetsClone[mainValue] && selectedFacetsClone[mainValue].length &&\n selectedFacetsClone[mainValue].includes(facetValue)\n ) {\n selectedFacetsClone[mainValue].splice(\n selectedFacetsClone[mainValue].indexOf(facetValue), 1\n );\n }\n setSelectedFacets(selectedFacetsClone);\n };\n\n const resetChildrens = () => {\n if (childrens && childrens.length)\n childrens.forEach(child => {\n child.selected = false;\n removingFields(child.value);\n });\n };\n\n const handleCheck = () => {\n const facetsListsClone = [...facetsLists];\n facetsListsClone[facetListIndex].facets[index].selected =\n !facetsListsClone[facetListIndex].facets[index].selected;\n setFacetsLists(facetsListsClone);\n\n if (!facetsListsClone[facetListIndex].facets[index].selected) {\n resetChildrens();\n }\n\n if (facetsListsClone[facetListIndex].facets[index].selected) {\n addingFields(value);\n } else if (\n selectedFacets[mainValue] &&\n selectedFacets[mainValue].length\n ) {\n removingFields(value);\n }\n };\n\n return (\n
\n
\n
\n {selected && childrens && childrens.length ? (\n
\n {childrens.map((subfacet, i) => {\n const handleSubCheck = () => {\n const facetsListsClone = [...facetsLists];\n facetsListsClone[facetListIndex].facets[index].childrens[\n i\n ].selected =\n !facetsListsClone[facetListIndex].facets[index].childrens[\n i\n ].selected;\n setFacetsLists(facetsListsClone);\n\n if (\n facetsListsClone[facetListIndex].facets[index].selected\n ) {\n if (\n facetsListsClone[facetListIndex].facets[index]\n .childrens[i].selected\n ) {\n addingFields(subfacet.value);\n } else if (\n selectedFacets[mainValue] &&\n selectedFacets[mainValue].length\n ) {\n removingFields(subfacet.value);\n }\n }\n };\n return (\n
handleSubCheck()}\n >\n \n \n \n );\n })}\n
\n ) : (\n ''\n )}\n
\n {facetsLists && facetsLists.length\n ? facetsLists.map((facetList, index) => {\n const { mainLabel, mainValue, facets } = facetList;\n const [isExpanded, setIsExpanded] = useState(false);\n const dropdownRef = useRef(null);\n\n useOutsideAlerter(dropdownRef, setIsExpanded);\n\n return (\n
\n setIsExpanded(!isExpanded)}\n >\n {mainLabel}\n \n \n \n {dateRangeLabel ? (\n
\n ) : (\n ''\n )}\n
\n {dateRange && dateRange.length\n ? dateRange.map((range, i) => {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n const handleDateRange = e => {\n const clone = [...dropdownValue];\n const cloneDate = [...dateRange];\n\n clone[i] = e.target.innerText;\n cloneDate[i].value = e.target.innerText;\n setDropdownValue(clone);\n setDateRange(cloneDate);\n };\n\n useEffect(() => {\n if (range.label === 'From') {\n const y = years.filter(x => {\n if (dropdownValue[i] && x >= dropdownValue[i]) {\n return x;\n }\n });\n setToYears(y.length ? y : years);\n }\n\n if (range.label === 'To') {\n const y = years.filter(x => {\n if (dropdownValue[i] && x <= dropdownValue[i]) {\n return x;\n }\n });\n setFromYears(y.length ? y : years);\n }\n }, [isOpen]);\n\n useOutsideAlerter(dropdownRef, setIsOpen);\n return (\n
\n
\n
setIsOpen(!isOpen)}\n ref={dropdownRef}\n >\n \n \n {range.label === 'From' &&\n fromYears &&\n fromYears.length &&\n fromYears.map((year, index) => (\n \n ))}\n {range.label === 'To' &&\n toYears &&\n toYears.length &&\n toYears.map((year, index) => (\n \n ))}\n
\n \n
\n );\n })\n : ''}\n
\n {facetsLists.map((dropdown, j) =>\n dropdown.facets\n .filter(x => x.selected)\n .map((parentFacet, i) => (\n
\n {parentFacet.label}\n handleRemoveParent(parentFacet.value, j, i)}\n >\n X\n \n \n handleRemoveAll()}\n >\n {label}\n \n
\n );\n};\n\nClearButton.propTypes = {\n label: PropTypes.string\n};\n\nexport default ClearButton;\n","import { useEffect, useMemo, useContext, useRef } from 'react';\nimport qs from 'qs';\nimport { SearchContext } from '../Contexts';\n\nconst QueryStringParams = ({ isLoaded, searchId, cleanQueryString, isTabsLoaded }) => {\n const {\n setQuery,\n query,\n setSelectedTab,\n selectedTab,\n tabs,\n selectedFacets,\n facetsLists,\n setFacetsLists,\n years,\n setDropdownValue,\n setDateRange,\n setExpandedOptions,\n setSelectedFacets\n } = useContext(SearchContext);\n\n const firstLoad = useRef(true);\n\n const firstLoadQuery = useMemo(() => {\n const qsParams = qs.parse(window.location.search, {\n ignoreQueryPrefix: true\n });\n return qsParams;\n }, []);\n\n const firstLoadFacets = useMemo(() => {\n const facets = {};\n Object.keys(firstLoadQuery).forEach(key => {\n if (facetsLists.find(facet => facet.mainValue === key)) {\n facets[key] = firstLoadQuery[key];\n }\n });\n return facets;\n }, []);\n\n const addingFields = (facetValue, mainValue) => {\n const selectedFacetsClone = { ...selectedFacets };\n if (mainValue in selectedFacets) {\n // adding the values after the first time\n selectedFacetsClone[mainValue].push(facetValue);\n } else {\n // adding the value for the first time\n Object.assign(selectedFacetsClone, { [mainValue]: [facetValue] });\n }\n\n setSelectedFacets(selectedFacetsClone);\n // localStorage.setItem(\"selectedFacets\", JSON.stringify(selectedFacetsClone));\n };\n\n const handleFilters = () => {\n const facetsListsClone = [...facetsLists];\n Object.keys(firstLoadQuery).forEach(key => {\n facetsListsClone.forEach(facetList => {\n if (facetList.mainValue === key) {\n facetList.facets.forEach(facet => {\n if (firstLoadQuery[key].includes(facet.value)) {\n facet.selected = true;\n addingFields(facet.value, facetList.mainValue);\n setExpandedOptions(true);\n }\n if (facet.childrens && facet.childrens.length) {\n facet.childrens.forEach(child => {\n if (firstLoadQuery[key].includes(child.value)) {\n child.selected = true;\n addingFields(child.value, facetList.mainValue);\n setExpandedOptions(true);\n }\n });\n }\n });\n }\n });\n });\n setFacetsLists(facetsListsClone);\n };\n\n useEffect(() => {\n const setQueryStringValues = () => {\n if (firstLoadQuery.tab) {\n tabs.forEach(tab => {\n if (tab.value === firstLoadQuery.tab) {\n setSelectedTab(tab);\n }\n });\n }\n\n if (firstLoadQuery.query) {\n setQuery(firstLoadQuery.query);\n }\n\n if (firstLoadQuery.query) {\n setQuery(firstLoadQuery.query);\n }\n\n if (firstLoadQuery.From || firstLoadQuery.To) {\n setDateRange([\n {\n label: 'From',\n value:\n years.includes(Number(firstLoadQuery.From)) && firstLoadQuery.From\n ? firstLoadQuery.From\n : '',\n placeholder: 'Year'\n },\n {\n label: 'To',\n value:\n years.includes(Number(firstLoadQuery.To)) && firstLoadQuery.To\n ? firstLoadQuery.To\n : '',\n placeholder: 'Year'\n }\n ]);\n\n setDropdownValue([\n years.includes(Number(firstLoadQuery.From)) && firstLoadQuery.From\n ? firstLoadQuery.From\n : 'Year',\n years.includes(Number(firstLoadQuery.To)) && firstLoadQuery.To\n ? firstLoadQuery.To\n : 'Year'\n ]);\n }\n\n handleFilters();\n };\n\n if (Object.keys(firstLoadFacets).length > 0) {\n setSelectedFacets(firstLoadFacets);\n }\n\n if (firstLoadQuery.searchId === searchId || !firstLoadQuery.searchId) {\n setQueryStringValues();\n }\n }, []);\n\n const buildQueryString = () => {\n const currentQsParams = qs.parse(window.location.search, {\n ignoreQueryPrefix: true\n });\n const qsParams = {};\n\n if (query) {\n qsParams.query = query;\n }\n\n if (selectedFacets) {\n Object.keys(selectedFacets).forEach(key => {\n qsParams[key] = selectedFacets[key];\n });\n }\n\n Object.keys(firstLoadQuery).forEach(key => {\n if (facetsLists.find(facet => facet.mainValue === key)) {\n qsParams[key] = firstLoadQuery[key];\n selectedFacets[key] = firstLoadQuery[key];\n }\n });\n\n if (searchId && !firstLoad.current) {\n qsParams.searchId = searchId;\n }\n\n if (currentQsParams.searchId !== searchId) {\n cleanQueryString();\n }\n\n if(firstLoad.current) {\n firstLoad.current = false;\n return;\n }\n\n const qsValue = qs.stringify(qsParams, { arrayFormat: 'brackets' });\n\n // add this before qsValue to test with storybook\n // ?id=templates-insights-page--insights-page&args=&viewMode=story&practice%5B%5D=valueParentFacetOne&searchId=academySearch&query=efe#/academy\n const newUrl = `${window.location.protocol}//${window.location.host}${\n window.location.pathname\n }${qsValue ? `?${qsValue}` : ''}${window.location.hash}`;\n window.history.pushState(qsParams, '', newUrl);\n };\n\n useEffect(() => {\n if (isLoaded || isTabsLoaded) {\n buildQueryString();\n }\n }, [selectedFacets, query, selectedTab]);\n};\n\nexport default QueryStringParams;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { SearchContext } from '../Contexts';\nimport { useFetch } from '../hooks/useFetch';\nimport Results from './Results';\nimport FacetLists from './FacetLists';\nimport DateRange from './DateRange';\nimport CurrentSelection from './CurrentSelection';\nimport ClearButton from './ClearButton';\nimport QueryStringParams from './QueryStringParams';\n\nconst AdvancedSearch = ({\n advancedIndex,\n query,\n setQuery,\n mainSearchData,\n selectedTab,\n setSelectedTab,\n setTabs,\n tabs,\n tabsData,\n isModal,\n cleanQueryString,\n searchId,\n isTabsLoaded\n}) => {\n const root = mainSearchData[advancedIndex];\n const [facetsLists, setFacetsLists] = useState(root.facetsListData);\n const [selectedFacets, setSelectedFacets] = useState({});\n const [dateRange, setDateRange] = useState([\n { label: 'From', value: '', placeholder: 'Year' },\n { label: 'To', value: '', placeholder: 'Year' }\n ]);\n const [dropdownValue, setDropdownValue] = useState(['Year', 'Year']);\n const [expandedOptions, setExpandedOptions] = useState(false);\n const [activeSearch, setActiveSearch] = useState('');\n const years = root.dateRange;\n const isLoaded = useRef(false);\n\n const { results, loading, currentKeys } = useFetch(root.endpoint, {\n query,\n selectedFacets,\n facetsLists,\n dateRange,\n selectedTab,\n setSelectedTab,\n tabs,\n cleanQueryString,\n isLoaded\n });\n\n const handleAvailableTabs = () => {\n if (!results.tabsToShow) return;\n\n const commonValues = tabsData.filter(tab =>\n results.tabsToShow.includes(tab.value)\n );\n\n if (commonValues.length) setTabs(commonValues);\n };\n\n const dateRangeExists =\n dateRange && dateRange.length && (dateRange[0].value || dateRange[1].value);\n\n const check = Boolean(\n (query && query.length >= 3) || currentKeys.length || dateRangeExists\n );\n\n const tabSelectedLink = document.querySelector('.tab-button.is-active a');\n const mainContent = document.querySelector(\n `#${tabSelectedLink?.dataset?.panelId} .main-content`\n );\n\n useEffect(() => {\n if (results?.resultsList && results?.tabsToShow.length) {\n handleAvailableTabs();\n }\n if (check && mainContent) {\n mainContent.style.display = 'none';\n } else if (!check && mainContent) {\n mainContent.removeAttribute('style');\n }\n }, [query, selectedFacets, dateRange, results, check]);\n\n useEffect(() => {\n if (!isLoaded.current) {\n isLoaded.current = true;\n }\n }, []);\n\n const checkActiveSearch = e => {\n cleanQueryString();\n const { target } = e;\n let mainTarget;\n\n if (target.closest('[data-panel-id]')) {\n mainTarget = target.closest('[data-panel-id]');\n } else if (target.closest('.modal-close')) {\n mainTarget = target.closest('.modal-close');\n } else {\n mainTarget = target;\n }\n\n const modalSearch = document.querySelector(\n `.search-modal [data-search-id=${searchId}]`\n );\n const modalContainer = document.querySelector('.search-modal');\n\n let panelId;\n let currentTabSearch;\n if (mainTarget) {\n panelId = mainTarget.dataset?.panelId;\n currentTabSearch = document.querySelector(\n `#${panelId} [data-search-id=${searchId}]`\n );\n }\n\n if (\n !modalContainer.classList.contains('hide') &&\n !mainTarget.classList.contains('modal-close')\n ) {\n setActiveSearch(modalSearch);\n } else if (mainTarget.classList.contains('modal-close')) {\n const currentTab = document.querySelector('.tab-button.is-active a');\n if (currentTab) {\n panelId = currentTab.dataset?.panelId;\n currentTabSearch = document.querySelector(\n `#${panelId} [data-search-id=${searchId}]`\n );\n }\n\n setActiveSearch(currentTabSearch);\n } else {\n setActiveSearch(currentTabSearch);\n }\n };\n\n useEffect(() => {\n const onLoadActiveTab = document.querySelector('.tab-button.is-active a');\n let onLoadActiveSearch;\n\n if (onLoadActiveTab) {\n onLoadActiveSearch = document.querySelector(\n `#${onLoadActiveTab.dataset.panelId} [data-search-id=${searchId}] `\n );\n }\n\n const searchTriggers = document.querySelectorAll(\n `.tab-button,[data-open-modal=\"search\"], .search-modal .modal-close`\n );\n\n if (searchTriggers.length) {\n searchTriggers.forEach(trigger => {\n trigger.addEventListener('click', checkActiveSearch);\n });\n }\n\n if (onLoadActiveTab) setActiveSearch(onLoadActiveSearch);\n\n return () => {\n if (searchTriggers.length) {\n searchTriggers.forEach(trigger => {\n trigger.removeEventListener('click', checkActiveSearch);\n });\n }\n };\n }, []);\n\n return (\n \n {((activeSearch && activeSearch.dataset.searchId === searchId) ||\n isModal) && (\n \n )}\n\n {facetsLists && facetsLists.length ? (\n \n setExpandedOptions(!expandedOptions)}\n >\n {root.advancedSearchLabel}\n \n \n {/* dropdown facets */}\n \n {/* date range */}\n {years.length ? (\n \n ) : (\n ''\n )}\n {/* selected categories */}\n\n \n\n {/* clear state button */}\n \n
\n \n ) : (\n ''\n )}\n {/* result items */}\n \n {results?.resultsList?.length && !loading && check ? (\n
\n ) : (\n ''\n )}\n {results &&\n !results?.resultsList?.length &&\n !loading &&\n query &&\n query.length >= 3 &&\n results.noResultsMessage && (\n
\n
\n {results.noResultsMessage.title &&\n results.noResultsMessage.title}\n
\n
\n {results.noResultsMessage.excerpt &&\n results.noResultsMessage.excerpt}\n
\n
\n )}\n