fix: use client navigation for dynamic routes (#17)

* chore: add gitignore rule * chore: experiment with client nav * fix: use client navigation * chore: add component alias
pure-js · Jul 15, 2023 · 48e1e28 · 48e1e28
1 parent 99408b6
commit 48e1e28
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 30 deletions.
diff --git a/app/components/Table.tsx b/app/components/Table.tsx
@@ -1,5 +1,6 @@
 'use client'
-import Link from 'next/link';
+
+import { useRouter } from 'next/navigation'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 
 import { getFlagByCountryName } from '../helpers/getEmojiFlagByISO'
@@ -12,31 +13,37 @@ interface TableProps {
   manufacturers: Array<any> | null;
 }
 
-const Table = ({ manufacturers }: TableProps) => (
-  <table className="table">
-    <thead>
-      <tr>
-        <td className='table-heading txt-right'>ID</td>
-        <td className='table-heading txt-left'>Common name</td>
-        <td className='table-heading'>Country</td>
-        <td className='table-heading'/>
-      </tr>
-    </thead>
-    <tbody>
-      { manufacturers?.map(({ Mfr_ID : Id, Country, Mfr_CommonName: Name, Mfr_Name }) => (
-        <tr key={Id} className="table-row">
-          <td className='table-cell txt-right table-cell_secondary'>{ Id }</td>
-          <td className="table-cell txt-left">{ Name ? Name : Mfr_Name }</td>
-          <td className='table-cell'>{ Country } { getFlagByCountryName(Country) }</td>
-          <td>
-            <Link href={`/manufacturers/${Id}`} className="table-cell__link">
-              <ArrowTopRightOnSquareIcon width={18} height={18} />
-            </Link>
-          </td>
-        </tr>
-      )) }
-    </tbody>
-  </table>
-);
+const Table = ({ manufacturers }: TableProps) => {
+  const router = useRouter();
 
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          <td className='table-heading txt-right'>ID</td>
+          <td className='table-heading txt-left'>Common name</td>
+          <td className='table-heading'>Country</td>
+          <td className='table-heading'/>
+        </tr>
+      </thead>
+      <tbody>
+        { manufacturers?.map(({ Mfr_ID : Id, Country, Mfr_CommonName: Name, Mfr_Name }) => (
+          <tr key={Id} className="table-row">
+            <td className='table-cell txt-right table-cell_secondary'>{ Id }</td>
+            <td className="table-cell txt-left">{ Name ? Name : Mfr_Name }</td>
+            <td className='table-cell'>{ Country } { getFlagByCountryName(Country) }</td>
+            <td>
+              <a onClick={(e) => {
+                e.preventDefault();
+                router.push(`/manufacturers/${Id}`);
+              }} href={`/manufacturers/${Id}`} className="table-cell__link">
+                <ArrowTopRightOnSquareIcon width={18} height={18} />
+              </a>
+            </td>
+          </tr>
+        )) }
+      </tbody>
+    </table>
+  );
+}
 export default Table;
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,9 @@
 // import { useEffect, useState } from 'react';
 
-import Table from './components/Table';
+import Table from '@/components/Table';
 import { getManufacturers } from './api';
 
-import './components/Grid.css';
+import '@/components/Grid.css';
 
 const HomePage = async () => {
   const manufacturers = await getManufacturers().then(data => data.Results);

diff --git a/tsconfig.json b/tsconfig.json
@@ -24,7 +24,10 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/components/*": ["./app/components/*"]
+    }
   },
   "include": [
     "app/page.tsx",