diff --git a/project-app/.gitignore b/project-app/.gitignore index 55175ef..f83394f 100644 --- a/project-app/.gitignore +++ b/project-app/.gitignore @@ -4,7 +4,7 @@ /node_modules /.pnp .pnp.js - +.env.local # testing /coverage @@ -27,6 +27,7 @@ yarn-error.log* # local env files .env*.local +.env # vercel .vercel diff --git a/project-app/components/Map/Map.jsx b/project-app/components/Map/Map.jsx index 8d3c34a..135c68a 100644 --- a/project-app/components/Map/Map.jsx +++ b/project-app/components/Map/Map.jsx @@ -19,7 +19,7 @@ export default function Map() { const [position, setPosition] = useState([ 52.817356506889425, 0.8199988022288017, ]); - console.log(position); + const markerRef = useRef(null); const eventHandlers = useMemo( () => ({ diff --git a/project-app/components/Weather/SearchBar.jsx b/project-app/components/Weather/SearchBar.jsx new file mode 100644 index 0000000..9fcaf0e --- /dev/null +++ b/project-app/components/Weather/SearchBar.jsx @@ -0,0 +1,52 @@ +import React from "react"; + +const SearchBar = ({fetchWeather, handleChange, city}) => { + + + return ( +
+ +
+
+ +
+ + +
+
+ ); +}; +export default SearchBar; diff --git a/project-app/components/Weather/Weather.jsx b/project-app/components/Weather/Weather.jsx index e69de29..46c34a4 100644 --- a/project-app/components/Weather/Weather.jsx +++ b/project-app/components/Weather/Weather.jsx @@ -0,0 +1,45 @@ +import React from "react"; +import { useState, useEffect } from "react"; +import WeatherCurrent from "./WeatherCurrent"; +import SearchBar from "./SearchBar"; +import WeatherForecast from "./WeatherForecast"; + +const Weather = () => { + const [weatherObject, setWeatherObject] = useState(); + const [city, setCity] = useState("london"); + + + + function handleChange(e) { + + setCity(e.target.value); + } + + const url = `http://api.openweathermap.org/data/2.5/forecast?q=${city}&mode=json&appid=${process.env.NEXT_PUBLIC_WEATHER_KEY}&units=metric`; + + async function fetchWeather() { + const response = await fetch(url); + const data = await response.json(); + console.log(data); + setWeatherObject(data); + setCity('') + } + + useEffect(() => { + fetchWeather(); + }, []); + + + + return ( +
+
+ + + +
+
+ ); +}; + +export default Weather; diff --git a/project-app/components/Weather/WeatherCurrent.jsx b/project-app/components/Weather/WeatherCurrent.jsx new file mode 100644 index 0000000..3c133ec --- /dev/null +++ b/project-app/components/Weather/WeatherCurrent.jsx @@ -0,0 +1,66 @@ +export default function WeatherCurrent({weatherObject}) { + return ( +
+
+

+
+
+ + {weatherObject?.city.name} + +
+ 6:13 +
+

+ +
+
+ {/* + + + + + + */} +
+
+
+
+
+ + + + + {" "} + 27km/h + + + + + + {" "} + 32% + +
+
+

12°

+
+
+
+
+
+ ); +} diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx new file mode 100644 index 0000000..f8d6005 --- /dev/null +++ b/project-app/components/Weather/WeatherForecast.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const WeatherForecast = () => { + return
WeatherForecast
; +}; + +export default WeatherForecast; diff --git a/project-app/components/Weather/plan.md b/project-app/components/Weather/plan.md new file mode 100644 index 0000000..f37d900 --- /dev/null +++ b/project-app/components/Weather/plan.md @@ -0,0 +1,10 @@ +## PLAN + +Display information based on user input + - Have a start city state name of London + - Take city name input + - setCityName to whatever the user input is + - Have the function add city name to url fetch request + - Take data from fetch request and insert into fields + +Weather fetch url = http://api.openweathermap.org/data/2.5/forecast?q=London&mode=json&appid=bb7583604ecbfdd9c60127fbda2d5209&units=metric \ No newline at end of file diff --git a/project-app/next.config.js b/project-app/next.config.js index ae88795..3d3bc99 100644 --- a/project-app/next.config.js +++ b/project-app/next.config.js @@ -2,6 +2,6 @@ const nextConfig = { reactStrictMode: true, swcMinify: true, -} +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/project-app/package.json b/project-app/package.json index 225d86b..9081fc7 100644 --- a/project-app/package.json +++ b/project-app/package.json @@ -29,5 +29,5 @@ }, "overrides": { "autoprefixer": "10.4.5" -} + } } diff --git a/project-app/postcss.config.js b/project-app/postcss.config.js index 33ad091..12a703d 100644 --- a/project-app/postcss.config.js +++ b/project-app/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +};