Weather Component Example

WeatherComponent.tsx

/** api.ts */
/* you can assume that all these imports work */
import { API_URL } from './consts';
export async function fetchWeather({ location }): Promise<DayWeather[]> {
  return (await fetch(`${API_URL}/weather?zipCode=${location}`)).json();
}

/** WeatherList.tsx */
/* you can assume that all these imports work */
import React, { useState, useEffect } from 'react';
import { fetchWeather } from './api';
import { WeatherDisplayList, WeatherDisplayItem } from './components';
import { DayWeather } from './types';
function WeatherList({ location }: any): React.Component {
  const [weatherData, setWeatherData] = useState<DayWeather[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  useEffect(async () => {
    setIsLoading(true);
    const apiWeatherData = await fetchWeather({ location });
    setWeatherData(apiWeatherData);
  });
  return isLoading ? (
    <Loader />
  ) : (
    <WeatherDisplayList>
      {weatherData.forEach((e) => (
        <WeatherDisplayItem weather={e} />
      ))}
    </WeatherDisplayList>
  );
}
export default WeatherList;

/** WeatherList.test.tsx */
/* you can assume that all these imports work */
import React from 'react';
import WeatherList from './WeatherList.tsx';
import { describe, it, render } from 'testing-utils';
describe('WeatherList', () => {
  it('renders', () => {
    const component = render(<WeatherList location="90210" />);
  });
});