trying to add MainPage to gitlab

wearright/src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import './App.css';
 import Start from "../src/components/Start.js"
 import Cookies from 'universal-cookie';
+import MainPage from "../src/components/MainPage.js"
 
 class App extends Component {
 
@@ -14,8 +15,7 @@ class App extends Component {
     if(cookies.get('firstPage') === "true"){
       return (
         <div className="App">
-          {/* TODO: main view*/}
-            <p>cookie found! load main page here</p>
+          <MainPage />
         </div>
       );
     }

wearright/src/components/MainPage.js

+import React, { Component } from 'react';
+import "../styles/MainPage.css"
+
+class MainPage extends Component {
+    constructor(props) {
+        super(props);  
+        this.state = {
+            currentWeather : [],
+            isLoaded: false,
+            error: null
+        }
+      }
+
+    componentDidMount(){
+        //token for API request
+        const token = "&APPID=dc7912235b38897f91307afe6e1162c3"
+        const unit = "&units=metric"
+        //API address
+        const apiUrl ='http://api.openweathermap.org/data/2.5/weather?q=Tampere,fi'
+            fetch(apiUrl+token+unit)
+                .then(res => res.json())              
+                .then(
+                    (result) => {
+                        const tempArr =[]
+                        tempArr.push(result.main.temp)
+                        tempArr.push(result.wind.speed)
+                        this.setState({
+                            isLoaded: true,
+                            currentWeather: tempArr
+                        })
+                        console.log(result)
+                    },
+                    (error) => {
+                        this.setState({
+                            isLoaded: true,
+                            error
+                        })
+                    }                     
+                )                                       
+    }
+
+    render() {  
+        const {currentWeather, isLoaded} = this.state
+            if(isLoaded){
+                return (              
+                    <div className="weatherBox">   
+                    {/* <ul>
+                            <li>testdata</li>
+                            <li>testdata</li>
+                            <li>testdata</li>
+                        </ul>
+                    */}
+
+                        <ul>
+                            <li>Lämpötila: { JSON.stringify(currentWeather[0]) }C</li>
+                            <li>Tuuli: { JSON.stringify(currentWeather[1]) }m/s</li>
+                            <li>Tuntuu kuin: ?</li>
+                        </ul>              
+                    </div>            
+                );
+                }
+                else{
+                    return <p>Lataa...</p>
+                }
+    }
+}
+
+export default MainPage;

wearright/src/styles/MainPage.css

+ul{
+    list-style: none;
+    box-sizing: content-box;
+    width: 300px;
+    height: 100px;
+    padding: 30px;  
+    border: solid;
+}
\ No newline at end of file