Chuck's Trucks Inventory

Inventory.js

import { useEffect, useState } from "react";
import db from "../firebase";
import styled from "styled-components";
import Truck from "../components/Truck/Truck";
import SideBar from "../components/SideBar/SideBar";

const Inventory = () => {
  // setting inventory, filters, and default sortBy
  const [loading, setLoading] = useState(true);
  const [inventory, setInventory] = useState([]); // array of trucks
  const [filterBySize, setFilterBySize] = useState([]);
  const [sortBy, setSortBy] = useState("sortPrice"); //default sort by price
  const [filterByCondition, setFilterByCondition] = useState([]);
  const [reverseOrder, setReverseOrder] = useState(false);
  const [list, setList] = useState([]);

  // fetching inv from firebase and setting the inv state
  useEffect(() => {
    db.collection("trucks").onSnapshot((snapshot) => {
      setInventory(snapshot.docs.map((doc) => doc.data()));
      setLoading(false);
    });
  }, []);

  useEffect(() => {
    let inventoryCopy = inventory.filter((truck) => {
      // if filterBySize is populated..
      if (filterBySize.length > 0 && filterByCondition.length === 0) {
        return filterBySize.includes(truck.size);
      }

      // filter inv by condition only
      else if (filterByCondition.length > 0 && filterBySize.length === 0) {
        return filterByCondition.includes(truck.working);
      }

      // filter/sorting inv by size and condition
      else if (filterBySize.length > 0 && filterByCondition.length > 0) {
        return (
          filterByCondition.includes(truck.working) &&
          filterBySize.includes(truck.size)
        );
      }

      return true; // return as is (default)
    });

    // sort
    inventoryCopy = inventoryCopy.sort((a, b) => a[sortBy] - b[sortBy]);

    // reverse if any
    if (reverseOrder) {
      inventoryCopy = inventoryCopy.reverse();
    }

    setList(inventoryCopy);
  }, [reverseOrder, filterBySize, filterByCondition, inventory, sortBy]);

  return (
    <InventoryContainer>
      <LeftContainer>
        <InvWrapper>
          <SideBar
            setFilterBySize={setFilterBySize}
            setSortBy={setSortBy}
            setFilterByCondition={setFilterByCondition}
            filterBySize={filterBySize}
            sortBy={sortBy}
            filterByCondition={filterByCondition}
            setReverseOrder={setReverseOrder}
          />
        </InvWrapper>
      </LeftContainer>
      <RightContainer>
        {/* Display load screen if content isn't fetched yet */}
        {loading && <h1>GETTING TRUCKS!</h1>}
        {/* Display load screen if content isn't fetched yet */}

        {/* displaying inventory */}
        {list.map((truck, index) => (
          <Truck key={index} truck={truck} />
        ))}
        {/* finished displaying inventory */}
      </RightContainer>
    </InventoryContainer>
  );
};

export default Inventory;

const InventoryContainer = styled.div`
  display: flex;
  background-color: whitesmoke;
  height: 100%;
  width: 100%;

  @media (max-width: 675px) {
    flex-direction: column;
  }
`;

// sort by & location card
const LeftContainer = styled.div`
  flex: 0.4;
  flex-direction: column;
`;

// trucks being displayed
const RightContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0.6;
`;

const InvWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  @media (min-width: 675px) {
    position: sticky;
    top: 0;
    align-items: flex-start;
  }

  @media (max-width: 675px) {
    position: relative;
    justify-content: center;
  }
`;