From 48e1e28a9ebd492333467d20b5b4e1d25dee7681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=85rth=E1=80=9Dur?=
 <3690368+pure-js@users.noreply.github.com>
Date: Sat, 15 Jul 2023 22:35:20 +0400
Subject: [PATCH] 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
---
 app/components/Table.tsx | 61 ++++++++++++++++++++++------------------
 app/page.tsx             |  4 +--
 tsconfig.json            |  5 +++-
 3 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/app/components/Table.tsx b/app/components/Table.tsx
index be5ead1..8c74e56 100644
--- 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
index 88698f9..e4e91d3 100644
--- 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
index f1c764c..f585db5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,10 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/components/*": ["./app/components/*"]
+    }
   },
   "include": [
     "app/page.tsx",