Merge pull request #4 from smdthiranjaya/dev

Clean the code
smdthiranjaya · Apr 5, 2024 · f6c2a29 · f6c2a29
2 parents 20cb273 + 5d9d524
commit f6c2a29
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 136 deletions.
diff --git a/303 b/303
@@ -1,119 +1,6 @@
-.weather-page-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  height: 100vh; 
-  padding: 20px; 
+"scripts": {
+  "start": "react-scripts start",
+  "build": "react-scripts --openssl-legacy-provider build",
+  "test": "react-scripts test",
+  "eject": "react-scripts eject"
 }
-
-.leaflet-container {
-  margin-top: 20px;
-  border-radius: 10px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-}
-
-.weather-page-container {
-  font-family: 'Arial', sans-serif;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.logo {
-  height: 120px;
-  margin-right: 20px;
-}
-
-.weather-stats {
-  width: 20%; 
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 20px;
-  padding: px;
-  background-color: #f1f1f1;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.weather-stats h2 {
-  width: 100%;
-  text-align: center;
-  margin-bottom: 20px;
-  font-size: 20px;
-  color: #333;
-}
-
-.stat-group {
-  flex: 1;
-  min-width: 150px;
-  text-align: center;
-}
-
-.stat-group h3 {
-  margin: 0 0 10px 0;
-  font-size: 16px;
-  color: #333;
-}
-
-.stat-group p {
-  margin: 4px 0;
-  font-size: 14px;
-  color: #666;
-}
-
-
-/* subscription style */
-.weather-stats2 {
-  width: 50%; 
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 20px;
-  background-color: #f1f1f1;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.weather-page h2 {
-  width: 100%;
-  text-align: center;
-  margin-bottom: 20px;
-  font-size: 20px;
-  color: #333;
-}
-
-.weather-page form > div {
-  margin-bottom: 15px; /* Adjust spacing for better layout */
-}
-
-.weather-page label {
-  display: block;
-  margin-bottom: 5px;
-}
-
-.weather-page input,
-.weather-page select {
-  width: 100%;
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-
-.weather-page button {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;}
-
diff --git a/package.json b/package.json
@@ -15,12 +15,12 @@
     "web-vitals": "^2.1.4"
   },
   "proxy": "https://www.geo360live.tech/",
-"scripts": {
-  "start": "react-scripts start",
-  "build": "react-scripts --openssl-legacy-provider build",
-  "test": "react-scripts test",
-  "eject": "react-scripts eject"
-},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts --openssl-legacy-provider build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js
@@ -10,12 +10,11 @@ const MapComponent = ({ weatherData }) => {
     <MapContainer center={[7.8731, 80.7718]} zoom={8} style={{ height: "700px", width: "700px" }}>
       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       {weatherData.map(({ id, city, lat, lng, temperature, humidity, airPressure, wind_speed, weatherDescriptions, observationTime, weatherIcons, isDay }) => {
-        // Define a custom icon for each marker using its weatherIcons
         const dynamicIcon = new L.Icon({
-          iconUrl: weatherIcons, // This dynamically sets the icon based on weatherIcons
-          iconSize: [30, 30], // Size of the icon
-          iconAnchor: [12, 41], // Point of the icon which will correspond to marker's location
-          popupAnchor: [1, -34], // Point from which the popup should open relative to the iconAnchor
+          iconUrl: weatherIcons, 
+          iconSize: [30, 30],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
         });
 
         return (

diff --git a/src/pages/WeatherPage.css b/src/pages/WeatherPage.css
@@ -127,12 +127,11 @@
     border: none;
     border-radius: 5px;
     cursor: pointer;}
-
-
+
     .weather-stats2 h5 {
         margin-top: 10px;
         margin-bottom: 20px;
-        color: #666; /* Lighter text color for subtext */
-        font-size: 13px; /* Smaller font size for subtext */
-        line-height: 1.4; /* Adequate line spacing for readability */
+        color: #666; 
+        font-size: 13px;
+        line-height: 1.4;
     }
diff --git a/src/pages/WeatherPage.js b/src/pages/WeatherPage.js
@@ -14,13 +14,13 @@ const WeatherPage = () => {
     const [email, setEmail] = useState('');
     const [city, setCity] = useState('');
 
-    const cities = ['Colombo', 'Kandy', 'Galle', 'Jaffna']; // Add more cities as needed
+    const cities = ['Colombo', 'Kandy', 'Galle', 'Jaffna', 'Jaffna', 'Jaffna', 'Trincomalee', 'Vavuniya', 'Anuradhapura', 'Puttalam', 'Polonnaruwa', 'Batticaloa', 'Kurunegala', 'Ratnapura', 'Nuwara Eliya', 'Badulla', 'Pottuvil'];
 
     const handleSubmit = async (e) => {
       e.preventDefault();
 
       try {
-        const response = await fetch('https://www.geo360live.tech/api/subscribe', { // Ensure this is the correct endpoint
+        const response = await fetch('https://www.geo360live.tech/api/subscribe', { 
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ email, city }),