Merge pull request #11 from x-team/feature/XTG-320-part2

[XTG-320] - Creating Leaderboard Results and Achievement Rank pages

Author: ramirlm

src/App.tsx

@@ -15,15 +15,15 @@ import TowerGamePage from "./pages/TowerGamePage";
 import FloorsEditorPage from "./pages/FloorsEditorPage";
 import SignInPage from "./pages/SignInPage";
 import HomePage from "./pages/HomePage";
+import AchievementResultsPage from "./pages/AchievementResultsPage";
+import LeaderboardRanksPage from "./pages/LeaderboardRanksPage";
 
 // import useCurrentUser from "./hooks/useCurrentUser";
 // import { SyncLoader } from "react-spinners";
 // import { XTEAM_ACCENT_COLOR } from "./helpers/colors";
 // import { UnauthorizedPage } from "./pages/UnauthorizedPage";
 import { ProtectedRoute } from "./ProtectedRoute";
 import { AppMenu } from "./AppMenu";
-import AchievementsPage from "./pages/AchievementsPage";
-import LeaderboardsPage from "./pages/LeaderboardsPage";
 
 export const App = () => {
   // if (isDoingInitialLoading) {
@@ -69,21 +69,21 @@ export const App = () => {
           }
         />
         <Route
-          path="/games/achievements/:achievementId"
+          path="/games/:gameTypeId/achievements/:achievementId"
           element={
             <ProtectedRoute>
               <AppMenu>
-                <AchievementsPage />
+                <AchievementResultsPage />
               </AppMenu>
             </ProtectedRoute>
           }
         />
         <Route
-          path="/games/leaderboards/:leaderboardId"
+          path="/games/:gameTypeId/leaderboards/:leaderboardId"
           element={
             <ProtectedRoute>
               <AppMenu>
-                <LeaderboardsPage />
+                <LeaderboardRanksPage />
               </AppMenu>
             </ProtectedRoute>
           }

src/api/achievements.ts

@@ -10,12 +10,22 @@ export const getAchievements = async (gameTypeId: number) => {
   return achievements;
 };
 
+export const getAchievementsProgress = async (gameTypeId: number , achievementId: number) => {
+  const axios = await getAxiosInstance();
+
+  const endpoint = gamesHqUrl + `/dashboard/game-dev/games/${gameTypeId}/achievements/${achievementId}/progress`;
+  const response = await axios.get(endpoint);
+  const achievements = response.data as IAchievementUnlocked[];
+  
+  return achievements;
+};
+
 export const getAchievement = async (gameTypeId: number, achievementId: number) => {
   const axios = await getAxiosInstance();
 
   const endpoint = gamesHqUrl + `/dashboard/game-dev/games/${gameTypeId}/achievements/${achievementId}`;
   const response = await axios.get(endpoint);
-  const acheivement = response.data.game as IGameType;
+  const acheivement = response.data as IAchievementUnlocked[];
 
   return acheivement;
 };

src/api/leaderboards.ts

@@ -15,7 +15,17 @@ export const getLeaderboard = async (gameTypeId: number, leaderboardId: number)
 
   const endpoint = gamesHqUrl + `/dashboard/game-dev/games/${gameTypeId}/leaderboards/${leaderboardId}`;
   const response = await axios.get(endpoint);
-  const game = response.data.game as IGameType;
+  const game = response.data.game as ILeaderboard;
+
+  return game;
+};
+
+export const getLeaderboardResults = async (gameTypeId: number, leaderboardId: number) => {
+  const axios = await getAxiosInstance();
+
+  const endpoint = gamesHqUrl + `/dashboard/game-dev/games/${gameTypeId}/leaderboards/${leaderboardId}/results`;
+  const response = await axios.get(endpoint);
+  const game = response.data as ILeaderboardResult[];
 
   return game;
 };

src/pages/AchievementResultsPage.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { getAchievementsProgress } from "../api/achievements";
+import Button from "../ui/Button";
+
+
+const AchievementResultsPage = () => {
+  const [achievementResults, setAchievementResults] = useState<IAchievementUnlocked[] | undefined>();
+  const navigate = useNavigate();
+  const { gameTypeId, achievementId } = useParams<{
+    gameTypeId: string;
+    achievementId: string;
+  }>();
+
+  useEffect(() => {
+    async function fetchAchievementProgress() {
+      if (!gameTypeId || !achievementId) {
+        return;
+      }
+
+      const achievementsRes = await getAchievementsProgress(
+        Number(gameTypeId),
+        Number(achievementId)
+      );
+      
+      setAchievementResults(achievementsRes);
+      return achievementsRes;
+    }
+
+    fetchAchievementProgress();
+  }, [gameTypeId, achievementId]);
+
+  return (
+    <div>
+      <h2 className="text-2xl font-bold italic font-sans mb-8">ACHIEVEMENT RANK</h2>
+
+      <table className="shadow-lg bg-white border-collapse w-full mb-8">
+        <thead>
+          <tr>
+            <th className="bg-gray-100 border text-left px-8 py-4">User</th>
+            <th className="bg-gray-100 border text-left px-8 py-4">
+              Rank
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {achievementResults &&
+            achievementResults?.map((achievementRank: IAchievementUnlocked, index) => (
+              // Despite it's not a good practice using index as a key, it's the only way 
+              // to certify key is unique for every row, since AchievementUnlocked table won't have an id.
+              <tr key={index}>
+                <td className="border px-8 py-4">{achievementRank._user?.email}</td>
+                <td className="border px-8 py-4">
+                  {achievementRank?.progress}
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+      <Button onClick={() => navigate(`/games/${gameTypeId}`)}>Back</Button>
+    </div>
+  );
+};
+
+export default AchievementResultsPage;

src/pages/AchievementsPage.tsx

@@ -1,6 +1,5 @@
 import { FormikHelpers, useFormik } from "formik";
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 import { useParams, useNavigate } from "react-router-dom";
 import { SyncLoader } from "react-spinners";
 import * as Yup from "yup";
@@ -237,40 +236,48 @@ const GameEditorPage = function GameEditorPage({ editMode }: IProps) {
             </Button>
           </div>
           <table className="shadow-lg bg-white border-collapse w-full">
-            <tr>
-              <th className="bg-gray-100 border text-left px-8 py-4">id</th>
-              <th className="bg-gray-100 border text-left px-8 py-4">name</th>
-              <th className="bg-gray-100 border text-left px-8 py-4">
-                scoreStrategy
-              </th>
-              <th className="bg-gray-100 border text-left px-8 py-4">
-                resetStrategy
-              </th>
-              <th className="bg-gray-100 border text-left px-8 py-4">Edit</th>
-            </tr>
-            {currentGameType?._leaderboards?.map(
-              (leaderboard: ILeaderboard) => (
-                <tr key={`leaderboard${leaderboard.id}`}>
-                  <td className="border px-8 py-4" ><Link to={`/games/leaderboards/${leaderboard.id}`}>{leaderboard.id}</Link></td>
-                  <td className="border px-8 py-4"><Link to={`/games/leaderboards/${leaderboard.id}`}>{leaderboard.name}</Link></td>
-                  <td className="border px-8 py-4">
-                    <Link to={`/games/leaderboards/${leaderboard.id}`}>{leaderboard.scoreStrategy}</Link>
-                  </td>
-                  <td className="border px-8 py-4">
-                    <Link to={`/games/leaderboards/${leaderboard.id}`}>{leaderboard.resetStrategy}</Link>
-                  </td>
-                  <td className="border px-8 py-4">
-                    <Button
-                      onClick={() => {
-                        openLeaderboardModal(leaderboard)
-                      }}
-                    >
-                      Edit
-                    </Button>
-                  </td>
-                </tr>
-              )
-            )}
+            <thead>
+              <tr>
+                <th className="bg-gray-100 border text-left px-8 py-4">id</th>
+                <th className="bg-gray-100 border text-left px-8 py-4">name</th>
+                <th className="bg-gray-100 border text-left px-8 py-4">
+                  scoreStrategy
+                </th>
+                <th className="bg-gray-100 border text-left px-8 py-4">
+                  resetStrategy
+                </th>
+                <th className="bg-gray-100 border text-left px-8 py-4">Edit</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentGameType && currentGameType?._leaderboards?.map(
+                (leaderboard: ILeaderboard) => (
+                  <tr key={leaderboard.id} className="hover:bg-coolGray-50 cursor-pointer" >
+                    <td className="border px-8 py-4" onClick={() => navigate(`/games/${gameTypeId}/leaderboards/${leaderboard.id}`)}>
+                      {leaderboard.id}
+                    </td>
+                    <td className="border px-8 py-4" onClick={() => navigate(`/games/${gameTypeId}/leaderboards/${leaderboard.id}`)}>
+                      {leaderboard.name}
+                    </td>
+                    <td className="border px-8 py-4 capitalize" onClick={() => navigate(`/games/${gameTypeId}/leaderboards/${leaderboard.id}`)}>
+                      {leaderboard.scoreStrategy}
+                    </td>
+                    <td className="border px-8 py-4 capitalize" onClick={() => navigate(`/games/${gameTypeId}/leaderboards/${leaderboard.id}`)}>
+                      {leaderboard.resetStrategy}
+                    </td>
+                    <td className="border px-8 py-4">
+                      <Button
+                        onClick={() => {
+                          openLeaderboardModal(leaderboard)
+                        }}
+                      >
+                        Edit
+                      </Button>
+                    </td>
+                  </tr>
+                )
+              )}
+            </tbody>
           </table>
         </div>
 
@@ -284,33 +291,48 @@ const GameEditorPage = function GameEditorPage({ editMode }: IProps) {
             </Button>
             </div>
           <table className="shadow-lg bg-white border-collapse max-w-xs">
-            <tr>
-              <th className="bg-gray-100 border text-left px-8 py-4">id</th>
-              <th className="bg-gray-100 border text-left px-8 py-4">
-                Description
-              </th>
-              <th className="bg-gray-100 border text-left px-8 py-4">
-                isEnabled
-              </th>
-              <th className="bg-gray-100 border text-left px-8 py-4">
-                targetValue
-              </th>
-              <th className="bg-gray-100 border text-left px-8 py-4">
-                createdAt
-              </th>
-              <th className="bg-gray-100 border text-left px-8 py-4">
-                updatedAt
-              </th>
-              <th className="bg-gray-100 border text-left px-8 py-4">Edit</th>
-            </tr>
-              {achievements?.map((achievement => 
-                <tr key={`achievement${achievement.id}`}>
-                    <td className="border px-8 py-4">{achievement.id}</td>
-                    <td className="border px-8 py-4">{achievement.description || "-"}</td>
-                    <td className="border px-8 py-4">{achievement.isEnabled ? "✅" : "❌"}</td>
-                    <td className="border px-8 py-4">{achievement.targetValue || "-"}</td>
-                    <td className="border px-8 py-4">{achievement.createdAt || "-"}</td>
-                    <td className="border px-8 py-4">{achievement.updatedAt || "-"}</td>
+            <thead>
+              <tr>
+                <th className="bg-gray-100 border text-left px-8 py-4">id</th>
+                <th className="bg-gray-100 border text-left px-8 py-4">
+                  Description
+                </th>
+                <th className="bg-gray-100 border text-left px-8 py-4">
+                  isEnabled
+                </th>
+                <th className="bg-gray-100 border text-left px-8 py-4">
+                  targetValue
+                </th>
+                <th className="bg-gray-100 border text-left px-8 py-4">
+                  createdAt
+                </th>
+                <th className="bg-gray-100 border text-left px-8 py-4">
+                  updatedAt
+                </th>
+                <th className="bg-gray-100 border text-left px-8 py-4">Edit</th>
+              </tr>
+            </thead>
+            <tbody>
+              {achievements && achievements?.map((achievement => 
+                <tr key={achievement.id} className="hover:bg-coolGray-50 cursor-pointer">
+                    <td className="border px-8 py-4" onClick={() => navigate(`/games/${gameTypeId}/achievements/${achievement.id}`)}>
+                      {achievement.id}
+                    </td>
+                    <td className="border px-8 py-4" onClick={() => navigate(`/games/${gameTypeId}/achievements/${achievement.id}`)}>
+                      {achievement.description || "-"}
+                    </td>
+                    <td className="border px-8 py-4 text-center" onClick={() => navigate(`/games/${gameTypeId}/achievements/${achievement.id}`)}>
+                      {achievement.isEnabled ? "✅" : "❌"}
+                    </td>
+                    <td className="border px-8 py-4" onClick={() => navigate(`/games/${gameTypeId}/achievements/${achievement.id}`)}>
+                      {achievement.targetValue || "-"}
+                    </td>
+                    <td className="border px-8 py-4" onClick={() => navigate(`/games/${gameTypeId}/achievements/${achievement.id}`)}>
+                      {new Date(achievement?.createdAt || "").toLocaleString() }
+                    </td>
+                    <td className="border px-8 py-4" onClick={() => navigate(`/games/${gameTypeId}/achievements/${achievement.id}`)}>
+                      {new Date(achievement?.updatedAt || "").toLocaleString() }
+                    </td>
                     <td className="border px-8 py-4">
                       <Button
                         onClick={() => {
@@ -320,14 +342,14 @@ const GameEditorPage = function GameEditorPage({ editMode }: IProps) {
                         Edit
                       </Button>
                     </td>
-                    
                 </tr>
               ))}
+            </tbody>
           </table>
         </div>
       </div>
-      <AddOrEditAchievementModal show={showModal} onClose={handlePostSubmitAchievement}  selectedAchievement={selectedAchievement}/>
-      <AddOrEditLeaderboardModal show={showLeaderboardModal} onClose={handlePostSubmitLeaderboard}  selectedLeaderboard={selectedLeaderboard}/>
+      {showModal && <AddOrEditAchievementModal show={showModal} onClose={handlePostSubmitAchievement}  selectedAchievement={selectedAchievement}/>}
+      {showLeaderboardModal && <AddOrEditLeaderboardModal show={showLeaderboardModal} onClose={handlePostSubmitLeaderboard}  selectedLeaderboard={selectedLeaderboard}/>}
     </>
   );
 };