senaduka/old-kitabcitab-frontend
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add onEnter search

Browse Source
This commit is contained in:
ismailsosic
2023-03-08 12:08:29 +01:00
parent c19a3481d6
commit c39df7ec32
26 changed files with 189 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
kitabcitab/pages/index.js
View File

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
export default function Home({data}) {
const router = useRouter()
const searchInputRef = useRef(null)
const searchInputRef = useRef("")
const search = () => {
const term = searchInputRef.current.value
@@ -13,6 +13,11 @@ export default function Home({data}) {
router.push(`/search?term=${term}`)
}
const enterHandler = (e) => {
const term = searchInputRef.current.value
if(e.key === "Enter" && term !== "") router.push(`/search?term=${term}`)
}
return (
<div className="flex flex-col justify-center items-center w-[100vw] h-[50vh]">
<div className="p-10 ">
@@ -29,7 +34,7 @@ export default function Home({data}) {
"
>
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
<input ref={searchInputRef} className="bg-[#202124] group-hover:bg-[#303134] w-[80%] px-2 active:border-none text-white outline-none text-xl"/>
<input ref={searchInputRef} onKeyDown={(e) => enterHandler(e)} className="bg-[#202124] group-hover:bg-[#303134] w-[80%] px-2 active:border-none text-white outline-none text-xl"/>
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => (searchInputRef.current.value = "")}><AiOutlineClose size={25} /></i>
</div>
<button

9
kitabcitab/pages/search.js
View File

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
import Results from '../components/Results'
import { AiOutlineClose, AiOutlineSearch } from 'react-icons/ai'
import Link from 'next/link'
import { useRef } from 'react'
import { useRouter } from 'next/router'
import { ENV_VAR } from '../envconfig'
@@ -10,14 +9,16 @@ import { ENV_VAR } from '../envconfig'
const SearchPage = ({data}) => {
const router = useRouter()
const [searchInput, setSearchInput] = useState(router.query.term)
const term = searchInput
const search = () => {
const term = searchInput
if(!term) return
router.push(`/search?term=${term}`)
}
console.log(data)
const enterHandler = (e) => {
if(e.key === "Enter" && term !== "") router.push(`/search?term=${term}`)
}
return (
<div className='flex flex-col justify-center'>
@@ -45,7 +46,7 @@ const SearchPage = ({data}) => {
"
>
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
<input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="bg-[#303134] ml-5 w-[70%] active:border-none text-white outline-none text-lg "/>
<input onKeyDown={(e) => enterHandler(e)} value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="bg-[#303134] ml-5 w-[70%] active:border-none text-white outline-none text-lg "/>
<i className='rounded-3xl text-[#9aa0a6] px-3' onClick={() => setSearchInput("")}><AiOutlineClose size={25} /></i>
</div>
</div>