From 2581360a901ca83d1b4cfa865ccfdfc892afc002 Mon Sep 17 00:00:00 2001
From: Jordan Doyle <jordan@doyle.la>
Date: Mon, 20 Sep 2021 00:38:40 +0100
Subject: [PATCH] Crate page deep linking

---
 chartered-frontend/src/index.tsx                 |  2 +-
 chartered-frontend/src/pages/crate/CrateView.tsx | 45 ++++++++++++++-------------------------------
 2 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/chartered-frontend/src/index.tsx b/chartered-frontend/src/index.tsx
index eeceeda..4d2d157 100644
--- a/chartered-frontend/src/index.tsx
+++ a/chartered-frontend/src/index.tsx
@@ -44,7 +44,7 @@
           />
           <PrivateRoute
             exact
-            path="/crates/:crate"
+            path="/crates/:crate/:subview?"
             component={() => <CrateView />}
           />
           <PrivateRoute
diff --git a/chartered-frontend/src/pages/crate/CrateView.tsx b/chartered-frontend/src/pages/crate/CrateView.tsx
index d945f66..edff414 100644
--- a/chartered-frontend/src/pages/crate/CrateView.tsx
+++ a/chartered-frontend/src/pages/crate/CrateView.tsx
@@ -18,7 +18,7 @@
   Check,
   Square,
 } from "react-bootstrap-icons";
-import { useParams } from "react-router-dom";
+import { useParams, NavLink, Redirect } from "react-router-dom";
 import { useAuthenticatedRequest } from "../../util";
 
 import Prism from "react-syntax-highlighter/dist/cjs/prism";
@@ -56,9 +56,12 @@
 
 export default function SingleCrate() {
   const auth = useAuth();
-  const { crate } = useParams();
+  const { crate, subview } = useParams();
+  const currentTab: Tab | undefined = subview;
 
-  const [currentTab, setCurrentTab] = useState<Tab>("readme");
+  if (!currentTab) {
+    return <Redirect to={`/crates/${crate}/readme`} />
+  }
 
   const { response: crateInfo, error } = useAuthenticatedRequest<CrateInfo>({
     auth,
@@ -138,46 +141,22 @@
               <div className="card-header">
                 <ul className="nav nav-pills card-header-pills">
                   <li className="nav-item">
-                    <a
-                      className={`nav-link ${
-                        currentTab == "readme"
-                          ? "bg-primary bg-gradient active"
-                          : ""
-                      }`}
-                      href="#"
-                      onClick={() => setCurrentTab("readme")}
-                    >
+                    <NavLink to={`/crates/${crate}/readme`} className="nav-link" activeClassName="bg-primary bg-gradient active">
                       Readme
-                    </a>
+                    </NavLink>
                   </li>
                   <li className="nav-item">
-                    <a
-                      className={`nav-link ${
-                        currentTab == "versions"
-                          ? "bg-primary bg-gradient active"
-                          : ""
-                      }`}
-                      href="#"
-                      onClick={() => setCurrentTab("versions")}
-                    >
+                    <NavLink to={`/crates/${crate}/versions`} className="nav-link" activeClassName="bg-primary bg-gradient active">
                       Versions
                       <span className={`badge rounded-pill bg-danger ms-1`}>
                         {crateInfo.versions.length}
                       </span>
-                    </a>
+                    </NavLink>
                   </li>
                   <li className="nav-item">
-                    <a
-                      className={`nav-link ${
-                        currentTab == "members"
-                          ? "bg-primary bg-gradient active"
-                          : ""
-                      }`}
-                      href="#"
-                      onClick={() => setCurrentTab("members")}
-                    >
+                    <NavLink to={`/crates/${crate}/members`} className="nav-link" activeClassName="bg-primary bg-gradient active">
                       Members
-                    </a>
+                    </NavLink>
                   </li>
                 </ul>
               </div>
--
rgit 0.1.3