Using open weather map api

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
     "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/App.module.css

@@ -1,5 +1,5 @@
 .app {
-  height: 100vh;
+  min-height: 100vh;
   background-image: url(https://wallpaperaccess.com/full/2629319.png);
   background-size: cover;
   display: flex;
@@ -8,6 +8,7 @@
 }
 
 .weather {
+  margin: 60px;
   background: white;
   border-radius: 32px;
   box-shadow: 0 0 16px rgb(0, 0, 0, 0.5);

src/apis/getWeather/getWeather.js

@@ -0,0 +1,7 @@
+import OpenWeatherMap from '../../utils/OpenWeatherMap';
+
+export default (id) => OpenWeatherMap.get('/weather', {
+  params: {
+    id,
+  },
+});

src/apis/getWeather/index.js

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

src/apis/getWeathers/getWeathers.js

@@ -0,0 +1,7 @@
+import OpenWeatherMap from '../../utils/OpenWeatherMap';
+
+export default (ids) => OpenWeatherMap.get('/group', {
+  params: {
+    id: ids.join(','),
+  },
+});

src/apis/getWeathers/index.js

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

src/components/Current/Current.js

@@ -1,34 +1,77 @@
+import axios from 'axios';
 import React from 'react';
 import styles from './Current.module.css';
 import Meta from './components/Meta';
 import Text from './components/Text';
 import Temperature from '../Temperature';
 import VerticalDivider from '../VerticalDivider';
+import getWeather from '../../apis/getWeather';
 
-const Current = () => (
-  <div className={styles.current}>
-    <div className={styles.left}>
-      <div className={styles.temperature}>
-        <Temperature>12</Temperature>
-      </div>
-      <div className={styles.weather}>
-        <Text>CLOUDY</Text>
-      </div>
-      <div className={styles.metas}>
-        <div className={styles.humidity}>
-          <Meta title="HUMIDITY" value="64%" />
-        </div>
-        <VerticalDivider width="2px" color="rgba(255, 255, 255, 0.7)" />
-        <div className={styles.wind}>
-          <Meta title="WIND" value="12 K/M" />
-        </div>
+const DEFAULT_CITY = {
+  name: 'Melbourne',
+  id: '2158177',
+};
+
+class Current extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: null,
+      loading: true,
+    }
+  }
+
+  componentDidMount() {
+    this.getWeather();
+  }
+
+  async getWeather() {
+    const { id } = DEFAULT_CITY;
+
+    const { data } = await getWeather(id);
+
+    this.setState({
+      data,
+      loading: false,
+    });
+  }
+
+  render() {
+    const { data, loading } = this.state;
+
+    return (
+      <div className={styles.current}>
+        {loading ? (
+          <div className={styles.loading}>Loading...</div>
+        ) : (
+          <React.Fragment>
+            <div className={styles.left}>
+              <div className={styles.temperature}>
+                <Temperature>{data.main.temp}</Temperature>
+              </div>
+              <div className={styles.weather}>
+                <Text>{data.weather[0].main}</Text>
+              </div>
+              <div className={styles.metas}>
+                <div className={styles.humidity}>
+                  <Meta title="HUMIDITY" value={`${data.main.humidity}%`} />
+                </div>
+                <VerticalDivider width="2px" color="rgba(255, 255, 255, 0.7)" />
+                <div className={styles.wind}>
+                  <Meta title="WIND" value={`${data.wind.speed} K/M`} />
+                </div>
+              </div>
+            </div>
+            <div className={styles.right}>
+            <h1 className={styles.city}>{data.name}</h1>
+            </div>
+          </React.Fragment>
+        )}
+        <div className={styles.bottom} />
       </div>
-    </div>
-    <div className={styles.right}>
-      <h1 className={styles.city}>Melbourne</h1>
-    </div>
-    <div className={styles.bottom} />
-  </div>
-);
+    );
+  }
+}
 
 export default Current;

src/components/Current/Current.module.css

@@ -45,6 +45,7 @@
 .metas {
   margin-top: 3rem;
   display: flex;
+  justify-content: space-around;
 }
 
 .humidity {

src/components/Forecast/Forecast.module.css

@@ -1,6 +1,6 @@
 .forecast {
   display: flex;
-  padding: 0 96px;
+  padding: 0 56px;
   align-items: center;
 }
 

src/components/Forecast/components/Weather/Weather.module.css

@@ -5,7 +5,7 @@
 }
 
 .day {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   margin-bottom: 1rem;
   font-weight: 200;
 }
@@ -16,7 +16,7 @@
 }
 
 .description {
-  font-size: 1rem;
+  font-size: 0.75rem;
   color: rgba(0, 0, 0, 0.5);
   font-weight: bold;
 }

src/components/OtherCities/OtherCities.js

@@ -1,28 +1,73 @@
 import React from 'react';
 import styles from './OtherCities.module.css';
 import City from './components/City';
+import getWeathers from '../../apis/getWeathers';
 
-const OtherCities = () => (
-  <div className={styles.otherCities}>
-    <h2 className={styles.header}>Other Cities</h2>
-    <div className={styles.cities}>
-      <City 
-        name="Sydney" 
-        temperature="13"
-        weather={{ icon: '09d', description: 'Rain' }} 
-      />
-      <City 
-        name="Brisbane" 
-        temperature="21"
-        weather={{ icon: '11d', description: 'Thunderstorm' }} 
-      />
-      <City 
-        name="Perth" 
-        temperature="39"
-        weather={{ icon: '02d', description: 'Clouds' }} 
-      />
-    </div>
-  </div>
-);
+const CITIES = [{
+  name: 'Melbourne',
+  id: '2158177',
+}, {
+  name: 'Sydney',
+  id: '2147714',
+}, {
+  name: 'Brisbane',
+  id: '2174003',
+}, {
+  name: 'Perth',
+  id: '2063523',
+}];
+
+class OtherCities extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: null,
+      loading: true,
+    }
+  }
+
+  componentDidMount() {
+    this.getWeathers();
+  }
+
+  async getWeathers() {
+    const ids = CITIES.map((c) => c.id);
+
+    const { data } = await getWeathers(ids);
+
+    this.setState({
+      data,
+      loading: false,
+    });
+  }
+
+  render() {
+    const { data, loading } = this.state;
+
+    return (
+      <div className={styles.otherCities}>
+        <h2 className={styles.header}>Other Cities</h2>
+        {loading ? (
+          <div className={styles.loading}>Loading...</div>
+        ) : (
+          <div className={styles.cities}>
+            {data.list.map((item) => (
+              <City 
+                key={item.id}
+                name={item.name} 
+                temperature={parseInt(item.main.temp)}
+                weather={{ 
+                  icon: item.weather[0].icon, 
+                  description: item.weather[0].main,
+                }} 
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+}
 
 export default OtherCities;

src/components/OtherCities/OtherCities.module.css

@@ -1,7 +1,7 @@
 .otherCities {
   border-bottom-left-radius: 32px;
   border-bottom-right-radius: 32px;
-  padding: 0 96px;
+  padding: 0 56px;
 }
 
 .header {

src/components/OtherCities/components/City/City.module.css

@@ -7,7 +7,7 @@
   font-size: 1.25rem;
   font-weight: normal;
   margin-right: 0.5rem;
-  width: 96px;
+  width: 120px;
   letter-spacing: 1px;
 }
 

src/utils/OpenWeatherMap/OpenWeatherMap.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+const baseURL = 'https://api.openweathermap.org/data/2.5';
+
+const OpenWeatherMap = axios.create({
+  baseURL,
+});
+
+const enrichRequestWithAppId = (config) => {
+  config.params.appid = '2466213f21b4b723d341e00a430a7673';
+
+  return config;
+}
+
+const enrichRequestWithCelsiusUnits = (config) => {
+  config.params.units = 'metric';
+
+  return config;
+};
+
+OpenWeatherMap.interceptors.request.use(enrichRequestWithAppId);
+OpenWeatherMap.interceptors.request.use(enrichRequestWithCelsiusUnits);
+
+export default OpenWeatherMap;

src/utils/OpenWeatherMap/index.js

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

yarn.lock

@@ -2198,6 +2198,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 axobject-query@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799"
@@ -3517,6 +3524,13 @@ [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -4599,6 +4613,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+[email protected]:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"