Migrate search refinement files to TypeScript.

app/components/search/Refinements/ClearAllFilters.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { connectCurrentRefinements } from "react-instantsearch/connectors";
+import type { Refinement, RefinementValue } from "react-instantsearch-core";
+import styles from "./RefinementFilters.module.scss";
+
+type Props = {
+  items: Refinement[];
+  refine: (value: Refinement[] | RefinementValue | RefinementValue[]) => void;
+  setSearchRadius: (radius: string) => void;
+};
+
+const ClearAllFilter = ({ items, refine, setSearchRadius }: Props) => (
+  <div
+    role="button"
+    tabIndex={0}
+    className={styles.clearAll}
+    onClick={() => {
+      refine(items);
+      setSearchRadius("all");
+    }}
+  >
+    Clear all
+  </div>
+);
+
+export default connectCurrentRefinements<Props>(ClearAllFilter);

app/components/search/Refinements/FacetRefinementList.jsx → app/components/search/Refinements/FacetRefinementList.tsx

@@ -1,13 +1,31 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
 import { connectRefinementList } from "react-instantsearch/connectors";
+import type { Hit } from "react-instantsearch-core";
 import styles from "./RefinementFilters.module.scss";
 
+type Item = {
+  count: number;
+  isRefined: boolean;
+  label: string;
+  value: string[];
+};
+
+type Props = {
+  items: Hit<Item>[];
+  refine: (value: string[]) => void;
+  currentRefinement: string[];
+  mapping: Record<string, string[]>;
+};
+
+type State = {
+  isChecked: Record<string, boolean>;
+};
+
 // Todo: This component could potentially be consolidated with the the Refinement List Filter
 // component when categories/eligibilities are standardized across the homepage Service
 // Pathways results and the Search Results pages
-class FacetRefinementList extends Component {
-  constructor(props) {
+class FacetRefinementList extends Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.changeRefinement = this.changeRefinement.bind(this);
     this.setChecks = this.setChecks.bind(this);
@@ -17,7 +35,7 @@ class FacetRefinementList extends Component {
     };
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
     const { currentRefinement } = this.props;
     if (
       currentRefinement.sort().join(",") !==
@@ -29,17 +47,17 @@ class FacetRefinementList extends Component {
     }
   }
 
-  setChecks() {
+  setChecks(): Record<string, boolean> {
     const { mapping } = this.props;
     const mapKeys = Object.keys(mapping);
-    const checks = {};
+    const checks: Record<string, boolean> = {};
     mapKeys.forEach((key) => {
       checks[key] = this.keyHasAtLeastOneRefined(key);
     });
     return checks;
   }
 
-  changeRefinement(key) {
+  changeRefinement(key: string) {
     // eslint-disable-line no-unused-vars
     const { refine } = this.props;
     const { currentRefinement } = this.props;
@@ -58,13 +76,13 @@ class FacetRefinementList extends Component {
     refine(newRefinement);
   }
 
-  keyHasAtLeastOneRefined(key) {
+  keyHasAtLeastOneRefined(key: string) {
     const { currentRefinement } = this.props;
     const { mapping } = this.props;
     return mapping[key].some((value) => currentRefinement.includes(value));
   }
 
-  refinementHasResults(key) {
+  refinementHasResults(key: string) {
     // this check that a key (checkbox) has at least one sub-elements that is refined
     // e.g if Learning Disabilities is can be refined but not Visual Impairment,
     // Disability is still enabled as a checkbox
@@ -109,10 +127,4 @@ class FacetRefinementList extends Component {
   }
 }
 
-FacetRefinementList.propTypes = {
-  items: PropTypes.array.isRequired,
-  refine: PropTypes.func.isRequired,
-  currentRefinement: PropTypes.array.isRequired,
-};
-
-export default connectRefinementList(FacetRefinementList);
+export default connectRefinementList<Props>(FacetRefinementList);

app/components/search/Refinements/OpenNowFilter.jsx → app/components/search/Refinements/OpenNowFilter.tsx

@@ -1,9 +1,13 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { connectRefinementList } from "react-instantsearch/connectors";
 import { getCurrentDayTime } from "utils/index";
 import styles from "./RefinementFilters.module.scss";
 
+type Props = {
+  currentRefinement: string[];
+  refine: (value: string[]) => void;
+};
+
 /**
  * A custom Algolia InstantSearch RefinementList widget representing the Open
  * Now checkbos.
@@ -21,7 +25,7 @@ import styles from "./RefinementFilters.module.scss";
  * filter should filter for organizations or services which have 'Su-10:00' in
  * the open_times array.
  */
-const OpenNowFilter = ({ currentRefinement, refine }) => {
+const OpenNowFilter = ({ currentRefinement, refine }: Props) => {
   const isActive = currentRefinement.length !== 0;
   const toggleRefinement = () => {
     if (isActive) {
@@ -39,17 +43,12 @@ const OpenNowFilter = ({ currentRefinement, refine }) => {
         name="openNow"
         id="openNow"
         className={styles.refinementInput}
-        value={isActive}
+        value="openNow"
         checked={isActive}
         onChange={toggleRefinement}
       />
     </label>
   );
 };
 
-OpenNowFilter.propTypes = {
-  currentRefinement: PropTypes.arrayOf(PropTypes.string).isRequired,
-  refine: PropTypes.func.isRequired,
-};
-
 export default connectRefinementList(OpenNowFilter);

app/components/search/Refinements/OpenNowRefinementList.jsx → app/components/search/Refinements/OpenNowRefinementList.tsx

@@ -1,8 +1,12 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { connectRefinementList } from "react-instantsearch/connectors";
 import { getCurrentDayTime } from "utils/index";
 
+type Props = {
+  currentRefinement: string[];
+  refine: (value: string[]) => void;
+};
+
 /**
  * A custom Algolia InstantSearch RefinementList widget representing the Open
  * Now button.
@@ -20,7 +24,7 @@ import { getCurrentDayTime } from "utils/index";
  * filter should filter for organizations or services which have 'Su-10:00' in
  * the open_times array.
  */
-const OpenNowRefinementList = ({ currentRefinement, refine }) => {
+const OpenNowRefinementList = ({ currentRefinement, refine }: Props) => {
   const isActive = currentRefinement.length !== 0;
   const toggleRefinement = () => {
     if (isActive) {
@@ -40,9 +44,4 @@ const OpenNowRefinementList = ({ currentRefinement, refine }) => {
   );
 };
 
-OpenNowRefinementList.propTypes = {
-  currentRefinement: PropTypes.arrayOf(PropTypes.string).isRequired,
-  refine: PropTypes.func.isRequired,
-};
-
 export default connectRefinementList(OpenNowRefinementList);

app/components/search/Refinements/RefinementListFilter.jsx → app/components/search/Refinements/RefinementListFilter.tsx

@@ -1,9 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { connectRefinementList } from "react-instantsearch/connectors";
 import styles from "./RefinementFilters.module.scss";
 
-const RefinementListFilter = ({ items, refine }) => (
+type Item = {
+  label: string;
+  value: string[];
+  count: number;
+  isRefined: boolean;
+};
+
+type Props = {
+  items: Item[];
+  refine: (value: string[]) => void;
+};
+const RefinementListFilter = ({ items, refine }: Props) => (
   <ul>
     {items.map((item) => (
       <label key={item.label} className={styles.checkBox}>
@@ -21,16 +31,4 @@ const RefinementListFilter = ({ items, refine }) => (
   </ul>
 );
 
-RefinementListFilter.propTypes = {
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.arrayOf(PropTypes.string).isRequired,
-      count: PropTypes.number.isRequired,
-      isRefined: PropTypes.bool.isRequired,
-    })
-  ).isRequired,
-  refine: PropTypes.func.isRequired,
-};
-
 export default connectRefinementList(RefinementListFilter);

app/components/search/SearchMap/SearchEntry.jsx → app/components/search/SearchMap/SearchEntry.tsx

@@ -3,13 +3,19 @@ import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import whiteLabel from "utils/whitelabel";
 import { RelativeOpeningTime } from "components/listing/RelativeOpeningTime";
+import type { SearchHit } from "models/SearchHits";
 import "./SearchEntry.scss";
 
 const {
   appImages: { mohcdSeal },
 } = whiteLabel;
 
-export default class SearchEntry extends Component {
+type Props = {
+  hitNumber: string;
+  hit: SearchHit;
+};
+
+export default class SearchEntry extends Component<Props> {
   renderAddressMetadata() {
     const { hit } = this.props;
     const { addresses: rawAddresses } = hit;

app/components/search/Sidebar/Sidebar.tsx

@@ -23,7 +23,7 @@ const Sidebar = ({
   subcategories = [],
   subcategoryNames = [],
 }: {
-  setSearchRadius: (radius: any) => void;
+  setSearchRadius: (radius: string) => void;
   searchRadius: string;
   isSearchResultsPage: boolean;
   eligibilities?: object[];

app/models/SearchHits.ts

@@ -4,20 +4,28 @@ import { ScheduleDay, parseAlgoliaSchedule } from "./Schedule";
 import { PhoneNumber } from "./Meta";
 import { RecurringSchedule } from "./RecurringSchedule";
 
+interface BaseHit {
+  _geoloc: { lat: number; lng: number };
+  is_mohcd_funded: boolean;
+  resource_id: number;
+}
+
 export interface ServiceHit
-  extends Omit<Service, "schedule" | "recurringSchedule" | "instructions"> {
+  extends Omit<Service, "schedule" | "recurringSchedule" | "instructions">,
+    BaseHit {
   type: "service";
   instructions: string[];
   phones: PhoneNumber[];
   recurringSchedule: RecurringSchedule | null;
-  resource_id: number;
   resource_schedule: ScheduleDay[];
   schedule: ScheduleDay[];
+  service_id: number;
   service_of: string;
 }
 
 export interface OrganizationHit
-  extends Omit<Organization, "schedule" | "recurringSchedule"> {
+  extends Omit<Organization, "schedule" | "recurringSchedule">,
+    BaseHit {
   type: "resource";
   schedule: ScheduleDay[];
   recurringSchedule: RecurringSchedule | null;