\n
\n {titleSearchTerm || dateValue.startDate || dateValue.endDate ? (\n \n {showDateToggle ? (\n \n ) : null}\n {/* {hostSearchText ? (\n \n ) : null} */}\n {titleSearchTerm ? (\n \n ) : null}\n {!allSurfacesSelected && !oneSurfacesSelected\n ? advancedFilters.courtSurfaces.map((surface, i) => {\n if (surface.active) {\n return (\n {\n let nextSurfaces = advancedFilters.courtSurfaces.map(\n nextSurface => {\n if (surface.code === nextSurface.code) {\n return {\n ...nextSurface,\n active: false\n };\n } else {\n return nextSurface;\n }\n }\n );\n setAdvancedFilters({\n ...advancedFilters,\n courtSurfaces: nextSurfaces\n });\n }}\n title={`Remove ${surface.name}`}\n />\n );\n } else {\n return null;\n }\n })\n : null}\n {!allSurfacesSelected && oneSurfacesSelected\n ? advancedFilters.courtSurfaces.map((surface, i) => {\n if (surface.active) {\n return (\n {\n let nextSurfaces = advancedFilters.courtSurfaces.map(\n surface => {\n return {\n ...surface,\n active: true\n };\n }\n );\n setAdvancedFilters({\n ...advancedFilters,\n courtSurfaces: nextSurfaces\n });\n }}\n title={`Remove ${surface.name}`}\n />\n );\n } else {\n return null;\n }\n })\n : null}\n {!allDoornessSelected\n ? advancedFilters.courtDoorness.map((doorness, i) => {\n if (doorness.active) {\n return (\n {\n let nextDoorness = advancedFilters.courtDoorness.map(\n door => {\n return {\n ...door,\n active: true\n };\n }\n );\n setAdvancedFilters({\n ...advancedFilters,\n courtDoorness: nextDoorness\n });\n }}\n title={`Remove ${doorness.code}`}\n />\n );\n } else {\n return null;\n }\n })\n : null}\n {isCategorySpecified ? (\n selectedCats.map(selectedCat =>\n {\n let nextCategories = advancedFilters.categories.map(cat => {\n if (cat.label == label) {\n return {\n ...cat,\n selected: !cat.selected\n };\n }\n return {\n ...cat,\n selected: cat.selected\n };\n });\n\n let AllOption = advancedFilters.categories.map(cat => ({\n ...cat,\n selected: cat.value === \"All\"\n }));\n\n if (label === \"All\") {\n return\n }\n\n setAdvancedFilters({\n ...advancedFilters,\n categories: selectedCats.length > 1 ? nextCategories : AllOption\n });\n }}\n title={`Remove ${selectedCat && selectedCat.value}`}\n />\n )\n\n ) : null}\n {hostOptions.map((host, i) => {\n let output = null;\n if (host.active) {\n output = (\n {\n let nextHostOptions: HostDetails[] = hostOptions.map(\n thisHost => {\n if (thisHost.code === host.code) {\n return {\n ...thisHost,\n active: false\n };\n } else {\n return {\n ...thisHost\n };\n }\n }\n );\n setHostOptions(nextHostOptions);\n }}\n title={`Remove ${host.name}`}\n />\n );\n }\n return output;\n })}\n \n ) : null}\n
\n
\n );\n};\n\nexport default WhatsOnStateToggleSection;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport \"./index.scss\";\nimport Dropdown from \"../../static/Dropdown/Dropdown\";\nimport { dropdownItem } from \"../../static/Dropdown/types\";\nimport Table from \"./Table\";\nimport Results from \"./Results\";\nimport { getCalendarFilters } from \"../../services/tournaments\";\nimport { getResultsRoundUpFilters } from \"../../services/resultsroundup\";\nimport { formatDate, useOutsideAlerter, useDebounce } from \"../../helpers\";\nimport { tournamentCalendar } from \"../../helpers/errors\";\nimport perPage from \"./pagerOptions\";\nimport {\n WhatsOnTableProps,\n CourtSurface,\n CourtDoorness,\n dropdownItemSelected,\n HostDetails,\n ALL\n} from \"./types\";\nimport moment from \"moment\";\nimport { monthLabelsFull } from \"../../dynamic/DatePicker/helpers\";\nimport { Dates, AdvancedFilters } from \"../../dynamic/WhatsOnHero/types\";\nimport WhatsOnStateToggleSection from \"./WhatsOnStateToggle\";\nimport DatePicker from \"../../dynamic/DatePicker/DatePicker\";\nimport _ from \"lodash\";\nimport { tourOptions } from \"../RankingHero/mockData\";\nimport MultiSelectDropdown from \"./MultiSelectDropdown\";\nimport { useLazyLoad } from \"../../helpers/hooks\";\n\ninterface WhatsOnAdvancedFiltersProps {\n startDate: moment.Moment | null;\n endDate: moment.Moment | null;\n setDates: (dates: Dates) => void;\n advancedFilters: AdvancedFilters;\n setAdvancedFilters: (filters: AdvancedFilters) => void;\n externalMonthAndYearState?: {\n viewedMonth: number;\n setViewedMonth: (month: number) => void;\n viewedYear: number;\n setViewedYear: (year: number) => void;\n };\n}\n\nexport const WhatsOnAdvancedFilters = (props: WhatsOnAdvancedFiltersProps) => {\n const {\n startDate,\n endDate,\n setDates,\n advancedFilters,\n setAdvancedFilters,\n externalMonthAndYearState\n } = props;\n const [showSurfaceFilters, setShowSurfaceFilters] = useState(false);\n\n const changeCourtSufaceState = (\n surfaceCode: string,\n active: boolean,\n currentCourtSurfaces: CourtSurface[]\n ) => {\n const nextCourtSurfaces: CourtSurface[] = currentCourtSurfaces.map(\n surface => {\n if (surface.code === surfaceCode) {\n return {\n name: surface.name,\n code: surface.code,\n active\n };\n } else {\n return surface;\n }\n }\n );\n return nextCourtSurfaces;\n };\n\n const changeCourtDoornessState = (\n surfaceCode: string,\n active: boolean,\n currentCourtDoorness: CourtDoorness[]\n ) => {\n const nextCourtDoorness: CourtDoorness[] = currentCourtDoorness.map(\n door => {\n if (door.code === surfaceCode) {\n return {\n code: door.code,\n active\n };\n } else {\n return door;\n }\n }\n );\n return nextCourtDoorness;\n };\n\n const changeCategory = (\n category: dropdownItemSelected,\n currentCategories: dropdownItemSelected[]\n ) => {\n const nextCategories: dropdownItemSelected[] = currentCategories.map(\n cat => {\n if (cat.value !== category.value) {\n return {\n ...cat,\n selected: cat.selected\n };\n } else {\n return {\n ...cat,\n selected: !cat.selected\n };\n }\n }\n );\n\n let selected = nextCategories.filter(cat => cat.selected);\n const flag = selected.some(cat => cat.value != \"All\");\n\n return nextCategories.map(cat => {\n if (category.value == \"All\") {\n return {\n ...cat,\n selected: cat.value == \"All\"\n };\n } else {\n if (cat.value == \"All\") {\n return {\n ...cat,\n selected: !flag\n };\n } else {\n return cat;\n }\n }\n });\n };\n\n let categoriesString = advancedFilters.categories.reduce(\n (accumulator: string, currentValue: dropdownItemSelected) => {\n const selected = advancedFilters.categories.filter(cat => cat.selected);\n if (currentValue.selected) {\n return `${accumulator}${\n currentValue.label != selected[0].label ? \", \" : \"\"\n }${currentValue.value}`;\n } else {\n return accumulator;\n }\n },\n \"\"\n );\n\n return (\n \n
\n {\n if (startDate === null && endDate === null) {\n setDates({\n startDate: moment().startOf(\"month\"),\n endDate: moment().endOf(\"month\")\n });\n } else {\n setDates({\n startDate: startDate ? moment(startDate) : null,\n endDate: endDate ? moment(endDate) : null\n });\n }\n }}\n alwaysOpenOnStart\n externalMonthAndYearState={externalMonthAndYearState}\n customOutsideClickCondition={e => {\n const target = e.target as HTMLElement;\n if (\n (target &&\n target.closest(\".dropdown--month-selector\") !== null) ||\n (target && target.closest(\".dropdown--year-selector\") !== null)\n ) {\n return false;\n } else {\n return true;\n }\n }}\n />\n
\n {advancedFilters.courtSurfaces.length && advancedFilters.courtDoorness ? (\n
{\n !showSurfaceFilters ? setShowSurfaceFilters(true) : null;\n }}\n >\n
\n ) : (\n
\n )}\n {advancedFilters.grandSlams.length ? (\n
\n ac.selected\n )[0]\n }\n onChange={(e: any) => {\n const grandSlams = [\n ...advancedFilters.grandSlams.map(\n (grandSlam: dropdownItem) => ({\n ...grandSlam,\n selected: grandSlam.value == e.value\n })\n )\n ];\n\n setAdvancedFilters({\n ...advancedFilters,\n shouldUpdateData: true,\n grandSlams\n });\n }}\n />\n
\n ) : null}\n {advancedFilters.ageCategories.length ? (\n
\n ac.selected\n )[0]\n }\n onChange={(e: any) => {\n const ageCategories = [\n ...advancedFilters.ageCategories.map(\n (ageCat: dropdownItem) => ({\n ...ageCat,\n selected: ageCat.value == e.value\n })\n )\n ];\n\n setAdvancedFilters({\n ...advancedFilters,\n shouldUpdateData: true,\n ageCategories\n });\n }}\n />\n
\n ) : null}\n {advancedFilters.matchTypes && advancedFilters.matchTypes.length > 1 ? (\n
\n matchType.selected\n )[0]\n }\n onChange={(matchType: any) => {\n let nextMatchType = advancedFilters.matchTypes.map(type => ({\n ...type,\n selected: matchType.value === type.value\n }));\n\n setAdvancedFilters({\n ...advancedFilters,\n shouldUpdateData: true,\n matchTypes: nextMatchType\n });\n }}\n />\n
\n ) : null}\n {advancedFilters.playerTypes && advancedFilters.playerTypes.length > 1 ? (\n
\n playerType.selected\n )[0]\n }\n onChange={(playerType: any) => {\n let nextPlayerType = advancedFilters.playerTypes.map(type => ({\n ...type,\n selected: playerType.value === type.value\n }));\n\n setAdvancedFilters({\n ...advancedFilters,\n shouldUpdateData: true,\n playerTypes: nextPlayerType\n });\n }}\n />\n
\n ) : null}\n {advancedFilters.categories.length > 1 ? (\n
{\n const nextCategories = changeCategory(\n cat,\n advancedFilters.categories\n );\n setAdvancedFilters({\n ...advancedFilters,\n shouldUpdateData: true,\n categories: nextCategories\n });\n }}\n options={advancedFilters.categories}\n />\n ) : null}\n \n );\n};\n\ninterface WhatsOnFiltersProps {\n loadingError: boolean;\n setLoadingError: (state: boolean) => void;\n searchNationValue: string;\n titleSearchTerm: string;\n errorHandler: Function;\n updateSearchNationValue: Function;\n dateValue: {\n startDate: moment.Moment | null;\n endDate: moment.Moment | null;\n };\n setDates: (dates: Dates) => void;\n setTitleSearchTerm: Function;\n searchStartDate: string | number | (string | number)[] | null | undefined;\n advancedFilters: AdvancedFilters;\n setAdvancedFilters: (filters: AdvancedFilters) => void;\n hostOptions: HostDetails[];\n setHostOptions: (hosts: HostDetails[]) => void;\n tourCode: string;\n results?: boolean;\n tourOptions: dropdownItem[];\n circuitCode: {\n value: string;\n filtersLoaded: boolean;\n };\n updateCircuit: (circuit: { value: string; filtersLoaded: boolean }) => void;\n}\n\nconst yearSelectionOpts = () => {\n // get current year, go back to 1975\n let year = new Date().getFullYear() + 1;\n let yearSelectionOpts: dropdownItem[] = [];\n\n while (year > 2000) {\n yearSelectionOpts.push({\n value: year as number,\n label: year.toString()\n });\n year--;\n }\n\n return yearSelectionOpts;\n};\n\nexport const WhatsOnFilters = (props: WhatsOnFiltersProps) => {\n const {\n // @ts-ignore\n searchNationValue,\n errorHandler,\n setTitleSearchTerm,\n titleSearchTerm,\n updateSearchNationValue,\n // @ts-ignore\n updateSearchNationOption,\n setDates,\n searchStartDate,\n dateValue,\n advancedFilters,\n setAdvancedFilters,\n hostOptions,\n setHostOptions,\n tourCode,\n results,\n circuitCode,\n updateCircuit,\n loadingError,\n setLoadingError\n } = props;\n\n const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);\n const [hostNations, setHostNations] = useState