Develop

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+*.env
 
 npm-debug.log*
 yarn-debug.log*

src/App.css

@@ -36,3 +36,79 @@
     transform: rotate(360deg);
   }
 }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+#head-row {
+  background-color: lightblue;
+  padding: 10px;
+}
+
+#weather {
+  padding: 15px;
+  text-align: center;
+}
+
+.weather-row {
+  text-align: center;
+}

src/App.js

@@ -1,23 +1,56 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import "bootstrap/dist/css/bootstrap.css";
+import React, { useState, useEffect } from "react";
+import { Row, Col } from "reactstrap";
+import NasaComponent from "./Components/NasaComponent";
+import FoodComponent from "./Components/FoodComponent";
+import WeatherComponent from "./Components/WeatherComponent";
 
 function App() {
+  const [lat, setLatitude] = useState("");
+  const [lon, setLongitude] = useState("");
+
+  useEffect(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(showPosition);
+    }
+  }, []);
+
+  const showPosition = (position) => {
+    setLatitude(position.coords.latitude);
+    setLongitude(position.coords.longitude);
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div style={{ padding: "1em" }} className="App">
+      <Row>
+        <Col>
+          <h1>Welcome to ajaa</h1>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs="6">
+          <h2>Lat: {lat}</h2>
+        </Col>
+        <Col xs="6">
+          <h2>Lon: {lon}</h2>
+        </Col>
+      </Row>
+      <Row>
+        {lat && lon ? (
+          <>
+            <Col xs="4">
+              <NasaComponent lat={lat} lon={lon} />
+            </Col>
+            <Col id="weather" xs="4">
+              <WeatherComponent lat={lat} lon={lon} />
+            </Col>
+            <Col xs="4">
+              <FoodComponent lat={lat} lon={lon} />
+            </Col>
+          </>
+        ) : null}
+      </Row>
     </div>
   );
 }

src/Components/FoodComponent.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import { Table } from "reactstrap";
+
+const FoodComponent = (props) => {
+  let apiKey = "61e3f579285d6f2b7d90dac41a2fdfd9";
+  let lat = props.lat;
+  let lon = props.lon;
+  const [restNames, setRestNames] = useState([]);
+
+  useEffect(() => {
+    fetch(
+      `https://developers.zomato.com/api/v2.1/geocode?lat=${lat}&lon=${lon}`,
+      { headers: { "user-key": apiKey, Accept: "application/json" } }
+    )
+      .then((response) => {
+        return response.json();
+      })
+      .then((json) => {
+        console.log(json);
+        json.nearby_restaurants.forEach((restaurant) => {
+          setRestNames((restNames) => [...restNames, restaurant.restaurant]);
+        });
+      });
+  }, []);
+  const restMapper = () => {
+    return restNames.map((restaurant, index) => {
+      return (
+        <tbody>
+          <tr key={index}>
+            <th scope="row">{index + 1}</th>
+            <td>{restaurant.name}</td>
+            <td>{restaurant.cuisines}</td>
+          </tr>
+        </tbody>
+      );
+    });
+  };
+  return (
+    <div>
+      <h3>Restuarants Near You!</h3>
+      <Table dark>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+          </tr>
+        </thead>
+        <tbody>{restMapper()}</tbody>
+      </Table>
+    </div>
+  );
+};
+export default FoodComponent;

src/Components/NasaComponent.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "reactstrap";
+
+const NasaComponent = (props) => {
+  const [imageUrl, setImageUrl] = useState(
+    "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"
+  );
+  //   const [latitude, setLatitude] = useState(props.latitude);
+  //   const [longitude, setLongitude] = useState(props.longitude);
+  const apiKey = "Wy1wADvYUr6cNdNhe7aFJzcWT9Zk9J5hyEbIPuR4";
+  const baseUrl = "https://api.nasa.gov/planetary/earth/imagery";
+
+  let url = `${baseUrl}?lon=${props.lon}&lat=${
+    props.lat
+  }&api_key=${apiKey}&dim=${0.03}`;
+
+  const getImage = () => {
+    console.log("lat:", props.lat);
+    console.log("lon:", props.lon);
+    console.log("url:", url);
+    fetch(url).then((response) => {
+      setImageUrl(response.url);
+      console.log("response:", response);
+    });
+  };
+
+  useEffect(getImage, []);
+
+  return (
+    <div style={{ width: "100%" }}>
+      <h3>You are here!</h3>
+      <img
+        style={{ width: "inherit", borderRadius: "50px" }}
+        src={imageUrl}
+        alt="location image"
+      />
+    </div>
+  );
+};
+
+export default NasaComponent;

src/Components/WeatherComponent.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from "react";
+import { Button, Col, Row } from "reactstrap";
+
+const Weather = (props) => {
+  console.log(props.lat, props.lon);
+
+  const [description, setDescription] = useState("");
+  const [temperature, setTemperature] = useState("");
+  const [pressure, setPressure] = useState("");
+  const [humidity, setHumidity] = useState("");
+  const [windSpeed, setWindSpeed] = useState("");
+  const [units, setUnits] = useState("units=imperial");
+  const [butText, setButText] = useState("Switch to Metric");
+
+  const key = "70d415361464c75295b5f22c9849e8c3";
+  let url = `https://api.openweathermap.org/data/2.5/weather?lat=${props.lat}&lon=${props.lon}&appid=${key}&${units}`;
+
+  const getWeather = () => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setDescription(data.weather[0].description);
+        setTemperature(data.main.temp);
+        setPressure(data.main.pressure);
+        setHumidity(data.main.humidity);
+        setWindSpeed(data.wind.speed);
+      });
+  };
+
+  useEffect(getWeather, [units]);
+
+  const changeUnits = (e) => {
+    if (units == "units=metric") {
+      setUnits("units=imperial");
+      setButText("Switch to Metric");
+    } else {
+      setUnits("units=metric");
+      setButText("Switch to Imperial");
+    }
+  };
+
+  return (
+    <>
+      <h3>Current Weather</h3>
+      <Row id="head-row">
+        <Col>Set Imperial (default) or Metric:</Col>
+        <Col>
+          <div>
+            <Button onClick={(e) => changeUnits(e)}>{butText}</Button>
+          </div>
+        </Col>
+      </Row>
+      <Row className="weather-row">
+        <span>
+          <strong>Current weather: </strong>
+          {description}
+        </span>
+      </Row>
+      <Row>
+        <span>
+          <strong>Temperature: </strong>
+          {temperature}
+        </span>
+      </Row>
+      <Row>
+        <span>
+          <strong>Air pressure: </strong>
+          {pressure}
+        </span>
+      </Row>
+      <Row>
+        <span>
+          <strong>Humidity: </strong>
+          {humidity}%
+        </span>
+      </Row>
+      <Row>
+        <span>
+          <strong>Wind speed: </strong>
+          {windSpeed}
+        </span>
+      </Row>
+    </>
+  );
+};
+
+export default Weather;

src/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function