Refactor: move capture page to /captures

cypress/tests/integration/captures/[captureid].cy.js

@@ -0,0 +1,32 @@
+import capture from '../../../fixtures/capture.json';
+
+beforeEach(() => {
+  if (Cypress.env('nock')) {
+    cy.task('clearNock');
+  }
+});
+
+it('getStaticProps returns mock data for capture', () => {
+  const path = `/captures/${capture.id}`;
+
+  if (Cypress.env('nock')) {
+    cy.task('nock', {
+      hostname: Cypress.env('NEXT_PUBLIC_API'),
+      method: 'GET',
+      path: `/query/v2/captures/${capture.id}`,
+      statusCode: 200,
+      body: capture,
+    });
+  }
+
+  cy.visit(path);
+
+  // Assertions
+  cy.contains(`Capture #${capture.id}`);
+  cy.contains(capture.species_name || 'Unknown Species');
+  cy.contains(
+    `Captured on ${new Date(capture.created_at).toLocaleDateString()}`,
+  );
+  cy.contains(capture.token_id ? 'Token issued' : 'Token not issued');
+  cy.contains(capture.wallet_name || 'No wallet owns it');
+});

src/components/FeaturedTreesSlider/index.js

@@ -80,7 +80,7 @@ function FeaturedTreesSlider({ trees, size = null, isMobile, link }) {
       >
         {trees.map((tree) => (
           <Link
-            href={link ? link(tree) : `/v2/captures/${tree.id}`}
+            href={link ? link(tree) : `/captures/${tree.id}`}
             key={`featured-tree-${tree.id}`}
           >
             <Card

src/components/TreeInfoDialog.js

@@ -274,14 +274,16 @@ export default function TreeInfoDialog(props) {
                   <List>
                     <ListItem sx={{ pl: 0 }}>
                       <CustomListAvatar
-                        src={grower.image_url}
-                        alt={getGrowerName(grower.first_name, grower.last_name)}
+                        src={grower?.image_url || imagePlaceholder} // provide a fallback image if image_url is missing
+                        alt={getGrowerName(
+                          grower?.first_name || 'Unknown',
+                          grower?.last_name || '',
+                        )}
                       />
                       <CustomListText
-                        primary="Grower"
-                        secondary={getGrowerName(
-                          grower.first_name,
-                          grower.last_name,
+                        primary={getGrowerName(
+                          grower?.first_name || 'Unknown',
+                          grower?.last_name || '',
                         )}
                       />
                     </ListItem>

src/models/api.js

@@ -156,6 +156,7 @@ export async function getTreeById(id) {
     throw err;
   }
 }
+
 export async function getCapturesById(id) {
   try {
     const url = apiPaths.captures(id);

src/models/pathResolver.js

@@ -104,27 +104,27 @@ function getContext(router, options = {}) {
   const matchV2 = pathname.match(MAP_URL_PATTERNV2);
 
   if (match) {
-    const context = {
+    return {
       name: match[2],
       id: match[3],
     };
-    return context;
   }
 
   if (matchV2) {
-    const context = {
+    return {
       name: matchV2[2],
       id: matchV2[3],
     };
-    return context;
   }
 
   const match2 = pathname.match(/^\/wallets\/([a-z0-9-]+)\/tokens\?.*$/);
-  const context = {
-    name: 'wallets',
-    id: match2[1],
-  };
-  return context;
+  if (match2) {
+    // check if match2 is not null before accessing it
+    return {
+      name: 'wallets',
+      id: match2[1],
+    };
+  }
 
   return null;
 }