From 9a4b69a73dd31c6caa91eea337dec61fff8b3bd1 Mon Sep 17 00:00:00 2001
From: RyukTheCoder <ryuk@rango.exchange>
Date: Mon, 6 Jan 2025 06:02:12 +0000
Subject: [PATCH] feat: use toploader on search input submit

---
 src/app/(home)/_components/ChartBox/index.tsx           | 2 +-
 src/app/statistics/_components/SankeyChartBox/index.tsx | 9 ++++++---
 src/components/common/SearchBox/SearchInput.tsx         | 7 +++++--
 tsconfig.json                                           | 7 ++++---
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app/(home)/_components/ChartBox/index.tsx b/src/app/(home)/_components/ChartBox/index.tsx
index 457858a..dda2c35 100644
--- a/src/app/(home)/_components/ChartBox/index.tsx
+++ b/src/app/(home)/_components/ChartBox/index.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { daysFilter } from './Chart.helper';
 import dynamic from 'next/dynamic';
 
-const Chart = dynamic(() => import('./Chart'), {
+const Chart = dynamic(() => import('./Chart.tsx').then((mod) => mod.default), {
   ssr: false,
 });
 
diff --git a/src/app/statistics/_components/SankeyChartBox/index.tsx b/src/app/statistics/_components/SankeyChartBox/index.tsx
index 836e692..d2047df 100644
--- a/src/app/statistics/_components/SankeyChartBox/index.tsx
+++ b/src/app/statistics/_components/SankeyChartBox/index.tsx
@@ -4,9 +4,12 @@ import { PropsType } from './SankeyChartBox.type';
 import React from 'react';
 import { barChartColors } from '../ChartBarBox/ChartBarBox.helper';
 
-const SankeyChart = dynamic(() => import('./SankeyChart'), {
-  ssr: false,
-});
+const SankeyChart = dynamic(
+  () => import('./SankeyChart.tsx').then((mod) => mod.default),
+  {
+    ssr: false,
+  },
+);
 
 function SankeyChartBox(props: PropsType) {
   const { topSourcePath, blockchainDataMap } = props;
diff --git a/src/components/common/SearchBox/SearchInput.tsx b/src/components/common/SearchBox/SearchInput.tsx
index 9ab46e3..68459a1 100644
--- a/src/components/common/SearchBox/SearchInput.tsx
+++ b/src/components/common/SearchBox/SearchInput.tsx
@@ -1,10 +1,12 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { FormEvent, MouseEvent, useEffect, useRef, useState } from 'react';
 import { Button } from '../Button';
 import { CloseIcon, PasteIcon, SearchIcon } from 'src/components/icons';
 import { PropTypes } from './SearchInput.type';
+import { useRouter } from 'nextjs-toploader/app';
+import { usePathname } from 'next/navigation';
+
 const BLUR_DELAY = 300;
 
 function SearchInput(props: PropTypes) {
@@ -13,6 +15,7 @@ function SearchInput(props: PropTypes) {
   const [isFocused, setIsFocused] = useState(false);
   const [isFirefox, setIsFirefox] = useState(false);
   const router = useRouter();
+  const pathname = usePathname();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const onSubmit = (
     e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>,
@@ -30,7 +33,7 @@ function SearchInput(props: PropTypes) {
     setIsFocused(false);
 
     setQuery('');
-  }, [router]);
+  }, [pathname]);
 
   const handlePaste = async (event: MouseEvent<HTMLDivElement>) => {
     setIsFocused(true);
diff --git a/tsconfig.json b/tsconfig.json
index 500c71c..2ab858c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2022",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -8,8 +8,9 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "node16",
+    "moduleResolution": "Node16",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "baseUrl": "./",