split data and controls sections. added icon for weather condition

src/components/ControlsSection/ControlsSection.css

@@ -0,0 +1,6 @@
+.controls-section {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  margin-top: 2rem;
+}

src/components/ControlsSection/ControlsSection.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+import LocationSelector from '../LocationSelector';
+import TemperatureToggle from '../TemperatureToggle';
+import { TemperatureUnit, Location } from '../../sharedTypes';
+import './ControlsSection.css';
+
+interface ControlsSectionProps {
+  selectedLocation: Location;
+  selectedTemperatureUnit: TemperatureUnit;
+  onTemperatureToggle: (unit: TemperatureUnit) => void;
+  onLocationChange: (location: Location) => void;
+}
+
+const ControlsSection: FunctionComponent<ControlsSectionProps> = ({
+  selectedLocation,
+  selectedTemperatureUnit,
+  onTemperatureToggle,
+  onLocationChange,
+}) => (
+  <section className="controls-section">
+    <LocationSelector
+      value={selectedLocation}
+      onChange={onLocationChange}
+    />
+    <TemperatureToggle
+      value={selectedTemperatureUnit}
+      onToggle={onTemperatureToggle}
+    />
+  </section>
+);
+
+export default ControlsSection;

src/components/ControlsSection/index.ts

@@ -0,0 +1 @@
+export { default } from './ControlsSection';

src/components/DataSection/DataSection.css

@@ -0,0 +1,33 @@
+.data-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2rem;
+  width: 100%;
+  color: white;
+  text-align: center;
+  font-size: 8rem;
+  font-weight: bold;
+}
+
+.data-section.placeholder {
+  font-size: 3rem;
+}
+
+.weather-icon {
+  margin-top: 2rem;
+  height: 8rem;
+  width: auto;
+}
+
+@media only screen and (max-width: 600px) {
+  .data-section {
+    font-size: 6rem;
+  }
+
+  .weather-icon {
+    margin-top: 1rem;
+    height: 6rem;
+    width: auto;
+  }
+} 

src/components/DataSection/DataSection.tsx

@@ -0,0 +1,60 @@
+import React, { FunctionComponent } from 'react';
+import { TemperatureUnit, Location } from '../../sharedTypes';
+import useOpenWeatherQuery from '../../hooks/useOpenWeather';
+import './DataSection.css';
+import { OPEN_WEATHER_ICONS_ENDPOINT } from '../../config';
+
+interface DataSectionProps {
+  selectedLocation: Location;
+  selectedTemperatureUnit: TemperatureUnit;
+}
+
+const DataSection: FunctionComponent<DataSectionProps> = ({
+  selectedLocation,
+  selectedTemperatureUnit,
+}) => {
+  const {
+    data,
+    error,
+    loading,
+  } = useOpenWeatherQuery({
+    location: selectedLocation,
+    temperatureUnit: selectedTemperatureUnit,
+  });
+
+  if (loading) {
+    return (
+      <section className="data-section placeholder">
+        <p>Loading...</p>
+      </section>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <section className="data-section placeholder">
+        <p>Something went wrong...</p>
+        {error && <p>{error.message}</p>}
+      </section>
+    );
+  }
+
+  const { main, weather } = data;
+
+  const tempValue = main.temp.toFixed();
+  const tempSymbol = selectedTemperatureUnit === 'celsius' ? '°C' : '°F';
+  const weatherIcon = weather[0].icon; // first element is the "primary"
+
+  return (
+    <section className="data-section">
+      <span>{`${tempValue} ${tempSymbol}`}</span>
+      <img
+        className="weather-icon"
+        alt="weather-icon"
+        src={`${OPEN_WEATHER_ICONS_ENDPOINT}${weatherIcon}@2x.png`}
+      />
+    </section>
+  );
+};
+
+export default DataSection;

src/components/DataSection/index.ts

@@ -0,0 +1 @@
+export { default } from './DataSection';

src/components/MainContent/MainContent.css

@@ -7,21 +7,3 @@
   max-width: 60rem;
   margin: 0 auto; /* will center automatically */
 }
-
-.main-content > section {
-  width: 100%;
-  margin-top: 2rem;
-}
-
-.controls-section {
-  display: flex;
-  justify-content: space-evenly;
-}
-
-.data-display-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: white;
-  text-align: center;
-}

src/components/MainContent/MainContent.tsx

@@ -1,44 +1,25 @@
 import React, { FunctionComponent, useState } from 'react';
-import LocationSelector from '../LocationSelector';
-import TemperatureToggle from '../TemperatureToggle';
 import { TemperatureUnit, Location } from '../../sharedTypes';
-import useOpenWeatherQuery from '../../hooks/useOpenWeather';
+import ControlsSection from '../ControlsSection';
+import DataSection from '../DataSection';
 import './MainContent.css';
 
 const MainContent: FunctionComponent = () => {
   const [location, setLocation] = useState<Location>('lisbon');
   const [temperatureUnit, setTemperatureUnit] = useState<TemperatureUnit>('celsius');
 
-  const {
-    data,
-    error,
-    loading,
-  } = useOpenWeatherQuery({ location, temperatureUnit });
-
   return (
     <main className="main-content">
-      <section className="controls-section">
-        <LocationSelector
-          value={location}
-          onChange={(event) => {
-            const value = event.target.value as Location;
-            setLocation(value);
-          }}
-        />
-        <TemperatureToggle
-          value={temperatureUnit}
-          onToggle={setTemperatureUnit}
-        />
-      </section>
-      <section className="data-display-section">
-        {loading && <p>loading...</p>}
-        {(error || !data) && (
-          <>
-            <p>Something went wrong...</p>
-            {error && <p>{error.message}</p>}
-          </>
-        )}
-      </section>
+      <ControlsSection
+        selectedLocation={location}
+        selectedTemperatureUnit={temperatureUnit}
+        onLocationChange={setLocation}
+        onTemperatureToggle={setTemperatureUnit}
+      />
+      <DataSection
+        selectedLocation={location}
+        selectedTemperatureUnit={temperatureUnit}
+      />
     </main>
   );
 };