[#127] refactor: extract logic to utils, reorder filtering for better…

… performance

src/components/Apartment/Apartment.js

@@ -1,54 +1,48 @@
 import ApartmentDetail from "../ApartmentDetail/ApartmentDetail";
 import React, { useState } from "react";
 import SearchBar from "../SearchBar/SearchBar";
-import moment from "moment";
 import { useUserContext } from "../../context/UserContext";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
 import styles from "./Apartment.module.css";
-import { calculateVacancy, sortApartmentsByStatus } from "./utils";
+import {
+  calculateVacancy,
+  filterApartmentsByDate,
+  filterApartmentsByName,
+  sortApartmentsByStatus
+} from "./utils";
 import { useHistory } from "react-router-dom";
-import { useFetch } from "../../hooks/useFetch";
 import { fetchApartments } from "../../api/api";
 import routes from "../../router/RouterPaths";
 import { DateRangeInput } from "../Input/DateRangeInput";
+import { useFetch } from "../../hooks/useFetch";
+import { isEmpty } from "../../utils/utils";
 
 export const Apartment = () => {
   const { data: apartments } = useFetch(fetchApartments);
   const history = useHistory();
   const { state } = useUserContext();
   const userRole = state.role;
-  const [inputValue, setInputValue] = useState("");
+  const [searchInput, setSearchInput] = useState("");
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
 
   const handleNewInput = event => {
-    setInputValue(event.target.value);
+    setSearchInput(event.target.value);
   };
 
   const handleApartmentSearch = () => {
-    const sortedApartments = sortApartmentsByStatus(apartments ?? []);
-    const compareStrings = (str1, str2) =>
-      str1.toLowerCase().includes(str2.toLowerCase());
-
-    const apartmentListByName = sortedApartments?.filter(apartment =>
-      compareStrings(apartment.name, inputValue)
+    const apartmentList = isEmpty(apartments) ? [] : apartments;
+    const filteredApartments = filterApartmentsByName(
+      apartmentList,
+      searchInput
     );
+    const sortedApartments = sortApartmentsByStatus(filteredApartments);
 
     if (startDate && endDate) {
-      return apartmentListByName?.filter(
-        apartment =>
-          moment(new Date(apartment.leases[0].leaseStart)).isSameOrBefore(
-            moment.max(startDate, moment(new Date(0))),
-            "day"
-          ) &&
-          moment(new Date(apartment.leases[0].leaseEnd)).isSameOrAfter(
-            endDate,
-            "day"
-          )
-      );
+      return filterApartmentsByDate(sortedApartments, startDate, endDate);
     }
-    return apartmentListByName;
+    return sortedApartments;
   };
 
   const handleDateChange = ({ startDate, endDate }) => {

src/components/Apartment/utils.js

@@ -1,7 +1,8 @@
 import moment from "moment";
+import { compareStrings } from "../../utils/utils";
 
-export const sortApartmentsByStatus = apartmentList => {
-  const activeApartments = apartmentList.filter(
+export const sortApartmentsByStatus = apartments => {
+  const activeApartments = apartments.filter(
     apartment => apartment.status === "active"
   );
 
@@ -11,7 +12,7 @@ export const sortApartmentsByStatus = apartmentList => {
     return apartmentA - apartmentB;
   });
 
-  const inactiveApartments = apartmentList.filter(
+  const inactiveApartments = apartments.filter(
     apartment => apartment.status === "inactive"
   );
   return activeApartments.concat(inactiveApartments);
@@ -30,3 +31,20 @@ export const calculateVacancy = (apartment, staysForApartment) => {
 
   return apartment.capacity - currentStays;
 };
+
+export const filterApartmentsByName = (apartments, name) =>
+  apartments.filter(apartment => compareStrings(apartment.name, name));
+
+export const filterApartmentsByDate = (apartments, startDate, endDate) => {
+  return apartments?.filter(
+    apartment =>
+      moment(new Date(apartment.leases[0].leaseStart)).isSameOrBefore(
+        moment.max(startDate, moment(new Date(0))),
+        "day"
+      ) &&
+      moment(new Date(apartment.leases[0].leaseEnd)).isSameOrAfter(
+        endDate,
+        "day"
+      )
+  );
+};

src/utils/utils.js

@@ -0,0 +1,6 @@
+export const compareStrings = (str1, str2) =>
+  str1.toLowerCase().includes(str2.toLowerCase());
+
+export const isEmpty = object => {
+  return Object.keys(object).length === 0;
+};