trampa-frontend/src/pages/HomePage/HomePage.js

import React, { useState } from "react";
import { HomePageContainer } from "./HomePage.styled";
import FilterCard from "../../components/Cards/FilterCard/FilterCard";
import MainLayout from "../../layouts/MainLayout/MainLayout";
import MarketPlace from "../../components/MarketPlace/MarketPlace";
import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
import { useSelector } from "react-redux";
import { OFFERS_SCOPE } from "../../store/actions/offers/offersActionConstants";
import useOffers from "../../hooks/useOffers/useOffers";

const HomePage = () => {
  const isLoadingOffers = useSelector(
    selectIsLoadingByActionType(OFFERS_SCOPE)
  );
  const [filtersOpened, setFiltersOpened] = useState(false);
  const offers = useOffers();
  const toggleFilters = () => {
    setFiltersOpened((prevFiltersOpened) => !prevFiltersOpened);
  };
  return (
    <HomePageContainer>
      <MainLayout
        leftCard={
          <FilterCard
            offers={offers}
            filtersOpened={filtersOpened}
            skeleton={isLoadingOffers}
            toggleFilters={toggleFilters}
          />
        }
        content={
          <MarketPlace
            offers={offers}
            skeleton={isLoadingOffers}
            toggleFilters={toggleFilters}
          />
        }
      />
    </HomePageContainer>
  );
};
export default HomePage;