Merge pull request #7 from smdthiranjaya/dev

Clean and comments added.

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"
-}

src/App.js

@@ -2,15 +2,19 @@ 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
     <Router>
       <Routes>
+      // Define the Routes for your application
         <Route path="/" element={<WeatherPage />} />
         {}
       </Routes>
     </Router>
   );
 }
 
+// Export the App component for use in index.js or other parts of the app
 export default App;

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 (
     <MapContainer center={[7.8731, 80.7718]} zoom={8} style={{ height: "700px", width: "700px" }}>
+      // Add a TileLayer to the map with OpenStreetMap tiles
       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+      // 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 (
           <Marker key={id} position={[lat, lng]} icon={dynamicIcon}>
+            // Display a Popup with weather and city details for each marker
             <Popup>
               <strong>{city}      <img src={markerIcon} alt="weather icon" style={{ width: "20px" }} /> </strong><br /><br />
               Daytime: {isDay ? 'Yes' : 'No'}<br />

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;
-    }
+  .weather-stats2 h5 {
+      margin-top: 10px;
+      margin-bottom: 20px;
+      color: #666; 
+      font-size: 13px;
+      line-height: 1.4;
+  }

src/pages/WeatherPage.js

@@ -4,22 +4,27 @@ 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 },
         humidity: { max: 0, min: 0, avg: 0 },
         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 (
         <div className="weather-page-container">
+            // Display the app logo and header
             <div className="page-header">
                 <img src={logo} alt="Logo" className="logo" />
                 <h1>Geo 360 Live</h1>
@@ -134,9 +144,11 @@ const WeatherPage = () => {
                           <p><span role="img" aria-label="Average">🔍</span> Avg: {weatherStats.windSpeed.avg.toFixed(1)}</p>
                       </div>
                   </div>
+                  // Display weather statistics and a map with weather data markers
                 <div className="weather-data" style={{ flex: 1 }}>
                     <MapComponent weatherData={weatherData} />
                 </div>
+                // Subscription form for weather updates
                 <div className="content-container" style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <div className="weather-stats2">
                     <h2>Subscribe to Weather Updates</h2>