trampa-frontend/src/components/Cards/CreateOfferCard/CreateOffer.js

import React, { useState } from "react";
import PropTypes from "prop-types";
import { useDispatch, useSelector } from "react-redux";
import {
  CreateOfferContainer,
  CreateOfferTitle,
  ModalCreateOfferContainer,
  ModalHeader,
} from "./CreateOffer.styled";
import StepProgress from "../../StepProgress/StepProgress";
import FirstPartCreateOffer from "./FirstPart/FirstPartCreateOffer";
import SecondPartCreateOffer from "./SecondPart/SecondPartCreateOffer";
import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer";
import {
  addOffer,
  fetchOffers,
  fetchOneOffer,
  fetchProfileOffers,
} from "../../../store/actions/offers/offersActions";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import { editOneOffer } from "../../../store/actions/offers/offersActions";
import { useTranslation } from "react-i18next";
import BackdropComponent from "../../MUI/BackdropComponent";
import CloseButton from "./CloseButton/CloseButton";
import BackButton from "./BackButton/BackButton";
import selectedTheme from "../../../themes";
import { useMemo } from "react";
import { useLocation } from "react-router-dom";
import { BASE_PAGE, HOME_PAGE } from "../../../constants/pages";
import { routeMatches } from "../../../util/helpers/routeHelpers";

const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
  const dispatch = useDispatch();
  const location = useLocation();
  const [informations, setInformations] = useState({});
  const [currentStep, setCurrentStep] = useState(1);
  const { t } = useTranslation();
  const userId = useSelector(selectUserId);

  const handleApiResponseSuccess = () => {
    if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
      dispatch(fetchOffers({ queryString: "" }));
    if (location.pathname.includes("profile"))
      dispatch(fetchProfileOffers(userId));
    if (location.pathname.includes("proizvodi"))
      dispatch(fetchOneOffer(offer._id));
  };

  // Go to next step and save typed values
  const handleNext = (values) => {
    setInformations({ ...informations, ...values });
    setCurrentStep((prevState) => prevState + 1);
    console.log({ ...informations, ...values });
  };

  // Get new images from 2nd step
  const newImgs = useMemo(
    () =>
      informations.images &&
      informations.images.filter((img) => img !== undefined),
    [informations.images]
  );

  // Make offer data object with typed values
  const offerData = useMemo(
    () => ({
      name: informations.nameOfProduct,
      description: informations.description,
      location: {
        city: informations.location,
      },
      condition: informations.condition,
      category: {
        name: informations.category,
      },
      subcategory: informations.subcategory,
      images: newImgs,
    }),
    [informations, newImgs]
  );

  // Create (or edit) offer
  const handleSubmitOffer = () => {
    if (editOffer) {
      dispatch(editOneOffer(offer._id, offerData));
    } else {
      dispatch(addOffer({ offerData, handleApiResponseSuccess }));
    }
    closeCreateOfferModal(false);
  };

  const goStepBack = (stepNumber) => {
    setCurrentStep(stepNumber);
    // Here goes any additional logic
  };

  return (
    <>
      <BackdropComponent
        isLoading
        handleClose={closeCreateOfferModal}
        position="fixed"
      />
      <ModalCreateOfferContainer currentstep={currentStep}>
        <CreateOfferContainer currentstep={currentStep}>
          {/* Modal header */}
          <ModalHeader>
            <BackButton
              currentStep={currentStep}
              setCurrentStep={setCurrentStep}
            />
            <CreateOfferTitle component="h1" variant="h5">
              {currentStep === 3
                ? `${t("offer.review")}`
                : `${
                    editOffer
                      ? `${t("offer.changeOffer")}`
                      : `${t("offer.newOffer")}`
                  }`}
            </CreateOfferTitle>
            <CloseButton closeCreateOfferModal={closeCreateOfferModal} />
          </ModalHeader>
          {/* ^^^^^^^^ */}

          <StepProgress
            lineColor={selectedTheme.colors.stepProgressAltColor}
            current={currentStep}
            numberOfSteps={3}
            functions={[() => goStepBack(1), () => goStepBack(2)]}
          />

          {currentStep === 1 && (
            <FirstPartCreateOffer
              handleNext={handleNext}
              offer={offer}
              editOffer={editOffer}
              informations={informations}
            />
          )}

          {currentStep === 2 && (
            <SecondPartCreateOffer
              handleNext={handleNext}
              offer={offer}
              informations={informations}
            />
          )}

          {currentStep === 3 && (
            <ThirdPartCreateOffer
              handleSubmitOffer={handleSubmitOffer}
              informations={informations}
            />
          )}
        </CreateOfferContainer>
      </ModalCreateOfferContainer>
    </>
  );
};

CreateOffer.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
  closeCreateOfferModal: PropTypes.func,
  editOffer: PropTypes.bool,
  offer: PropTypes.object,
};
export default CreateOffer;