Improve search component on frontend

packages/frontend/src/components/search/GlobalSearchInput.js

@@ -1,17 +1,32 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import ModalWindow from '../modalWindow'
 import * as Api from '../../util/Api'
 import { Input, InputGroup, InputRightElement, Button } from '@chakra-ui/react'
 import { SearchIcon } from '@chakra-ui/icons'
 import { useRouter } from 'next/navigation'
+import {
+  ResponseErrorNotFound,
+  ResponseErrorTimeout,
+  ResponseErrorInternalServer
+} from '../../util/Errors'
 
 function GlobalSearchInput () {
   const [showModal, setShowModal] = useState(false)
   const [modalText, setModalText] = useState('false')
   const router = useRouter()
-
   const [searchQuery, setSearchQuery] = useState('')
 
+  useEffect(() => {
+    let timer
+    if (showModal) {
+      timer = setTimeout(() => {
+        setShowModal(false)
+        setModalText('')
+      }, 6000)
+    }
+    return () => clearTimeout(timer)
+  }, [showModal])
+
   const showModalWindow = (text, timeout) => {
     setShowModal(true)
     setModalText(text)
@@ -33,35 +48,36 @@ function GlobalSearchInput () {
     try {
       const searchResult = await Api.search(searchQuery)
 
-      if (searchResult?.block) {
-        searchRedirect(`/block/${searchResult?.block.header.hash}`)
-        return
-      }
-
-      if (searchResult?.transaction) {
-        searchRedirect(`/transaction/${searchResult?.transaction.hash}`)
-        return
+      const searchTypeMap = {
+        block: `/block/${searchResult?.block?.header?.hash}`,
+        transaction: `/transaction/${searchResult?.transaction?.hash}`,
+        dataContract: `/dataContract/${searchResult?.dataContract?.identifier}`,
+        document: `/document/${searchResult?.document?.identifier}`,
+        identity: `/identity/${searchResult?.identity?.identifier}`,
+        validator: `/validator/${searchResult?.validator?.proTxHash}`
       }
 
-      if (searchResult?.dataContract) {
-        searchRedirect(`/dataContract/${searchResult?.dataContract.identifier}`)
-        return
-      }
-
-      if (searchResult?.document) {
-        searchRedirect(`/document/${searchResult?.document.identifier}`)
-        return
-      }
-
-      if (searchResult?.identity) {
-        searchRedirect(`/identity/${searchResult?.identity.identifier}`)
-        return
+      for (const key in searchTypeMap) {
+        if (searchResult[key]) {
+          searchRedirect(searchTypeMap[key])
+          return
+        }
       }
 
       showModalWindow('Not found', 6000)
     } catch (e) {
       console.error(e)
-      showModalWindow('Request error', 6000)
+
+      const errorMessage = (() => {
+        if (e instanceof ResponseErrorNotFound ||
+            e instanceof ResponseErrorTimeout ||
+            e instanceof ResponseErrorInternalServer) {
+          return e.message
+        }
+        return 'Request error'
+      })()
+
+      showModalWindow(errorMessage)
     }
   }
 

packages/frontend/src/util/Api.js

@@ -1,9 +1,10 @@
+import { ResponseErrorNotFound, ResponseErrorTimeout } from './Errors'
+
 const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
 
 const fetchWrapper = (url, options) => {
   return new Promise((resolve, reject) => {
-    setTimeout(() => reject(new Error('RPC_TIMEOUT')), 30000)
-
+    setTimeout(() => reject(new ResponseErrorTimeout()), 30000)
     fetch(url, options).catch(reject).then(resolve)
   })
 }
@@ -20,28 +21,17 @@ const call = async (path, method, body) => {
 
     if (response.status === 200) {
       return response.json()
+    } else if (response.status === 404) {
+      throw new ResponseErrorNotFound()
     } else {
       const text = await response.text()
-
-      let json
-      try {
-        json = JSON.parse(text)
-      } catch (e) {}
-
-      if (json?.error) {
-        throw new Error(json.error)
-      }
-
       console.error(text)
-      throw new Error('Unknown status code: ' + response.status)
+      const error = new Error('Unknown status code: ' + response.status)
+      throw error
     }
   } catch (e) {
-    if (e === 'RPC_TIMEOUT') {
-      throw new Error('Request to Tenderdash RPC is timed out')
-    }
-
     console.error(e)
-    throw new Error(e)
+    throw e
   }
 }
 

packages/frontend/src/util/Errors.js

@@ -0,0 +1,34 @@
+class ResponseErrorNotFound extends Error {
+  constructor (message = 'Not Found') {
+    super(message)
+    this.name = 'ResponseErrorNotFound'
+  }
+}
+
+class ResponseErrorTimeout extends Error {
+  constructor (message = 'Request to Tenderdash RPC is timed out') {
+    super(message)
+    this.name = 'ResponseErrorTimeout'
+  }
+}
+
+class ResponseErrorInternalServer extends Error {
+  constructor (message = 'Internal Server Error') {
+    super(message)
+    this.name = 'ResponseErrorInternalServer'
+  }
+}
+
+class ResponseErrorBadRequest extends Error {
+  constructor (message = 'Bad Request') {
+    super(message)
+    this.name = 'ResponseErrorBadRequest'
+  }
+}
+
+export {
+  ResponseErrorNotFound,
+  ResponseErrorTimeout,
+  ResponseErrorInternalServer,
+  ResponseErrorBadRequest
+}