From 2c98f1e5157875e43bd230db365a06b3cff66af5 Mon Sep 17 00:00:00 2001
From: Colin Slater <ctslater@uw.edu>
Date: Mon, 24 Jun 2024 16:08:46 -0700
Subject: [PATCH] Switch to Link element to accommodate basePath.

---
 app/collection/[...path]/page.js      | 9 +++++----
 app/globals.css                       | 6 ++++++
 app/page.js                           | 7 ++++---
 app/plot/[plotName]/[...path]/page.js | 3 ++-
 app/tract/[tract]/[...path]/page.js   | 3 ++-
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/collection/[...path]/page.js b/app/collection/[...path]/page.js
index 4c9dfd3..561e202 100644
--- a/app/collection/[...path]/page.js
+++ b/app/collection/[...path]/page.js
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import Link from 'next/link'
 
 import SelectionDropdown from '../../selectionDropdown'
 import { GetSummary } from '../../summaries'
@@ -81,7 +82,7 @@ export default async function Collection({params}) {
 
     return (
         <div>
-            <div className="text-m m-5"><a href={process.env.BASE_URL ? process.env.BASE_URL : "/"  }>&lt;- Back to collections</a></div>
+            <div className="text-m m-5"><Link href={"/"}>&lt;- Back to collections</Link></div>
             <div className="text-2xl m-5">{collection}</div>
 
             <div className="">
@@ -96,7 +97,7 @@ export default async function Collection({params}) {
                             <tbody>
                             {tractKeys.map((tract, n) =>
                                 <tr key={n}>
-                                <td className="p-1"><a href={`/tract/${tract}/${collection}`}>{tract}</a></td>
+                                <td className="p-1"><Link href={`/tract/${tract}/${collection}`}>{tract}</Link></td>
                                 <td className="p-1 text-right">{tractEntries[tract]}</td></tr>
                             )}
                             </tbody>
@@ -111,7 +112,7 @@ export default async function Collection({params}) {
                             <tbody>
                             {visitKeys.map((visit, n) =>
                                 <tr key={n}>
-                                <td className="p-1"><a href={`/visit/${visit}/${collection}`}>{visit}</a></td>
+                                <td className="p-1"><Link href={`/visit/${visit}/${collection}`}>{visit}</Link></td>
                                 <td className="p-1 text-right">{visitEntries[visit]}</td></tr>
                             )}
                             </tbody>
@@ -131,7 +132,7 @@ export default async function Collection({params}) {
                             <tbody>
                             {plotKeys.map((plot, n) =>
                                 <tr key={n}>
-                                <td className="p-1"><a href={`/plot/${plot}/${collection}`}>{plot}</a></td>
+                                <td className="p-1"><Link href={`/plot/${plot}/${collection}`}>{plot}</Link></td>
                                 <td className="p-1 text-right">{plotEntries[plot].count}</td></tr>
                             )}
                             </tbody>
diff --git a/app/globals.css b/app/globals.css
index 76e0715..8b7534a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -16,6 +16,12 @@
   }
 }
 
+@layer base {
+    a {
+        @apply hover:underline;
+    }
+}
+
 /*
 body {
   color: rgb(var(--foreground-rgb));
diff --git a/app/page.js b/app/page.js
index 9384d8a..c492ab1 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,4 +1,5 @@
 
+import Link from 'next/link'
 
 import {ListSummaries, GetSummary, ListReports} from './summaries'
 
@@ -37,7 +38,7 @@ export default async function Collections() {
                 </thead>
                 <tbody>
                     {collections.map((collection, n) =>
-                    (<tr key={n}><td className={cellClassNames}><a href={`/collection/${collection}`}>{collection}</a></td>
+                    (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${collection}`}>{collection}</Link></td>
                          <td className={cellClassNames}>4321</td>
                          <td className={`text-right ${cellClassNames}`}>2024-05-06</td>
                         </tr>))}
@@ -50,14 +51,14 @@ export default async function Collections() {
                 <table className="divide-y">
                 <thead>
                     <tr>
-                        <td className={cellClassNames}>Collection</td>
+                        <td className={cellClassNames}>Report</td>
                         <td className={cellClassNames}>Plots</td>
                         <td className={cellClassNames}>Last Updated</td>
                     </tr>
                 </thead>
                 <tbody>
                     {reports.map((collection, n) =>
-                    (<tr key={n}><td className={cellClassNames}><a href={`/collection/${collection}`}>{collection}</a></td>
+                    (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${collection}`}>{collection}</Link></td>
                          <td className={cellClassNames}>4321</td>
                          <td className={`text-right ${cellClassNames}`}>2024-05-06</td>
                         </tr>))}
diff --git a/app/plot/[plotName]/[...path]/page.js b/app/plot/[plotName]/[...path]/page.js
index 66340f6..6081040 100644
--- a/app/plot/[plotName]/[...path]/page.js
+++ b/app/plot/[plotName]/[...path]/page.js
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import Link from 'next/link'
 
 import { GetSummary } from '../../../summaries'
 
@@ -33,7 +34,7 @@ export default async function Collection({params, searchParams}) {
 
     return (
         <div>
-            <div className="text-m m-5"><a href={`/collection/${collection}`}>&lt;- Back to collection</a></div>
+            <div className="text-m m-5"><Link href={`/collection/${collection}`}>&lt;- Back to collection</Link></div>
             <div className="text-2xl m-5">{collection}</div>
             <div className="text-2xl m-5">{plotName}</div>
             <div className="">
diff --git a/app/tract/[tract]/[...path]/page.js b/app/tract/[tract]/[...path]/page.js
index 33f1a4c..30c3f0b 100644
--- a/app/tract/[tract]/[...path]/page.js
+++ b/app/tract/[tract]/[...path]/page.js
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import Link from 'next/link'
 
 import { GetSummary } from '../../../summaries'
 
@@ -49,7 +50,7 @@ export default async function Collection({params, searchParams}) {
 
     return (
         <div>
-            <div className="text-m m-5"><a href={`/collection/${collection}`}>&lt;- Back to collection</a></div>
+            <div className="text-m m-5"><Link href={`/collection/${collection}`}>&lt;- Back to collection</Link></div>
             <div className="text-2xl m-5">{collection}</div>
             <div className="text-2xl m-5">Tract {tract}</div>
             <div className="">