Feat: immutable reports

src/components/ProjectDetails.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 
@@ -14,16 +13,29 @@ interface ScoreElement {
   };
 }
 
+interface paramsTypes {
+  platform: string | undefined;
+  org: string | undefined;
+  repo: string | undefined; 
+  commitHash: string | undefined;
+}
+
 function ProjectDetails() {
   const params = useParams();
-  const { platform, org, repo } = params;
+  const { platform, org, repo, commitHash } = params;
 
+  const getScorecardUrl = (params: paramsTypes) :string => {
+    let baseUrl = `https://api.securityscorecards.dev/projects/${params.platform}/${params.org}/${params.repo}`
+    if(params.commitHash){
+      baseUrl += `/?commit=${params.commitHash}`
+    }
+    return baseUrl
+  }
+
   const { isLoading, error, data } = useQuery({
     queryKey: ["projectData"],
     queryFn: () =>
-      fetch(
-        `https://api.securityscorecards.dev/projects/${platform}/${org}/${repo}`
-      ).then((res) => res.json()),
+      fetch(getScorecardUrl({platform, org, repo, commitHash})).then((res) => res.json()),
   });
 
   if (isLoading) {
@@ -50,7 +62,7 @@ function ProjectDetails() {
         </a>
       </p>
       <p>
-        Last analyzed commit{" "}
+        Current commit{" "}
         <a
           href={`https://github.com/${org}/${repo}/commit/${data.repo.commit}`}
           target="_blank"

src/index.tsx

@@ -20,6 +20,10 @@ const router = createHashRouter([
     path: "404",
     element: <Error404 />,
   },
+  {
+    path: "projects/:platform/:org/:repo/commit/:commitHash",
+    element: <ProjectDetails />,
+  },
   {
     path: "projects/:platform/:org/:repo",
     element: <ProjectDetails />,