Merge branch 'feature/1467' of https://git.dilig.net/selenaaasi/trampa-frontend

src/App.js

@@ -13,6 +13,7 @@ import "react-toastify/dist/ReactToastify.css";
 import { socketInit } from "./socket/socket";
 import { useSelector } from "react-redux";
 import { selectUserId } from "./store/selectors/loginSelectors";
+import Modal from "./components/Modals/Modal";
 
 const App = () => {
   const userId = useSelector(selectUserId);
@@ -29,6 +30,7 @@ const App = () => {
       <StyledEngineProvider injectFirst>
         <Header />
         <GlobalStyle />
+        <Modal />
         <ToastContainer bodyClassName="ToastBody" />
         <AppRoutes />
       </StyledEngineProvider>

src/components/Buttons/IconButton/IconButton.js

@@ -1,15 +1,20 @@
 import React from "react";
 import { IconButtonContainer, IconButtonStyled } from "./IconButton.styled";
 import PropTypes from "prop-types";
+import { useMemo } from "react";
 
 export const IconButton = (props) => {
+  const disabled = useMemo(() => {
+    if (props?.customDisabled) return false;
+    return props?.disabled;
+  })
   return (
     <IconButtonContainer
       style={props.containerStyle}
       className={props.className}
     >
       <IconButtonStyled
-        disabled={props.disabled}
+        disabled={disabled}
         onClick={props.onClick}
         sx={props.style}
         iconcolor={props.iconColor}
@@ -28,4 +33,5 @@ IconButton.propTypes = {
   className: PropTypes.string,
   iconColor: PropTypes.string,
   disabled: PropTypes.bool,
+  customDisabled: PropTypes.bool,
 };

src/components/Cards/CategoryCard/CategoryCard.js

@@ -12,18 +12,19 @@ import CategoryCheckButton from "./CategoryCheckButton/CategoryCheckButton";
 import CategoryEditButton from "./CategoryEditButton/CategoryEditButton";
 import CategoryRemoveButton from "./CategoryRemoveButton/CategoryRemoveButton";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import DeleteCategory from "../../Modals/DeleteCategory/DeleteCategory";
-import EditCategory from "../../Modals/EditCategory/EditCategory";
 import history from "../../../store/utils/history";
 import { replaceInRoute } from "../../../util/helpers/routeHelpers";
 import { ADMIN_SUBCATEGORIES_PAGE } from "../../../constants/pages";
 import { useMemo } from "react";
+import { useDispatch } from "react-redux";
+import {
+  toggleDeleteCategoryModal,
+  toggleEditCategoryModal,
+} from "../../../store/actions/modal/modalActions";
 
 const CategoryCard = (props) => {
   const { t } = useTranslation();
-  const [openedDeleteModal, setOpenedDeleteModal] = useState(false);
-  const [openedEditModal, setOpenedEditModal] = useState(false);
+  const dispatch = useDispatch();
   const navigateToCategory = () => {
     if (!props.hideCheckButton) {
       history.push(
@@ -33,9 +34,34 @@ const CategoryCard = (props) => {
       );
     }
   };
+  const showEditCategoryModal = () => {
+    dispatch(
+      toggleEditCategoryModal({
+        hideImagePicker: props.type !== "categories",
+        category: props.category,
+        categoryId: props.categoryId,
+        subcategory: props.subcategory,
+        type: props.type,
+        method: "edit",
+        firstOutlined: false,
+      })
+    );
+  };
+  const showDeleteCategoryModal = () => {
+    dispatch(
+      toggleDeleteCategoryModal({
+        categoryId: props.categoryId,
+        subcategory: props.subcategory,
+        category: props.category,
+        type: props.type,
+      })
+    );
+  };
   const isDisabledDelete = useMemo(() => {
-    return props?.category?.name === "Ostalo" || props?.category?.city === "Ostalo"
-  }, [props.category])
+    return (
+      props?.category?.name === "Ostalo" || props?.category?.city === "Ostalo"
+    );
+  }, [props.category]);
   return (
     <>
       <CategoryCardContainer className={props.className}>
@@ -62,35 +88,19 @@ const CategoryCard = (props) => {
           </CategoryCardDetailsContainer>
         </CategoryCardLeftContainer>
         <CategoryCardRightContainer>
-          <CategoryRemoveButton disabled={isDisabledDelete} onClick={() => setOpenedDeleteModal(true)} />
-          <CategoryEditButton disabled={isDisabledDelete} onClick={() => setOpenedEditModal(true)} />
+          <CategoryRemoveButton
+            disabled={isDisabledDelete}
+            onClick={showDeleteCategoryModal}
+          />
+          <CategoryEditButton
+            disabled={isDisabledDelete}
+            onClick={showEditCategoryModal}
+          />
           {!props.hideCheckButton && (
             <CategoryCheckButton onClick={navigateToCategory} />
           )}
         </CategoryCardRightContainer>
       </CategoryCardContainer>
-      {openedDeleteModal && (
-        <DeleteCategory
-          categoryId={props.categoryId}
-          setOpenedDeleteModal={setOpenedDeleteModal}
-          subcategory={props.subcategory}
-          category={props.category}
-          type={props.type}
-        />
-      )}
-      {openedEditModal && (
-        <EditCategory
-          hideImagePicker={props.type !== "categories"}
-          setOpenedEditModal={setOpenedEditModal}
-          category={props.category}
-          categoryId={props.categoryId}
-          subcategory={props.subcategory}
-          type={props.type}
-          method="edit"
-          firstOutlined={false}
-          // showSecondButton
-        />
-      )}
     </>
   );
 };

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -34,9 +34,10 @@ import {
   OFFER_ADD_SCOPE,
   OFFER_EDIT_SCOPE,
 } from "../../../store/actions/offers/offersActionConstants";
+import { closeModal } from "../../../store/actions/modal/modalActions";
 // import { routeMatches } from "../../../util/helpers/routeHelpers";
 
-const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
+const CreateOffer = ({ editOffer, offer }) => {
   const dispatch = useDispatch();
   // const location = useLocation();
   const history = useHistory();
@@ -48,6 +49,8 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
     selectIsLoadingByActionType(editOffer ? OFFER_EDIT_SCOPE : OFFER_ADD_SCOPE)
   );
 
+  const closeCreateOfferModal = () => dispatch(closeModal());
+
   const handleApiResponseSuccess = () => {
     // if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
     //   dispatch(fetchOffers({ queryString: "" }));
@@ -61,7 +64,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
         idProfile: userId,
       })
     );
-    closeCreateOfferModal(false);
+    closeCreateOfferModal();
   };
 
   // Go to next step and save typed values

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import {
   CheckButton,
@@ -29,15 +29,15 @@ import { formatDateLocale } from "../../../util/helpers/dateHelpers";
 import { startChat } from "../../../util/helpers/chatHelper";
 import Information from "./Information/Information";
 import { useTranslation } from "react-i18next";
-import DeleteOffer from "../OfferCard/DeleteOffer/DeleteOffer";
-import CreateOffer from "../CreateOfferCard/CreateOffer";
 import OfferDetails from "./OfferDetails/OfferDetails";
 import { useRouteMatch } from "react-router-dom";
 import itemDetailsData from "../../../notFoundData/itemDetailsData";
+import {
+  toggleDeleteOfferModal,
+  toggleEditOfferModal,
+} from "../../../store/actions/modal/modalActions";
 
 const ItemDetailsCard = (props) => {
-  const [showModalRemove, setShowModalRemove] = useState(false);
-  const [showModalEdit, setShowModalEdit] = useState(false);
   // const offer = props.offer;
   const routeMatch = useRouteMatch();
   const chats = useSelector(selectLatestChats);
@@ -74,13 +74,18 @@ const ItemDetailsCard = (props) => {
     startChat(chats, offer?.offer, userId);
   };
 
-  const closeEditModalHandler = () => {
-    setShowModalEdit(false);
+  const showDeleteOfferModalHandler = () => {
+    dispatch(
+      toggleDeleteOfferModal({
+        offer: offer.offer,
+      })
+    );
   };
 
-  const closeRemoveModalHandler = () => {
-    setShowModalRemove(false);
+  const showEditOfferModalHandler = () => {
+    dispatch(toggleEditOfferModal({ editOffer: true, offer: offer.offer }));
   };
+
   return (
     <>
       <ItemDetailsCardContainer
@@ -127,10 +132,10 @@ const ItemDetailsCard = (props) => {
             <DateButtonsContainer>
               {props.isMyOffer && (
                 <ButtonsContainer>
-                  <EditIconContainer onClick={() => setShowModalEdit(true)}>
+                  <EditIconContainer onClick={showEditOfferModalHandler}>
                     <EditIcon />
                   </EditIconContainer>
-                  <RemoveIconContainer onClick={() => setShowModalRemove(true)}>
+                  <RemoveIconContainer onClick={showDeleteOfferModalHandler}>
                     <RemoveIcon />
                   </RemoveIconContainer>
                 </ButtonsContainer>
@@ -150,19 +155,6 @@ const ItemDetailsCard = (props) => {
           </ButtonContainer>
         )}
       </ItemDetailsCardContainer>
-      {showModalRemove && (
-        <DeleteOffer
-          offer={offer.offer}
-          closeModalHandler={closeRemoveModalHandler}
-        />
-      )}
-      {showModalEdit && (
-        <CreateOffer
-          editOffer
-          offer={offer.offer}
-          closeCreateOfferModal={closeEditModalHandler}
-        />
-      )}
     </>
   );
 };

src/components/Cards/OfferCard/DeleteOffer/DeleteOffer.js

@@ -27,6 +27,7 @@ import { selectQueryString } from "../../../../store/selectors/queryStringSelect
 import OfferDescription from "./OfferDescription/OfferDescription";
 import CancelButton from "./CancelButton/CancelButton";
 import SaveButton from "./SaveButton/SaveButton";
+import { closeModal } from "../../../../store/actions/modal/modalActions";
 
 const DeleteOffer = (props) => {
   const dispatch = useDispatch();
@@ -37,7 +38,7 @@ const DeleteOffer = (props) => {
   const { isMobile } = useIsMobile();
   const offerId = props.offer._id;
   const closeDeleteModalHandler = () => {
-    props.closeModalHandler();
+    dispatch(closeModal());
   };
 
   const handleApiResponseSuccess = () => {
@@ -48,7 +49,7 @@ const DeleteOffer = (props) => {
   const removeOfferHandler = () => {
     if (props.pin) dispatch(pinOffer({ offerId: props.offer?._id, handleApiResponseSuccess }));
     else dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
-    props.closeModalHandler();
+    closeDeleteModalHandler();
     if (history.location.pathname.includes("proizvodi")) {
       history.goBack();
     }
@@ -97,7 +98,7 @@ const DeleteOffer = (props) => {
 };
 
 DeleteOffer.propTypes = {
-  offer: PropTypes.node,
+  offer: PropTypes.any,
   closeModalHandler: PropTypes.func,
   pin: PropTypes.bool,
 };

src/components/Cards/OfferCard/OfferCard.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import {
   DetailIcon,
@@ -33,22 +33,22 @@ import {
   PinOutlinedIcon,
   ButtonsContainer,
 } from "./OfferCard.styled";
-import DeleteOffer from "./DeleteOffer/DeleteOffer";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
 import { useHistory } from "react-router-dom";
-import CreateOffer from "../CreateOfferCard/CreateOffer";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
 import OfferDescription from "./OfferDescription/OfferDescription";
 import CheckButton from "./CheckButton/CheckButton";
 import { formatDateLocale } from "../../../util/helpers/dateHelpers";
+import {
+  toggleDeleteOfferModal,
+  toggleEditOfferModal,
+} from "../../../store/actions/modal/modalActions";
 
 const OfferCard = (props) => {
-  const [deleteOfferModal, setDeleteOfferModal] = useState(false);
-  const [editOfferModal, setEditOfferModal] = useState(false);
-  const [pinOfferModal, setPinOfferModal] = useState(false);
+  const dispatch = useDispatch();
   const history = useHistory();
   const userId = useSelector(selectUserId);
   const { isMobile } = useIsMobile();
@@ -56,7 +56,12 @@ const OfferCard = (props) => {
 
   const pinOffer = (event) => {
     event.stopPropagation();
-    setPinOfferModal(true);
+    dispatch(
+      toggleDeleteOfferModal({
+        offer: props.offer,
+        pin: true,
+      })
+    );
   };
   const routeToItem = (itemId) => {
     if (!props.disabledCheckButton) {
@@ -68,6 +73,7 @@ const OfferCard = (props) => {
     props.messageUser(props.offer);
   };
   const makeReview = (event) => {
+    console.log("EVEEEEEEENT: ", event);
     event.stopPropagation();
     if (!props.disabledReviews) {
       props.makeReview(props.offer);
@@ -75,22 +81,20 @@ const OfferCard = (props) => {
   };
   const openEditOfferModal = (event) => {
     event.stopPropagation();
-    setEditOfferModal(true);
+    dispatch(
+      toggleEditOfferModal({
+        editOffer: true,
+        offer: props.offer,
+      })
+    );
   };
   const openRemoveModal = (event) => {
     event.stopPropagation();
-    setDeleteOfferModal(true);
-  };
-
-  const closeModalHandler = () => {
-    setDeleteOfferModal(false);
-  };
-  const closePinOfferModal = () => {
-    setPinOfferModal(false);
-  };
-
-  const closeCreateOfferModal = () => {
-    setEditOfferModal(false);
+    dispatch(
+      toggleDeleteOfferModal({
+        offer: props.offer,
+      })
+    );
   };
 
   const showMessageIcon = useMemo(() => {
@@ -100,12 +104,6 @@ const OfferCard = (props) => {
     return true;
   }, [userId, props.offer]);
 
-  if (deleteOfferModal || editOfferModal) {
-    document.body.style.overflow = "hidden";
-  } else {
-    document.body.style.overflow = "auto";
-  }
-
   return (
     <React.Fragment>
       <OfferCardContainer
@@ -122,7 +120,15 @@ const OfferCard = (props) => {
         <OfferTitleAboveImage
           vertical={props.vertical}
           noOfButtons={
-            props.isAdmin ? 3 : props.isMyOffer ? (props?.offer?.pinned ? 3 : 2) : (props?.offer?.pinned ? 2 : 1)
+            props.isAdmin
+              ? 3
+              : props.isMyOffer
+              ? props?.offer?.pinned
+                ? 3
+                : 2
+              : props?.offer?.pinned
+              ? 2
+              : 1
           }
           onClick={() => routeToItem(props?.offer?._id)}
         >
@@ -220,6 +226,7 @@ const OfferCard = (props) => {
               </>
             ) : props.aboveChat ? (
               <LikeIconContainer
+                customDisabled={props.disabledReviews}
                 disabled={props.disabledReviews}
                 onClick={makeReview}
               >
@@ -246,26 +253,6 @@ const OfferCard = (props) => {
           </ButtonsContainer>
         </OfferFlexContainer>
       </OfferCardContainer>
-      {deleteOfferModal && (
-        <DeleteOffer
-          offer={props.offer}
-          closeModalHandler={closeModalHandler}
-        />
-      )}
-      {pinOfferModal && (
-        <DeleteOffer
-          pin
-          offer={props.offer}
-          closeModalHandler={closePinOfferModal}
-        />
-      )}
-      {editOfferModal && (
-        <CreateOffer
-          editOffer
-          closeCreateOfferModal={closeCreateOfferModal}
-          offer={props.offer}
-        />
-      )}
     </React.Fragment>
   );
 };

src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import {
   BlockIcon,
@@ -19,44 +19,67 @@ import {
 } from "./BigProfileCard.styled";
 import ProfileMainInfo from "../ProfileMainInfo/ProfileMainInfo";
 import ProfileContact from "../ProfileContact/ProfileContact";
-import EditProfile from "../EditProfile/EditProfile";
 import selectedTheme from "../../../../themes";
 import { useTranslation } from "react-i18next";
 import history from "../../../../store/utils/history";
 import { replaceInRoute } from "../../../../util/helpers/routeHelpers";
 import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages";
-import DeleteCategory from "../../../Modals/DeleteCategory/DeleteCategory";
 import UserLabeledCard from "../../LabeledCard/User/UserLabeledCard";
-import { USERS_BLOCK_TYPE, USERS_DELETE_TYPE, USERS_UNBLOCK_TYPE } from "../../../../constants/adminTypeConstants";
+import {
+  USERS_BLOCK_TYPE,
+  USERS_DELETE_TYPE,
+  USERS_UNBLOCK_TYPE,
+} from "../../../../constants/adminTypeConstants";
+import { useDispatch } from "react-redux";
+import {
+  toggleDeleteCategoryModal,
+  toggleEditProfileModal,
+} from "../../../../store/actions/modal/modalActions";
 
 const BigProfileCard = (props) => {
   const { t } = useTranslation();
-  const [editProfileModal, setEditProfileModal] = useState(false);
-  const [deleteOrEditModal, setDeleteOrEditModal] = useState({
-    show: false,
-    type: "",
-  });
-  const closeModalHandler = () => {
-    if (editProfileModal) setEditProfileModal(false);
-    else setDeleteOrEditModal({ show: false, type: "" });
-  };
+  const dispatch = useDispatch();
   const removeUser = () => {
-    setDeleteOrEditModal({
-      show: true,
-      type: USERS_DELETE_TYPE,
-    });
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: props.profile._id,
+        type: USERS_DELETE_TYPE,
+        customLabeledCard: <UserLabeledCard user={props.profile} />,
+        customLabeledCardHeight: "90px",
+      })
+    );
   };
   const blockUser = () => {
-    setDeleteOrEditModal({
-      show: true,
-      type: USERS_BLOCK_TYPE,
-    });
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: props.profile._id,
+        type: USERS_BLOCK_TYPE,
+        customLabeledCard: <UserLabeledCard user={props.profile} />,
+        customLabeledCardHeight: "90px",
+        customLabeledCardIcon: <BlockLabelIcon />,
+      })
+    );
   };
   const unblockUser = () => {
-    setDeleteOrEditModal({
-      show: true,
-      type: USERS_UNBLOCK_TYPE,
-    });
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: props.profile._id,
+        type: USERS_UNBLOCK_TYPE,
+        customLabeledCard: <UserLabeledCard user={props.profile} />,
+        customLabeledCardHeight: "90px",
+        customLabeledCardIcon: <UnblockLabelIcon />,
+      })
+    );
+  };
+  const editUser = () => {
+    dispatch(
+      toggleEditProfileModal({
+        profile: props.profile,
+        reFetchProfile: () => {},
+        isAdmin: true,
+        userId: props.profile._id,
+      })
+    );
   };
   const goToUser = () => {
     history.push(
@@ -66,70 +89,43 @@ const BigProfileCard = (props) => {
     );
   };
   return (
-    <>
-      <ProfileCardContainer halfwidth={props.halfwidth}>
-        <ProfileCardWrapper variant="outlined">
-          <ButtonsContainer>
-            <EditButton onClick={() => setEditProfileModal(true)}>
-              <EditIcon />
-            </EditButton>
-            <RemoveIconContainer onClick={removeUser}>
-              <RemoveIcon />
-            </RemoveIconContainer>
-            {props.profile?._blocked ? (
-              <UnblockIconContainer onClick={unblockUser}>
-                <UnblockIcon />
-              </UnblockIconContainer>
-            ) : (
-              <BlockIconContainer onClick={blockUser}>
-                <BlockIcon />
-              </BlockIconContainer>
-            )}
-          </ButtonsContainer>
-          <ProfileInfoContainer>
-            {/* Profile Main Info  */}
-            <ProfileMainInfo profile={props.profile} isAdmin bigProfileCard />
-            {/* Profile Contact */}
-            <ProfileContact profile={props.profile} isAdmin />
-          </ProfileInfoContainer>
-          <CheckButton
-            halfwidth={props.halfwidth}
-            variant={"outlined"}
-            buttoncolor={selectedTheme.colors.primaryPurple}
-            textcolor={selectedTheme.colors.primaryPurple}
-            style={{ fontWeight: "600" }}
-            onClick={goToUser}
-          >
-            {t("admin.users.checkProfile")}
-          </CheckButton>
-        </ProfileCardWrapper>
-      </ProfileCardContainer>
-      {editProfileModal && (
-        <EditProfile
-          profile={props.profile}
-          closeModalHandler={closeModalHandler}
-          reFetchProfile={() => {}}
-          isAdmin
-          userId={props.profile._id}
-        />
-      )}
-      {deleteOrEditModal.show && (
-        <DeleteCategory
-          customId={props.profile._id}
-          setOpenedDeleteModal={closeModalHandler}
-          type={deleteOrEditModal.type}
-          customLabeledCard={<UserLabeledCard user={props.profile} />}
-          customLabeledCardHeight="90px"
-          customLabeledCardIcon={
-            deleteOrEditModal.type === "blockUser" ? (
-              <BlockLabelIcon />
-            ) : (
-              <UnblockLabelIcon />
-            )
-          }
-        />
-      )}
-    </>
+    <ProfileCardContainer halfwidth={props.halfwidth}>
+      <ProfileCardWrapper variant="outlined">
+        <ButtonsContainer>
+          <EditButton onClick={editUser}>
+            <EditIcon />
+          </EditButton>
+          <RemoveIconContainer onClick={removeUser}>
+            <RemoveIcon />
+          </RemoveIconContainer>
+          {props.profile?._blocked ? (
+            <UnblockIconContainer onClick={unblockUser}>
+              <UnblockIcon />
+            </UnblockIconContainer>
+          ) : (
+            <BlockIconContainer onClick={blockUser}>
+              <BlockIcon />
+            </BlockIconContainer>
+          )}
+        </ButtonsContainer>
+        <ProfileInfoContainer>
+          {/* Profile Main Info  */}
+          <ProfileMainInfo profile={props.profile} isAdmin bigProfileCard />
+          {/* Profile Contact */}
+          <ProfileContact profile={props.profile} isAdmin />
+        </ProfileInfoContainer>
+        <CheckButton
+          halfwidth={props.halfwidth}
+          variant={"outlined"}
+          buttoncolor={selectedTheme.colors.primaryPurple}
+          textcolor={selectedTheme.colors.primaryPurple}
+          style={{ fontWeight: "600" }}
+          onClick={goToUser}
+        >
+          {t("admin.users.checkProfile")}
+        </CheckButton>
+      </ProfileCardWrapper>
+    </ProfileCardContainer>
   );
 };
 

src/components/Cards/ProfileCard/EditProfile/EditProfile.js

@@ -49,6 +49,7 @@ import {
 } from "../../../../constants/pages";
 import { selectIsLoadingByActionType } from "../../../../store/selectors/loadingSelectors";
 import { PROFILE_EDIT_ADMIN_SCOPE, PROFILE_EDIT_SCOPE } from "../../../../store/actions/profile/profileActionConstants";
+import { closeModal } from "../../../../store/actions/modal/modalActions";
 
 const EditProfile = (props) => {
   const [profileImage, setProfileImage] = useState(props.profile.image);
@@ -74,7 +75,7 @@ const EditProfile = (props) => {
     if (routeMatches(ADMIN_USERS_PAGE) || routeMatches(ADMIN_HOME_PAGE))
       dispatch(fetchAllProfilesAsAdmin());
     props.reFetchProfile();
-    props.closeModalHandler();
+    closeEditModalHandler();
   };
 
   const handleSubmit = (values) => {
@@ -114,7 +115,7 @@ const EditProfile = (props) => {
   });
 
   const closeEditModalHandler = () => {
-    props.closeModalHandler();
+    dispatch(closeModal());
   };
 
   const showDetailsHandler = () => {

src/components/Cards/ProfileCard/ProfileCard.js

@@ -27,9 +27,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect } from "react";
 import { selectProfile } from "../../../store/selectors/profileSelectors";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
-import { useState } from "react";
 import { fetchProfileOffers } from "../../../store/actions/offers/offersActions";
-import EditProfile from "./EditProfile/EditProfile";
 import ProfileMainInfo from "./ProfileMainInfo/ProfileMainInfo";
 import ProfileContact from "./ProfileContact/ProfileContact";
 import ProfileStats from "./ProfileStats/ProfileStats";
@@ -39,19 +37,22 @@ import { PROFILE_SCOPE } from "../../../store/actions/profile/profileActionConst
 import SkeletonProfileCard from "./SkeletonProfileCard/SkeletonProfileCard";
 import { useMemo } from "react";
 import companyData from "../../../notFoundData/companyData";
-import DeleteCategory from "../../Modals/DeleteCategory/DeleteCategory";
 import UserLabeledCard from "../LabeledCard/User/UserLabeledCard";
 import history from "../../../store/utils/history";
 import { HOME_PAGE } from "../../../constants/pages";
 import useIsMobile from "../../../hooks/useIsMobile";
 import BlockedProfile from "./BlockedProfile/BlockedProfile";
+import {
+  toggleDeleteCategoryModal,
+  toggleEditProfileModal,
+} from "../../../store/actions/modal/modalActions";
+import {
+  USERS_BLOCK_TYPE,
+  USERS_DELETE_TYPE,
+  USERS_UNBLOCK_TYPE,
+} from "../../../constants/adminTypeConstants";
 
 const ProfileCard = (props) => {
-  const [editProfileModal, setEditProfileModal] = useState(false);
-  const [deleteOrEditModal, setDeleteOrEditModal] = useState({
-    show: false,
-    type: "",
-  });
   const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE));
   const routeMatch = useRouteMatch();
   const dispatch = useDispatch();
@@ -104,39 +105,49 @@ const ProfileCard = (props) => {
         100
     );
   }
-
-  const closeModalHandler = () => {
-    if (editProfileModal) setEditProfileModal(false);
-    else setDeleteOrEditModal({ show: false, type: "" });
-  };
   const removeUser = () => {
-    setDeleteOrEditModal({
-      show: true,
-      type: "deleteUser",
-    });
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: profile?._id,
+        type: USERS_DELETE_TYPE,
+        customLabeledCard: <UserLabeledCard user={profile} />,
+        customLabeledCardHeight: "90px",
+      })
+    );
   };
   const blockUser = () => {
-    setDeleteOrEditModal({
-      show: true,
-      type: "blockUser",
-    });
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: profile?._id,
+        type: USERS_BLOCK_TYPE,
+        customLabeledCard: <UserLabeledCard user={profile} />,
+        customLabeledCardHeight: "90px",
+        customLabeledCardIcon: <BlockLabelIcon />,
+      })
+    );
   };
   const unblockUser = () => {
-    setDeleteOrEditModal({
-      show: true,
-      type: "unblockUser",
-    });
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: profile?._id,
+        type: USERS_UNBLOCK_TYPE,
+        customLabeledCard: <UserLabeledCard user={profile} />,
+        customLabeledCardHeight: "90px",
+      })
+    );
   };
   const handleEditProfile = () => {
-    if (!profile?._blocked) setEditProfileModal(true);
+    if (!profile?._blocked) {
+      dispatch(
+        toggleEditProfileModal({
+          profile: profile,
+          isAdmin: props.isAdmin,
+          reFetchProfile: reFetchProfile,
+        })
+      );
+    }
   };
 
-  if (editProfileModal) {
-    document.body.style.overflow = "hidden";
-  } else {
-    document.body.style.overflow = "auto";
-  }
-
   return (
     <>
       {isLoading ? (
@@ -218,26 +229,6 @@ const ProfileCard = (props) => {
           </ProfileCardContainer>
         </>
       )}
-      {editProfileModal && (
-        <EditProfile
-          profile={profile}
-          isAdmin={props.isAdmin}
-          closeModalHandler={closeModalHandler}
-          reFetchProfile={reFetchProfile}
-        />
-      )}
-      {deleteOrEditModal.show && (
-        <DeleteCategory
-          customId={profile?._id}
-          setOpenedDeleteModal={closeModalHandler}
-          type={deleteOrEditModal.type}
-          customLabeledCard={<UserLabeledCard user={profile} />}
-          customLabeledCardHeight="90px"
-          customLabeledCardIcon={
-            deleteOrEditModal.type === "blockUser" && <BlockLabelIcon />
-          }
-        />
-      )}
     </>
   );
 };

src/components/Cards/UserReviewsCard/UserReviewsCard.js

@@ -1,14 +1,12 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { reviewEnum } from "../../../enums/reviewEnum";
 import UserReviewsSingleCard from "./UserReviewsSingleCard/UserReviewsSingleCard";
-import DeleteReview from "../../Modals/DeleteReview/DeleteReview";
+import { useDispatch } from "react-redux";
+import { toggleDeleteReviewModal } from "../../../store/actions/modal/modalActions";
 
 const UserReviewsCard = (props) => {
-  const [removeModalOpened, setRemoveModalOpened] = useState();
-  const handleRemove = () => {
-    setRemoveModalOpened(true);
-  };
+  const dispatch = useDispatch();
   const review = useMemo(() => {
     if (props.givingReview) {
       return {
@@ -54,23 +52,22 @@ const UserReviewsCard = (props) => {
         props?.review?.reviewAdditionalData?.userWhoReceived?.company?.name,
     };
   }, [props.review]);
+  const handleRemove = () => {
+    dispatch(
+      toggleDeleteReviewModal({
+        review: review,
+      })
+    );
+  };
   return (
-    <>
-      <UserReviewsSingleCard
-        review={review}
-        showRemoveIcon={props.showRemoveIcon}
-        handleRemove={handleRemove}
-        hasGivenReview={props.hasGivenReview}
-        rightReviews={props.rightReviews}
-        isAdmin={props.isAdmin}
-      />
-      {removeModalOpened && (
-        <DeleteReview
-          review={review}
-          setOpenedDeleteModal={setRemoveModalOpened}
-        />
-      )}
-    </>
+    <UserReviewsSingleCard
+      review={review}
+      showRemoveIcon={props.showRemoveIcon}
+      handleRemove={handleRemove}
+      hasGivenReview={props.hasGivenReview}
+      rightReviews={props.rightReviews}
+      isAdmin={props.isAdmin}
+    />
   );
 };
 

src/components/CreateReview/CreateReview.js

@@ -9,11 +9,14 @@ import {
 } from "./CreateReview.styled";
 import FirstStepCreateReview from "./FirstStep/FirstStepCreateReview";
 import SecondStepCreateReview from "./SecondStep/SecondStepCreateReview";
-import ThirdStepCreateReview from "./ThirdStep/ThirdStepCreateReview"; 
+import ThirdStepCreateReview from "./ThirdStep/ThirdStepCreateReview";
 import { useDispatch, useSelector } from "react-redux";
 import { giveReview } from "../../store/actions/review/reviewActions";
 import { selectUserId } from "../../store/selectors/loginSelectors";
 import { reviewEnum } from "../../enums/reviewEnum";
+import { fetchExchange } from "../../store/actions/exchange/exchangeActions";
+import { closeModal } from "../../store/actions/modal/modalActions";
+import BackdropComponent from "../MUI/BackdropComponent";
 
 const CreateReview = (props) => {
   const offer = props.offer;
@@ -21,11 +24,11 @@ const CreateReview = (props) => {
   const [currentStep, setCurrentStep] = useState(1);
   const dispatch = useDispatch();
   const userId = useSelector(selectUserId);
-  const closeModal = () => {
-    props.closeModal();
+  const closeModalHandler = () => {
+    dispatch(closeModal());
   };
   const handleApiResponseSuccess = () => {
-    props.handleGiveReviewSuccess();
+    dispatch(fetchExchange(props.exchange._id));
   };
   const submitForm = () => {
     let communication = "yes";
@@ -57,7 +60,7 @@ const CreateReview = (props) => {
       };
     });
     if (currentStep === 3) {
-      closeModal();
+      closeModalHandler();
     } else {
       if (currentStep === 2) {
         submitForm();
@@ -66,36 +69,43 @@ const CreateReview = (props) => {
     }
   };
   const goToPrevStep = () => {
-    setCurrentStep(prevCurrentStep => prevCurrentStep - 1);
+    setCurrentStep((prevCurrentStep) => prevCurrentStep - 1);
   };
   return (
-    <CreateReviewContainer currentStep={currentStep}>
-      <CloseButton onClick={closeModal}>
-        <CloseIcon />
-      </CloseButton>
-      {currentStep === 2 && (
-        <BackIcon onClick={goToPrevStep}>
-          <ArrowBackIcon />
-        </BackIcon>
-      )}
-      {currentStep === 1 && (
-        <FirstStepCreateReview
-          offer={offer}
-          interlocutor={props.interlocutor}
-          informations={informations}
-          goToNextStep={goToNextStep}
-        />
-      )}
-      {currentStep === 2 && (
-        <SecondStepCreateReview
-          review={informations}
-          offer={offer}
-          interlocutor={props.interlocutor}
-          goToNextStep={goToNextStep}
-        />
-      )}
-      {currentStep === 3 && <ThirdStepCreateReview />}
-    </CreateReviewContainer>
+    <>
+      <BackdropComponent
+        isLoading
+        handleClose={closeModalHandler}
+        position="fixed"
+      />
+      <CreateReviewContainer currentStep={currentStep}>
+        <CloseButton onClick={closeModalHandler}>
+          <CloseIcon />
+        </CloseButton>
+        {currentStep === 2 && (
+          <BackIcon onClick={goToPrevStep}>
+            <ArrowBackIcon />
+          </BackIcon>
+        )}
+        {currentStep === 1 && (
+          <FirstStepCreateReview
+            offer={offer}
+            interlocutor={props.interlocutor}
+            informations={informations}
+            goToNextStep={goToNextStep}
+          />
+        )}
+        {currentStep === 2 && (
+          <SecondStepCreateReview
+            review={informations}
+            offer={offer}
+            interlocutor={props.interlocutor}
+            goToNextStep={goToNextStep}
+          />
+        )}
+        {currentStep === 3 && <ThirdStepCreateReview />}
+      </CreateReviewContainer>
+    </>
   );
 };
 
@@ -103,7 +113,6 @@ CreateReview.propTypes = {
   children: PropTypes.node,
   offer: PropTypes.any,
   interlocutor: PropTypes.any,
-  closeModal: PropTypes.func,
   exchange: PropTypes.any,
   handleGiveReviewSuccess: PropTypes.func,
 };

src/components/DirectChat/DirectChatHeader/DirectChatHeader.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import { DirectChatHeaderContainer } from "./DirectChatHeader.styled";
 import OfferCard from "../../Cards/OfferCard/OfferCard";
@@ -7,16 +7,14 @@ import { selectExchange } from "../../../store/selectors/exchangeSelector";
 import { useDispatch } from "react-redux";
 import { fetchExchange } from "../../../store/actions/exchange/exchangeActions";
 import { selectSelectedChat } from "../../../store/selectors/chatSelectors";
-import BackdropComponent from "../../MUI/BackdropComponent";
-import CreateReview from "../../CreateReview/CreateReview";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
+import { toggleCreateReviewModal } from "../../../store/actions/modal/modalActions";
 
 const DirectChatHeader = (props) => {
   const exchange = useSelector(selectExchange);
   const userId = useSelector(selectUserId);
   const dispatch = useDispatch();
   const chat = useSelector(selectSelectedChat);
-  const [showReviewModal, setShowReviewModal] = useState(false);
 
   useEffect(() => {
     if (chat?.chat?.exchangeId) refetchExchange();
@@ -31,45 +29,31 @@ const DirectChatHeader = (props) => {
     return false;
   }, [exchange, userId]);
 
-  useEffect(() => {
-    if (showReviewModal) document.body.style.overflow = "hidden";
-    else document.body.style.overflow = "auto";
-  }, [showReviewModal]);
-
-  const makeReview = () => {
-    setShowReviewModal(true);
-  };
-  const handleGiveReviewSuccess = () => {
-    refetchExchange();
+  const showReviewModal = (event) => {
+    event.stopPropagation();
+    dispatch(
+      toggleCreateReviewModal({
+        offer: props.offer,
+        interlocutor: props.interlocutor,
+        exchange: exchange,
+      })
+    );
   };
+
   const refetchExchange = () => {
     dispatch(fetchExchange(chat.chat.exchangeId));
   };
   return (
     <DirectChatHeaderContainer>
-      {showReviewModal && (
-        <>
-          <BackdropComponent
-            isLoading
-            handleClose={() => setShowReviewModal(false)}
-            position="fixed"
-          />
-          <CreateReview
-            offer={props.offer}
-            interlocutor={props.interlocutor}
-            closeModal={() => setShowReviewModal()}
-            handleGiveReviewSuccess={handleGiveReviewSuccess}
-            exchange={exchange}
-          />
-        </>
-      )}
       <OfferCard
         offer={props.offer}
         aboveChat
         disabledReviews={props.interlocutor?._blocked || isDisabledReviews}
-        makeReview={makeReview}
+        makeReview={showReviewModal}
         dontShowViews
-        disabledCheckButton={props.interlocutor?._blocked || props?.offer?._deleted}
+        disabledCheckButton={
+          props.interlocutor?._blocked || props?.offer?._deleted
+        }
       />
     </DirectChatHeaderContainer>
   );

src/components/Header/Drawer/Buttons/AddOfferButton/AddOfferButton.js

@@ -3,12 +3,15 @@ import PropTypes from "prop-types";
 import { AddOfferButtonContainer } from "./AddOfferButton.styled";
 import { useTranslation } from "react-i18next";
 import selectedTheme from "../../../../../themes";
+import { useDispatch } from "react-redux";
+import { toggleCreateOfferModal } from "../../../../../store/actions/modal/modalActions";
 
 const AddOfferButton = (props) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
   const handleClick = () => {
     props.toggleDrawer();
-    props.addOffer();
+    dispatch(toggleCreateOfferModal({}))
   };
   return (
     <AddOfferButtonContainer

src/components/Header/Drawer/Drawer.js

@@ -72,7 +72,6 @@ export const Drawer = (props) => {
             ) : (
               <AddOfferButton
                 toggleDrawer={props.toggleDrawer}
-                addOffer={props.addOffer}
               />
             )}
             <LogoutButton toggleDrawer={props.toggleDrawer} />
@@ -86,5 +85,4 @@ export const Drawer = (props) => {
 Drawer.propTypes = {
   children: PropTypes.node,
   toggleDrawer: PropTypes.func,
-  addOffer: PropTypes.func,
 };

src/components/Header/DrawerContainer/DrawerContainer.js

@@ -27,7 +27,6 @@ const DrawerContainer = forwardRef((props, ref) => {
       content={
         <HeaderDrawer
           toggleDrawer={handleToggleDrawer}
-          addOffer={() => props.showCreateOfferModal(true)}
         />
       }
     />

src/components/Header/Header.js

@@ -21,7 +21,6 @@ import {
   HOME_PAGE,
 } from "../../constants/pages";
 import { fetchMineProfile } from "../../store/actions/profile/profileActions";
-import CreateOffer from "../Cards/CreateOfferCard/CreateOffer";
 import useSearch from "../../hooks/useOffers/useSearch";
 import {
   isAdminRoute,
@@ -39,9 +38,9 @@ import UserButton from "./UserButton/UserButton";
 import LoginButton from "./LoginButton/LoginButton";
 import RegisterButton from "./RegisterButton/RegisterButton";
 import useIsMobile from "../../hooks/useIsMobile";
+import { toggleCreateOfferModal } from "../../store/actions/modal/modalActions";
 
 const Header = () => {
-  const [showCreateOfferModal, setShowCreateOfferModal] = useState(false);
   const theme = useTheme();
   const searchRef = useRef(null);
   const matches = useMediaQuery(theme.breakpoints.down("md"));
@@ -75,12 +74,6 @@ const Header = () => {
     }
   }, [search.searchString, searchRef.current]);
 
-  // Removes scroll when modal is open
-  if (showCreateOfferModal) {
-    document.body.style.overflow = "hidden";
-  } else {
-    document.body.style.overflow = "auto";
-  }
   // Handling search when user is on marketplace and when he is not
   const handleSearch = (value) => {
     if (isAdminRoute()) {
@@ -118,10 +111,7 @@ const Header = () => {
   };
 
   const handleAddOfferClick = () => {
-    setShowCreateOfferModal(true);
-  };
-  const closeCreateOfferModal = () => {
-    setShowCreateOfferModal(false);
+    dispatch(toggleCreateOfferModal());
   };
 
   if (!shouldShow) {
@@ -190,13 +180,7 @@ const Header = () => {
         </Toolbar>
       </AppBar>
 
-      <DrawerContainer
-        ref={drawerRef}
-        showCreateOfferModal={setShowCreateOfferModal}
-      />
-      {showCreateOfferModal && (
-        <CreateOffer closeCreateOfferModal={closeCreateOfferModal} />
-      )}
+      <DrawerContainer ref={drawerRef} />
     </HeaderContainer>
   );
 };

src/components/Modals/DeleteCategory/DeleteCategory.js

@@ -20,12 +20,13 @@ import { DELETE_TYPE } from "../../../constants/adminMethodConstants";
 import { dynamicRouteMatches } from "../../../util/helpers/routeHelpers";
 import { ADMIN_SINGLE_USER_PAGE } from "../../../constants/pages";
 import { fetchProfile } from "../../../store/actions/profile/profileActions";
+import { closeModal } from "../../../store/actions/modal/modalActions";
 
 const DeleteCategory = (props) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
-  const handleCancel = () => {
-    props.setOpenedDeleteModal(false);
+  const closeModalHandler = () => {
+    dispatch(closeModal());
   };
   const reassuranceText = useMemo(() => {
     return t(`admin.${props.type}.reassuranceDelete`);
@@ -33,9 +34,9 @@ const DeleteCategory = (props) => {
 
   const handleApiResponseSuccess = () => {
     if (dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE)) {
-      dispatch(fetchProfile(props.customId))
+      dispatch(fetchProfile(props.customId));
     }
-    handleCancel();
+    closeModalHandler();
   };
 
   const handleSubmit = () => {
@@ -54,7 +55,7 @@ const DeleteCategory = (props) => {
     <>
       <BackdropComponent
         isLoading
-        handleClose={() => props.setOpenedDeleteModal(false)}
+        handleClose={closeModalHandler}
         position="fixed"
       />
       <DeleteCategoryContainer type={props.type}>
@@ -72,7 +73,7 @@ const DeleteCategory = (props) => {
         <ReassuranceText>{reassuranceText}</ReassuranceText>
         <ButtonsContainer>
           <CancelButton
-            onClick={handleCancel}
+            onClick={closeModalHandler}
             variant="contained"
             buttoncolor={selectedTheme.colors.primaryPurple}
           >
@@ -92,7 +93,6 @@ const DeleteCategory = (props) => {
 };
 
 DeleteCategory.propTypes = {
-  setOpenedDeleteModal: PropTypes.func,
   category: PropTypes.object,
   subcategory: PropTypes.bool,
   type: PropTypes.string,

src/components/Modals/DeleteReview/DeleteReview.js

@@ -11,25 +11,29 @@ import { useTranslation } from "react-i18next";
 import DeleteButton from "./DeleteButton/DeleteButton";
 import { useDispatch } from "react-redux";
 import { removeReview } from "../../../store/actions/review/reviewActions";
+import { closeModal } from "../../../store/actions/modal/modalActions";
 
 const DeleteReview = (props) => {
   const dispatch = useDispatch();
   const reviewId = props.review._id;
   const { t } = useTranslation();
 
+  const closeModalHandler = () => {
+    dispatch(closeModal());
+  };
+
   const handleApiResponseSuccess = () => {
-    console.log("Succes");
+    closeModalHandler();
   };
 
   const deleteReviewHandler = () => {
     dispatch(removeReview({ reviewId, handleApiResponseSuccess }));
-    props.setOpenedDeleteModal(false);
   };
   return (
     <>
       <BackdropComponent
         isLoading
-        handleClose={() => props.setOpenedDeleteModal(false)}
+        handleClose={closeModalHandler}
         position="fixed"
       />
       <DeleteReviewContainer>
@@ -39,7 +43,7 @@ const DeleteReview = (props) => {
           deleteModal
           review={props.review}
         />
-        <XIcon onClick={() => props.setOpenedDeleteModal(false)} />
+        <XIcon onClick={closeModalHandler} />
         <DeleteButton onClick={deleteReviewHandler} />
       </DeleteReviewContainer>
     </>
@@ -48,7 +52,6 @@ const DeleteReview = (props) => {
 
 DeleteReview.propTypes = {
   review: PropTypes.any,
-  setOpenedDeleteModal: PropTypes.func,
   cardComponent: PropTypes.any,
 };
 

src/components/Modals/EditCategory/EditCategory.js

@@ -20,6 +20,7 @@ import { useMemo } from "react";
 import { useDispatch } from "react-redux";
 import { fetchAdminMethod } from "../../../store/actions/admin/adminActions";
 import { useRef } from "react";
+import { closeModal } from "../../../store/actions/modal/modalActions";
 
 const EditCategory = (props) => {
   const { t } = useTranslation();
@@ -49,11 +50,16 @@ const EditCategory = (props) => {
     setImage(image);
     formik.setFieldValue("image", image);
   };
+
+  const closeModalHandler = () => {
+    dispatch(closeModal());
+  };
+
   const handleApiResponseSuccess = () => {
     if (clickedOnNext) {
       formik.resetForm();
       inputRef.current.focus();
-    } else props.setOpenedEditModal(false);
+    } else closeModalHandler();
   };
   const handleSubmit = (values) => {
     dispatch(
@@ -83,11 +89,11 @@ const EditCategory = (props) => {
     <>
       <BackdropComponent
         isLoading
-        handleClose={() => props.setOpenedEditModal(false)}
+        handleClose={closeModalHandler}
         position="fixed"
       />
       <EditCategoryContainer hideImagePicker={props.hideImagePicker}>
-        <XIcon onClick={() => props.setOpenedEditModal(false)} />
+        <XIcon onClick={closeModalHandler} />
         <EditCategoryTitle>{title}</EditCategoryTitle>
         {!props.hideImagePicker && (
           <>

src/components/Modals/Modal.js

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { selectModalValues } from "../../store/selectors/modalSelectors";
+import CreateOffer from "../Cards/CreateOfferCard/CreateOffer";
+import EditCategory from "./EditCategory/EditCategory";
+import DeleteCategory from "./DeleteCategory/DeleteCategory";
+import CreateReview from "../CreateReview/CreateReview";
+import EditProfile from "../Cards/ProfileCard/EditProfile/EditProfile";
+import DeleteReview from "./DeleteReview/DeleteReview";
+import DeleteOffer from "../Cards/OfferCard/DeleteOffer/DeleteOffer";
+
+const Modal = () => {
+  const modals = useSelector(selectModalValues);
+  const isModalShown = useMemo(() => {
+    const properties = Object.getOwnPropertyNames(modals);
+    let isModalShownLocal = false;
+    properties.forEach((singleModal) => {
+      if (modals[singleModal] === true) isModalShownLocal = true;
+    });
+    return isModalShownLocal;
+  }, [modals]);
+  if (isModalShown) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "auto";
+  }
+  console.log("MODALS: ", modals);
+  return (
+    <>
+      {modals?.createOfferModal && <CreateOffer {...modals?.props} />}
+      {modals?.editOfferModal && <CreateOffer editOffer {...modals?.props} />}
+      {modals?.deleteOfferModal && <DeleteOffer {...modals?.props} />}
+      {modals?.createCategoryModal && (
+        <EditCategory method="add" {...modals?.props} />
+      )}
+      {modals?.editCategoryModal && (
+        <EditCategory method="edit" {...modals?.props} />
+      )}
+      {modals?.deleteCategoryModal && <DeleteCategory {...modals?.props} />}
+      {modals?.createReviewModal && <CreateReview {...modals?.props} />}
+      {modals?.deleteReviewModal && <DeleteReview {...modals?.props} />}
+      {modals?.editProfileModal && <EditProfile {...modals?.props} />}
+    </>
+  );
+};
+
+Modal.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Modal;

src/pages/AdminHomePage/AdminCategoriesPage/AdminCategoriesPage.js

@@ -17,11 +17,10 @@ import { selectManualSearchString } from "../../../store/selectors/filtersSelect
 import { useMemo } from "react";
 import { setManualSearchString } from "../../../store/actions/filters/filtersActions";
 import selectedTheme from "../../../themes";
-import { useState } from "react";
-import EditCategory from "../../../components/Modals/EditCategory/EditCategory";
 import useSorting from "../../../hooks/useOffers/useSorting";
 import { sortCategoriesEnum } from "../../../enums/sortEnum";
 import { adminSortMethod } from "../../../util/helpers/adminSortHelper";
+import { toggleCreateCategoryModal } from "../../../store/actions/modal/modalActions";
 
 const AdminCategoriesPage = () => {
   const { t } = useTranslation();
@@ -29,7 +28,6 @@ const AdminCategoriesPage = () => {
   const sorting = useSorting(() => {}, sortCategoriesEnum);
   const categories = useSelector(selectCategories);
   const manualSearchString = useSelector(selectManualSearchString);
-  const [openedAddModal, setOpenedAddModal] = useState(false);
   useEffect(() => {
     dispatch(fetchCategories());
     return () => {
@@ -46,6 +44,16 @@ const AdminCategoriesPage = () => {
     }
     return [];
   }, [categories, manualSearchString, sorting.selectedSortOptionLocally]);
+
+  const showAddCategoryModal = () => {
+    dispatch(
+      toggleCreateCategoryModal({
+        type: "categories",
+        method: "add",
+        showSecondButton: true,
+      })
+    );
+  };
   return (
     <>
       <AdminCategoriesPageContainer>
@@ -76,19 +84,11 @@ const AdminCategoriesPage = () => {
           variant="contained"
           buttoncolor={selectedTheme.colors.iconYellowColor}
           textcolor={selectedTheme.colors.messageText}
-          onClick={() => setOpenedAddModal(true)}
+          onClick={showAddCategoryModal}
         >
           {t("admin.categories.addCategory")}
         </NewCategoryButton>
       </AdminCategoriesPageContainer>
-      {openedAddModal && (
-        <EditCategory
-          setOpenedEditModal={setOpenedAddModal}
-          type={"categories"}
-          method="add"
-          showSecondButton
-        />
-      )}
     </>
   );
 };

src/pages/AdminHomePage/AdminLocationsPage/AdminLocationsPage.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import {
   AdminLocationsHeader,
@@ -13,15 +13,14 @@ import { selectLocations } from "../../../store/selectors/locationsSelectors";
 import { fetchLocations } from "../../../store/actions/locations/locationsActions";
 import CategoryCard from "../../../components/Cards/CategoryCard/CategoryCard";
 import selectedTheme from "../../../themes";
-import EditCategory from "../../../components/Modals/EditCategory/EditCategory";
 import { setManualSearchString } from "../../../store/actions/filters/filtersActions";
 import { selectManualSearchString } from "../../../store/selectors/filtersSelectors";
 import useSorting from "../../../hooks/useOffers/useSorting";
 import { sortCategoriesEnum } from "../../../enums/sortEnum";
 import { adminSortMethod } from "../../../util/helpers/adminSortHelper";
+import { toggleCreateCategoryModal } from "../../../store/actions/modal/modalActions";
 
 const AdminLocationsPage = () => {
-  const [openedAddModal, setOpenedAddModal] = useState(false);
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const sorting = useSorting(() => {}, sortCategoriesEnum);
@@ -42,6 +41,16 @@ const AdminLocationsPage = () => {
       return adminSortMethod(locations, manualSearchString, sorting);
     }
   }, [locations, manualSearchString, sorting.selectedSortOptionLocally]);
+  const showAddCategoryModal = () => {
+    dispatch(
+      toggleCreateCategoryModal({
+        hideImagePicker: true,
+        type: "locations",
+        method: "add",
+        showSecondButton: true,
+      })
+    );
+  };
   return (
     <>
       <AdminLocationsPageContainer>
@@ -74,20 +83,11 @@ const AdminLocationsPage = () => {
           variant="contained"
           buttoncolor={selectedTheme.colors.iconYellowColor}
           textcolor={selectedTheme.colors.messageText}
-          onClick={() => setOpenedAddModal(true)}
+          onClick={showAddCategoryModal}
         >
           {t("admin.locations.addLocation")}
         </NewLocationButton>
       </AdminLocationsPageContainer>
-      {openedAddModal && (
-        <EditCategory
-          hideImagePicker
-          setOpenedEditModal={setOpenedAddModal}
-          type={"locations"}
-          method="add"
-          showSecondButton
-        />
-      )}
     </>
   );
 };

src/pages/AdminHomePage/AdminSubcategoriesPage/AdminSubcategoriesPage.js

@@ -21,13 +21,12 @@ import { setManualSearchString } from "../../../store/actions/filters/filtersAct
 import { useRouteMatch } from "react-router-dom";
 import CategoryCard from "../../../components/Cards/CategoryCard/CategoryCard";
 import selectedTheme from "../../../themes";
-import { useState } from "react";
-import EditCategory from "../../../components/Modals/EditCategory/EditCategory";
 import useSorting from "../../../hooks/useOffers/useSorting";
 import { sortCategoriesEnum } from "../../../enums/sortEnum";
 import { adminSortMethod } from "../../../util/helpers/adminSortHelper";
 import { ArrowButton } from "../../../components/Buttons/ArrowButton/ArrowButton";
 import history from "../../../store/utils/history";
+import { toggleCreateCategoryModal } from "../../../store/actions/modal/modalActions";
 
 const AdminSubcategoriesPage = () => {
   const { t } = useTranslation();
@@ -36,7 +35,6 @@ const AdminSubcategoriesPage = () => {
   const routeMatch = useRouteMatch();
   const sorting = useSorting(() => {}, sortCategoriesEnum);
   const manualSearchString = useSelector(selectManualSearchString);
-  const [openedAddModal, setOpenedAddModal] = useState(false);
 
   useEffect(() => {
     dispatch(fetchCategories());
@@ -68,6 +66,16 @@ const AdminSubcategoriesPage = () => {
   const goBack = () => {
     history.goBack();
   };
+  const showAddSubcategoryModal = () => {
+    dispatch(
+      toggleCreateCategoryModal({
+        hideImagePicker: true,
+        type: "locations",
+        method: "add",
+        showSecondButton: true,
+      })
+    );
+  };
 
   return (
     <>
@@ -123,21 +131,11 @@ const AdminSubcategoriesPage = () => {
           variant="contained"
           buttoncolor={selectedTheme.colors.iconYellowColor}
           textcolor={selectedTheme.colors.messageText}
-          onClick={() => setOpenedAddModal(true)}
+          onClick={showAddSubcategoryModal}
         >
           {t("admin.subcategories.addSubcategory")}
         </NewSubcategoryButton>
       </AdminSubcategoriesPageContainer>
-      {openedAddModal && (
-        <EditCategory
-          hideImagePicker
-          categoryId={category._id}
-          setOpenedEditModal={setOpenedAddModal}
-          type="subcategories"
-          method="add"
-          showSecondButton
-        />
-      )}
     </>
   );
 };

src/store/actions/modal/modalActionConstants.js

@@ -0,0 +1,13 @@
+import { createClearType, createSetType } from "../actionHelpers";
+
+export const TOGGLE_CREATE_OFFER = createSetType("TOGGLE_CREATE_OFFER");
+export const TOGGLE_EDIT_OFFER = createSetType("TOGGLE_EDIT_OFFER");
+export const TOGGLE_DELETE_OFFER = createSetType("TOGGLE_DELETE_OFFER");
+export const TOGGLE_CREATE_CATEGORY = createSetType("TOGGLE_CREATE_CATEGORY");
+export const TOGGLE_EDIT_CATEOGRY = createSetType("TOGGLE_EDIT_CATEOGRY");
+export const TOGGLE_DELETE_CATEGORY = createSetType("TOGGLE_DELETE_CATEGORY");
+export const TOGGLE_CREATE_REVIEW = createSetType("TOGGLE_CREATE_REVIEW");
+export const TOGGLE_DELETE_REVIEW = createSetType("TOGGLE_DELETE_REVIEW");
+export const TOGGLE_EDIT_PROFILE = createSetType("TOGGLE_EDIT_PROFILE");
+export const SET_MODAL_TYPE = createSetType("SET_MODAL_TYPE");
+export const CLOSE_MODAL = createClearType("CLOSE_MODAL");

src/store/actions/modal/modalActions.js

@@ -0,0 +1,52 @@
+import {
+  CLOSE_MODAL,
+  TOGGLE_CREATE_CATEGORY,
+  TOGGLE_CREATE_OFFER,
+  TOGGLE_CREATE_REVIEW,
+  TOGGLE_DELETE_CATEGORY,
+  TOGGLE_DELETE_OFFER,
+  TOGGLE_DELETE_REVIEW,
+  TOGGLE_EDIT_CATEOGRY,
+  TOGGLE_EDIT_OFFER,
+  TOGGLE_EDIT_PROFILE,
+} from "./modalActionConstants";
+
+export const toggleCreateOfferModal = (payload) => ({
+  type: TOGGLE_CREATE_OFFER,
+  payload,
+});
+export const toggleEditOfferModal = (payload) => ({
+  type: TOGGLE_EDIT_OFFER,
+  payload,
+});
+export const toggleDeleteOfferModal = (payload) => ({
+  type: TOGGLE_DELETE_OFFER,
+  payload,
+});
+export const toggleCreateCategoryModal = (payload) => ({
+  type: TOGGLE_CREATE_CATEGORY,
+  payload,
+});
+export const toggleEditCategoryModal = (payload) => ({
+  type: TOGGLE_EDIT_CATEOGRY,
+  payload,
+});
+export const toggleDeleteCategoryModal = (payload) => ({
+  type: TOGGLE_DELETE_CATEGORY,
+  payload,
+});
+export const toggleCreateReviewModal = (payload) => ({
+  type: TOGGLE_CREATE_REVIEW,
+  payload,
+});
+export const toggleDeleteReviewModal = (payload) => ({
+  type: TOGGLE_DELETE_REVIEW,
+  payload,
+});
+export const toggleEditProfileModal = (payload) => ({
+  type: TOGGLE_EDIT_PROFILE,
+  payload,
+});
+export const closeModal = () => ({
+  type: CLOSE_MODAL,
+});

src/store/reducers/index.js

@@ -15,6 +15,7 @@ import queryStringReducer from "./queryString/queryStringReducer";
 import exchangeReducer from "./exchange/exchangeReducer";
 import reviewReducer from "./review/reviewReducer";
 import appReducer from "./app/appReducer";
+import modalReducer from "./modal/modalReducer";
 
 const loginPersistConfig = {
   key: "login",
@@ -64,4 +65,5 @@ export default combineReducers({
   exchange: exchangeReducer,
   review: reviewReducer,
   app: appReducer,
+  modal: modalReducer,
 });

src/store/reducers/modal/modalReducer.js

@@ -0,0 +1,116 @@
+import {
+    CLOSE_MODAL,
+  SET_MODAL_TYPE,
+  TOGGLE_CREATE_CATEGORY,
+  TOGGLE_CREATE_OFFER,
+  TOGGLE_CREATE_REVIEW,
+  TOGGLE_DELETE_CATEGORY,
+  TOGGLE_DELETE_OFFER,
+  TOGGLE_DELETE_REVIEW,
+  TOGGLE_EDIT_CATEOGRY,
+  TOGGLE_EDIT_OFFER,
+  TOGGLE_EDIT_PROFILE,
+} from "../../actions/modal/modalActionConstants";
+import createReducer from "../../utils/createReducer";
+
+const initialState = {
+  createOfferModal: false,
+  editOfferModal: false,
+  deleteOfferModal: false,
+  createCategoryModal: false,
+  editCategoryModal: false,
+  deleteCategoryModal: false,
+  createReviewModal: false,
+  editProfile: false,
+  toggleDeleteReview: false,
+  props: {},
+};
+
+export default createReducer(
+  {
+    [TOGGLE_CREATE_OFFER]: toggleCreateOffer,
+    [TOGGLE_EDIT_OFFER]: toggleEditOffer,
+    [TOGGLE_DELETE_OFFER]: toggleDeleteOffer,
+    [TOGGLE_CREATE_CATEGORY]: toggleCreateCategory,
+    [TOGGLE_EDIT_CATEOGRY]: toggleEditCategory,
+    [TOGGLE_DELETE_CATEGORY]: toggleDeleteCategory,
+    [TOGGLE_CREATE_REVIEW]: toggleCreateReview,
+    [TOGGLE_DELETE_REVIEW]: toggleDeleteReview,
+    [TOGGLE_EDIT_PROFILE]: toggleEditProfile,
+    [SET_MODAL_TYPE]: setModalType,
+    [CLOSE_MODAL]: closeModal,
+  },
+  initialState
+);
+function toggleCreateOffer(state, { payload }) {
+  return {
+    ...state,
+    createOfferModal: !state.createOfferModal,
+    props: payload,
+  };
+}
+function toggleEditOffer(state, { payload }) {
+  return {
+    ...state,
+    editOfferModal: !state.editOfferModal,
+    props: payload,
+  };
+}
+function toggleDeleteOffer(state, { payload }) {
+  return {
+    ...state,
+    deleteOfferModal: !state.deleteOfferModal,
+    props: payload,
+  };
+}
+function toggleCreateCategory(state, { payload }) {
+  return {
+    ...state,
+    createCategoryModal: !state.createCategoryModal,
+    props: payload,
+  };
+}
+function toggleEditCategory(state, { payload }) {
+  return {
+    ...state,
+    editCategoryModal: !state.editCategoryModal,
+    props: payload,
+  };
+}
+function toggleDeleteCategory(state, { payload }) {
+  return {
+    ...state,
+    deleteCategoryModal: !state.deleteCategoryModal,
+    props: payload,
+  };
+}
+function toggleCreateReview(state, { payload }) {
+  return {
+    ...state,
+    createReviewModal: !state.createReviewModal,
+    props: payload,
+  };
+}
+function toggleDeleteReview(state, { payload }) {
+  return {
+    ...state,
+    deleteReviewModal: !state.deleteReviewModal,
+    props: payload,
+  };
+}
+function toggleEditProfile(state, { payload }) {
+  return {
+    ...state,
+    editProfileModal: !state.editProfileModal,
+    props: payload,
+  };
+}
+function setModalType(state, { payload }) {
+  return {
+    ...state,
+    type: payload,
+  };
+}
+function closeModal() {
+    return initialState;
+}

src/store/selectors/modalSelectors.js

@@ -0,0 +1,7 @@
+import { createSelector } from "reselect";
+
+const modalSelector = (state) => state.modal;
+export const selectModalValues = createSelector(
+  modalSelector,
+  (state) => state
+);