258 bug make whole satellite lien clickable (#300)

* fix(frontend): 🐛 Turn table into shadcn table and make only the text clickable * feat(frontend): ✨ make whole satellites table row clickable * style(frontend): 🚨 fix linting error
NTNU-SmallSatLab · Apr 14, 2024 · 56f3375 · 56f3375
1 parent 235ff0f
commit 56f3375
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 41 deletions.
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
@@ -6,6 +6,14 @@ import {
 } from "@/components/PageHeader";
 import SatelliteStatsTableRow from "@/components/satelliteData/SatelliteStatsTableRow";
 import { getClient } from "@/lib/ApolloClient";
+import {
+    Table,
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/shadcn/table";
+
 const GET_SATELLITES = gql(`
 query GET_SATELLITES {
     satellites {
@@ -45,17 +53,17 @@ export default async function Satellites() {
                         to see more details.
                     </PageSubtitle>
                 </PageHeaderAndSubtitle>
-                <table className="w-4/5 table-auto border-collapse rounded-md border-b border-white shadow">
-                    <thead>
-                        <tr className="border-y border-white px-3 py-2 text-left text-white">
-                            <th className="px-6">Satellite</th>
-                            <th className="px-6">Speed</th>
-                            <th className="px-6">Altitude</th>
-                            <th className="px-6">Latitude</th>
-                            <th className="px-6">Longitude</th>
-                        </tr>
-                    </thead>
-                    <tbody>
+                <Table className="table-auto border-collapse rounded-md border-b border-white shadow">
+                    <TableHeader>
+                        <TableRow className="border-y border-white px-3 py-2 text-left text-white">
+                            <TableHead className="px-6">Satellite</TableHead>
+                            <TableHead className="px-6">Speed</TableHead>
+                            <TableHead className="px-6">Altitude</TableHead>
+                            <TableHead className="px-6">Latitude</TableHead>
+                            <TableHead className="px-6">Longitude</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
                         {graphqlData?.data?.satellites?.data?.map(
                             (satellite: any) => {
                                 let satelliteName =
@@ -69,8 +77,8 @@ export default async function Satellites() {
                                 );
                             },
                         )}
-                    </tbody>
-                </table>
+                    </TableBody>
+                </Table>
             </div>
         );
     } catch (error) {

diff --git a/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx b/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx
@@ -2,7 +2,8 @@
 import { useState, useEffect } from "react";
 import { convertSatrec, SatelliteInfo } from "@/lib/convertSatrec";
 import { useSatelliteStore } from "@/lib/store";
-import Link from "next/link";
+import { TableCell, TableRow } from "@/components/shadcn/table";
+import { useRouter } from "next/navigation";
 
 const updateInterval = 10;
 
@@ -18,6 +19,8 @@ export default function SatelliteStatsTableRow({
         null,
     );
 
+    const router = useRouter();
+
     // Fetch satellite data on component mount
     useEffect(() => {
         fetchAndSetSatelliteData(satName);
@@ -50,33 +53,29 @@ export default function SatelliteStatsTableRow({
             </tr>
         );
     }
+
+    function handleClick() {
+        router.replace(`/satellites/${slug}`);
+    }
+
     return (
-        <tr className="duration-150 hover:bg-white hover:text-black">
-            <td className="px-6 py-4">
-                <Link href={`/satellites/${slug}`} className="w-full">
-                    {satName}
-                </Link>
-            </td>
-            <td className="px-6 py-4">
-                <Link href={`/satellites/${slug}`} className="w-full">
-                    {satelliteInfo.velocity + " km/s"}
-                </Link>
-            </td>
-            <td className="px-6 py-4">
-                <Link href={`/satellites/${slug}`} className="w-full">
-                    {satelliteInfo.altitude + " km"}
-                </Link>
-            </td>
-            <td className="px-6 py-4">
-                <Link href={`/satellites/${slug}`} className="w-full">
-                    {satelliteInfo.latitudeDeg + "° N"}
-                </Link>
-            </td>
-            <td className="px-6 py-4">
-                <Link href={`/satellites/${slug}`} className="w-full">
-                    {satelliteInfo.longitudeDeg + "° E"}
-                </Link>
-            </td>
-        </tr>
+        <TableRow
+            onClick={handleClick}
+            className="hover: cursor-pointer hover:bg-white hover:bg-white hover:text-black"
+        >
+            <TableCell className="px-6 py-4">{satName}</TableCell>
+            <TableCell className="px-6 py-4">
+                {satelliteInfo.velocity + " km/s"}
+            </TableCell>
+            <TableCell className="px-6 py-4">
+                {satelliteInfo.altitude + " km"}
+            </TableCell>
+            <TableCell className="px-6 py-4">
+                {satelliteInfo.latitudeDeg + "° N"}
+            </TableCell>
+            <TableCell className="px-6 py-4">
+                {satelliteInfo.longitudeDeg + "° E"}
+            </TableCell>
+        </TableRow>
     );
 }