import React, { useEffect, useState } from "react";
import { db } from "./firebase/Firebase";
import { collection, getDocs } from "firebase/firestore";
import { useAuth } from "./AuthContext";
const Ratings = () => {
const { currentUser } = useAuth(); // Get the currently logged-in user
const [userRatings, setUserRatings] = useState([]);
const [userUIDs, setUserUIDs] = useState([]); // State for all user UIDs
const [loadingRatings, setLoadingRatings] = useState(true); // Loading state for user ratings
const [loadingUIDs, setLoadingUIDs] = useState(true); // Loading state for user UIDs
useEffect(() => {
const fetchUserRatings = async () => {
if (!currentUser) {
console.error("No user is logged in.");
setLoadingRatings(false);
return;
}
try {
console.log("Fetching ratings for the logged-in user...");
const userRatingsCollection = collection(
db,
"users",
currentUser.uid,
"ratings"
);
const ratingsSnapshot = await getDocs(userRatingsCollection);
const ratings = ratingsSnapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
console.log("Fetched User Ratings:", ratings);
setUserRatings(ratings);
} catch (error) {
console.error("Error fetching user ratings:", error);
} finally {
setLoadingRatings(false);
}
};
const fetchAllUserUIDs = async () => {
try {
console.log("Fetching all user UIDs...");
const usersCollection = collection(db, "users"); // Accessing the users collection
const usersSnapshot = await getDocs(usersCollection); // Fetching all documents
const uids = usersSnapshot.docs.map((doc) => doc.id); // Extracting the document IDs (user IDs)
console.log("Fetched User UIDs:", uids);
setUserUIDs(uids);
} catch (error) {
console.error("Error fetching user UIDs:", error);
} finally {
setLoadingUIDs(false);
}
};
fetchUserRatings();
fetchAllUserUIDs();
}, [currentUser]);
return (
<div className="container mx-auto p-4">
<h2 className="text-2xl font-bold mb-4">Your Ratings</h2>
{loadingRatings ? (
<p>Loading your ratings...</p>
) : userRatings.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{userRatings.map((rating) => (
<div
key={rating.id}
className="border rounded-lg p-4 shadow hover:shadow-lg transition"
>
<h3 className="text-lg font-semibold">{rating.itemTitle}</h3>
<p className="text-gray-700">Rating: {rating.rating}</p>
</div>
))}
</div>
) : (
<p>No ratings found for your account.</p>
)}
<h2 className="text-2xl font-bold mt-8">All User UIDs</h2>
{loadingUIDs ? (
<p>Loading user UIDs...</p>
) : userUIDs.length > 0 ? (
<ul className="list-disc pl-6">
{userUIDs.map((uid) => (
<li key={uid} className="text-gray-700">
{uid}
</li>
))}
</ul>
) : (
<p>No users found.</p>
)}
</div>
);
};
export default Ratings;
This shows the ratings for the items for the logged in user, but when I try to get user ids from all the registered users from firebase database, I get No users found. This is how the pathing is /users/mu2CXMasv4eBb4qxLYhs8mnKPty2/ratings/1
How the database looks like pt 1
How the database looks like pt 2
So how can I get all the user ids or combine all the ratings?
I tried aggregating and averaging ratings across multiple users in Firestore, querying /users/{userId}/ratings subcollections for community ratings.