85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import PictogramsSeparate from "./PictogramsSeparate";
|
|
import DishList from "./DishList";
|
|
import CircularProgress from "@material-ui/core/CircularProgress";
|
|
import { useParams } from "react-router-dom";
|
|
import { extractTags } from "../../Services";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { fetchRestaurant } from "../../actions";
|
|
import GoogleMapStatic from "./GoogleMapStatic";
|
|
import WorkingHours from "./WorkingHours";
|
|
import Social from "./Social";
|
|
import LunchMenu from "./LunchMenu";
|
|
|
|
export default function Restaurant(props) {
|
|
const restaurant = useSelector((state) => state.restaurant);
|
|
const { id } = useParams();
|
|
const dispatch = useDispatch();
|
|
const showDishList = useSelector((state) => state.data.showDishList);
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchRestaurant(id));
|
|
}, [dispatch, id]);
|
|
|
|
if (restaurant.name) document.title = restaurant.name;
|
|
|
|
return (
|
|
<div className="restaurant-container">
|
|
<div className="restaurant-left">
|
|
<div
|
|
className="restaurant-hero"
|
|
style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
|
|
></div>
|
|
<div className="restaurant-info">
|
|
<h1>{restaurant.name}</h1>
|
|
<p>{restaurant.description}</p>
|
|
<hr />
|
|
<div className="restaurant-pictograms">
|
|
<PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
|
|
</div>
|
|
<hr />
|
|
<h5>Informacje</h5>
|
|
<p>
|
|
Adres:{" "}
|
|
<span className="restaurant-span">
|
|
{restaurant.city}, {restaurant.adress}
|
|
</span>
|
|
</p>
|
|
{restaurant.phone && (
|
|
<p>
|
|
Kontakt:{" "}
|
|
<span className="restaurant-span">{restaurant.phone}</span>
|
|
</p>
|
|
)}
|
|
{restaurant.links && (
|
|
<Social
|
|
facebook={restaurant.links.facebook}
|
|
instagram={restaurant.links.instagram}
|
|
www={restaurant.links.www}
|
|
/>
|
|
)}
|
|
<WorkingHours hours={restaurant.workingHours} />
|
|
{restaurant.lunchHours && <h5>Lunch menu</h5>}
|
|
{restaurant.lunchHours && (
|
|
<p style={{ color: "#bbbbbb", fontWeight: 400 }}>{restaurant.lunchHours}</p>
|
|
)}
|
|
<hr />
|
|
<h5>Lokalizacja</h5>
|
|
{restaurant.location && (
|
|
<GoogleMapStatic coordinates={restaurant.location.coordinates} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="restaurant-content">
|
|
<div className="restaurant-dishes">
|
|
{!showDishList && <CircularProgress />}
|
|
{(showDishList && restaurant.lunchMenu) && <LunchMenu restaurant={restaurant} />}
|
|
<h3>Menu</h3>
|
|
{!showDishList && <CircularProgress />}
|
|
{showDishList && <DishList />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|