Populate dashboard directly from user's progress repo

Author: jovnc

src/Dashboard.tsx

@@ -6,7 +6,6 @@ import { Link, useParams } from "react-router";
 import { Exercise, useGetExercisesQuery } from "./api/queries/get_exercises";
 import { useGetUserQuery } from "./api/queries/get_user";
 import { useGetUserProgressQuery } from "./api/queries/get_user_progress";
-import { useGetUserUpdateTimeQuery } from "./api/queries/get_user_update_time";
 import Spinner from "./components/Spinner";
 
 type UserProblemSetStatus = string;
@@ -24,7 +23,7 @@ function Dashboard() {
     isLoading: isUserProgressLoading,
     isRefetchError: isUserProgressRefetching,
     refetch: refetchUserProgress,
-  } = useGetUserProgressQuery(user?.id);
+  } = useGetUserProgressQuery(user?.login);
 
   const parsedUserProgress = useMemo(() => {
     if (isUserProgressLoading || userProgress == null) {
@@ -74,32 +73,6 @@ function Dashboard() {
     await refetchUserProgress()
   }, [refetchUserProgress])
 
-  const {
-    data: latestActionRun
-  } = useGetUserUpdateTimeQuery(user?.id)
-
-  const formatTimeWithTimezone = useCallback((dateObj: Date) => {
-    const formatter = new Intl.DateTimeFormat('en-GB', {
-      day: '2-digit',
-      month: 'short',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false,
-      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-    });
-
-    return formatter.format(dateObj)
-  }, [])
-
-  const expectedNextUpdateTime = useMemo(() => {
-    if (latestActionRun == null) {
-      return null
-    }
-    const expectedTime = new Date(latestActionRun.getTime() + 30 * 60 * 1000)
-    return expectedTime
-  }, [latestActionRun])
-
   return (
     <div className="lg:w-[40%] my-16 mx-auto md:w-[60%] w-[80%]">
       <h3 className="text-2xl font-bold mb-4">Git Mastery Progress Dashboard</h3>
@@ -116,12 +89,6 @@ function Dashboard() {
         </div>
         <p className="text-gray-700 font-semibold">Find your progress for the various Git Mastery exercises.</p>
         <p className="text-gray-700">To view all exercises, visit the <a className="text-blue-800 underline" href="https://git-mastery.github.io/exercises">exercises directory</a>.</p>
-        {latestActionRun != null && expectedNextUpdateTime != null && (
-          <p className="mt-2 italic">Last updated on {formatTimeWithTimezone(latestActionRun)}.
-            <br />Next update around {formatTimeWithTimezone(expectedNextUpdateTime)}
-            <br />If there is a discrepancy, open a ticket with the Git-Mastery team <a className="text-blue-800 underline" href="https://github.com/git-mastery/git-mastery">here</a>
-          </p>
-        )}
       </div>
       <div>
         {(isUserLoading || isUserProgressLoading || isUserProgressRefetching || isProblemSetsLoading) ? (
@@ -134,7 +101,19 @@ function Dashboard() {
               <p className="mb-4 text-red-700">User <strong>{username}</strong> does not exist</p>
               <Link to="/" className="hover:cursor-pointer border-1 border-red-700 bg-red-700 text-white rounded-sm px-4 py-2 font-semibold">← Return to search</Link>
             </div>
-          ) : (
+          ) : userProgress == null ? (
+          <div className="text-center">
+            <p className="mb-4 text-red-700">
+              No progress repository found for <strong>{username}</strong>.
+            </p>
+            <Link
+              to="/"
+              className="hover:cursor-pointer border-1 border-red-700 bg-red-700 text-white rounded-sm px-4 py-2 font-semibold"
+            >
+              ← Return to search
+            </Link>
+          </div>
+        ) : (
             exerciseGroups.size === 0 ? (
               <div className="text-center">
                 <p className="mb-4">You have not completed any exercises yet</p>

src/api/queries/get_user.ts

@@ -2,12 +2,13 @@ import axios from "axios"
 import { useQuery } from "react-query"
 
 export interface User {
-  id: number;
+  login: string;
 }
 
 export const getUser = async (username: string) => {
   try {
-    const user = await axios.get<User>(`https://api.github.com/users/${username}`)
+    const encodedUsername = encodeURIComponent(username);
+    const user = await axios.get<User>(`https://api.github.com/users/${encodedUsername}`)
     return user.data
   } catch {
     return null
@@ -18,7 +19,7 @@ export const useGetUserQuery = (username: string | undefined) => {
   return useQuery<User | null>({
     queryKey: ["get-user", username],
     queryFn: () => getUser(username!),
-    enabled: username != null,
+    enabled: !!username,
   })
 }
 

src/api/queries/get_user_progress.ts

@@ -6,20 +6,21 @@ export interface UserProgress {
   status: string;
 }
 
-export const getUserProgress = async (userId: number) => {
+export const getUserProgress = async (username: string) => {
   try {
-    const result = await axios.get<UserProgress[]>(`https://raw.githubusercontent.com/git-mastery/progress/refs/heads/tracker/students/${userId}.json`);
+    const encodedUsername = encodeURIComponent(username);
+    const result = await axios.get<UserProgress[]>(`https://raw.githubusercontent.com/${encodedUsername}/${encodedUsername}-gitmastery-progress/refs/heads/main/progress.json`);
     return result.data;
   } catch {
     return null;
   }
 }
 
-export const useGetUserProgressQuery = (userId: number | undefined) => {
+export const useGetUserProgressQuery = (username: string | undefined) => {
   return useQuery<UserProgress[] | null>({
-    queryKey: ["get-user-progress", userId],
-    queryFn: () => getUserProgress(userId!),
-    enabled: userId != null,
+    queryKey: ["get-user-progress", username],
+    queryFn: () => getUserProgress(username!),
+    enabled: !!username,
   });
 }