fix: Searchbar

src/App.jsx

@@ -4,7 +4,6 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Navbar from './components/Navbar'
 import Warning from './components/Warning'
 import Footer from './components/Footer'
-import Error from './pages/Error'
 
 import Homepage from './pages/Homepage'
 import Blocks from './pages/Blocks'
@@ -31,6 +30,8 @@ import Account from './pages/Account'
 import Token from './pages/Token'
 import Stake from './pages/Stake'
 
+import Missing from './pages/Missing'
+import Error from './pages/Error'
 
 const linkPage = [
   {path: '/', component: <Homepage />},
@@ -60,6 +61,7 @@ const linkPage = [
   {path: '/token/:id', children: <Token />},
   {path: '/stake/:id', children: <Stake />},
 
+  {path: '/missing/:id', component: <Missing />},
   {path: '/error', component: <Error />}
 ]
 

src/components/Navbar.jsx

@@ -21,27 +21,20 @@ import {
   ChevronDownIcon,
   ChevronRightIcon
 } from '@chakra-ui/icons';
-import { useHistory } from 'react-router-dom'
 import brandLogo from '../assets/moonriver-logo.svg'
 import { getUrl } from '../search'
 
 
 export default function Navbar() {
   const { isOpen, onToggle } = useDisclosure();
-  let searchTerm = ''
-  let history = useHistory()
-
+
   function handleSearch(e) {
-    //console.log(e)
+    //console.log(`${e.target.value}${e.key}`)
     if (e.key === 'Enter') {
-      console.log(searchTerm)
-      e.target.value = ''
-      getUrl(searchTerm).then(url => {
-        url ? history.push(url) : history.push('/error')
+      const target = e.target.value.toLowerCase()
+      getUrl(target).then(url => {
+        url ? window.open(url, "_self") : window.open(`/missing/${target}`, "_self")
       })
-      searchTerm = ''
-    } else {
-      searchTerm += e.key
     }
   }
 

src/pages/Missing.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Heading } from '@chakra-ui/react'
+import { useParams } from 'react-router-dom';
+
+export default function Missing() {
+  const { id } = useParams();
+  return (
+    <Heading textAlign='center'>{`${id} can't be found`}</Heading>
+  )
+}