Feature/leaderboards

src/api/Zeeguu_API.js

@@ -26,5 +26,6 @@ import "./dailyAudio";
 import "./sessionHistory";
 import "./badges";
 import "./friends";
+import "./leaderboards";
 
 export default Zeeguu_API;

src/api/badges.js

@@ -4,8 +4,8 @@ Zeeguu_API.prototype.getBadgesForUser = function(callback) {
   this._getJSON(`/badges`, callback);
 };
 
-Zeeguu_API.prototype.getBadgesForFriend = function(userId, callback) {
-  this._getJSON(`/badges/${userId}`, callback);
+Zeeguu_API.prototype.getBadgesForFriend = function(username, callback) {
+  this._getJSON(`/badges/${username}`, callback);
 };
 
 Zeeguu_API.prototype.getNotShownUserBadges = function (callback) {

src/api/friends.js

@@ -7,45 +7,51 @@ Zeeguu_API.prototype.getFriends = function(callback) {
   });
 }
 
-Zeeguu_API.prototype.getFriendsForUser = function(userId, callback) {
-  this._getJSON(`get_friends/${userId}`, (data) => {
+Zeeguu_API.prototype.getFriendsForUser = function(username, callback) {
+  this._getJSON(`get_friends/${username}`, (data) => {
     callback(data);
   });
 }
 
-Zeeguu_API.prototype.getFriendRequests = function(callback) {
-  this._getJSON(`get_friend_requests`, (data) => {
+Zeeguu_API.prototype.getNumberOfReceivedFriendRequests = function(callback) {
+  this._getJSON(`get_number_of_received_friend_requests`, (data) => {
     callback(data);
   });
 }
 
-Zeeguu_API.prototype.searchUsers = function(username, callback) {
-  this._getJSON(`search_users/${username}`, (data) => {
+Zeeguu_API.prototype.getReceivedFriendRequests = function(callback) {
+  this._getJSON(`get_received_friend_requests`, (data) => {
     callback(data);
   });
 }
 
-Zeeguu_API.prototype.getFriendDetails = function(friend_user_id, callback) {
-  this._getJSON(`get_user_details/${friend_user_id}`, (data) => {
+Zeeguu_API.prototype.searchUsers = function(search_term, callback) {
+  this._getJSON(`search_users?query=${encodeURIComponent(search_term)}`, (data) => {
     callback(data);
   });
 }
 
-Zeeguu_API.prototype.sendFriendRequest = function(receiver_id) {
-  return this.apiPost("/send_friend_request", { receiver_id }, false);
+Zeeguu_API.prototype.getFriendDetails = function(friend_username, callback) {
+  this._getJSON(`get_user_details/${friend_username}`, (data) => {
+    callback(data);
+  });
+}
+
+Zeeguu_API.prototype.sendFriendRequest = function(receiver_username) {
+  return this.apiPost("/send_friend_request", { receiver_username }, false);
 }
 
-Zeeguu_API.prototype.deleteFriendRequest = function(receiver_id) {
-  return this.apiPost("/delete_friend_request", { receiver_id }, false);
+Zeeguu_API.prototype.deleteFriendRequest = function(receiver_username) {
+  return this.apiPost("/delete_friend_request", { receiver_username }, false);
 }
 
-Zeeguu_API.prototype.acceptFriendRequest = function(sender_id) {
-  return this.apiPost(`/accept_friend_request`, { sender_id }, false);
+Zeeguu_API.prototype.acceptFriendRequest = function(sender_username) {
+  return this.apiPost(`/accept_friend_request`, { sender_username }, false);
 }
 
-Zeeguu_API.prototype.rejectFriendRequest = function(sender_id) {
-  return this.apiPost(`/reject_friend_request`, { sender_id }, false);
+Zeeguu_API.prototype.rejectFriendRequest = function(sender_username) {
+  return this.apiPost(`/reject_friend_request`, { sender_username }, false);
 }
-Zeeguu_API.prototype.unfriend = function(receiver_id) {
-  return this.apiPost("/unfriend", { receiver_id }, false);
+Zeeguu_API.prototype.unfriend = function(receiver_username) {
+  return this.apiPost("/unfriend", { receiver_username }, false);
 }

src/api/leaderboards.js

@@ -0,0 +1,46 @@
+import { Zeeguu_API } from "./classDef";
+
+function fetchFriendsLeaderboard(api, metric, fromDate, toDate, callback) {
+  if (!metric || !fromDate || !toDate) {
+    console.error("Leaderboard requires metric, fromDate, and toDate");
+    callback([]);
+    return;
+  }
+
+  const params = new URLSearchParams({
+    metric,
+    from_date: fromDate,
+    to_date: toDate,
+  });
+
+  api._getJSON(`friends_leaderboard?${params.toString()}`, (data) => {
+    callback(data);
+  });
+}
+
+function fetchCohortLeaderboard(api, cohortId, metric, fromDate, toDate, callback) {
+  if (!metric || !fromDate || !toDate) {
+    console.error("Leaderboard requires metric, fromDate, and toDate");
+    callback([]);
+    return;
+  }
+
+  const params = new URLSearchParams({
+    metric,
+    from_date: fromDate,
+    to_date: toDate,
+  });
+
+  api._getJSON(`cohort_leaderboard/${cohortId}?${params.toString()}`, (data) => {
+    callback(data);
+  });
+}
+
+
+Zeeguu_API.prototype.getFriendsLeaderboard = function(metric, fromDate, toDate, callback) {
+  fetchFriendsLeaderboard(this, metric, fromDate, toDate, callback);
+};
+
+Zeeguu_API.prototype.getCohortLeaderboard = function(cohortId, metric, fromDate, toDate, callback) {
+  fetchCohortLeaderboard(this, cohortId, metric, fromDate, toDate, callback);
+};

src/api/userStats.js

@@ -13,9 +13,9 @@ Zeeguu_API.prototype.getAllLanguageStreaks = function (callback) {
 };
 
 Zeeguu_API.prototype.getAllDailyStreakForUser = function (callback) {
-  this._getJSON("all_daily_streak", callback);
+  this._getJSON("all_language_streaks_detailed", callback);
 };
 
-Zeeguu_API.prototype.getAllDailyStreakForFriend = function (userId, callback) {
-  this._getJSON(`all_daily_streak/${userId}`, callback);
+Zeeguu_API.prototype.getAllDailyStreakForFriend = function (username, callback) {
+  this._getJSON(`all_language_streaks_detailed/${username}`, callback);
 };

src/badges/Badges.js

@@ -1,56 +1,68 @@
 import React, { useContext, useEffect, useState } from "react";
 import { APIContext } from "../contexts/APIContext";
 import * as s from "./Badges.sc.js";
-import NotificationIcon from "../components/NotificationIcon";
 
-export default function Badges({ userId }) {
+export default function Badges({ username }) {
   const api = useContext(APIContext);
 
   const iconBasePath = "../../../public/static/badges/";
   const defaultLogoPath = "../../../public/static/images/zeeguuLogo.svg";
 
   const [levels, setLevels] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchBadgesCallback = (data) => {
+    if (!data || data.error) {
+      setError(data?.error || "Could not load badges.");
+      setIsLoading(false);
+      return;
+    }
 
-  useEffect(() => {
-    const handleData = (data) => {
-      const allLevels = [];
-      let hasNewBadges = false;
-
-      data.forEach((badge) => {
-        badge.levels.forEach((lvl) => {
-          const level = {
-            ...lvl,
-            badgeName: badge.name,
-            current_value: badge.current_value,
-            description: lvl.description
-              ? lvl.description.replace("{target_value}", lvl.target_value)
-              : badge.description.replace("{target_value}", lvl.target_value),
-          };
-
-          if (level.achieved && !level.is_shown) {
-            hasNewBadges = true;
-          }
-
-          allLevels.push(level);
-        });
+    const allLevels = [];
+    let hasNewBadges = false;
+
+    data.forEach((badge) => {
+      badge.levels.forEach((lvl) => {
+        const level = {
+          ...lvl,
+          badgeName: badge.name,
+          current_value: badge.current_value,
+          description: lvl.description
+            ? lvl.description.replace("{target_value}", lvl.target_value)
+            : badge.description.replace("{target_value}", lvl.target_value),
+        };
+
+        if (level.achieved && !level.is_shown) {
+          hasNewBadges = true;
+        }
+
+        allLevels.push(level);
       });
+    });
+
+    setLevels(allLevels);
 
-      setLevels(allLevels);
+    if (!username && hasNewBadges) {
+      api.updateNotShownForUser();
+    }
+
+    setIsLoading(false);
+    setError(null);
+  };
 
-      if (!userId && hasNewBadges) {
-        api.updateNotShownForUser();
-      }
-    };
+  useEffect(() => {
+    setIsLoading(true);
+    setError(null);
 
-    if (userId) {
-      api.getBadgesForFriend(userId, handleData);
+    if (username) {
+      api.getBadgesForFriend(username, fetchBadgesCallback);
     } else {
-      api.getBadgesForUser(handleData);
+      api.getBadgesForUser(fetchBadgesCallback);
     }
-  }, [api, userId]);
+  }, [api, username]);
 
-  const getIcon = (level) =>
-    level.icon_name ? iconBasePath + level.icon_name : defaultLogoPath;
+  const getIcon = (level) => (level.icon_name ? iconBasePath + level.icon_name : defaultLogoPath);
 
   const iconStyle = (achieved) => ({
     filter: achieved ? "none" : "grayscale(100%)",
@@ -59,55 +71,51 @@ export default function Badges({ userId }) {
 
   const formatDateTime = (iso) =>
     iso
-      ? new Date(iso).toLocaleString(undefined, {
-          dateStyle: "short",
-          timeStyle: "short",
-        }).replace(",", "")
+      ? new Date(iso)
+          .toLocaleString(undefined, {
+            dateStyle: "short",
+            timeStyle: "short",
+          })
+          .replace(",", "")
       : "—";
 
   return (
-    <s.BadgeContainer>
-      {levels.map((level, index) => (
-        <s.BadgeCard key={index}>
-          {!userId && !level.is_shown && level.achieved && (
-            <NotificationIcon text="NEW" position="card-corner" isActive={true} />
-          )}
-
-          <div className="icon-container">
-            <img
-              src={getIcon(level)}
-              style={iconStyle(level.achieved)}
-              alt={level.name}
-            />
-          </div>
-
-          <h3>{level.name || `Level ${level.badge_level}`}</h3>
-
-          <div>{level.description}</div>
-
-          {level.achieved ? (
-            <s.AchievedAtBox>{formatDateTime(level.achieved_at)}</s.AchievedAtBox>
-          ) : (
-            <s.ProgressWrapper>
-              <s.ProgressBar>
-                <s.ProgressFill
-                  style={{
-                    width: `${
-                      (Math.min(level.current_value, level.target_value) /
-                        level.target_value) *
-                      100
-                    }%`,
-                  }}
-                />
-              </s.ProgressBar>
-
-              <s.ProgressText>
-                {level.current_value} / {level.target_value}
-              </s.ProgressText>
-            </s.ProgressWrapper>
-          )}
-        </s.BadgeCard>
-      ))}
-    </s.BadgeContainer>
+    <>
+      {isLoading && <p>Loading badges...</p>}
+      {!isLoading && error && <p style={{ color: "#b00020" }}>{error}</p>}
+
+      {!isLoading && !error && (
+        <s.BadgeContainer>
+          {levels.map((level, index) => (
+            <s.BadgeCard key={index}>
+              {!username && !level.is_shown && level.achieved && <s.NewTag>NEW</s.NewTag>}
+              <s.IconContainer>
+                <s.BadgeIcon src={getIcon(level)} style={iconStyle(level.achieved)} alt={level.name} />
+              </s.IconContainer>
+              <s.BadgeTitle>{level.name || `Level ${level.badge_level}`}</s.BadgeTitle>
+              <s.BadgeDescription>{level.description}</s.BadgeDescription>
+
+              {level.achieved ? (
+                <s.AchievedAtBox>{formatDateTime(level.achieved_at)}</s.AchievedAtBox>
+              ) : (
+                <s.ProgressWrapper>
+                  <s.ProgressBar>
+                    <s.ProgressFill
+                      style={{
+                        width: `${(Math.min(level.current_value, level.target_value) / level.target_value) * 100}%`,
+                      }}
+                    />
+                  </s.ProgressBar>
+
+                  <s.ProgressText>
+                    {level.current_value} / {level.target_value}
+                  </s.ProgressText>
+                </s.ProgressWrapper>
+              )}
+            </s.BadgeCard>
+          ))}
+        </s.BadgeContainer>
+      )}
+    </>
   );
-}
+}