UI modifications : Add News, Submit News Modal, User Stats Panel, Resolved Bugs

src/App.js

@@ -6,17 +6,53 @@ import { onAuthStateChanged, signOut } from "firebase/auth";
 
 function App() {
   const [user, setUser] = useState(null);
+  const [userStats, setUserStats] = useState({
+    articles: 0,
+    likes: 0,
+    dislikes: 0,
+    credibility: 50,
+  });
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
-      setUser(firebaseUser);
+      if (firebaseUser) {
+        setUser(firebaseUser);
+
+        // ✅ Simulate API call to get user stats (or fallback to default)
+        setTimeout(() => {
+          const simulatedStats = {
+            articles: Math.floor(Math.random() * 50),
+            likes: Math.floor(Math.random() * 500),
+            dislikes: Math.floor(Math.random() * 100),
+            credibility: Math.floor(50 + Math.random() * 70), // can go up to 120
+          };
+          setUserStats(simulatedStats);
+        }, 500);
+      } else {
+        setUser(null);
+        setUserStats({
+          articles: 0,
+          likes: 0,
+          dislikes: 0,
+          credibility: 50, // ✅ fallback default
+        });
+      }
     });
+
     return () => unsubscribe();
   }, []);
 
   const handleSignOut = () => {
     signOut(auth)
-      .then(() => setUser(null))
+      .then(() => {
+        setUser(null);
+        setUserStats({
+          articles: 0,
+          likes: 0,
+          dislikes: 0,
+          credibility: 50,
+        });
+      })
       .catch((error) => console.error("Error signing out:", error));
   };
 
@@ -53,7 +89,11 @@ function App() {
 
       {/* Map or Auth */}
       <div style={styles.mapContainer}>
-        {user ? <HeatMap user={user} /> : <EmailAuth onSignIn={setUser} />}
+        {user ? (
+          <HeatMap user={user} userStats={userStats} />
+        ) : (
+          <EmailAuth onSignIn={setUser} />
+        )}
       </div>
     </div>
   );

src/components/Features/DisplayControls.js

@@ -100,7 +100,7 @@ const DisplayControls = ({
 
           <div style={styles.section}>
             <button onClick={onResetView} style={styles.resetButton}>
-              ⟳ Reset View
+              ⟳ Reset to Default View
             </button>
           </div>
         </div>
@@ -140,12 +140,12 @@ const styles = {
     marginTop: "8px",
     display: "flex",
     flexDirection: "column",
-    gap: "14px",
+    gap: "10px", // 🔽 change from 14px to 10px
   },
   section: {
     display: "flex",
     flexDirection: "column",
-    gap: "6px",
+    gap: "4px", // 🔽 tighter gap between label and control
   },
   label: {
     fontSize: "13px",

src/components/Features/NewsFilters.js

@@ -159,13 +159,13 @@ const styles = {
     marginTop: "8px",
     display: "flex",
     flexDirection: "column",
-    gap: "12px",
+    gap: "10px",
   },
   label: {
     fontSize: "13px",
     fontWeight: "bold",
     color: "#333",
-    marginBottom: "4px",
+    marginBottom: "2px",
   },
   input: {
     width: "100%",
@@ -178,8 +178,8 @@ const styles = {
   chipContainer: {
     display: "flex",
     flexWrap: "wrap",
-    gap: "6px",
-    marginBottom: "4px",
+    gap: "4px",
+    marginBottom: "2px",
   },
   chip: {
     display: "flex",
@@ -200,12 +200,12 @@ const styles = {
     overflowY: "auto",
     border: "1px solid #ddd",
     borderRadius: "6px",
-    padding: "6px",
+    padding: "4px",
     backgroundColor: "#f9f9f9",
   },
   checkboxLabel: {
     display: "block",
-    marginBottom: "6px",
+    marginBottom: "4px",
     fontSize: "13px",
     color: "#333",
   },

src/components/Map/HeatMap.js

@@ -6,7 +6,8 @@ import DisplayControls from "../Features/DisplayControls";
 import NewsFilters from "../Features/NewsFilters";
 import HeatLayers from "./HeatLayers";
 import PopupCard from "./PopupCard";
-import AddNewsModal from "../User/AddNewsModal";
+import UserDetailsPanel from "../User/UserStatsPanel";
+import AddNewsButton from "../User/AddNewsButton";
 
 const MAPBOX_ACCESS_TOKEN = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
 
@@ -36,7 +37,6 @@ class HeatMap extends Component {
       sortedNearbyNews: [],
       currentNewsIndex: 0,
       showPopup: false,
-      showAddModal: false,
       circleRadius: 0,
       keyword: "",
       selectedCategories: [],
@@ -101,9 +101,24 @@ class HeatMap extends Component {
   };
 
   handleKeywordChange = (keyword) => this.setState({ keyword });
-
   handleCategoryChange = (selectedCategories) => this.setState({ selectedCategories });
 
+  handleResetView = () => {
+    const viewState = {
+      longitude: -105.0,
+      latitude: 39.7392,
+      zoom: viewZoomMap.world,
+    };
+    this.setState({
+      viewLevel: "world",
+      zoom: viewZoomMap.world,
+      viewState,
+    });
+    if (this.mapRef.current) {
+      this.mapRef.current.flyTo({ center: [-105.0, 39.7392], zoom: viewZoomMap.world, duration: 300 });
+    }
+  };
+
   getFilteredFeatures = () => {
     const { geoJsonData, keyword, selectedCategories } = this.state;
     if (!geoJsonData) return [];
@@ -160,7 +175,7 @@ class HeatMap extends Component {
     const {
       theme, viewLevel, zoom, viewState,
       clickedLocation, sortedNearbyNews, currentNewsIndex,
-      showPopup, circleRadius, keyword, selectedCategories, showAddModal
+      showPopup, circleRadius, keyword, selectedCategories
     } = this.state;
 
     const selectedNews = sortedNearbyNews[currentNewsIndex];
@@ -179,7 +194,7 @@ class HeatMap extends Component {
             onThemeChange={this.handleThemeChange}
             onViewLevelChange={this.handleViewLevelChange}
             onZoomChange={this.handleZoomChange}
-            onResetView={() => this.handleViewLevelChange("world")}
+            onResetView={this.handleResetView}
           />
           <NewsFilters
             keyword={keyword}
@@ -189,6 +204,17 @@ class HeatMap extends Component {
           />
         </div>
 
+        <div style={styles.rightPanel}>
+          <UserDetailsPanel
+            userStats={{
+              articles: 17,
+              likes: 142,
+              dislikes: 9,
+              credibility: 86,
+            }}
+          />
+        </div>
+
         <Map
           ref={this.mapRef}
           mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
@@ -219,7 +245,13 @@ class HeatMap extends Component {
               <PopupCard
                 selectedNews={selectedNews}
                 multipleNews={sortedNearbyNews.length > 1}
-                onClose={() => this.setState({ showPopup: false })}
+                onClose={() =>
+                  this.setState({
+                    showPopup: false,
+                    clickedLocation: null,
+                    circleRadius: 0,
+                  })
+                }
                 onNext={() => {
                   const nextIndex = (currentNewsIndex + 1) % sortedNearbyNews.length;
                   this.setState({ currentNewsIndex: nextIndex });
@@ -229,32 +261,7 @@ class HeatMap extends Component {
           )}
         </Map>
 
-        <button
-          onClick={() => this.setState({ showAddModal: true })}
-          style={{
-            position: "fixed",
-            bottom: "20px",
-            right: "20px",
-            backgroundColor: "#e53935",
-            color: "white",
-            border: "none",
-            borderRadius: "50%",
-            width: "56px",
-            height: "56px",
-            fontSize: "28px",
-            fontWeight: "bold",
-            cursor: "pointer",
-            zIndex: 5,
-            boxShadow: "0px 2px 6px rgba(0,0,0,0.3)",
-          }}
-          title="Add News"
-        >
-          ➕
-        </button>
-
-        {showAddModal && (
-          <AddNewsModal onClose={() => this.setState({ showAddModal: false })} />
-        )}
+        <AddNewsButton />
       </div>
     );
   }
@@ -271,6 +278,16 @@ const styles = {
     gap: "12px",
     width: "260px",
   },
+  rightPanel: {
+    position: "absolute",
+    top: "12px",
+    right: "10px",
+    zIndex: 2,
+    width: "260px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+  },
 };
 
 export default HeatMap;

src/components/Map/PopupCard.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import styles from "./styles";
+import styles from "../../styles";
 import { getAuth } from "firebase/auth";
 const PopupCard = ({ selectedNews, multipleNews, onClose, onNext }) => {
     const [userVote, setUserVote] = useState(null); // "like" | "fake" | null