Implement tweak dashboard top (#11)

Author: jovnc

src/components/dashboard/DashboardHeader.tsx

@@ -1,4 +1,3 @@
-import { HiOutlineExternalLink } from "react-icons/hi";
 import { IoArrowBack } from "react-icons/io5";
 import { MdOutlineRefresh } from "react-icons/md";
 import { Link } from "react-router";
@@ -8,63 +7,70 @@ interface DashboardHeaderProps {
   onRefresh: () => void;
 }
 
-function DashboardHeader({ username, onRefresh }: DashboardHeaderProps) {
+interface DashboardLinkProps {
+  label: string;
+  href: string;
+}
+
+const DASHBOARD_LINKS: DashboardLinkProps[] = [
+  {
+    label: "Exercises directory",
+    href: "https://git-mastery.github.io/exercises-directory",
+  },
+  {
+    label: "Report a bug",
+    href: "https://github.com/git-mastery/git-mastery/issues",
+  }
+];
+
+function DashboardHeaderExternalLinks({ links }: { links: DashboardLinkProps[] }) {
+  const linkClassName = "text-blue-600 mb-2 flex flex-row gap-2 items-center text-sm underline";
+  
   return (
-    <header>
-      <h3 className="text-2xl font-bold mb-4">Git Mastery Progress Dashboard</h3>
-      <div className="mb-6">
-        <Link to="/" className="text-gray-500 italic mb-2 flex flex-row gap-2 items-center">
-          <IoArrowBack className="inline-block" /> Back to search
-        </Link>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <div className="flex flex-row gap-2 items-center">
-            <h1 className="text-4xl font-bold">@{username}</h1>
-            <a
-              target="_blank"
-              className="hover:cursor-pointer text-gray-500"
-              href={`https://github.com/${username}`}
-              rel="noopener noreferrer"
-              aria-label="View GitHub profile"
-            >
-              <HiOutlineExternalLink size={24} />
-            </a>
-          </div>
-          <button 
-            type="button" 
-            className="hover:cursor-pointer" 
-            onClick={onRefresh} 
-            aria-label="Refresh progress data"
-          >
-            <MdOutlineRefresh size={24} className="text-gray-500" />
-          </button>
-        </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-directory"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            exercises directory
-          </a>
-          .
-        </p>
-        <p className="mt-2 italic">
-          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"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            here
+    <div className="flex flex-row justify-center gap-2 items-center">
+      {links.map((link, index) => (
+        <span key={link.label} className="flex flex-row gap-2 items-center">
+          <a href={link.href} target="_blank" rel="noopener noreferrer" className={linkClassName}>
+            {link.label}
           </a>
-        </p>
-      </div>
+          {index < links.length - 1 && <span className="text-gray-400 mb-2">|</span>}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function DashboardHeaderToolbar({ onRefresh }: { onRefresh: () => void }) {
+  return (
+    <div className="flex flex-row justify-between items-center mb-8 text-gray-500">
+      <nav>
+        <Link to="/" className="flex flex-row gap-2 items-center text-sm">
+          <IoArrowBack size={20}/>
+          Back to change user
+        </Link>
+      </nav>
+      <button
+        type="button"
+        onClick={onRefresh}
+        aria-label="Refresh progress data"
+        className="flex flex-row gap-2 items-center text-sm cursor-pointer"
+      >
+        <MdOutlineRefresh size={20}/>
+        Refresh
+      </button>
+    </div>
+  )
+}
+
+function DashboardHeader({ username, onRefresh }: DashboardHeaderProps) {
+  return (
+    <header className="mb-6">
+      <DashboardHeaderToolbar onRefresh={onRefresh}/>
+      <h1 className="text-3xl font-bold mb-4 text-center">Git Mastery Progress Dashboard for <a href={`https://github.com/${username}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 gap-2 items-center hover:underline">
+          @{username}
+        </a>
+      </h1>
+      <DashboardHeaderExternalLinks links={DASHBOARD_LINKS} />
     </header>
   );
 }

src/components/dashboard/ExerciseTable.tsx

@@ -51,10 +51,10 @@ function ExerciseTable({ exercises, progress }: ExerciseTableProps) {
     <table className="table-fixed w-full bg-white border border-gray-300 rounded-sm">
       <thead>
         <tr>
-          <th className="bg-gray-200 border border-gray-300 px-4 py-2 text-left">
+          <th className="bg-emerald-700 text-white border border-emerald-800 px-4 py-2 text-left">
             Exercise
           </th>
-          <th className="bg-gray-200 border border-gray-300 px-4 py-2 text-left w-40">
+          <th className="bg-emerald-700 text-white border border-emerald-800 px-4 py-2 text-left w-40">
             Status
           </th>
         </tr>

src/pages/dashboard/(username)/index.tsx

@@ -10,6 +10,7 @@ import { EXERCISES_DIRECTORY_URL, ExerciseStatus } from "@/constants";
 import Spinner from "@/components/ui/Spinner";
 import { useCallback, useMemo } from "react";
 import { useParams } from "react-router";
+import { useQueryClient } from "react-query";
 
 type UserProblemSetStatus = string;
 
@@ -21,8 +22,7 @@ function DashboardPage() {
   const {
     data: userProgress,
     isLoading: isUserProgressLoading,
-    isRefetchError: isUserProgressRefetching,
-    refetch: refetchUserProgress,
+    isFetching: isUserProgressFetching,
   } = useGetUserProgressQuery(user?.login);
 
   const parsedUserProgress = useMemo(() => {
@@ -49,22 +49,23 @@ function DashboardPage() {
 
   const { data: exercises, isLoading: isProblemSetsLoading } = useGetExercisesQuery();
 
+  const queryClient = useQueryClient();
   const refreshUserProgress = useCallback(async () => {
-    await refetchUserProgress();
-  }, [refetchUserProgress]);
+    await queryClient.invalidateQueries(["get-user-progress", user?.login]);
+  }, [queryClient, user?.login]);
 
   const isLoading = useMemo(() => {
       return (
         isUserLoading ||
         isUserProgressLoading ||
-        isUserProgressRefetching ||
+        isUserProgressFetching ||
         isProblemSetsLoading
       );
     }, [
       isUserLoading,
       isUserProgressLoading,
-      isUserProgressRefetching,
-      isProblemSetsLoading,
+      isUserProgressFetching,
+      isProblemSetsLoading
     ]);
 
   // Dynamically render content based on data availability