javascript source code of MapFilters

import React, { useState, useEffect } from "react";
import {
  FilterDiv,
  ButtonHolder,
  Header,
  Image,
  HeaderHolder,
  ButtonContain,
  Label,
  FilterInput,
  InputFilter,
  ArrowIcon,
  Dot,
  FilterDropdown
} from "../MapStyles";
import { Buttons, TopSecButton } from "../MapStyles";
import { FaLocationArrow } from "react-icons/fa";

/* Function Below */
export default function Filter(props) {
  const locations = props.locations;
  const [typeSelected, setTypeSelected] = useState("All");
  const [matchSelected, setMatchSelected] = useState("All");
  const [points, setPoints] = useState(locations);
  const [completed, setCompleted] = useState("All");
  const [search, setSearch] = useState("");

  // Handles search functionality
  const handleChange = e => {
    setSearch(e.target.value.trim().toLowerCase());
  };

  const neighborss = locations.filter(people => people.type === "neighbors");
  console.log("neighbors here", neighborss);

  const families = locations.filter(people => people.type === "families");
  const matchedNeighborss = locations.filter(
    people => people.type === "neighbors" && people.match === true
  );
  const unmatchedNeighborss = locations.filter(
    people => people.type === "neighbors" && people.match === false
  );
  const matchedFamilies = locations.filter(
    people => people.type === "families" && people.match === true
  );
  const unmatchedFamilies = locations.filter(
    people => people.type === "families" && people.match === false
  );
  const allMatched = locations.filter(people => people.match === true);
  const allUnmatched = locations.filter(people => people.match === false);
  const allCompleted = locations.filter(people => people.application === 2);
  const allUncompleted = locations.filter(people => people.application === 1);
  const uncompletedFamilies = families.filter(
    people => people.application === false
  );
  const completeFamilies = families.filter(
    people => people.application === true
  );
  const completeNeighborss = neighborss.filter(
    people => people.application === 2
  );

  const uncompleteNeighborss = neighborss.filter(
    people => people.application === 1 || 2
  );

  function handleAll() {
    setTypeSelected("All");
    if (matchSelected === "All") {
      if (completed === "All") {
        setPoints(locations);
      }
      if (completed === true) {
        setPoints(allCompleted);
      }
      if (completed === false) {
        setPoints(allUncompleted);
      }
    }
    if (matchSelected === true) {
      setPoints(allMatched);
    }
    if (matchSelected === false) {
      setPoints(allUnmatched);
    }
  }
  function handleFamilies() {
    setTypeSelected("families");
    if (matchSelected === "All") {
      if (completed === false) {
        setPoints(uncompletedFamilies);
      }
      if (completed === true) {
        setPoints(completeFamilies);
      }
      if (completed === "All") {
        setPoints(families);
      }
    }
    if (matchSelected === true) {
      setPoints(matchedFamilies);
    }
    if (matchSelected === false) {
      if (completed === "All") {
        setPoints(unmatchedFamilies);
      }
      if (completed === true) {
        setPoints(completeFamilies);
      }
      if (completed === false) {
        setPoints(uncompletedFamilies);
      }
    }
  }
  function handleNeighbors() {
    setTypeSelected("neighbors");
    if (matchSelected === "All") {
      if (completed === false) {
        setPoints(uncompleteNeighborss);
      }
      if (completed === 2) {
        setPoints(completeNeighborss);
      }
      if (completed === "All") {
        setPoints(neighborss);
      }
    }
    if (matchSelected === true) {
      setPoints(matchedNeighborss);
    }
    if (matchSelected === false) {
      if (completed === "All") {
        setPoints(unmatchedNeighborss);
      }
      if (completed === true) {
        setPoints(completeNeighborss);
      }
      if (completed === false) {
        setPoints(uncompleteNeighborss);
      }
    }
  }
  function handleAllMatch() {
    setMatchSelected("All");
    if (typeSelected === "All") {
      if (completed === "All") {
        setPoints(locations);
      }
      if (completed === true) {
        setPoints(allCompleted);
      }
      if (completed === false) {
        setPoints(allUncompleted);
      }
    }
    if (typeSelected === "neighbors") {
      if (completed === "All") {
        setPoints(neighborss);
      }
      if (completed === true) {
        setPoints(completeNeighborss);
      }
      if (completed === false) {
        setPoints(uncompleteNeighborss);
      }
    }
    if (typeSelected === "families") {
      if (completed === "All") {
        setPoints(families);
      }
      if (completed === true) {
        setPoints(completeFamilies);
      }
      if (completed === false) {
        setPoints(uncompletedFamilies);
      }
    }
  }
  function handleMatched() {
    setMatchSelected(true);
    if (typeSelected === "All") {
      setPoints(allMatched);
    }
    if (typeSelected === "neighbors") {
      setPoints(matchedNeighborss);
    }
    if (typeSelected === "families") {
      setPoints(matchedFamilies);
    }
  }
  function handleUnmatched() {
    setMatchSelected(false);
    if (typeSelected === "All") {
      if (completed === "All") {
        setPoints(allUnmatched);
      }
      if (completed === true) {
        setPoints(allCompleted);
      }
      if (completed === false) {
        setPoints(allUncompleted);
      }
    }
    if (typeSelected === "neighbors") {
      if (completed === "All") {
        setPoints(unmatchedNeighborss);
      }
      if (completed === true) {
        setPoints(unmatchedNeighborss);
      }
      if (completed === false) {
        setPoints(uncompleteNeighborss);
      }
    }
    if (typeSelected === "families") {
      if (completed === "All") {
        setPoints(unmatchedFamilies);
      }
      if (completed === true) {
        setPoints(unmatchedFamilies);
      }
      if (completed === false) {
        setPoints(uncompletedFamilies);
      }
    }
  }
  function handleAllCompleted() {
    setCompleted("All");
    if (typeSelected === "All") {
      if (matchSelected === "All") {
        setPoints(locations);
      }
      if (matchSelected === true) {
        setPoints(allMatched);
      }
      if (matchSelected === false) {
        setPoints(allUnmatched);
      }
    }
    if (typeSelected === "neighbors") {
      if (matchSelected === "All") {
        setPoints(neighborss);
      }
      if (matchSelected === true) {
        setPoints(matchedNeighborss);
      }
      if (matchSelected === false) {
        setPoints(unmatchedNeighborss);
      }
    }
    if (typeSelected === "families") {
      if (matchSelected === "All") {
        setPoints(families);
      }
      if (matchSelected === true) {
        setPoints(matchedFamilies);
      }
      if (matchSelected === false) {
        setPoints(unmatchedFamilies);
      }
    }
  }
  function handleCompleted() {
    setCompleted(true);
    if (matchSelected === "All") {
      if (typeSelected === "All") {
        setPoints(allCompleted);
      }
      if (typeSelected === "neighbors") {
        setPoints(completeNeighborss);
      }
      if (typeSelected === "families") {
        setPoints(completeFamilies);
      }
    }
    if (matchSelected === true) {
      if (typeSelected === "All") {
        setPoints(allMatched);
      }
      if (typeSelected === "neighbors") {
        setPoints(matchedNeighborss);
      }
      if (typeSelected === "families") {
        setPoints(matchedFamilies);
      }
    }
    if (matchSelected === false) {
      if (typeSelected === "All") {
        setPoints(allUnmatched);
      }
      if (typeSelected === "neighbors") {
        setPoints(unmatchedNeighborss);
      }
      if (typeSelected === "families") {
        setPoints(unmatchedFamilies);
      }
    }
  }
  function handleUncompleted() {
    setCompleted(false);
    if (typeSelected === "All") {
      setPoints(allUncompleted);
    }
    if (typeSelected === "neighbors") {
      setPoints(uncompleteNeighborss);
    }
    if (typeSelected === "families") {
      setPoints(uncompletedFamilies);
    }
  }
  useEffect(() => {
    props.filter(points);
  }, [points]);

  useEffect(() => {
    setPoints(
      locations.filter(
        people =>
          people.first_name.toLowerCase().includes(search) ||
          people.last_name.toLowerCase().includes(search) ||
          people.address.toLowerCase().includes(search) ||
          people.email.toLowerCase().includes(search) ||
          people.phone.toLowerCase().includes(search) ||
          people.zip.includes(search)
      )
    );
  }, [search]);

  return (
    <FilterDiv>
      <FilterInput
        onChange={handleChange}
        data-testid="input-filter"
        id="id"
        type="text"
        name="filter"
        placeholder="Search"
      />

      <ButtonHolder>
        <HeaderHolder>
          <Header>Application</Header>
        </HeaderHolder>

        <ButtonContain>
          <TopSecButton
            selected={completed}
            current={true}
            onClick={() => {
              handleCompleted();
            }}
          ></TopSecButton>
          <Label>Approved</Label>
          <Dot src={require("../mapicons/GreenDot.svg")} />
        </ButtonContain>
        <ButtonContain>
          <TopSecButton
            selected={completed}
            current={false}
            onClick={() => {
              handleUncompleted();
            }}
          ></TopSecButton>
          <Label>Completed</Label>
          <Dot src={require("../mapicons/GreenDot.svg")} />
        </ButtonContain>

        <ButtonContain>
          <TopSecButton
            selected={completed}
            current="All"
            onClick={() => {
              handleAllCompleted();
            }}
          ></TopSecButton>
          <Label>All</Label>
        </ButtonContain>
      </ButtonHolder>

      <ButtonHolder>
        <HeaderHolder>
          <Header>Background Check</Header>
        </HeaderHolder>

        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>Completed</Label>
          <Dot src={require("../mapicons/GreenDot.svg")} />
        </ButtonContain>
        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>In Progress</Label>
          <Dot src={require("../mapicons/YellowDot.svg")} />
        </ButtonContain>
        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>Not Started</Label>
          <Dot src={require("../mapicons/RedDot.svg")} />
        </ButtonContain>
        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>All</Label>
        </ButtonContain>
      </ButtonHolder>

      <ButtonHolder>
        <HeaderHolder>
          <Header>Training Module</Header>
        </HeaderHolder>

        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>Completed</Label>
          <Dot src={require("../mapicons/GreenDot.svg")} />
        </ButtonContain>
        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>In Progress</Label>
          <Dot src={require("../mapicons/YellowDot.svg")} />
        </ButtonContain>
        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>Not Started</Label>
          <Dot src={require("../mapicons/RedDot.svg")} />
        </ButtonContain>
        <ButtonContain>
          <TopSecButton></TopSecButton>
          <Label>All</Label>
        </ButtonContain>
      </ButtonHolder>
      <ArrowIcon>
        <FaLocationArrow />
      </ArrowIcon>
      <InputFilter
        onChange={handleChange}
        id="id"
        type="text"
        name="filter"
        placeholder="Search"
      />

      <FilterDropdown id="miles">
        <option value="2miles">within 2 miles</option>
        <option value="5miles">within 5 miles</option>
        <option value="8miles">within 8 miles</option>
        <option value="10miles">within 10 miles</option>
      </FilterDropdown>

      <ButtonHolder>
        <HeaderHolder>
          <Image src={require("../mapicons/Member.svg")} />
          <Header>Member Type</Header>
        </HeaderHolder>
        <ButtonContain>
          <Buttons
            selected={typeSelected}
            current="families"
            onClick={() => {
              handleFamilies();
            }}
          ></Buttons>
          <Label>Families</Label>
        </ButtonContain>
        <ButtonContain>
          <Buttons
            selected={typeSelected}
            current="neighbors"
            onClick={() => {
              handleNeighbors();
            }}
          ></Buttons>
          <Label>Neighbor</Label>
        </ButtonContain>
        <ButtonContain>
          <Buttons
            selected={typeSelected}
            current="All"
            onClick={() => {
              handleAll();
            }}
          ></Buttons>
          <Label>Both</Label>
        </ButtonContain>
      </ButtonHolder>

      <ButtonHolder>
        <HeaderHolder>
          <Header>Match Status</Header>
        </HeaderHolder>
        <ButtonContain>
          <Buttons
            selected={matchSelected}
            current={true}
            onClick={() => {
              handleMatched();
            }}
          ></Buttons>
          <Label>Matched</Label>
        </ButtonContain>
        <ButtonContain>
          <Buttons
            selected={matchSelected}
            current={false}
            onClick={() => {
              handleUnmatched();
            }}
          ></Buttons>
          <Label>Not Matched</Label>
        </ButtonContain>
        <ButtonContain>
          <Buttons
            selected={matchSelected}
            current="All"
            onClick={() => {
              handleAllMatch();
            }}
          ></Buttons>
          <Label>Both</Label>
        </ButtonContain>
      </ButtonHolder>
    </FilterDiv>
  );
}