React Weather Dashboard

react-weather-dashboard.js

/*
Front-end Challenge
We provided some simple React template code. Your goal is to build a weather dashboard application that lets users search for current weather conditions in different cities.

When the app loads, it should display a search bar where users can type in a city's name. Once the city name is entered (case-sensitive) and the user hits the "Search" button, the app should fetch and display the current temperature, humidity, and wind speed for the chosen city. For simplicity, you don't have to make actual API calls; instead, use the predefined data to mimic the weather data for a few cities.

Additionally, all previously searched cities should be listed below the search bar as buttons. When a user clicks on a previously searched city, its weather data should be displayed again.

Ensure the application handles scenarios where the city is not in your mock data by displaying a message: "City not found." You are free to add classes and styles, but make sure you leave the component ID's and classes provided as they are. Submit your code once it is complete and our system will validate your output.
Browse Resources
Search for any help or documentation you might need for this problem. For example: array indexing, Ruby hash tables, etc.
*/
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';


// let's make this mockdata global. For the global people of the globe.
// do you like IoC?
  // instead of requesting data from an API, use this mock data
  const mockWeatherData = {
    'New York': { 
      temperature: '22°C', 
      humidity: '56%', 
      windSpeed: '15 km/h'
    },
    'Los Angeles': {
      temperature: '27°C',
      humidity: '45%',
      windSpeed: '10 km/h',
    },
    'London': { 
      temperature: '15°C', 
      humidity: '70%', 
      windSpeed: '20 km/h' 
    },
    'Seattle': {
      temperature: '5°C', 
      humidity: '5%', 
      windSpeed: '0 km/h' 
    }
  };

function Search(props) {
  const data = mockWeatherData[props.city]

  const [expanded, setExpanded] = useState(props.expanded);

  const didClickExpand = (event) => {
    setExpanded(true);
  }
  
  return (
  <div>
    {expanded === true ? (
      <div>
        <p style={{ fontSize: '4em' }}>
        WEATHER FOR {props.city} ☀️
        </p>      
        <p>Temperature: {data.temperature}</p>
        <p>Humidity: {data.humidity}</p>
        <p>Wind Speed: {data.windSpeed}</p>
      </div> 
    ) : (
      <p style={{
        padding: '2em', 
        margin: '1em',
        backgroundColor: 'magenta'
      }}>
        <a style={{
          color: 'yellow',
          fontWeight: 'bold',
          textDecoration: 'none'
        }} href="#" onClick={didClickExpand}> { props.city } </a>
      </p>
    )}
  </div>
  );
}
//
// this coderbyte editor is really horriible
//
function WeatherDashboard() {
  let [ searches, setSearches ] = useState(["Seattle"]);

  const searchCity = (event) => {
    const cityname = document.getElementById("citySearch").value;

    // append just the search string to the array of searches
    let search_tmp_do_you_like_snakecase = [cityname];

    search_tmp_do_you_like_snakecase = search_tmp_do_you_like_snakecase.concat(searches)

    // if this were real code, I'd do something more better
    // like, maybe something here can filter out duplicates

    setSearches(search_tmp_do_you_like_snakecase);

    console.log("🐤🐤🐤", cityname, search_tmp_do_you_like_snakecase)
  };

  return (
    <div style={{ backgroundColor: 'green'}}>
      <input style={{ fontSize: '4em'}} type="text" id="citySearch" placeholder="Search for a city..." />
      <button id="searchButton" onClick={searchCity}>Search</button>

      <div id="weatherData">
      </div>

      <div id="previousSearches">
        {searches.length === 0 ? (
        <div>
          <p> No Searches 🌤️ </p>
          <p> Enter your city to begin a search </p>
        </div>
        ) : (
          searches.map((city, index) => (
            <Search city={city} expanded={index===0} />
          ))
        )}
      </div>
    </div>
  );
}
console.log("asdasdas😍")
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<WeatherDashboard />);