Partly finished feature 638

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -81,7 +81,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
   // Create (or edit) offer
   const handleSubmitOffer = () => {
     if (editOffer) {
-      dispatch(editOneOffer(offer._id, offerData));
+      dispatch(editOneOffer({offerId: offer._id, offerData}));
     } else {
       dispatch(addOffer({ offerData, handleApiResponseSuccess }));
     }

src/components/MarketPlace/Header/Header.js

@@ -6,10 +6,14 @@ import {
   HeaderAltLocation,
   HeaderButton,
   HeaderButtons,
+  HeaderCategoryString,
   HeaderContainer,
   HeaderLocation,
+  HeaderLocationsMainString,
+  HeaderLocationsString,
   HeaderOptions,
   HeaderSelect,
+  HeaderSubcategoryString,
   // HeaderText,
   HeaderTitleContainer,
   HeaderTitleText,
@@ -20,6 +24,7 @@ import {
   SwapsHeaderIcon,
   SwapsIcon,
   SwapsTitle,
+  TooltipInnerContainer,
 } from "./Header.styled";
 import { ReactComponent as GridSquare } from "../../../assets/images/svg/offer-grid-square.svg";
 import { ReactComponent as GridLine } from "../../../assets/images/svg/offer-grid-line.svg";
@@ -50,20 +55,30 @@ const Header = (props) => {
 
   const altString = useMemo(() => {
     if (sorting.selectedSortOption === sortEnum.OLD) {
-      return t("header.oldOffers");
+      return `: ${t("header.oldOffers")}`;
     }
     if (sorting.selectedSortOption === sortEnum.POPULAR) {
-      return t("header.popularOffers");
+      return `: ${t("header.popularOffers")}`;
     }
-    return t("header.newOffers");
+    return `: ${t("header.newOffers")}`;
   }, [sorting.selectedSortOption]);
 
   const handleChangeSelect = (event) => {
     sorting.changeSorting(event.target.value);
   };
+  const handleClickCategory = () => {
+    props.offers.filters.locations.clear();
+    props.offers.filters.subcategory.clear();
+    props.offers.applyFilters();
+  };
+  const handleClickSubcategory = () => {
+    props.offers.filters.locations.clear();
+    props.offers.applyFilters();
+  };
   // const goBack = () => {
   //   history.goBack();
   // };
+  console.log(headerString.text);
 
   return (
     <>
@@ -71,15 +86,28 @@ const Header = (props) => {
       <HeaderWrapperContainer skeleton={props.skeleton}>
         <HeaderContainer>
           {/* Setting appropriate header title if page is market place or my offers */}
-          <Tooltip title={headerString}>
-            <>
+          <Tooltip title={headerString.text}>
+            <TooltipInnerContainer>
               {!props.myOffers ? (
                 <>
                   <CategoryHeaderIcon />
-                  <HeaderLocation initial={altString}>
-                    {headerString}
+                  <HeaderLocation>
+                    {/* {headerString} */}
+                    <HeaderCategoryString onClick={handleClickCategory}>
+                      {headerString.categoryString}
+                      {headerString.subcategoryString && <>&nbsp;</>}
+                    </HeaderCategoryString>
+                    <HeaderSubcategoryString onClick={handleClickSubcategory}>
+                      {headerString.subcategoryString}
+                      {headerString.locationsString && <>&nbsp;</>}
+                    </HeaderSubcategoryString>
+                    <HeaderLocationsString>
+                      <HeaderLocationsMainString>
+                        {headerString.locationsString}
+                      </HeaderLocationsMainString>
+                      <HeaderAltLocation>{altString}</HeaderAltLocation>
+                    </HeaderLocationsString>
                   </HeaderLocation>
-                  <HeaderAltLocation>{altString}</HeaderAltLocation>
                 </>
               ) : (
                 <HeaderTitleContainer>
@@ -87,7 +115,7 @@ const Header = (props) => {
                   <HeaderTitleText>{t("header.myOffers")}</HeaderTitleText>
                 </HeaderTitleContainer>
               )}
-            </>
+            </TooltipInnerContainer>
           </Tooltip>
           {/* ^^^^^^ */}
 
@@ -166,7 +194,7 @@ Header.propTypes = {
   children: PropTypes.node,
   setIsGrid: PropTypes.func,
   isGrid: PropTypes.bool,
-  filters: PropTypes.any,
+  offers: PropTypes.any,
   category: PropTypes.string,
   myOffers: PropTypes.bool,
   skeleton: PropTypes.bool,

src/components/MarketPlace/Header/Header.styled.js

@@ -17,7 +17,10 @@ export const HeaderContainer = styled(Box)`
   justify-content: space-between;
   align-items: center;
 `;
-export const HeaderLocation = styled(Box)`
+export const TooltipInnerContainer = styled(Box)`
+  width: 100%;
+`;
+export const HeaderLocation = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
@@ -25,7 +28,7 @@ export const HeaderLocation = styled(Box)`
   font-size: 16px;
   flex: 2;
   margin-left: 9px;
-  max-width: ${(props) => (props.initial ? "fit-content" : "50%")};
+  max-width: 50%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -40,6 +43,42 @@ export const HeaderLocation = styled(Box)`
     padding-top: 3px;
   }
 `;
+export const HeaderCategoryString = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
+  font-weight: 700;
+  line-height: 22px;
+  font-size: 16px;
+  /* position: relative;
+  bottom: 2px; */
+  cursor: pointer;
+`;
+export const HeaderSubcategoryString = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
+  font-weight: 700;
+  line-height: 22px;
+  font-size: 16px;
+  /* position: relative;
+  bottom: 2px; */
+  cursor: pointer;
+`;
+export const HeaderLocationsString = styled(Typography)`
+  /* position: relative;
+  bottom: 2px; */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+`;
+export const HeaderLocationsMainString = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  max-width: 200px;
+  color: ${selectedTheme.colors.primaryPurple};
+  font-weight: 700;
+  line-height: 22px;
+  font-size: 16px;
+`;
 export const HeaderButton = styled(IconButton)`
   padding: 2px 10px;
   @media (max-width: 1500px) {
@@ -98,7 +137,7 @@ export const HeaderAltLocation = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   color: ${selectedTheme.colors.primaryText};
-  margin-left: 5px;
+  /* margin-left: 5px; */
   @media (max-width: 600px) {
     display: none;
   }
@@ -121,10 +160,11 @@ export const MySwapsTitle = styled(Typography)`
   left: 9px;
 `;
 export const CategoryHeaderIcon = styled(CategoryHeader)`
+  position: relative;
+  top: 4px;
   @media (max-width: 600px) {
     width: 12px;
     height: 12px;
-    position: relative;
     top: 1px;
   }
 `;
@@ -168,15 +208,15 @@ export const HeaderText = styled(Typography)`
 export const SwapsHeaderIcon = styled(SwapsIcon)`
   width: 18px;
   height: 18px;
-`
+`;
 export const HeaderTitleContainer = styled(Box)`
   position: relative;
   left: 5px;
-`
+`;
 export const HeaderTitleText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   color: ${selectedTheme.colors.primaryText};
   font-size: 16px;
   position: relative;
   bottom: 2px;
-`
+`;

src/components/MarketPlace/MarketPlace.js

@@ -15,6 +15,7 @@ const MarketPlace = (props) => {
         setIsGrid={setIsGrid}
         myOffers={props.myOffers}
         sorting={props.offers.sorting}
+        offers={props.offers}
         skeleton={props.skeleton}
       />
       <Offers

src/hooks/useOffers/useOffers.js

@@ -126,6 +126,10 @@ const useOffers = () => {
     dispatch(setQueryString(convertQueryStringForBackend(newQueryString)));
   };
 
+  const applyFilters = () => {
+    setFiltersCleared(true);
+  }
+
   const clearFiltersAndApply = () => {
     clear();
     setFiltersCleared(true);
@@ -164,6 +168,7 @@ const useOffers = () => {
     queryStringHook,
     allOffersToShow,
     totalOffers,
+    applyFilters,
     clearFiltersAndApply,
     clearOnlyFiltersAndApply,
     apply,

src/store/reducers/filters/filtersReducer.js

@@ -19,7 +19,12 @@ const initialState = {
     sortOption: null,
     isApplied: false,
     queryString: "",
-    headerString: "",
+    headerString: {
+      categoryString: "",
+      subcategoryString: "",
+      locationsString: "",
+      text: ""
+    },
     searchString: ""
   },
 };

src/util/helpers/queryHelpers.js

@@ -185,13 +185,15 @@ export const getQueryObjectHelper = (queryString) => {
 };
 
 export const makeHeaderStringHelper = (filters) => {
-  let headerStringLocal = ALL_CATEGORIES;
+  let categoryString = `${ALL_CATEGORIES}`;
+  let subcategoryString = "";
+  let locationsString = "";
   // Adding category to header string
   if (filters?.category?.selectedCategory?.name) {
-    headerStringLocal = filters.category.selectedCategory?.name;
+    categoryString = filters.category.selectedCategory?.name;
     // Adding subcategories to header string
     if (filters.subcategory.selectedSubcategory?.name) {
-      headerStringLocal += `${SPREAD}${filters.subcategory.selectedSubcategory.name}`;
+      subcategoryString = `${SPREAD}${filters.subcategory.selectedSubcategory.name}`;
     }
   }
   // Adding locations to header string
@@ -199,18 +201,24 @@ export const makeHeaderStringHelper = (filters) => {
     filters?.locations?.selectedLocations &&
     filters?.locations?.selectedLocations?.length > 0
   ) {
-    headerStringLocal += SPREAD;
+    locationsString = SPREAD;
 
     filters.locations.selectedLocations.forEach((location, index) => {
       // Checking if item is last
       if (index + 1 === filters.locations.selectedLocations.length) {
-        headerStringLocal += location.city;
+        locationsString += location.city;
       } else {
-        headerStringLocal += location.city + COMMA;
+        locationsString += location.city + COMMA;
       }
     });
   }
-  return headerStringLocal;
+  let headerStringLocal = categoryString + subcategoryString + locationsString;
+  return {
+    categoryString,
+    subcategoryString,
+    locationsString,
+    text: headerStringLocal,
+  };
 };
 export const makeQueryStringHelper = (filters, paging, search, sorting) => {
   const newQueryString = new URLSearchParams();
@@ -268,4 +276,4 @@ export const removePageAndSizeHelper = (queryString) => {
   if (newQueryString.has(KEY_PAGE)) newQueryString.delete(KEY_PAGE);
   if (newQueryString.has(KEY_SIZE)) newQueryString.delete(KEY_SIZE);
   return newQueryString.toString();
-}
+};