Finished feature 646

.env

@@ -1 +1 @@
-REACT_APP_BASE_API_URL=https://trampa-api.dilig.net/
+REACT_APP_BASE_API_URL=https://trampa-api-test.dilig.net/

src/components/Header/Header.js

@@ -131,7 +131,7 @@ const Header = () => {
               >
                 {matches ? (
                   <OpenDrawerButton
-                    onClick={drawerRef.current.handleToggleDrawer}
+                    onClick={drawerRef.current?.handleToggleDrawer}
                   />
                 ) : (
                   <React.Fragment>
@@ -152,7 +152,7 @@ const Header = () => {
               <AuthButtonsContainer mobile={matches}>
                 {matches ? (
                   <OpenDrawerButton
-                    onClick={drawerRef.current.handleToggleDrawer}
+                    onClick={drawerRef.current?.handleToggleDrawer}
                   />
                 ) : (
                   <React.Fragment>

src/components/MarketPlace/Header/Header.js

@@ -85,7 +85,7 @@ const Header = (props) => {
   return (
     <>
       <SkeletonHeader skeleton={props.skeleton} myOffers={props.myOffers} />
-      <HeaderWrapperContainer skeleton={props.skeleton}>
+      <HeaderWrapperContainer skeleton={props.skeleton} isAdmin={props.isAdmin}>
         <HeaderContainer>
           {/* Setting appropriate header title if page is market place or my offers */}
           <Tooltip title={headerString.text}>
@@ -218,6 +218,7 @@ Header.propTypes = {
   myOffers: PropTypes.bool,
   skeleton: PropTypes.bool,
   sorting: PropTypes.any,
+  isAdmin: PropTypes.bool,
 };
 Header.defaultProps = {
   isGrid: false,

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

@@ -9,6 +9,8 @@ import { ReactComponent as CategoryHeader } from "../../../assets/images/svg/cat
 
 export const HeaderWrapperContainer = styled(Box)`
   display: ${(props) => (props.skeleton ? "none" : "block")};
+  position: relative;
+  top: ${props => props.isAdmin && `60px`};
 `;
 
 export const HeaderContainer = styled(Box)`

src/components/MarketPlace/MarketPlace.js

@@ -17,6 +17,7 @@ const MarketPlace = (props) => {
         sorting={props.offers.sorting}
         offers={props.offers}
         skeleton={props.skeleton}
+        isAdmin={props.isAdmin}
       />
       <Offers
         isGrid={isGrid}
@@ -24,6 +25,7 @@ const MarketPlace = (props) => {
         skeleton={props.skeleton}
         offers={offers}
         toggleFilters={props.toggleFilters}
+        isAdmin={props.isAdmin}
       />
     </MarketPlaceContainer>
   );
@@ -34,7 +36,8 @@ MarketPlace.propTypes = {
   myOffers: PropTypes.bool,
   skeleton: PropTypes.bool,
   offers: PropTypes.any,
-  toggleFilters: PropTypes.func
+  toggleFilters: PropTypes.func,
+  isAdmin: PropTypes.bool,
 };
 
 export default MarketPlace;

src/components/MarketPlace/Offers/HeaderMyOffers.js/HeadersMyOffers.js

@@ -1,18 +1,23 @@
-import React, {  useCallback, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import { EndIcon, SearchIcon, SearchInput } from "./HeadersMyOffers.styled";
 import { useTranslation } from "react-i18next";
+import useSearch from "../../../../hooks/useOffers/useSearch";
 
 const HeadersMyOffers = (props) => {
   const searchRef = useRef(null);
-  const {t} = useTranslation();
-  let listener = useCallback((event) => {
-    // Event keycode 13 = ENTER keycode
-    if (event.keyCode === 13) {
-      event.preventDefault();
-      handleSearch();
-    }
-  }, [searchRef.current])
+  const search = useSearch(() => {});
+  const { t } = useTranslation();
+  let listener = useCallback(
+    (event) => {
+      // Event keycode 13 = ENTER keycode
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        handleSearch();
+      }
+    },
+    [searchRef.current]
+  );
   const handleFocusSearch = () => {
     searchRef.current.addEventListener("keyup", listener);
   };
@@ -20,11 +25,17 @@ const HeadersMyOffers = (props) => {
     searchRef.current.removeEventListener("keyup", listener);
   };
   const handleSearch = () => {
-    props.searchMyOffers(searchRef.current.value);
-    props.handleSearch();
+    if (props.isAdmin) {
+      console.log(searchRef.current.value);
+      search.searchOffersImmediately(searchRef.current.value);
+    } else {
+      props.searchMyOffers(searchRef.current.value);
+      props.handleSearch();
+    }
   };
   return (
     <SearchInput
+      isAdmin={props.isAdmin}
       fullWidth
       InputProps={{
         endAdornment: (
@@ -45,6 +56,8 @@ HeadersMyOffers.propTypes = {
   children: PropTypes.node,
   searchMyOffers: PropTypes.func,
   handleSearch: PropTypes.func,
+  isAdmin: PropTypes.bool,
+  offers: PropTypes.any,
 };
 
 export default HeadersMyOffers;

src/components/MarketPlace/Offers/HeaderMyOffers.js/HeadersMyOffers.styled.js

@@ -24,6 +24,8 @@ export const SearchIcon = styled(Search)`
   }
 `;
 export const SearchInput = styled(TextField)`
+  position: relative;
+  top: ${props => props.isAdmin && `-60px`};
   & div {
     height: 46px;
     background-color: white;

src/components/MarketPlace/Offers/Offers.js

@@ -31,16 +31,19 @@ const Offers = (props) => {
       {!props.skeleton ? (
         <>
           <FilterContainer
+            isAdmin={props.isAdmin}
             onClick={toggleFilters}
             number={offers.filters.numOfFiltersChosen}
             myOffers={props.myOffers}
           >
             <FilterIcon />
           </FilterContainer>
-          {props.myOffers && (
+          {(props.myOffers || props.isAdmin) && (
             <HeadersMyOffers
               searchMyOffers={offers.search.searchOffers}
               handleSearch={offers.apply}
+              isAdmin={props.isAdmin}
+              offers={offers}
             />
           )}
           {offers.allOffersToShow.length === 0 ? (
@@ -54,7 +57,7 @@ const Offers = (props) => {
                     offer={item}
                     halfwidth={props.isGrid}
                     messageUser={messageOneUser}
-                    isMyOffer={item?.userId === userId}
+                    isMyOffer={item?.userId === userId || props.isAdmin}
                   />
                 );
               })}
@@ -85,6 +88,7 @@ Offers.propTypes = {
   skeleton: PropTypes.bool,
   offers: PropTypes.any,
   toggleFilters: PropTypes.func,
+  isAdmin: PropTypes.bool,
 };
 
 Offers.defaultProps = {

src/hooks/useOffers/useOffers.js

@@ -102,7 +102,9 @@ const useOffers = () => {
         search.clear();
       }
       dispatch(setSearchString(queryObject[KEY_SEARCH]));
-      dispatch(setHeaderString(makeHeaderStringFromQueryObjectHelper(queryObject)));
+      dispatch(
+        setHeaderString(makeHeaderStringFromQueryObjectHelper(queryObject))
+      );
     }
   }, [queryStringHook.isInitiallyLoaded]);
 
@@ -111,14 +113,18 @@ const useOffers = () => {
   }, [offers, pinnedOffers]);
 
   useEffect(() => {
+    console.log("useeff", filtersCleared);
     if (filtersCleared) {
+      console.log("useeff unutra");
       setFiltersCleared(false);
       apply();
+      console.log("posle useeff");
     }
   }, [filtersCleared]);
 
   const apply = () => {
     filters.apply();
+    console.log("ovde");
     const newQueryString = makeQueryStringHelper(
       filters,
       paging,
@@ -129,11 +135,13 @@ const useOffers = () => {
   };
 
   const applyFilters = () => {
+    console.log("applyfilters");
     setFiltersCleared(true);
   };
 
   const clearFiltersAndApply = () => {
     clear();
+    console.log('clearfiltersandapply filterscleared')
     setFiltersCleared(true);
   };
 
@@ -153,6 +161,8 @@ const useOffers = () => {
   const clearOnlyFiltersAndApply = () => {
     filters.clear();
     paging.changePage(1);
+    console.log('clearonlyfiltersandapply filterscleared')
+
     setFiltersCleared(true);
   };
 

src/hooks/useOffers/useSearch.js

@@ -48,11 +48,14 @@ const useSearch = (applyAllFilters) => {
   }, [searchStringLocally]);
 
   const searchOffers = (searchValue) => {
+    console.log('searchoff')
     setIsInitiallyLoaded(true);
     setSearchStringLocally(searchValue);
   };
 
   const searchOffersImmediately = (searchValue) => {
+    console.log('searchoffersimm');
+    setIsInitiallyLoaded(true);
     searchOffers(searchValue);
     applyAllFilters();
   };

src/pages/AdminHomePage/AdminHomePage.js

@@ -1,14 +1,15 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from "react";
+import PropTypes from "prop-types";
+import MarketPlace from "../../components/MarketPlace/MarketPlace";
+import useOffers from "../../hooks/useOffers/useOffers";
 
 const AdminHomePage = () => {
-    return (
-        <div>Admin home page brateee</div>
-    )
-}
+  const offers = useOffers();
+  return <MarketPlace offers={offers} isAdmin />;
+};
 
 AdminHomePage.propTypes = {
-    children: PropTypes.node,
-}
+  children: PropTypes.node,
+};
 
-export default AdminHomePage
+export default AdminHomePage;