Added name query parameter handling (#175)

* Added `name` query parameter handling

Added a `name` query parameter handling code to the `Filters.tsx` component. This handler will set a filter on the `Name` column of a table (either opcodes or precompiles) with the value of the query parameter.
In example, `evm.codes/precompiled?name=ec` will yield a search on the precompiles table for precompiles containing the sequence `ec` (ecrecover, ecpairing).
On the other hand, `evm.codes/?name=self` will yield a search on the opcodes table for opcodes containing the sequence `self` (SELFDESTRUCT, SELFBALANCE).

* lint fixes (OMG...)

Author: thevaizman

components/Reference/Filters.tsx

@@ -1,6 +1,7 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 
 import debounce from 'lodash.debounce'
+import { useRouter } from 'next/router'
 import Select, { OnChangeValue } from 'react-select'
 
 import { Input } from 'components/ui'
@@ -13,6 +14,7 @@ type Props = {
 }
 
 const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
+  const router = useRouter()
   const [searchKeyword, setSearchKeyword] = useState('')
   const [searchFilter, setSearchFilter] = useState({
     value: 'name',
@@ -43,6 +45,20 @@ const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
     setSearchFilter(option)
   }
 
+  // Change filter and search opcode according to query param
+  useEffect(() => {
+    const query = router.query
+
+    if ('name' in query) {
+      // Change the filter type to Name
+      handleSearchFilterChange({ label: 'Name', value: 'name' })
+      setSearchKeyword(query.name as string)
+      handleKeywordChange(query.name as string)
+      router.push(router)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady])
+
   return (
     <div className="flex items-center md:justify-end">
       <span className="hidden md:inline-block text-sm text-gray-400 mr-3">