<file_sep>import React, { useState, useEffect } from "react";

const SearchInput = (props) => {
  const [searchParams, setSearchParams] = useState("");
  const [suggestions, setSuggestions] = useState([]);
  const [display, setDisplay] = useState(false)
    const displayBtn = () => {
      if (searchParams.length > 2)
        setDisplay(!display)
    }

  useEffect(() => {
    const fetchAutoComplete = async () => {
      let fetchedSuggestions = [];
      console.log("asd");
      if (searchParams.length > 2) {
        try {
          const response = await fetch(
            `https://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=<KEY>&q=${searchParams}`
          );
          console.log(response)
          const responseData = await response.json();
          console.log(responseData)
          fetchedSuggestions = responseData.map((el) => el.LocalizedName);
          fetchedSuggestions = [...new Set(fetchedSuggestions)];
          console.log(fetchedSuggestions);
          setSuggestions(fetchedSuggestions);
          displayBtn();
        } catch (err) {
          return (
            <div>
              <h2>Some Error Happend!</h2>
            </div>
          );
        }
      }
    };
    if (searchParams.length > 2) {
      fetchAutoComplete();
    } else {
      return;
    }
  }, [searchParams]);

  
  return (
    <div>
      <div className="homepage">
        <div className="homepage-search-bar">
          <div className="homepage-search-bar--input-div"></div>
          <input placeholder="City Location" className="homepage-search-input" value={searchParams} onChange={(e) => setSearchParams(e.target.value)} />
          <div className="homepage-search--icon">
            <i onClick={() => props.fetchData(searchParams)} className="gg-search"  ></i>
          </div>
        </div>
        { display &&  <ul className="AutoComlete" >
          {suggestions.map((city) => ( 
            <li onClick={() =>  displayBtn() + props.fetchData(searchParams) + setSearchParams(city)} key={city} style={{cursor:'pointer'}}> {city}   </li>
          ))}
        </ul>}
      </div>
    </div>
  );
};

export default SearchInput;<file_sep>import React from "react";
import { NavLink } from "react-router-dom";

const MainHeader = () => {
  const openMenu = () => {
    document.querySelector(".sidebar").classList.add("open");
  };
  const closeMenu = () => {
    document.querySelector(".sidebar").classList.remove("open");
  };
  return (
    <div className="navigation-header">
      <aside className="sidebar">
        <h3 className='menu-header'>Menu</h3>
        <button className="sidebar-close-button" onClick={closeMenu}>
          x
        </button>
        <ul>
          <li>
            <NavLink className='list-side-menu' onClick={closeMenu} to="/" exact>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink className='list-side-menu' onClick={closeMenu} to="/favorites">
              Favorites
            </NavLink>
          </li>
        </ul>
      </aside>
      <button className="hamburger-btn" onClick={openMenu}>
        &#9776;
      </button>
      <h2 className='main-header'>Weather App</h2>
      <div className="navigation-header-nav-links">
        <ul className="nav-links">
          <li>
            <NavLink to="/" exact>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/favorites">Favorites</NavLink>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default MainHeader;
<file_sep>import React from "react";
import DailyBox from "../components/DailyBox";
import { useHistory } from "react-router-dom";

const Favorites = (props) => {
  const history = useHistory();
  const getDayFromDate = (date) => {
    const localeDateString = date.slice(0, 10).replace(/-/g, "/");
    return localeDateString;
  };

  const redirectToFavoriteLocation = (weatherObj, cityObj) => {
    props.setHomeScreen(weatherObj, cityObj);
    history.push("/");
  };

  return (
    <div>
      <h2>Favorites</h2>
      <div>
        <ul className="favorites-list">
          {props.favorites.map((el, i) => (
            <DailyBox
              onClick={() => redirectToFavoriteLocation(el.daysData, el.city)}
              key={el.Date + i}
              city={el.city.LocalizedName}
              date={getDayFromDate(el.Date)}
              temp={el.Temperature.Maximum.Value}
              weather={el.Day.IconPhrase}
            />
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Favorites;<file_sep>import React from "react";
import LocationBoxData from "../components/LocationBoxData";
import SearchInput from "../components/SearchInput";

const HomePage = (props) => {
  return (
    <React.Fragment>
      <SearchInput fetchData={props.fetchData} />
      <LocationBoxData city={props.city} daysData={props.daysData} addToFavorites={props.addToFavorites} removeFromFavorites={props.removeFromFavorites}
        favorites={props.favorites} />
    </React.Fragment>
    
  );
};

export default HomePage;
<file_sep>import React from "react";

const DailyBox = (props) => {
    
  return (
    
    <li onClick={props.onClick} >
      {props.city ? <p>{props.city}</p> : null}
      {props.weather === "Sunny"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/01-s.png" /> : null}
      {props.weather === "Mostly sunny"? <img alt="suny" src="https://developer.accuweather.com/sites/default/files/02-s.png" /> : null}
      {props.weather === "Partly sunny"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/03-s.png" /> : null}
      {props.weather === "Intermittent clouds"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/04-s.png" /> : null}
      {props.weather === "Hazy Sunshine"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/05-s.png" /> : null}
      {props.weather === "Mostly cloudy"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/06-s.png" /> : null}
      {props.weather === "Cloudy"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/07-s.png" /> : null}
      {props.weather === "Dreary (Overcast)"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/08-s.png" /> : null}
      {props.weather === "Fog"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/11-s.png" /> : null}
      {props.weather === "Showers"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/12-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ Showers"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/13-s.png" /> : null}
      {props.weather === "Partly Sunny w/ Showers"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/14-s.png" /> : null}
      {props.weather === "T-Storms"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/15-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ T-Storms"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/16-s.png" /> : null}
      {props.weather === "Partly Sunny w/ T-Storms"? <img alt="sun" src="hhttps://developer.accuweather.com/sites/default/files/17-s.png" /> : null}
      {props.weather === "Flurries"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/19-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ Flurries"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/20-s.png" /> : null}
      {props.weather === "Partly Sunny w/ Flurries"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/21-s.png" /> : null}
      {props.weather === "Snow"? <img alt="suny" src="https://developer.accuweather.com/sites/default/files/22-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ Snow"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/23-s.png" /> : null}
      {props.weather === "Ice"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/24-s.png" /> : null}
      {props.weather === "Sleet"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/25-s.png" /> : null}
      {props.weather === "Freezing Rain"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/26-s.png" /> : null}
      {props.weather === "Rain and Snow"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/29-s.png" /> : null}
      {props.weather === "Hot"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/30-s.png" /> : null}
      {props.weather === "Cold"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/31-s.png" /> : null}
      {props.weather === "Windy"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/32-s.png" /> : null}
      {props.weather === "Clear"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/33-s.png" /> : null}
      {props.weather === "Mostly Clear"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/34-s.png" /> : null}
      {props.weather === "Partly Cloudy"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/35-s.png" /> : null}
      {props.weather === "Intermittent Clouds"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/36-s.png" /> : null}
      {props.weather === "Hazy Moonlight"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/37-s.png" /> : null}
      {props.weather === "Partly Cloudy w/ Showers"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/39-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ Showers"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/40-s.png" /> : null}
      {props.weather === "Partly Cloudy w/ T-Storms"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/41-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ T-Storms"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/42-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ Flurries"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/43-s.png" /> : null}
      {props.weather === "Mostly Cloudy w/ Snow"? <img alt="sun" src="https://developer.accuweather.com/sites/default/files/44-s.png" /> : null}
      <p>{props.date}</p>
      <b>
        <p>{props.temp}* F</p>
      </b>
  
      <p > {props.weather} </p>
       
    </li>
  );
};

export default DailyBox;
<file_sep>import React, { useState, useEffect } from "react";
import "./App.css";
import MainHeader from "./components/MainHeader";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import HomePage from "./pages/HomePage";
import Favorites from "./pages/Favorites";

function App() {
  const [city, setCity] = useState({});
  const [daysData, setDaysData] = useState({});
  const [favorites, setFavorites] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(false);

  const setHomeScreen = (favoriteWeatherObj, favoriteCityObj) => {
    setCity(favoriteCityObj);
    setDaysData(favoriteWeatherObj);
  };

  const fetchData = async (searchParams = "tel aviv") => {
    setIsLoading(true);
    try {
      const response = await fetch(
        `http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=<KEY>&q=${searchParams}`
      );
      const responseData = await response.json();
      setCity(responseData[0]);
      const weatherResponse = await fetch(
        `http://dataservice.accuweather.com/forecasts/v1/daily/5day/${responseData[0].Key}?apikey=<KEY>`
      );
      const weatherResponseData = await weatherResponse.json();
      setDaysData(weatherResponseData);
    } catch (err) {
      setError(err.message);
    }
    setIsLoading(false);
  };


  const addToFavorites = (dailyWeather, city) => {
    setFavorites([...favorites, { ...dailyWeather, city, daysData }]);
  };

  const removeFromFavorites = (key) => {
    const newFavorites = favorites.filter((el) => el.city.Key !== key);
    setFavorites(newFavorites);
  };


  useEffect(() => {
    fetchData();
  }, []);

  if (isLoading) return <div>Loading...</div>;

  if (error) return <div>{error}</div>;

  return (
    <BrowserRouter>
      <MainHeader />
      <main>
        <Switch>
          <Route path="/" exact component={() => ( <HomePage city={city} daysData={daysData} addToFavorites={addToFavorites} removeFromFavorites={removeFromFavorites}
                favorites={favorites} fetchData={fetchData} /> )} />

          <Route path="/favorites" exact component={() => ( <Favorites setHomeScreen={setHomeScreen} favorites={favorites} /> )} />
          <Redirect to="/" />
        </Switch>
      </main>
    </BrowserRouter>
  );
}

export default App;<file_sep>self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "9ee83975ba7d3a152b0ba98f4de00e62",
    "url": "/weather/index.html"
  },
  {
    "revision": "9ac<KEY> <PASSWORD>",
    "url": "/weather/static/css/main.4d16ea8a.chunk.css"
  },
  {
    "revision": "ce99c7804a10e5cd6f9e",
    "url": "/weather/static/js/2.f5727f7a.chunk.js"
  },
  {
    "revision": "c64c486544348f10a6d6c716950bc223",
    "url": "/weather/static/js/2.f5727f7a.chunk.js.LICENSE.txt"
  },
  {
    "revision": "9<KEY>",
    "url": "/weather/static/js/main.28ee2fc1.chunk.js"
  },
  {
    "revision": "9eb98cf7fbd675a7fd34",
    "url": "/weather/static/js/runtime-main.c0a41632.js"
  }
]);