feat: ratings API fixes and UI in place. (#67)

* refactor: post rating api

* dep: added recharts to the dependencies

* fix: added the UI for the charts

* fix: fetch the count details for graph from backend

* fix: exception when count key is not present

* fix: exception due to updated_at typo

* fix: fallback condition for ui if no ratings available

backend/packages.py

@@ -516,6 +516,7 @@ def get_package(namespace_name, package_name):
         "description": package_obj.description,
         "ratings": round(sum(package_obj.ratings['users'].values())/len(package_obj.ratings['users']),3) if len(package_obj.ratings['users']) > 0 else 0,
         "downloads": package_obj.downloads_stats,
+        "ratings_count": package_obj.ratings["counts"] if "counts" in package_obj.ratings else {},
     }
 
     return jsonify({"data": package_response_data, "code": 200})
@@ -892,35 +893,49 @@ def post_ratings(namespace, package):
         }
         return jsonify({"message": error_message}), 404
 
-    if user["_id"] in package_doc["ratings"]["users"] and package_doc["ratings"][
-        "users"
-    ][user["_id"]] == int(rating):
-        return jsonify({"message": "Ratings Submitted Successfully", "code": 200}), 200
-
-    if user["_id"] in package_doc["ratings"]["users"] and package_doc["ratings"][
-        "users"
-    ][user["_id"]] != int(rating):
-        package_version_doc = db.packages.update_one(
-            {"name": package, "namespace": namespace_doc["_id"]},
-            {
-                "$set": {
-                    f"ratings.users.{user['_id']}": int(rating),
-                },
-            },
-        )
-        return jsonify({"message": "Ratings Updated Successfully", "code": 200}), 200
-
-    package_version_doc = db.packages.update_one(
+    db.packages.update_one(
         {"name": package, "namespace": namespace_doc["_id"]},
         {
             "$set": {
                 f"ratings.users.{user['_id']}": int(rating),
             },
-            "$inc": {
-                "ratings.total_count": 1,
+        },
+    )
+
+    # Iterate through ratings and calculate how many users rated 5, 4, 3, 2, 1.
+    ratings = db.packages.find_one(
+        {"name": package, "namespace": namespace_doc["_id"]}
+    )["ratings"]["users"]
+
+    ratings_count = {
+        "5": 0,
+        "4": 0,
+        "3": 0,
+        "2": 0,
+        "1": 0,
+    }
+
+    for user_id, user_rating in ratings.items():
+        if user_rating == 5:
+            ratings_count["5"] += 1
+        elif user_rating == 4:
+            ratings_count["4"] += 1
+        elif user_rating == 3:
+            ratings_count["3"] += 1
+        elif user_rating == 2:
+            ratings_count["2"] += 1
+        elif user_rating == 1:
+            ratings_count["1"] += 1
+
+    db.packages.update_one(
+        {"name": package, "namespace": namespace_doc["_id"]},
+        {
+            "$set": {
+                "ratings.counts": ratings_count,
             },
         },
     )
+
     return jsonify({"message": "Ratings Submitted Successfully", "code": 200}), 200
 
 

backend/user.py

@@ -118,7 +118,7 @@ def profile(username):
                         "name": package["name"],
                         "namespace": namespace["namespace"],
                         "description": package["description"],
-                        "updatedAt": package["updatedAt"],
+                        "updatedAt": package["updated_at"],
                         "isNamespaceMaintainer": isNamespaceMaintainer,
                         "isPackageMaintainer": isPackageMaintainer,
                     }

frontend/package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.3",
+    "recharts": "^2.12.0",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.10",

frontend/src/pages/package.js

@@ -24,6 +24,7 @@ import {
 import ShowUserListDialog from "./showUserListDialog";
 import ReportPackageForm from "./reportPackageForm";
 import { Button } from "react-bootstrap";
+import PackageRatingGraph from "./packageRatingGraph";
 
 const PackagePage = () => {
   const [iconsActive, setIconsActive] = useState("readme");
@@ -106,6 +107,14 @@ const PackagePage = () => {
             <MDBIcon fas icon="tag" className="me-2" /> Versions
           </MDBTabsLink>
         </MDBTabsItem>
+        <MDBTabsItem>
+          <MDBTabsLink
+            onClick={() => handleIconsClick("stats")}
+            active={iconsActive === "stats"}
+          >
+            <MDBIcon fas icon="chart-bar" className="me-2" /> Stats
+          </MDBTabsLink>
+        </MDBTabsItem>
       </MDBTabs>
 
       <MDBTabsContent sm={4}>
@@ -179,6 +188,11 @@ const PackagePage = () => {
             </MDBRow>
           </MDBContainer>
         </MDBTabsPane>
+        <MDBTabsPane show={iconsActive === "stats"}>
+          <MDBContainer>
+            <PackageRatingGraph data={data.ratings_count} />
+          </MDBContainer>
+        </MDBTabsPane>
       </MDBTabsContent>
       <ReportPackageForm
         namespace={namespace_name}

frontend/src/pages/packageRatingGraph.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { BarChart, Bar, XAxis, Tooltip } from "recharts";
+
+const PackageRatingGraph = ({ data }) => {
+  const graphData = data;
+
+  const parsedArray = Object.entries(graphData).map(([key, value]) => ({
+    name: `${key} ⭐`,
+    star: value,
+  }));
+
+  return parsedArray.length === 0 ? (
+    <div>
+      No stats available right now. This will update as soon as the package gets
+      rated.
+    </div>
+  ) : (
+    <BarChart width={600} height={500} data={parsedArray}>
+      <XAxis dataKey="name" />
+      <Bar dataKey="star" fill="#8884d8" />
+      <Tooltip />
+    </BarChart>
+  );
+};
+
+export default PackageRatingGraph;

frontend/src/pages/reportPackageForm.js

@@ -27,7 +27,6 @@ const ReportPackageForm = (props) => {
   };
 
   useEffect(() => {
-    console.log("Inside use effect");
     if (statusCode === 200) {
       toast.success(message);
     } else {