Merged with master

src/components/Cards/FilterCard/Choser/CompanyChoser/CompanyChoser.js

+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+import PropTypes from "prop-types";
+import { CompanyIcon } from "./CompanyChoser.styled";
+import { useTranslation } from "react-i18next";
+import FilterSubDropdown from "../../FilterDropdown/Checkbox/FilterSubDropdown/FilterSubDropdown";
+
+const CompanyChoser = forwardRef((props, ref) => {
+  const [isOpened, setIsOpened] = useState(false);
+  const filters = props.filters;
+  const { t } = useTranslation();
+
+  useImperativeHandle(ref, () => ({
+    closeSection: () => {
+      setIsOpened(false);
+    },
+  }));
+
+  useEffect(() => {
+    if (filters.companies.selectedCompaniesLocally.length > 0 && !isOpened) {
+      setIsOpened(true);
+    }
+  }, [filters.companies.selectedCompaniesLocally]);
+  return (
+    <FilterSubDropdown
+      searchPlaceholder={t("filters.company.placeholder")}
+      data={[...filters.companies.allCompanies]}
+      filters={[...filters.companies.selectedCompaniesLocally]}
+      open={isOpened}
+      handleOpen={() => setIsOpened((prevIsOpened) => !prevIsOpened)}
+      icon={<CompanyIcon />}
+      title={t("filters.company.title")}
+      setItemsSelected={filters.companies.setSelectedCompanies}
+      companies
+    />
+  );
+});
+
+CompanyChoser.displayName = "CompanyChoser";
+
+CompanyChoser.propTypes = {
+  filters: PropTypes.any,
+};
+
+export default CompanyChoser;

src/components/Cards/FilterCard/Choser/CompanyChoser/CompanyChoser.styled.js

+import styled from "styled-components";
+import { ReactComponent as Company } from "../../../../../assets/images/svg/user-gray.svg";
+
+export const CompanyIcon = styled(Company)`
+  @media (max-width: 600px) {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    bottom: 2px;
+  }
+`;

src/components/Cards/FilterCard/FilterCard.js

 import CategoryChoser from "./Choser/CategoryChoser/CategoryChoser";
 import SubcategoryChoser from "./Choser/SubcategoryChoser/SubcategoryChoser";
 import LocationChoser from "./Choser/LocationChoser/LocationChoser";
+import CompanyChoser from "./Choser/CompanyChoser/CompanyChoser";
 import SkeletonFilterCard from "./Skeleton/SkeletonFilterCard";
 
 const FilterCard = (props) => {
   const categoryRef = useRef(null);
   const subcategoryRef = useRef(null);
   const locationRef = useRef(null);
+  const companyRef = useRef(null);
   const closeAllSections = () => {
     categoryRef.current.closeSection();
     subcategoryRef.current.closeSection();
     locationRef.current.closeSection();
+    companyRef.current.closeSection();
   };
+  console.log(offers);
   return (
     <FilterCardContainer
       filtersOpened={props.filtersOpened}
         {!props.myOffers && (
           <LocationChoser filters={filters} ref={locationRef} />
         )}
+        <CompanyChoser filters={filters} ref={companyRef} />
       </ContentContainer>
 
       <FilterFooter

src/components/Cards/FilterCard/FilterDropdown/Checkbox/Checkbox/Checkbox.js

 
 const Checkbox = (props) => {
   const item = props.item;
+
   return (
     <CheckboxButton
-      leftText={item.city}
+      leftText={props.companies ? item.company.name : item.city}
       // rightText={item.offerCount}
       value={item}
       checked={
-        props.filters.find(
-          (itemInList) =>
-            itemInList?.city?.toString() === item?.city?.toString()
+        props.filters.find((itemInList) =>
+          props.companies
+            ? itemInList?.company?.name?.toString() ===
+              item?.company?.name?.toString()
+            : itemInList?.city?.toString() === item?.city?.toString()
         )
           ? true
           : false
   item: PropTypes.any,
   filters: PropTypes.any,
   onChange: PropTypes.func,
+  companies: PropTypes.bool,
 };
 
 export default Checkbox;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/CheckboxDropdownList/CheckboxDropdownList.js

           : selectedTheme.colors.primaryText
       }
       dropdownIcon={
-        <NumberedIcon number={props.filters.length}>
-          {props.icon}
-        </NumberedIcon>
+        <NumberedIcon number={props.filters.length}>{props.icon}</NumberedIcon>
       }
       toggleIconClosed={<DropdownDown />}
       toggleIconOpened={<DropdownUp />}
         <React.Fragment>
           <SelectedItemsContainer>
             {props.filters.map((item) => (
-              <SelectedItem key={item.city} onClick={() => handleDelete(item)}>
-                {
-                  data.find(
-                    (p) => p?.city?.toString() === item?.city?.toString()
-                  )?.city
-                }
+              <SelectedItem
+                key={props.companies ? item.company.name : item.city}
+                onClick={() => handleDelete(item)}
+              >
+                {props.companies
+                  ? data.find(
+                      (p) =>
+                        p?.company?.name?.toString() ===
+                        item?.company?.name?.toString()
+                    )?.company?.name
+                  : data.find(
+                      (p) => p?.city?.toString() === item?.city?.toString()
+                    )?.city}
+
                 <CloseIcon />
               </SelectedItem>
             ))}
   setIsOpened: PropTypes.func,
   open: PropTypes.bool,
   handleOpen: PropTypes.func,
+  companies: PropTypes.bool,
 };
 
 export default CheckboxDropdownList;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.js

     if (toSearch.length > 0) {
       setDataToShow(
         data.filter((item) =>
-          item.city.toLowerCase().includes(toSearch.toLowerCase())
+          props.companies
+            ? item.company.name.toLowerCase().includes(toSearch.toLowerCase())
+            : item.city.toLowerCase().includes(toSearch.toLowerCase())
         )
       );
     } else {
       open={props?.open !== undefined ? props.open : isOpened}
       handleOpen={handleOpen}
       setItemsSelected={props.setItemsSelected}
+      companies={props.companies}
     >
       {dataToShow.map((item) => {
         return (
               item={item}
               filters={props.filters}
               onChange={() => handleChange(item)}
+              companies={props.companies}
             />
           </DropdownItem>
         );
   filters: PropTypes.array,
   open: PropTypes.bool,
   handleOpen: PropTypes.func,
+  companies: PropTypes.bool,
 };
 FilterCheckboxDropdown.defaultProps = {
   oneValueAllowed: false,

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterSubDropdown/FilterSmallDropdown/FilterSmallDropdown.js

+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Checkbox from "../../Checkbox/Checkbox";
+import DropdownItem from "../../../../../../Dropdown/DropdownItem/DropdownItem";
+import { filterCompanies } from "../../../../../../../util/helpers/filterCompanies";
+import {
+  REGEXP_FIRST,
+  REGEXP_SECOND,
+  REGEXP_THIRD,
+} from "../../../../../../../constants/filterCompanies";
+import {
+  SmallDropdownContainer,
+  SmallDropdownContent,
+  SmallDropdownIcon,
+  SmallDropdownText,
+} from "./FilterSmallDropdown.styled";
+
+const FilterSmallDropdown = (props) => {
+  const [data, setData] = useState([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    setData([...props.dataToShow]);
+  }, [props.dataToShow]);
+
+  let dataFiltered;
+
+  if (props.letters === "A-H") {
+    dataFiltered = filterCompanies(data, REGEXP_FIRST);
+  } else if (props.letters === "I-Q") {
+    dataFiltered = filterCompanies(data, REGEXP_SECOND);
+  } else if (props.letters === "R-Z") {
+    dataFiltered = filterCompanies(data, REGEXP_THIRD);
+  }
+
+  const handleChange = (item) => {
+    if (props.oneValueAllowed) {
+      props.setItemsSelected([item]);
+    } else {
+      if (
+        props.filters.find(
+          (itemInList) =>
+            itemInList?.company?.name?.toString() ===
+            item?.company?.name?.toString()
+        )
+      ) {
+        props.setItemsSelected([
+          ...props.filters.filter(
+            (p) =>
+              p?.company?.name?.toString() !== item?.company?.name?.toString()
+          ),
+        ]);
+      } else {
+        props.setItemsSelected([...props.filters, item]);
+      }
+    }
+  };
+
+  const setDropdownHandler = () => {
+    setShowDropdown((prevState) => !prevState);
+  };
+
+  return (
+    <>
+      <SmallDropdownContainer>
+        <SmallDropdownText>{props.letters}</SmallDropdownText>
+        <SmallDropdownIcon
+          onClick={() => setDropdownHandler()}
+          dropdown={showDropdown}
+        />
+      </SmallDropdownContainer>
+      <SmallDropdownContent dropdown={showDropdown}>
+        {dataFiltered.map((item) => {
+          return (
+            <DropdownItem key={item.company._id}>
+              <Checkbox
+                item={item}
+                filters={props.filters}
+                onChange={() => handleChange(item)}
+                companies={props.companies}
+              />
+            </DropdownItem>
+          );
+        })}
+      </SmallDropdownContent>
+    </>
+  );
+};
+
+FilterSmallDropdown.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  data: PropTypes.array,
+  title: PropTypes.string,
+  oneValueAllowed: PropTypes.bool,
+  searchPlaceholder: PropTypes.string,
+  setItemsSelected: PropTypes.func,
+  filters: PropTypes.array,
+  open: PropTypes.bool,
+  handleOpen: PropTypes.func,
+  companies: PropTypes.bool,
+  letters: PropTypes.any,
+  dataToShow: PropTypes.array,
+};
+FilterSmallDropdown.defaultProps = {
+  oneValueAllowed: false,
+};
+
+export default FilterSmallDropdown;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterSubDropdown/FilterSmallDropdown/FilterSmallDropdown.styled.js

+import styled from "styled-components";
+import { Box, Typography } from "@mui/material";
+import { ReactComponent as DropdownDown } from "../../../../../../../assets/images/svg/down-arrow.svg";
+
+export const SmallDropdownContainer = styled(Box)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  margin-left: -20px;
+  margin-bottom: 14px;
+`;
+
+export const SmallDropdownText = styled(Typography)`
+  font-family: "DM Sans";
+  font-size: 12px;
+`;
+
+export const SmallDropdownIcon = styled(DropdownDown)`
+  width: 12px;
+  ${(props) =>
+    props.dropdown &&
+    `
+    transform: rotate(180deg);
+  `}
+`;
+
+export const SmallDropdownContent = styled(Box)`
+  display: ${(props) => (props.dropdown ? "block" : "none")};
+`;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterSubDropdown/FilterSubDropdown.js

+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import CheckboxDropdownList from "../CheckboxDropdownList/CheckboxDropdownList";
+import FilterSmallDropdown from "./FilterSmallDropdown/FilterSmallDropdown";
+import { useTranslation } from "react-i18next";
+
+const FilterSubDropdown = (props) => {
+  const [dataToShow, setDataToShow] = useState([]);
+  const [isOpened, setIsOpened] = useState(false);
+  const [toSearch, setToSearch] = useState("");
+  const { t } = useTranslation();
+  const { data } = props;
+
+  useEffect(() => {
+    setDataToShow([...data]);
+  }, [data]);
+
+  useEffect(() => {
+    if (toSearch.length > 0) {
+      setDataToShow(
+        data.filter((item) =>
+          props.companies
+            ? item.company.name.toLowerCase().includes(toSearch.toLowerCase())
+            : item.city.toLowerCase().includes(toSearch.toLowerCase())
+        )
+      );
+    } else {
+      setDataToShow([...data]);
+    }
+  }, [toSearch]);
+
+  useEffect(() => {
+    if (props.filters?.length > 0) {
+      setIsOpened(true);
+    }
+  }, [props.filters]);
+
+  const handleOpen = () => {
+    setIsOpened((prevState) => !prevState);
+    if (props.handleOpen) props.handleOpen();
+  };
+
+  return (
+    <CheckboxDropdownList
+      toSearch={toSearch}
+      setToSearch={setToSearch}
+      title={props.title}
+      filters={props.filters}
+      icon={props.icon}
+      data={data}
+      searchPlaceholder={props.searchPlaceholder}
+      open={props?.open !== undefined ? props.open : isOpened}
+      handleOpen={handleOpen}
+      setItemsSelected={props.setItemsSelected}
+      companies={props.companies}
+    >
+      <FilterSmallDropdown
+        letters={t("filters.company.firstSort")}
+        dataToShow={dataToShow}
+        filters={props.filters}
+        setItemsSelected={props.setItemsSelected}
+        companies={props.companies}
+      />
+      <FilterSmallDropdown
+        letters={t("filters.company.secondSort")}
+        dataToShow={dataToShow}
+        filters={props.filters}
+        setItemsSelected={props.setItemsSelected}
+        companies={props.companies}
+      />
+      <FilterSmallDropdown
+        letters={t("filters.company.thirdSort")}
+        dataToShow={dataToShow}
+        filters={props.filters}
+        setItemsSelected={props.setItemsSelected}
+        companies={props.companies}
+      />
+    </CheckboxDropdownList>
+  );
+};
+
+FilterSubDropdown.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  data: PropTypes.array,
+  title: PropTypes.string,
+  oneValueAllowed: PropTypes.bool,
+  searchPlaceholder: PropTypes.string,
+  setItemsSelected: PropTypes.func,
+  filters: PropTypes.array,
+  open: PropTypes.bool,
+  handleOpen: PropTypes.func,
+  companies: PropTypes.bool,
+};
+FilterSubDropdown.defaultProps = {
+  oneValueAllowed: false,
+};
+
+export default FilterSubDropdown;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterSubDropdown/FilterSubDropdown.styled.js

+import styled from "styled-components";
+import { Box, Typography } from "@mui/material";
+import { ReactComponent as DropdownDown } from "../../../../../../assets/images/svg/down-arrow.svg";
+
+export const SmallDropdownContainer = styled(Box)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  margin-left: -20px;
+  margin-bottom: 14px;
+`;
+
+export const SmallDropdownText = styled(Typography)`
+  font-family: "DM Sans";
+  font-size: 12px;
+`;
+
+export const SmallDropdownIcon = styled(DropdownDown)`
+  width: 12px;
+  ${(props) =>
+    props.firstDropdown &&
+    `
+    transform: rotate(180deg);
+  `}
+  ${(props) =>
+    props.secondDropdown &&
+    `
+    transform: rotate(180deg);
+  `}
+    ${(props) =>
+    props.thirdDropdown &&
+    `
+    transform: rotate(180deg);
+  `}
+`;
+
+export const SmallDropdownContent = styled(Box)`
+  display: ${(props) =>
+    props.firstDropdown || props.secondDropdown || props.thirdDropdown
+      ? "block"
+      : "none"};
+`;

src/constants/filterCompanies.js

+export const REGEXP_FIRST = /^[a-hA-H]/;
+export const REGEXP_SECOND = /^[i-qI-Q]/;
+export const REGEXP_THIRD = /^[r-zR-Z]/;

src/hooks/useOffers/useCompanyFilter.js

+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { setFilteredCompany } from "../../store/actions/filters/filtersActions";
+import { fetchAllProfiles } from "../../store/actions/profile/profileActions";
+import { selectSelectedCompany } from "../../store/selectors/filtersSelectors";
+import { selectAllProfiles } from "../../store/selectors/profileSelectors";
+
+const useCompaniesFilter = () => {
+  const selectedCompanies = useSelector(selectSelectedCompany);
+  const dispatch = useDispatch();
+  const allCompanies = useSelector(selectAllProfiles);
+  const [selectedCompaniesLocally, setSelectedCompaniesLocally] = useState([]);
+  useEffect(() => {
+    dispatch(fetchAllProfiles());
+  }, []);
+
+  useEffect(() => {
+    setSelectedCompaniesLocally(selectedCompanies);
+  }, [selectedCompanies]);
+
+  const setSelectedCompanies = (companies, immediateApply = false) => {
+    setSelectedCompaniesLocally(companies);
+    if (immediateApply) {
+      dispatch(setFilteredCompany(companies));
+    }
+  };
+
+  const setSelectedCompaniesFromArray = (companies) => {
+    let companiesToPush = [];
+    companies.forEach((companyName) => {
+      companiesToPush.push(
+        allCompanies.find((p) => p.company.name === companyName)
+      );
+    });
+    setSelectedCompanies([...companiesToPush]);
+  };
+
+  const apply = () => {
+    dispatch(setFilteredCompany(selectedCompaniesLocally));
+  };
+
+  const clear = () => {
+    setSelectedCompaniesLocally([]);
+    dispatch(setFilteredCompany([]));
+  };
+
+  return {
+    selectedCompanies,
+    selectedCompaniesLocally,
+    setSelectedCompanies,
+    setSelectedCompaniesFromArray,
+    allCompanies,
+    apply,
+    clear,
+  };
+};
+
+export default useCompaniesFilter;

src/hooks/useOffers/useFilters.js

 import { useEffect, useMemo } from "react";
 import useCategoryFilter from "./useCategoryFilter";
+import useCompaniesFilter from "./useCompanyFilter";
 import useLocationsFilter from "./useLocationsFilter";
 import useSubcategoryFilter from "./useSubcategoryFilter";
 
   const category = useCategoryFilter();
   const subcategory = useSubcategoryFilter();
   const locations = useLocationsFilter();
+  const companies = useCompaniesFilter();
 
   useEffect(() => {
     if (clearAll) {
     category.selectedCategoryLocally,
     subcategory.selectedSubcategoryLocally,
     locations.selectedLocationsLocally,
+    companies.selectedCompaniesLocally,
   ]);
 
   const apply = (immediatelyApply = false, applyAllFilters) => {
     category.apply();
     subcategory.apply();
     locations.apply();
+    companies.apply();
     if (immediatelyApply) applyAllFilters();
   };
 
     category.clear();
     subcategory.clear();
     locations.clear();
+    companies.clear();
   };
 
   return {
     category,
     subcategory,
     locations,
+    companies,
     numOfFiltersChosen,
     apply,
     clear,

src/hooks/useOffers/useLocationsFilter.js

     locations.forEach((locationName) => {
       locationsToPush.push(allLocations.find((p) => p.city === locationName));
     });
-    setSelectedLocations([...locationsToPush])
+    setSelectedLocations([...locationsToPush]);
   };
 
   const apply = () => {

src/i18n/resources/rs.js

     labelPassword: "Lozinka",
     labelFirm: "Ime Firme",
     labelPIB: "PIB",
-    labelPhone: "Telefon",
+    labelPhone: "Telefon (opciono)",
     labelPhoneNumber: "Broj telefona",
-    labelLocation: "Lokacija",
-    labelWebsite: "Adresa Websajta",
+    labelLocation: "Lokacija (opciono)",
+    labelWebsite: "Adresa Websajta (opciono)",
     logout: "Odjavi se",
     next: "Sledeće",
     nextPage: "Sledeća strana",
       title: "Lokacija",
       placeholder: "Pretraži gradove...",
     },
+    company: {
+      title: "Kompanija",
+      placeholder: "Pretraži kompanije...",
+      firstSort: "A-H",
+      secondSort: "I-Q",
+      thirdSort: "R-Z",
+    },
   },
   offer: {
     title: "NASLOV",

src/store/actions/filters/filtersActionConstants.js

 export const SET_CATEGORY = createSetType("FILTERS_SET_CATEGORY");
 export const SET_SUBCATEGORY = createSetType("FILTERS_SET_SUBCATEGORY");
 export const SET_LOCATIONS = createSetType("FILTERS_SET_LOCATIONS");
+export const SET_COMPANY = createSetType("FILTERS_SET_COMPANY");
 export const SET_SORT_OPTION = createSetType("FILTERS_SET_SORT_OPTION");
 export const SET_IS_APPLIED = createSetType("FILTERS_SET_IS_APPLIED");
 export const SET_QUERY_STRING = createSetType("FILTERS_SET_QUERY_STRING");

src/store/actions/filters/filtersActions.js

 import {
   CLEAR_FILTERS,
   SET_CATEGORY,
+  SET_COMPANY,
   SET_FILTERS,
   SET_HEADER_STRING,
   SET_IS_APPLIED,
   type: SET_LOCATIONS,
   payload,
 });
+export const setFilteredCompany = (payload) => ({
+  type: SET_COMPANY,
+  payload,
+});
 export const setFilteredSortOption = (payload) => ({
   type: SET_SORT_OPTION,
   payload,

src/store/reducers/filters/filtersReducer.js

 import {
   CLEAR_FILTERS,
   SET_CATEGORY,
+  SET_COMPANY,
   SET_FILTERS,
   SET_HEADER_STRING,
   SET_IS_APPLIED,
     category: null,
     subcategory: null,
     locations: [],
+    company: [],
     sortOption: null,
     isApplied: false,
     queryString: "",
       categoryString: "",
       subcategoryString: "",
       locationsString: "",
+      companyString: "",
       text: "",
     },
     searchString: "",
     [SET_CATEGORY]: setFilteredCategory,
     [SET_SUBCATEGORY]: setFilteredSubcategory,
     [SET_LOCATIONS]: setFilteredLocations,
+    [SET_COMPANY]: setFilteredCompany,
     [SET_SORT_OPTION]: setFilteredSortOption,
     [SET_IS_APPLIED]: setIsAppliedStatus,
     [SET_HEADER_STRING]: setHeaderString,
     },
   };
 }
+function setFilteredCompany(state, { payload }) {
+  return {
+    ...state,
+    filters: {
+      ...state.filters,
+      company: payload,
+    },
+  };
+}
 function setFilteredSortOption(state, { payload }) {
   return {
     ...state,

src/store/selectors/filtersSelectors.js

   filtersSelector,
   (state) => state.filters.locations
 );
+export const selectSelectedCompany = createSelector(
+  filtersSelector,
+  (state) => state.filters.company
+);
 export const selectSelectedSortOption = createSelector(
   filtersSelector,
   (state) => state.filters.sortOption

src/util/helpers/filterCompanies.js

+export const filterCompanies = (data, regexp) => {
+  return data.filter((company) => {
+    return regexp.test(company?.company?.name);
+  });
+};