feat: create crate detail page

Gumichocopengin8 · Aug 14, 2023 · 1e315fb · 1e315fb
1 parent 4b76d78
commit 1e315fb
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 29 deletions.
diff --git a/api/src/main.rs b/api/src/main.rs
@@ -82,7 +82,6 @@ async fn get_crate_recent_downloads(path: web::Path<String>) -> HttpResponse {
 async fn fetch_crate(crate_name: &str) -> Result<crates_io_api::CrateResponse> {
     // Retrieve download data.
     let data = generate_async_client()?.get_crate(crate_name).await?;
-    print!("sdf {crate_name}");
     let val = serde_json::to_value(data)?;
     let full_crate: crates_io_api::CrateResponse = serde_json::from_value(val)?;
     Ok(full_crate)

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -21,11 +21,11 @@
     "dayjs": "^1.11.9",
     "echarts": "^5.4.3",
     "next": "^13.2.4",
+    "pretty-bytes": "^6.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
-    "recoil": "^0.7.7",
-    "wasm-pack": "^0.12.1"
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@playwright/test": "^1.37.0",
@@ -41,7 +41,8 @@
     "husky": "^8.0.3",
     "lint-staged": "^14.0.0",
     "prettier": "^3.0.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "wasm-pack": "^0.12.1"
   },
   "husky": {
     "hooks": {

diff --git a/web/src/components/[crate_names]/CrateTableRow.tsx b/web/src/components/[crate_names]/CrateTableRow.tsx
@@ -9,19 +9,10 @@ import { useState } from 'react';
 import dayjs from 'dayjs';
 import { useRouter } from 'next/router';
 import { css } from '@emotion/react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Collapse,
-  Box,
-  Typography,
-  IconButton,
-  Link,
-} from '@mui/material';
+import Link from 'next/link';
+import { Table, TableBody, TableCell, TableHead, TableRow, Collapse, Box, Typography, IconButton } from '@mui/material';
 import GitHubIcon from '@mui/icons-material/GitHub';
+import LaunchIcon from '@mui/icons-material/Launch';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import DescriptionIcon from '@mui/icons-material/Description';
@@ -61,7 +52,7 @@ const CrateTableRow = ({ crateData }: Props): JSX.Element => {
         </TableCell>
         <TableCell component="th" scope="row">
           <Typography variant="subtitle1" component="h2">
-            <Link href={`https://crates.io/crates/${crateData.crate.name}`} rel="noreferrer">
+            <Link css={Anchor} href={`/details/${crateData.crate.name}`}>
               {crateData.crate.name}
             </Link>
           </Typography>
@@ -72,7 +63,7 @@ const CrateTableRow = ({ crateData }: Props): JSX.Element => {
         <TableCell align="right">{dateFormat(crateData.crate.created_at)}</TableCell>
         <TableCell align="center">
           {crateData.crate.documentation ? (
-            <Link href={crateData.crate.documentation} rel="noreferrer">
+            <Link css={Anchor} href={crateData.crate.documentation} target="_blank" rel="noreferrer">
               <DescriptionIcon />
             </Link>
           ) : (
@@ -81,16 +72,30 @@ const CrateTableRow = ({ crateData }: Props): JSX.Element => {
         </TableCell>
         <TableCell align="center">
           {crateData.crate.homepage ? (
-            <Link href={crateData.crate.homepage} rel="noreferrer">
+            <Link css={Anchor} href={crateData.crate.homepage} target="_blank" rel="noreferrer">
               <HomeIcon />
             </Link>
           ) : (
             '-'
           )}
         </TableCell>
+        <TableCell align="center">
+          {crateData.crate.homepage ? (
+            <Link
+              css={Anchor}
+              href={`https://crates.io/crates/${crateData.crate.name}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <LaunchIcon />
+            </Link>
+          ) : (
+            '-'
+          )}
+        </TableCell>
         <TableCell align="center">
           {crateData.crate.repository ? (
-            <Link color="inherit" href={crateData.crate.repository} rel="noreferrer">
+            <Link css={AnchorGitHub} color="inherit" href={crateData.crate.repository} target="_blank" rel="noreferrer">
               <GitHubIcon />
             </Link>
           ) : (
@@ -159,4 +164,12 @@ const RootTableRow = css`
   }
 `;
 
+const Anchor = css`
+  color: #1976d2;
+`;
+
+const AnchorGitHub = css`
+  color: inherit;
+`;
+
 export default CrateTableRow;