+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {state.value === 0 ? (
+
+
+ Ups... There is not propierties with the filters that you choosed
+
+
+ ) : (
+ <>
+
+ {state.value.map(
+ ({
+ id,
+ image,
+ province,
+ offer,
+ street,
+ type,
+ description,
+ price,
+ room,
+ bath,
+ size,
+ }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {offer}{" "}
+ {type} {province}
+
+
+ {description}
+
+
+ {street}
+
+
+
+
+
+
+ {price} €
+
+
+
+
+
+
+
+ {room} Room
+
+
+
+
+
+
+ {bath} Bath
+
+
+
+
+
+
+ {size} m2
+
+
+
+
+ );
+ }
+ )}
+
+ >
+ )}
+
+ );
+};
+
+export default CounterControls;
diff --git a/src/components/Propierties/style.js b/src/components/Propierties/style.js
new file mode 100644
index 0000000..b9bc2b6
--- /dev/null
+++ b/src/components/Propierties/style.js
@@ -0,0 +1,97 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+export default makeStyles(() => ({
+ root: {
+ display: "flex",
+ minWidth: "234px",
+ justifyContent: "center",
+ flexDirection: "column",
+ margin: "30px",
+ marginTop: "100px",
+ },
+ container: {
+ display: "flex",
+ flexDirection: "row",
+ },
+ info: {
+ display: "flex",
+ flexDirection: "row",
+ },
+ media: {
+ width: "270px",
+ height: "200px",
+ borderRadius: "3px",
+ },
+ paper: {
+ padding: "2%",
+ marginBottom: "20px",
+ width: "60%",
+ },
+ toolbarContainer: {
+ width: "100%",
+ },
+ toolbar: {
+ width: "100%",
+ marginBottom: "40px !important",
+ marginTop: "20px",
+ },
+ back: {
+ marginTop: "10%",
+ },
+ noData: {
+ width: "40%",
+ textAlign: "center",
+ marginLeft: "30%",
+ },
+ listContainer: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ input: {
+ width: "80%",
+ marginTop: "20px",
+ marginBottom: "30px",
+ flex: 1,
+ padding: "5px",
+ backgroundColor: "#e0e0e0",
+ },
+ inputItem: {
+ width: "50%",
+ },
+ iconButton: {
+ marginTop: "-4px !important",
+ backgroundColor: "#FFDC00 !important",
+ borderRadius: "3px !important",
+ padding: "9px !important",
+ },
+ title: {
+ fontWeight: "bold",
+ marginBottom: "20px",
+ },
+ offer: {
+ padding: "1%",
+ color: "#fff",
+ backgroundColor: "#FF5151",
+ borderRadius: "5px",
+ },
+ price: {
+ backgroundColor: "#A6FFC1",
+ padding: "5px 10px 5px 10px",
+ borderRadius: "5px",
+ fontWeight: "bold",
+ },
+ iconItem: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ marginRight: "15px",
+ },
+ iconContainer: {
+ marginTop: "10px",
+ alignItems: "center",
+ textAlign: "center",
+ },
+}));
diff --git a/src/components/constants.js b/src/components/constants.js
new file mode 100644
index 0000000..6fb790c
--- /dev/null
+++ b/src/components/constants.js
@@ -0,0 +1 @@
+export const token = localStorage.getItem('token');
\ No newline at end of file
diff --git a/src/components/search/searcherInput.jsx b/src/components/search/searcherInput.jsx
new file mode 100644
index 0000000..57c2a0b
--- /dev/null
+++ b/src/components/search/searcherInput.jsx
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import $ from "jquery";
+
+import { TextField, Button } from "@material-ui/core";
+import RoomIcon from "@material-ui/icons/Room";
+import { Autocomplete } from "@material-ui/lab";
+import useStyles from "./style";
+
+import { getPropiertiesByCityName } from "../../redux/counter/actions";
+
+export default function InputText() {
+ const [inputValue, setInputValue] = useState("");
+ const [citySearched, setCitySearched] = useState([]);
+
+ const dispatch = useDispatch();
+ const classes = useStyles();
+
+ let cities = [];
+
+ $.ajax({
+ url: "http://localhost:8100/api/properties",
+ type: "GET",
+ headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+ success: (res) => {
+ res.data.map((item) => {
+ var find = cities.indexOf(item.city) > -1;
+ if (find === true) {
+ } else {
+ cities.push(item.city);
+ }
+ return find;
+ });
+ },
+ });
+
+ const handelChange = (event, value) => {
+ //setInputValue(e);
+ setCitySearched(value);
+ setInputValue(value);
+ };
+
+ async function handlePropietiesByCity(e) {
+ e.preventDefault();
+ dispatch(getPropiertiesByCityName(inputValue));
+ }
+
+ return (
+ <>
+