File: apps/Front-End-App/src/App.js

import "./App.css";
import {useEffect, useState} from "react";
import axios from "axios";
import nextId from "react-id-generator";


function App() {
    const [hotels, setHotels] = useState([]);
    const [initSearchValues, setInitSearchValues] = useState({
        provider: '',
        city: '',
        fromDate: '',
        toDate: '',
        numberOfAdults: ''
    });


    const htmlId = nextId();
    useEffect(() => {
        axios.get('https://api.hotels.test/hotels')
            .then(response => setHotels(response.data));

    }, []);

    function handleChange(event) {
        const {name, value} = event.target;
        setInitSearchValues({...initSearchValues, [name]: value})
    }

    function handleSearchFormSubmit(event) {
        axios.get('https://api.hotels.test/hotels/search', {params: initSearchValues})
            .then(response => setHotels(response.data));
        event.preventDefault();
    }

  return (
    <div className="app">
        <div className={'container'}>
            <form style={{padding: '30px'}} onSubmit={handleSearchFormSubmit}>
                <input type="text" name={'provider'} placeholder={'Provider Name'} value={initSearchValues.provider} onChange={handleChange} />
                <input type="text" name={'city'} placeholder={'City'} value={initSearchValues.city} onChange={handleChange} />
                <input type="date" name={'fromDate'} placeholder={'From Date'} value={initSearchValues.fromDate} onChange={handleChange} />
                <input type="date" name={'toDate'} placeholder={'To Date'} value={initSearchValues.toDate} onChange={handleChange} />
                <input type="number" max={10} name={'numberOfAdults'} placeholder={'Number of adults'} value={initSearchValues.numberOfAdults} onChange={handleChange} />
                <input type={'submit'} value={'Search'} />
            </form>
        </div>

        {
            hotels.map(elem => (
               <div key={htmlId + Math.random()} className={'container'}>
                   <div className={'card'}>
                       <h3 className={'title'}>{elem.hotelName}</h3>
                       <ul className={'details'}>
                           <li>provider : {elem.provider}</li>
                           <li>Rate : {elem.rate}</li>
                           <li>Fare : {elem.fare}</li>
                       </ul>
                       <div className={'amenities'}>
                           {
                               elem.amenities.map(amen => (
                                   <div key={htmlId + Math.random()} className={'amenities-item'}>{amen}</div>
                               ))
                           }
                       </div>
                   </div>
               </div>
            ))
        }
    </div>
  );
}

export default App;