eamonnboyle

...
const App: FC = () => {
  const [locations, setLocations] = useState<WeatherLocation[]>([]);
  const [error, setError] = useState('');
  const [warning, setWarning] = useState('');
  ...

eamonnboyle

  ...
  return (
    <div className="container">
      <h1>Weather App</h1>

      <LocationSearch onSearch={addLocation}/>
      {
        error
          ? <div className={`alert alert-danger`}>{error}</div>
          : null

eamonnboyle

...
const resetAlerts = () => {
  setError('');
  setWarning('');
}

const addLocation = async (term: string) => {
  resetAlerts();
  const location = await searchLocation(term);
  

eamonnboyle

interface LocationTableProps {
  locations: WeatherLocation[];
}

export const LocationTable: FC<LocationTableProps> = ({locations}) =>
  <div>
    ...
      <tbody>
      {locations.map(location =>
        <tr key={location.id}><td>{location.name}</td></tr>

eamonnboyle

const App: FC = () => {
  const [currentLocation, setCurrentLocation] = useState<WeatherLocation | null>(null);
  ...
  return (
    ...
      <LocationTable locations={locations}
                     current={currentLocation}
                     onSelect={location => setCurrentLocation(location)}/>

eamonnboyle

import React, {FC} from "react";
import {WeatherLocation} from "../model/Weather";

interface LocationTableProps {
  locations: WeatherLocation[];
  current: WeatherLocation | null;
  onSelect: (location: WeatherLocation) => void;
}

export const LocationTable: FC<LocationTableProps> = ({locations, onSelect, current}) =>

eamonnboyle

export interface WeatherConditions {
  id: number;
  main: string;
  description: string;
  icon: string;
}

export interface MainWeatherData {
  temp: number;
  feels_like: number;

eamonnboyle

export async function readWeather(locationId: number): Promise<Weather> {
  const current = await fetch(`${server}/weather?id=${locationId}&${keyQuery}&units=metric`);

  if (current.status !== 200) throw new Error('Failed to read location data');

  return await current.json();
}

eamonnboyle

export function getIconUrl(code: string): string {
  return `http://openweathermap.org/img/wn/${code}.png`;
}

eamonnboyle

import React, {FC} from "react";
import {Weather} from "../model/Weather";
import {getIconUrl} from "../services/WeatherService";

interface WeatherEntryProps {
    weather: Weather;
}

function convertUnixTimeToDate(unixUtc: number): Date {
  return new Date(unixUtc * 1000);