How to use propFilter method in Cypress

1// use-api.js2// This component is implemented as a custom hook, which is called to perform API requests3// related to pet information from the Petfinder API. Configured to be re-usable for any search4// using the props parameter.5import { useState, useEffect } from "react";6import { Client } from "@petfinder/petfinder-js";7import isEqual from "react-fast-compare";8import {9  parseOrganizationData,10  parsePetData,11  prepPetFilter,12  prepOrgFilter,13} from "../shared/utils/parseData";14// Controls how many times a request is retried15let numRequestRetries = 0;16// Our client object, which is required to make API requests to the Petfinder API17let petFinderClient = null;18const usePetfinderApi = (props) => {19  const [data, setData] = useState(null);20  const [requestError, setRequestError] = useState(null);21  const [resultsFilter, setResultsFilter] = useState(null);22  let componentMounted = true;23  // Destruct props to extract values24  let {25    limit,26    sendRequest: propSendRequest,27    searchType,28    displayAmount,29    filter: propFilter,30    onRequestError,31  } = props;32  let parsedValues;33  if (!searchType) {34    searchType = "pets";35  }36  if (propFilter && searchType === "pets") {37    parsedValues = prepPetFilter(propFilter);38    if (!isEqual(parsedValues, resultsFilter)) {39      setResultsFilter(parsedValues);40    }41  } else if (propFilter && searchType === "organizations") {42    parsedValues = prepOrgFilter(propFilter);43    if (!isEqual(parsedValues, resultsFilter)) {44      setResultsFilter(parsedValues);45    }46  }47  useEffect(() => {48    // This async method makes our API request and parses it into an iterable array, which49    // is returned to whatever uses this hook. If props.sendRequest is false, do not50    // make a request.51    const makeRequest = async () => {52      let dbResponseData = null;53      let responseData = null;54      let parsedData;55      let client;56      if (petFinderClient === null) {57        console.log("Requesting API info...");58        dbResponseData = await fetch(59          "https://stalwart-fx-307719-default-rtdb.firebaseio.com/JuDjkI.json",60          { method: "GET" }61        );62        if (!dbResponseData.ok) {63          throw new Error("Could not retrieve Client key/secret");64        }65        await dbResponseData.json().then((data) => {66          let forbiddenChars = ["?", "&", "=", "."];67          for (let char of forbiddenChars) {68            data.sKdnH = data.sKdnH.split(char).join("");69            data.julncD = data.julncD.split(char).join("");70          }71          client = new Client({72            apiKey: data.sKdnH,73            secret: data.julncD,74          });75          console.log("Petfinder client updated");76          petFinderClient = client;77        });78      }79      console.log("Requesting data...");80      if (requestError) {81        console.log("API request failed.... retrying..." + numRequestRetries);82        numRequestRetries++;83      }84      // Decide which type of request to make based on props.searchType85      switch (searchType) {86        case "pets":87          if (propFilter) {88            responseData = await petFinderClient.animal89              .search({ limit, ...resultsFilter })90              .catch((error) => {91                console.log(error);92                if (componentMounted) {93                  setRequestError(error);94                }95              });96          } else {97            responseData = await petFinderClient.animal98              .search({ limit })99              .catch((error) => {100                console.log(error);101                if (componentMounted) {102                  setRequestError(error);103                }104              });105          }106          console.log(responseData);107          // if data is returned from request, parse and store into parsedData108          if (responseData && !requestError) {109            parsedData = parsePetData(responseData);110          }111          break;112        case "organizations":113          if (propFilter) {114            responseData = await petFinderClient.organization115              .search({116                limit,117                ...resultsFilter,118              })119              .catch((error) => {120                console.log(error);121                if (componentMounted) {122                  setRequestError(error);123                }124              });125          } else {126            // Request organization data127            responseData = await petFinderClient.organization128              .search({129                limit,130              })131              .catch((error) => {132                console.log(error);133                if (componentMounted) {134                  setRequestError(error);135                }136              });137          }138          console.log(responseData);139          // if data is returned from request, parse and store into parsedData140          if (responseData && !requestError) {141            parsedData = parseOrganizationData(responseData);142          }143          break;144        default:145          responseData = null;146          break;147      }148      if (componentMounted) {149        // Log our data (for development purposes) and set our data state.150        setData(parsedData.slice(0, displayAmount));151      }152      if (requestError && numRequestRetries > 0) {153        onRequestError(requestError);154        numRequestRetries = 0;155      }156    };157    // If props.sendRequest is true, call makeRequest.158    // otherwise, do nothing.159    if (propSendRequest && numRequestRetries < 1) {160      makeRequest();161    }162    // useEffect cleanup163    return () => {164      setData(null);165      setRequestError(null);166      componentMounted = false;167    };168  }, [169    propSendRequest,170    displayAmount,171    limit,172    searchType,173    propFilter,174    requestError,175    props.filter,176    onRequestError,177    resultsFilter,178  ]);179  return data;180};...

1import {useState, useEffect} from 'react'2import PropTypes from 'prop-types'3import {flattenDeep, union} from 'lodash'4import {byProps, byText} from '@/lib/filters'5import Title from './title'6import TableControl from './table-control'7import Filters from './filters'8const getPropsToFilter = (list, filters) => {9  return Object.keys(filters).map(prop => {10    return {11      title: filters[prop],12      name: prop,13      values: union(flattenDeep(list.map(item => { // FlattenDeep deal with array14        return item[prop]15      })))16    }17  })18}19function TableList({title, subtitle, list, textFilter, filters, cols, checkIsSelected, handleSelect}) {20  const [text, setText] = useState('')21  const [propsFilter, setPropsFilter] = useState()22  const [selectedPropsFilter, setSelectedPropsFilter] = useState({})23  const [filteredList, setFilteredList] = useState([])24  const handlePropfilter = propFilter => {25    const propsFilter = {...selectedPropsFilter}26    const propValues = propsFilter[propFilter.name]27    if (propValues) {28      if (propValues.includes(propFilter.value)) {29        const index = propValues.indexOf(propFilter.value)30        propValues.splice(index, 1)31      } else {32        propValues.push(propFilter.value)33      }34    } else {35      propsFilter[propFilter.name] = [propFilter.value]36    }37    setSelectedPropsFilter(propsFilter)38  }39  useEffect(() => {40    if (filters) {41      const propsFilter = getPropsToFilter(list, filters)42      setPropsFilter(propsFilter)43    }44  }, [list, filters])45  useEffect(() => {46    const filteredList = list.filter(item => {47      return (48        byText(textFilter(item), text) &&49        byProps(item, selectedPropsFilter)50      )51    })52    setFilteredList(filteredList)53  }, [text, selectedPropsFilter, list, textFilter])54  useEffect(() => {55    setText('')56    setSelectedPropsFilter({})57  }, [list])58  return (59    <div>60      <Title title={title} subtitle={subtitle} />61      {(textFilter || filters) && (62        <Filters63          text={text}64          hasTextFilter={Boolean(textFilter)}65          propsToFilter={propsFilter}66          onChange={setText}67          selectedPropsFilter={selectedPropsFilter}68          onFilterProp={handlePropfilter}69        />70      )}71      {filteredList.length === 0 ? (72        <div className='no-result'>Aucun résultat</div>73      ) : (74        <TableControl75          list={filteredList}76          cols={cols}77          checkIsSelected={checkIsSelected}78          handleSelect={handleSelect}79        />80      )}81      <style jsx>{`82        .no-result {83          text-align: center;84          margin: 2em;85        }86      `}</style>87    </div>88  )89}90TableList.propTypes = {91  title: PropTypes.string.isRequired,92  subtitle: PropTypes.string,93  list: PropTypes.array.isRequired,94  textFilter: PropTypes.func,95  filters: PropTypes.object,96  cols: PropTypes.object.isRequired,97  checkIsSelected: PropTypes.func,98  handleSelect: PropTypes.func99}100TableList.defaultProps = {101  subtitle: '',102  textFilter: null,103  filters: null,104  checkIsSelected: null,105  handleSelect: null106}...

1import { getRoles } from "@testing-library/react";2import React, { useEffect, useState } from "react";3import { useDispatch, useSelector } from "react-redux";4import { changeIndustry, getRecruiters } from "../../actions/searchActions";5const IndustriesSearch = (filter) => {6    7    const dispatch = useDispatch();8    const [filterString, setFilterString] = useState('');9    let propFilter = filter.filter;10    if (propFilter) {11        propFilter = propFilter.filter(item => item.speciality_name.toLowerCase().includes(filterString.toLowerCase()));12    }    13    const {14        industries,15        functions,16        levels,17        keyword,18        place_id19    } = useSelector((state) => state.searchRecruiter);20    const handleClick = async (event) => {    21        const change = {22            name: event.target.name,23            value: event.target.checked,24        };25        await dispatch(changeIndustry(change));26        27        await dispatch(getRecruiters({28            industries,29            functions,30            level: levels,31            keyword,32            "place-id": place_id,33        }));34    }35    const handleChange = (event) => {36        setFilterString(event.target.value);       37    }38    return (39        <>40            <p><b>Industries</b></p>41            <input type="search" placeholder="Search industries..." onChange={handleChange}/>42            <ul className="filter-box clean">43                {(propFilter) && propFilter.map((filter) => {44                    return (45                        <li key={filter.id}><input type="checkbox" name={filter.speciality_name} onClick={handleClick}/> {filter.speciality_name}</li>46                    );47                })}48            </ul>49        </>50    );51};...

1import React from 'react'2import PropTypes from 'prop-types'3import CheckboxInput from './checkbox-input'4class PropsFilterInput extends React.Component {5  static propTypes = {6    title: PropTypes.string.isRequired,7    propFilter: PropTypes.shape({8      name: PropTypes.string.isRequired,9      values: PropTypes.array.isRequired10    }).isRequired,11    selectedPropsFilter: PropTypes.object.isRequired,12    toggleProp: PropTypes.func.isRequired13  }14  handleInput = value => {15    const {propFilter: {name}, toggleProp} = this.props16    toggleProp({name, value})17  }18  render() {19    const {title, propFilter, selectedPropsFilter} = this.props20    return (21      <div className='form'>22        <div className='title'>{title}</div>23        <div className='props'>24          {propFilter.values.map(propValue => (25            <CheckboxInput26              key={propValue}27              style={{display: 'flex', alignItems: 'flex-start', margin: '5px 10px 0'}}28              value={propValue}29              isChecked={selectedPropsFilter[propFilter.name] && selectedPropsFilter[propFilter.name].includes(propValue)}30              toggleInput={this.handleInput} />31          ))}32        </div>33        <style jsx>{`34          .form {35            display: flex;36            flex-flow: wrap;37            align-items: center;38            text-align: center;39          }40          .title {41            padding: 1em;42          }43          .props {44            display: flex;45            justify-content: start;46            flex-flow: wrap;47          }48          `}</style>49      </div>50    )51  }52}...

1function Filters({propFilter, propClearAll}) {2    return(3        <div className="filterRootCont">4        <div className="filterCont">5 <button className="filterBtn" onClick={(e)=> {propFilter("0-2")}}>Babies</button>6 <button className="filterBtn" onClick={()=> {propFilter("2-5")}}>Toddlers</button>7 <button className="filterBtn" onClick={()=> {propFilter("5-8")}}>Kids (5-8)</button>8 <button  className="filterBtn"onClick={()=> {propFilter("8-12")}}>Kids (8-12)</button>9 <button className="filterBtn" onClick={()=> {propFilter("12+")}}>Teens (12+)</button>10 <button className="filterBtn" onClick={()=>{propClearAll()}}>Clear All</button>11        </div>12        </div>13    )14}...

1function Buttons({propFilter}) {2 3    return(4    <div>5      <button className="change" onClick={()=> {propFilter("dress")}}>Dress</button>6      <button className="change" onClick={()=> {propFilter("skirt")}}>Skirt</button>7      <button className="change"onClick={()=> {propFilter("pants")}}>Pants</button>8      <button className="change" onClick={()=> {propFilter("shoes")}}>Shoes</button>9      <button className="change" onClick={()=> {propFilter("shirt")}}>Shirts</button>10    </div>11    )12}...

...8    propFilter = $filter('propFilter');9  }));10  it('should return the input prefixed with "propFilter filter:"', function () {11    var text = 'angularjs';12    expect(propFilter(text)).toBe('propFilter filter: ' + text);13  });...

1var searchData=2[3  ['propfilter',['propFilter',['../_bibabook_2_scripts_2jquery-1_810_82_8js.html#a0196d1f08ae60b747901b5a2950f72f1',1,'propFilter(props, specialEasing): jquery-1.10.2.js'],['../packages_2j_query_81_810_82_2_content_2_scripts_2jquery-1_810_82_8js.html#a0196d1f08ae60b747901b5a2950f72f1',1,'propFilter(props, specialEasing): jquery-1.10.2.js']]]...