\r\n \r\n {content.imageUrl\r\n ? 
\r\n : null\r\n }\r\n
\r\n );\r\n }\r\n}","import { filter, update } from 'lodash';\r\nimport React, { useState, useContext, useEffect, useRef } from 'react';\r\nimport SimpleFacetCheckbox from '../../global/components/inputs/selects/simple-facet-checkbox';\r\nimport PageContext from './../context/pageContext';\r\nimport { FiltersData } from './paginated-landing-content-app';\r\n\r\ninterface IProps {\r\n filtersData: FiltersData;\r\n updateRoleFacet: any;\r\n updateTopicFacet: any;\r\n}\r\n\r\nexport default function PaginatedFilters(props: IProps) {\r\n const { topicFilter, setTopicFilter, roleFilter, setRoleFilter, ageFilter, setAgeFilter, activeFilter, setActiveFilter } = useContext(PageContext);\r\n const ExpandFiltersText = (window as any).bootstrap.ExpandFiltersText;\r\n const CollapseFiltersText = (window as any).bootstrap.CollapseFiltersText;\r\n const showRoleFilter = props.filtersData.ShowRoleFilter;\r\n const showTopicFilter = props.filtersData.ShowTopicFilter;\r\n const showAgeFilter = props.filtersData.ShowAgeRangesFilter;\r\n const defaultTopicSize = props.filtersData.DefaultTopicFilterSize;\r\n const defaultRoleSize = props.filtersData.DefaultRoleFilterSize;\r\n const defaultAgeSize = props.filtersData.DefaultAgeRangesFilterSize;\r\n const [roleFilterData, updateRoleFilterData] = useState([]);\r\n const [topicFilterData, updateTopicFilterData] = useState([]);\r\n const [ageFilterData, updateAgeFilterData] = useState([]);\r\n const [showAllTopics, setShowAllTopics] = useState(false);\r\n const [showAllRoles, setShowAllRoles] = useState(false);\r\n const [showAllAges, setShowAllAges] = useState(false);\r\n\r\n const updateTopicFilter = (filterName) => {\r\n let newTopicArray = [];\r\n let itemRemoved = false;\r\n topicFilter.forEach(arrayItem => {\r\n if (arrayItem.id == filterName.id) {\r\n itemRemoved = true;\r\n }\r\n else {\r\n newTopicArray.push(arrayItem)\r\n }\r\n })\r\n\r\n if (!itemRemoved) {\r\n newTopicArray.push(filterName)\r\n }\r\n setTopicFilter(newTopicArray);\r\n \r\n }\r\n \r\n\r\n const updateRoleFilter = (filterName) => {\r\n let newRoleArray = [];\r\n let itemRemoved = false;\r\n roleFilter.forEach(arrayItem => {\r\n if (arrayItem.id == filterName.id) {\r\n itemRemoved = true;\r\n }\r\n\r\n else {\r\n newRoleArray.push(arrayItem)\r\n }\r\n })\r\n\r\n if (!itemRemoved) {\r\n newRoleArray.push(filterName)\r\n }\r\n\r\n setRoleFilter(newRoleArray);\r\n \r\n }\r\n const updateAgeFilter = (filterName) => {\r\n let newAgeArray = [];\r\n let itemRemoved = false;\r\n ageFilter.forEach(arrayItem => {\r\n if (arrayItem.id == filterName.id) {\r\n itemRemoved = true;\r\n }\r\n\r\n else {\r\n newAgeArray.push(arrayItem)\r\n }\r\n })\r\n\r\n if (!itemRemoved) {\r\n newAgeArray.push(filterName)\r\n }\r\n\r\n setAgeFilter(newAgeArray);\r\n\r\n }\r\n\r\n const checkForActiveFilter = () => {\r\n if (roleFilter.length > 0 || topicFilter.length > 0 || ageFilter.length > 0) {\r\n setActiveFilter(true)\r\n }\r\n else {\r\n setActiveFilter(false)\r\n }\r\n }\r\n const updateTopicFacets = () => {\r\n const topicFilters = [];\r\n var visibleTopics = props.filtersData.TopicFilters;\r\n if (visibleTopics && visibleTopics.length > defaultTopicSize && !showAllTopics) {\r\n visibleTopics = props.filtersData.TopicFilters.slice(0, defaultTopicSize);\r\n }\r\n visibleTopics.forEach(item => {\r\n topicFilters.push({ id: item.Key, value: item.Value, name: item.Key })\r\n });\r\n updateTopicFilterData(topicFilters);\r\n }\r\n\r\n const updateRoleFacets = () => {\r\n const roleFilters = [];\r\n var visibleRoles = props.filtersData.RoleFilters;\r\n if (visibleRoles && visibleRoles.length > defaultRoleSize && !showAllRoles) {\r\n visibleRoles = props.filtersData.RoleFilters.slice(0, defaultRoleSize);\r\n }\r\n visibleRoles.forEach(item => {;\r\n roleFilters.push({ id: item.Key, value: item.Value, name: item.Key })\r\n });\r\n updateRoleFilterData(roleFilters);\r\n }\r\n const updateAgeFacets = () => {\r\n const ageFilters = [];\r\n var visibleAges = props.filtersData.AgeRangesFilters;\r\n if (visibleAges && visibleAges.length > defaultAgeSize && !showAllAges) {\r\n visibleAges = props.filtersData.AgeRangesFilters.slice(0, defaultAgeSize);\r\n }\r\n visibleAges.forEach(item => {\r\n ;\r\n ageFilters.push({ id: item.Key, value: item.Value, name: item.Key })\r\n });\r\n updateAgeFilterData(ageFilters);\r\n }\r\n\r\n useEffect(() => {\r\n checkForActiveFilter();\r\n updateRoleFacets();\r\n updateTopicFacets();\r\n updateAgeFacets();\r\n }, [topicFilter, roleFilter, ageFilter, showAllTopics, showAllRoles, showAllAges]);\r\n\r\n useEffect(() => {\r\n checkForActiveFilter();\r\n updateRoleFacets();\r\n updateTopicFacets();\r\n updateAgeFacets();\r\n }, [props.filtersData.TopicFilters, props.filtersData.RoleFilters, props.filtersData.AgeRangesFilters]);\r\n\r\n const updateTopicFilterVisibility = () => {\r\n setShowAllTopics(!showAllTopics);\r\n }\r\n\r\n const updateRoleFilterVisibility = () => {\r\n setShowAllRoles(!showAllRoles);\r\n }\r\n const updateAgeFilterVisibility = () => {\r\n setShowAllAges(!showAllAges);\r\n }\r\n\r\n return (\r\n\r\n \r\n\r\n {showTopicFilter &&\r\n
\r\n\r\n );\r\n\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","import * as React from 'react';\r\nimport { IPage } from '../../global/state-helpers/page';\r\nimport { IPaginatedLandingContent } from '../models/paginated-landing-content'\r\nimport { Pagination, IPaginationOptions } from '../../global/components/pagination/pagination';\r\nimport { ContentList } from './paginated-landing-content-list';\r\nimport PaginatedFilters from './paginated-filters';\r\nimport * as queryString from 'query-string'\r\nimport { ConnectedSearchBar } from '../../global/components/inputs/search-bar/search-bar';\r\nimport { Textbox } from '../../global/components/inputs/textbox/textbox';\r\nimport { getResultsText } from '../../global/actions/results-count';\r\nimport { ResultsCountMessage } from '../../global/components/results/results-count-msg';\r\nimport { ResultsProps } from '../../global/state-helpers/site-settings-props';\r\nimport { filter, forEach } from 'lodash';\r\nimport { search } from '../../global/ducks/best-bets-api';\r\nimport matchesAnyTopicHelper from '../matchesAnyTopicHelper';\r\nimport matchesAnyRoleHelper from '../matchesAnyRoleHelper';\r\nimport { Countries } from '../../membership-application/constants/constants';\r\nimport matchesAnyAgeHelper from '../matchesAnyAgeHelper';\r\n\r\nexport interface FiltersData {\r\n RoleHeading: string;\r\n TopicHeading: string;\r\n AgeRangesHeading: string;\r\n TopicFilters: Filter[];\r\n RoleFilters: Filter[];\r\n AgeRangesFilters: Filter[];\r\n ShowRoleFilter: boolean;\r\n ShowTopicFilter: boolean;\r\n ShowAgeRangesFilter: boolean;\r\n items: IPaginatedLandingContent[];\r\n DefaultTopicFilterSize: number;\r\n DefaultRoleFilterSize: number;\r\n DefaultAgeRangesFilterSize: number;\r\n}\r\n\r\nexport type Filter = Record\r\n updateTopicFilter(item)}\r\n />\r\n )}\r\n {props.filtersData.TopicFilters.length > defaultTopicSize &&\r\n {showAllTopics ? CollapseFiltersText : ExpandFiltersText}\r\n }\r\n \r\n
\r\n }\r\n {showRoleFilter &&\r\n {props.filtersData.TopicHeading}
\r\n {topicFilterData.map((item, i) =>\r\n \r\n updateRoleFilter(item)}\r\n />\r\n )}\r\n {props.filtersData.RoleFilters.length > defaultRoleSize &&\r\n {showAllRoles ? CollapseFiltersText : ExpandFiltersText}\r\n }\r\n
\r\n }\r\n {showAgeFilter &&\r\n {props.filtersData.RoleHeading}
\r\n {roleFilterData.map((item, i) =>\r\n \r\n updateAgeFilter(item)}\r\n />\r\n )}\r\n {props.filtersData.AgeRangesFilters.length > defaultAgeSize &&\r\n {showAllAges ? CollapseFiltersText : ExpandFiltersText}\r\n }\r\n
\r\n }\r\n {props.filtersData.AgeRangesHeading}
\r\n {ageFilterData.map((item, i) =>\r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.setState({ ...this.state, filteredArray: this.getFilteredItems() })\r\n }\r\n\r\n componentDidUpdate(prevProps: IProps, prevState) {\r\n if (prevProps.roleFilter.length !== this.props.roleFilter.length) {\r\n this.getFilteredItems();\r\n this.updateTopicFacetCounts();\r\n this.updateAgeFacetCounts();\r\n }\r\n if (prevProps.topicFilter.length !== this.props.topicFilter.length) {\r\n this.getFilteredItems();\r\n this.updateRoleFacetCounts();\r\n this.updateAgeFacetCounts();\r\n }\r\n if (prevProps.ageFilter.length !== this.props.ageFilter.length) {\r\n this.getFilteredItems();\r\n this.updateTopicFacetCounts();\r\n this.updateRoleFacetCounts();\r\n }\r\n if (prevState.searchText !== this.state.searchText) {\r\n var url = `?${queryString.stringify({ page: 1, q: this.state.searchText }, { sort: false })}`\r\n window.history.replaceState(undefined, undefined, url);\r\n this.getFilteredItems();\r\n this.updateRoleFacetCounts();\r\n this.updateTopicFacetCounts();\r\n this.updateAgeFacetCounts();\r\n }\r\n }\r\n \r\n\r\n onSearch = () => {\r\n this.setState(prevState => ({ searchText: prevState.inputText, currentPage: 1 })); \r\n }\r\n \r\n\r\n onInputChange = (value: string) => {\r\n this.setState(state => ({ ...state, inputText: value, currentPage: 1 }));\r\n\r\n var url = `?${queryString.stringify({ page: 1, q: value }, { sort: false })}`\r\n window.history.replaceState(undefined, undefined, url);\r\n }\r\n\r\n onKeyPress = (e) => {\r\n if (e.key === 'Enter') {\r\n this.onSearch();\r\n }\r\n }\r\n\r\n onPageSelect = (page: number, scrollToTop: boolean = false) => {\r\n\r\n this.setState({ currentPage: page });\r\n\r\n if (scrollToTop) {\r\n window.scroll(0, 0);\r\n }\r\n\r\n var url = `?${queryString.stringify({ page: page, q: this.state.inputText }, { sort: false })}`\r\n window.history.replaceState(undefined, undefined, url);\r\n }\r\n\r\n filterSearchItems = (item: IPaginatedLandingContent, searchText: string): boolean => {\r\n // If there is no search text, every item is in the list\r\n if (!searchText) {\r\n return true;\r\n }\r\n\r\n // Actual filtering by title and description\r\n return (item.title != null && item.title.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) ||\r\n (item.description != null && item.description.toLowerCase().indexOf(searchText.toLowerCase()) >= 0);\r\n }\r\n\r\n getFilteredItems() {\r\n let searchResultItems = this.props.items.filter(i => this.filterSearchItems(i, this.state.searchText));\r\n let resultsArray: IPaginatedLandingContent[];\r\n // Check if any facets are selected, otherwise return all results array \r\n if (this.props.roleFilter.length > 0 || this.props.topicFilter.length > 0 || this.props.ageFilter.length > 0) {\r\n\r\n const activeRoleFilter = this.props.roleFilter.length > 0;\r\n const activeTopicFilter = this.props.topicFilter.length > 0;\r\n const activeAgeFilter = this.props.ageFilter.length > 0;\r\n\r\n // If there's an active filter, start fresh with a new results array\r\n let filteredArray = [];\r\n\r\n // With each item from search results, check against all topics\r\n searchResultItems.forEach((result) => {\r\n let matchesRole, matchesTopic, matchesAge;\r\n\r\n matchesRole = activeRoleFilter ? matchesAnyRoleHelper(result, this.props.roleFilter) : true;\r\n matchesTopic = activeTopicFilter ? matchesAnyTopicHelper(result, this.props.topicFilter) : true;\r\n matchesAge = activeAgeFilter ? matchesAnyAgeHelper(result, this.props.ageFilter) : true;\r\n\r\n // If both are undefined, then it matches\r\n if (this.matchesCombinedFilters(!!matchesTopic, !!matchesRole, !!matchesAge)) {\r\n filteredArray.push(result);\r\n }\r\n })\r\n\r\n resultsArray = filteredArray;\r\n }\r\n\r\n else {\r\n resultsArray = searchResultItems;\r\n }\r\n this.setState(prevState => ({ ...this.state, filteredArray: resultsArray }));\r\n return resultsArray;\r\n }\r\n\r\n matchesCombinedFilters(matchesTopic: boolean, matchesRole: boolean, matchesAge: boolean) {\r\n return matchesTopic && matchesRole && matchesAge;\r\n }\r\n\r\n updateTopicFacetCounts = () => {\r\n //this code if both are selected else use the entire search list\r\n const baseArray = this.props.items.filter(i => this.filterSearchItems(i, this.state.searchText));\r\n let countArray = [];\r\n let roleArray = [];\r\n let ageArray = [];\r\n if (this.props.roleFilter.length > 0 || this.props.ageFilter.length > 0) {\r\n if (this.props.roleFilter.length > 0) {\r\n // set the filtered Array equal to the filtered out roles cant use getfiltereditems because it filters on both at once and you will miss items depending on the order it checks \r\n \r\n this.props.roleFilter.forEach(filter => {\r\n let matchedFilters = baseArray.filter(item => {\r\n if (item.roles) {\r\n return item.roles.map(role => role.toLowerCase()).includes(filter.name.toLowerCase());\r\n }\r\n \r\n });\r\n matchedFilters.forEach(match => {\r\n if (!roleArray.includes(match)) {\r\n roleArray.push(match);\r\n }\r\n });\r\n countArray = roleArray;\r\n })\r\n }\r\n if (this.props.ageFilter.length > 0) {\r\n \r\n // push filtered out ages\r\n this.props.ageFilter.forEach(filter => {\r\n let matchedFilters = baseArray.filter(item => {\r\n if (item.ages) {\r\n return item.ages.map(age => age.toLowerCase()).includes(filter.name.toLowerCase());\r\n }\r\n\r\n });\r\n matchedFilters.forEach(match => {\r\n if (!ageArray.includes(match)) {\r\n ageArray.push(match);\r\n }\r\n });\r\n countArray = ageArray;\r\n })\r\n }\r\n // now that we added a third filter we need to check the previous two prefiltered categories in this case roles and age and only push the items that are in both arrays to do the final check for counts on the filter otherwise we rely on the countArray = to be correct knowing that only one would be hit\r\n if (this.props.ageFilter.length > 0 && this.props.roleFilter.length > 0) {\r\n countArray = roleArray.filter(filteredItem => ageArray.includes(filteredItem));\r\n }\r\n }\r\n else { countArray = baseArray; }\r\n this.props.filtersData.TopicFilters.forEach((filterOption, index) => {\r\n\r\n const matches = countArray.filter((result) => {\r\n\r\n if (result.topics) {\r\n let count = 0\r\n result.topics.forEach((topic) => {\r\n if (topic.toLowerCase() == filterOption.Key.toLowerCase()) {\r\n count++;\r\n }\r\n })\r\n if (count > 0) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n })\r\n\r\n this.props.updateTopicFilterCount(index, matches.length)\r\n })\r\n }\r\n\r\n updateRoleFacetCounts = () => {\r\n // this code if both are selected\r\n const baseArray = this.props.items.filter(i => this.filterSearchItems(i, this.state.searchText));\r\n let countArray = [];\r\n let topicArray = [];\r\n let ageArray = [];\r\n if (this.props.topicFilter.length > 0 || this.props.ageFilter.length > 0) {\r\n if (this.props.topicFilter.length > 0) {\r\n // set the countArray equal to the filtered out roles and then match against that cant use getfiltereditems because it filters on both at once and you will miss items depending on the order it checks\r\n this.props.topicFilter.forEach(filter => {\r\n let matchedFilters = baseArray.filter(item => {\r\n if (item.topics) {\r\n return item.topics.map(topic => topic.toLowerCase()).includes(filter.name.toLowerCase());\r\n }\r\n });\r\n matchedFilters.forEach(match => {\r\n if (!topicArray.includes(match)) {\r\n topicArray.push(match);\r\n }\r\n });\r\n countArray = topicArray;\r\n })\r\n }\r\n if (this.props.ageFilter.length > 0) {\r\n // push filtered out ages\r\n this.props.ageFilter.forEach(filter => {\r\n let matchedFilters = baseArray.filter(item => {\r\n if (item.ages) {\r\n return item.ages.map(age => age.toLowerCase()).includes(filter.name.toLowerCase());\r\n }\r\n\r\n });\r\n matchedFilters.forEach(match => {\r\n if (!ageArray.includes(match)) {\r\n ageArray.push(match);\r\n }\r\n });\r\n countArray = ageArray;\r\n })\r\n }\r\n if (this.props.ageFilter.length > 0 && this.props.topicFilter.length > 0) {\r\n countArray = topicArray.filter(filteredItem => ageArray.includes(filteredItem));\r\n }\r\n }\r\n else { countArray = baseArray; }\r\n this.props.filtersData.RoleFilters.forEach((filterOption, index) => {\r\n const matches = countArray.filter((result) => {\r\n\r\n if (result.roles) {\r\n let count = 0\r\n result.roles.forEach((role) => {\r\n if (role.toLowerCase() == filterOption.Key.toLowerCase()) {\r\n count++;\r\n }\r\n })\r\n if (count > 0) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n })\r\n\r\n this.props.updateRoleFilterCount(index, matches.length)\r\n })\r\n\r\n\r\n }\r\n updateAgeFacetCounts = () => {\r\n // this code if both are selected\r\n const baseArray = this.props.items.filter(i => this.filterSearchItems(i, this.state.searchText));\r\n let countArray = [];\r\n let roleArray = [];\r\n let topicArray = [];\r\n if (this.props.topicFilter.length > 0 || this.props.roleFilter.length > 0) {\r\n if (this.props.topicFilter.length > 0) {\r\n // set the countArray equal to the filtered out roles and then match against that cant use getfiltereditems because it filters on both at once and you will miss items depending on the order it checks\r\n this.props.topicFilter.forEach(filter => {\r\n let matchedFilters = baseArray.filter(item => {\r\n if (item.topics) {\r\n return item.topics.map(topic => topic.toLowerCase()).includes(filter.name.toLowerCase());\r\n }\r\n });\r\n matchedFilters.forEach(match => {\r\n if (!topicArray.includes(match)) {\r\n topicArray.push(match);\r\n }\r\n });\r\n countArray = topicArray;\r\n })\r\n }\r\n if (this.props.roleFilter.length > 0) {\r\n // set the countArray equal to the filtered out roles and then match against that cant use getfiltereditems because it filters on both at once and you will miss items depending on the order it checks\r\n this.props.roleFilter.forEach(filter => {\r\n let matchedFilters = baseArray.filter(item => {\r\n if (item.roles) {\r\n return item.roles.map(role => role.toLowerCase()).includes(filter.name.toLowerCase());\r\n }\r\n\r\n });\r\n matchedFilters.forEach(match => {\r\n if (!roleArray.includes(match)) {\r\n roleArray.push(match);\r\n }\r\n });\r\n countArray = roleArray;\r\n })\r\n }\r\n if (this.props.roleFilter.length > 0 && this.props.topicFilter.length > 0) {\r\n countArray = topicArray.filter(filteredItem => roleArray.includes(filteredItem));\r\n }\r\n }\r\n else { countArray = baseArray; }\r\n\r\n this.props.filtersData.AgeRangesFilters.forEach((filterOption, index) => {\r\n const matches = countArray.filter((result) => {\r\n\r\n if (result.ages) {\r\n let count = 0\r\n result.ages.forEach((age) => {\r\n if (age.toLowerCase() == filterOption.Key.toLowerCase()) {\r\n count++;\r\n }\r\n })\r\n if (count > 0) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n })\r\n\r\n this.props.updateAgeFilterCount(index, matches.length)\r\n })\r\n\r\n\r\n }\r\n\r\n\r\n\r\n renderShowingMessage = (page: IPage, pagination: IPaginationOptions): JSX.Element => {\r\n let beginNumber = ((pagination.currentPage - 1) * page.pageSize) + 1;\r\n let endNumber = page.pageSize * pagination.currentPage < pagination.totalItems ? page.pageSize * pagination.currentPage : pagination.totalItems;\r\n let ofNumber = pagination.totalItems;\r\n let message = ofNumber === 0 ? 'No Results' : `Showing ${beginNumber} - ${endNumber} of ${ofNumber}`\r\n\r\n return (\r\n \r\n \r\n\r\n
\r\n\r\n \r\n this.onPageSelect(page, true)}\r\n useRedux={false} />\r\n
\r\n \r\n this.onInputChange(e.currentTarget.value)}\r\n onKeyPress={this.onKeyPress}\r\n isControlled={true}\r\n placeHolder=\"Search\"\r\n\r\n />\r\n \r\n Search\r\n \r\n
\r\n \r\n {this.renderShowingMessage(this.props.pageModel, pagination)}\r\n
\r\n \r\n {message}\r\n
\r\n )\r\n }\r\n\r\n\r\n\r\n\r\n\r\n toggleMobileFacets = () => {\r\n this.setState({ showMobileFacets: !this.state.showMobileFacets });\r\n }\r\n}","import * as React from 'react';\r\nimport { IPaginatedLandingContent } from '../models/paginated-landing-content'\r\nimport { LandingPageContent } from './landing-page-content';\r\n\r\ninterface IProps {\r\n items: IPaginatedLandingContent[];\r\n currentPage: number;\r\n pageSize: number;\r\n searchText: string;\r\n}\r\n\r\nexport class ContentList extends React.Component\r\n {paginatedItems.map((item, i) =>
\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n","import { createContext } from \"react\";\r\n\r\nconst PageContext = createContext({\r\n topicFilter: [],\r\n roleFilter: [],\r\n ageFilter: [],\r\n setTopicFilter: (filter) => (filter),\r\n setRoleFilter: (filter) => (filter),\r\n setAgeFilter: (filter) => (filter),\r\n activeFilter: false,\r\n setActiveFilter: (activeFilter) => (activeFilter),\r\n});\r\n\r\nexport default PageContext;\r\n","import * as React from 'react';\r\nimport * as ReactDOM from 'react-dom';\r\nimport App from './components/App';\r\nimport { createRoot } from 'react-dom/client';\r\n\r\nconst paginatedPageMount = document.getElementById('paginated-landing-content-app');\r\n\r\nif (paginatedPageMount) {\r\n const paginatedPageRoot = createRoot(paginatedPageMount);\r\n paginatedPageRoot.render(