App.js

import React, {Component} from 'react';
import './App.css';
import logoSmartPoint from './images/logo_petit.png'
import GoogleMapReact from 'google-map-react';
import Restaurant from "./components/Restaurant";
import Marker from "./components/Marker";
import RestaurantDetails from "./components/RestaurantDetails";
import Slider from "./components/Slider";
import RestaurantData from "./RestaurantData";


class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            restaurants: [],
            allRestaurants: [],
            selectedRestaurant: null,
            hoveredRestaurant: null,
            search: "",
            selectedMarker: null,
            hoveredMarker: null,

            value: {
                min: 0,
                max: 5,
            },
        };
    }

    async fetchJsonData() {
        const url = "/data.json";
        const response = await fetch(url);
        const data = await response.json();

        let restaurants = [];
        for (let i = 0; i < data.length; i++) {
            const restaurant = new RestaurantData(data[i].restaurantName, data[i].imageUrl, data[i].address, data[i].lat, data[i].long, data[i].id);
            restaurants.push(restaurant);
            for (let j = 0; j < data[i].ratings.length; j++) {
                restaurant.addRating(data[i].ratings[j].stars, data[i].ratings[j].comment);
            }
        }
        this.setState({
            restaurants: restaurants,
            allRestaurants: restaurants
        });
    }

    componentDidMount() {
        // noinspection JSIgnoredPromiseFromCall
        this.fetchJsonData();
    }

    selectRestaurant = (restaurant) => {
        this.setState({
            selectedRestaurant: restaurant
        })
    };

    hoveredRestaurant = (restaurant) => {
        this.setState({
            hoveredRestaurant: restaurant
        })
    };

    hoveredMarker = (marker) => {
        this.setState({
            hoveredMarker: marker
        })
    };

    handleSearch = (event) => {
        this.setState({
            search: event.target.value,
            restaurants: this.state.allRestaurants.filter((restaurant) => new RegExp(event.target.value, "i").exec(restaurant.restaurantName))
        });
    };

    handleFilter = (event) => {
        this.setState({
            search: event.target.value,
            restaurants: this.state.allRestaurants.filter((restaurant) => new RegExp(event.target.value, "i").exec(restaurant.getRating()))
        });
    };


    render() {
        let center = {
            lat: 48.864716,
            lng: 2.349014
        };

        let restaurantDetails = null;
        let restaurantsDisplay =
            <div className="restaurants">
                {this.state.restaurants.map((restaurant) => {
                    return <Restaurant
                        key={restaurant.restaurantName}
                        restaurant={restaurant}
                        selectRestaurant={this.selectRestaurant}
                        hoverRestaurant={this.hoveredRestaurant}
                        selectedMarker={restaurant === this.state.selectedMarker}
                        hoveredMarker={restaurant === this.state.hoveredMarker}
                    />
                })}
            </div>;

        if (this.state.selectedRestaurant) {
            center = {
                lat: this.state.selectedRestaurant.lat,
                lng: this.state.selectedRestaurant.long
            };
            restaurantDetails =
                <div>
                    <RestaurantDetails
                            key={this.state.selectedRestaurant.restaurantName}
                            restaurant={this.state.selectedRestaurant}
                            selectRestaurant={this.selectRestaurant}
                        />
                </div>;
            restaurantsDisplay = null;
        }

        return (
            <div className="body">
                <div className="header">
                    <div className="head container">
                        <div className="head-first-part">
                            <a href="http://localhost:3000/"><img className="logo" src={logoSmartPoint} alt={logoSmartPoint}/></a>
                        <input
                            className="search"
                            type="text"
                            placeholder="Recherche..."
                            value={this.state.search}
                            onChange={this.handleSearch}
                        />
                        </div>
                            <div className="filterInterface row">
                                <p className="filterText col-6">Filtrer par note :</p>
                                <Slider
                                    search={this.state.search}
                                    value={this.state.search}
                                    restaurant={this.state.allRestaurants}
                                />
                            </div>
                    </div>
                </div>
                <div className="app container">
                    <div className="main">
                        {restaurantDetails}
                        {restaurantsDisplay}
                    </div>
                    <div className="map">
                        <GoogleMapReact
                            bootstrapURLKeys={{key: ""}}
                            center={center}
                            zoom={12}
                        >
                            {this.state.restaurants.map((restaurant) => {
                                return <Marker
                                    key={restaurant.restaurantName}
                                    lat={restaurant.lat}
                                    lng={restaurant.long}
                                    text={restaurant.id}
                                    selectMarker={this.selectRestaurant}
                                    hoverMarker={this.hoveredMarker}
                                    selected={restaurant === this.state.selectedRestaurant}
                                    hovered={restaurant === this.state.hoveredRestaurant}
                                    marker={restaurant}

                                />
                            })}
                        </GoogleMapReact>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;