From dcbfd24793b2967e801d2ed642c4d4fd0856a401 Mon Sep 17 00:00:00 2001 From: smdthiranjaya Date: Sat, 6 Apr 2024 20:05:05 +0530 Subject: [PATCH] Clean and comments added. --- 303 | 6 ------ src/App.js | 4 ++++ src/components/MapComponent.js | 6 ++++++ src/pages/WeatherPage.css | 14 +++++++------- src/pages/WeatherPage.js | 14 +++++++++++++- 5 files changed, 30 insertions(+), 14 deletions(-) diff --git a/303 b/303 index 7055cec..e69de29 100644 --- a/303 +++ b/303 @@ -1,6 +0,0 @@ -"scripts": { - "start": "react-scripts start", - "build": "react-scripts --openssl-legacy-provider build", - "test": "react-scripts test", - "eject": "react-scripts eject" -} diff --git a/src/App.js b/src/App.js index a04d914..42713c6 100644 --- a/src/App.js +++ b/src/App.js @@ -2,10 +2,13 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import WeatherPage from './pages/WeatherPage'; +// Define the main App functional component function App() { return ( + // Use the Router component to enable routing within the app + // Define the Routes for your application } /> {} @@ -13,4 +16,5 @@ function App() { ); } +// Export the App component for use in index.js or other parts of the app export default App; diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js index 59fef82..c5945fc 100644 --- a/src/components/MapComponent.js +++ b/src/components/MapComponent.js @@ -4,11 +4,15 @@ import 'leaflet/dist/leaflet.css'; import L from 'leaflet'; import markerIcon from '../assets/marker.gif'; +// Define a React functional component to display a map with weather data markers const MapComponent = ({ weatherData }) => { console.log(weatherData); + // Return JSX for rendering the map return ( + // Add a TileLayer to the map with OpenStreetMap tiles + // Iterate over weatherData to create markers for each data point {weatherData.map(({ id, city, lat, lng, temperature, humidity, airPressure, wind_speed, weatherDescriptions, observationTime, weatherIcons, isDay }) => { const dynamicIcon = new L.Icon({ iconUrl: weatherIcons, @@ -17,8 +21,10 @@ const MapComponent = ({ weatherData }) => { popupAnchor: [1, -34], }); + // Render a Marker for each weather data point with a dynamic icon return ( + // Display a Popup with weather and city details for each marker {city} weather icon

Daytime: {isDay ? 'Yes' : 'No'}
diff --git a/src/pages/WeatherPage.css b/src/pages/WeatherPage.css index b240b3c..cd165d4 100644 --- a/src/pages/WeatherPage.css +++ b/src/pages/WeatherPage.css @@ -128,10 +128,10 @@ border-radius: 5px; cursor: pointer;} - .weather-stats2 h5 { - margin-top: 10px; - margin-bottom: 20px; - color: #666; - font-size: 13px; - line-height: 1.4; - } \ No newline at end of file + .weather-stats2 h5 { + margin-top: 10px; + margin-bottom: 20px; + color: #666; + font-size: 13px; + line-height: 1.4; + } \ No newline at end of file diff --git a/src/pages/WeatherPage.js b/src/pages/WeatherPage.js index aa0886c..7c4ecad 100644 --- a/src/pages/WeatherPage.js +++ b/src/pages/WeatherPage.js @@ -4,6 +4,7 @@ import './WeatherPage.css'; import logo from '../assets/logo.png'; const WeatherPage = () => { + // Initialize state for weather data and statistical information const [weatherData, setWeatherData] = useState([]); const [weatherStats, setWeatherStats] = useState({ temperature: { max: 0, min: 0, avg: 0 }, @@ -11,15 +12,19 @@ const WeatherPage = () => { airPressure: { max: 0, min: 0, avg: 0 }, windSpeed: { max: 0, min: 0, avg: 0 } }); + // Initialize state for user input (email and city for subscription) const [email, setEmail] = useState(''); const [city, setCity] = useState(''); + // List of cities for the subscription dropdown const cities = ['Colombo', 'Kandy', 'Galle', 'Jaffna', 'Trincomalee', 'Vavuniya', 'Anuradhapura', 'Puttalam', 'Polonnaruwa', 'Batticaloa', 'Kurunegala', 'Ratnapura', 'Nuwara Eliya', 'Badulla', 'Pottuvil']; + // handleSubmit function to process subscription form submissions const handleSubmit = async (e) => { e.preventDefault(); try { + // Fetch request to subscribe user to weather updates const response = await fetch('https://www.geo360live.tech/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -39,7 +44,9 @@ const WeatherPage = () => { } }; + // useEffect hook to fetch weather data and update stats on component mount and at intervals useEffect(() => { + // Async function to fetch weather data from API const fetchWeatherData = async () => { try { const response = await fetch('https://www.geo360live.tech/api/weather', { @@ -94,14 +101,17 @@ const WeatherPage = () => { }; fetchWeatherData(); - + + // Set an interval to refresh weather data every 5 minutes const interval = setInterval(fetchWeatherData, 300000); return () => clearInterval(interval); }, []); + // Render the WeatherPage component with weather statistics, map, and subscription form return (
+ // Display the app logo and header
Logo

Geo 360 Live

@@ -134,9 +144,11 @@ const WeatherPage = () => {

🔍 Avg: {weatherStats.windSpeed.avg.toFixed(1)}

+ // Display weather statistics and a map with weather data markers
+ // Subscription form for weather updates

Subscribe to Weather Updates