add result component, env var and fetch functions
This commit is contained in:
ismailsosic
94
kitabcitab/pages/[book]/[id]/index.js
Normal file
94
kitabcitab/pages/[book]/[id]/index.js
Normal file
@@ -0,0 +1,94 @@
|
||||
import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
|
||||
import Link from "next/link"
|
||||
import { useRouter } from 'next/router'
|
||||
import { ENV_VAR } from '../../../envconfig'
|
||||
|
||||
|
||||
const result = ({data}) => {
|
||||
|
||||
const router = useRouter()
|
||||
console.log(data)
|
||||
const {book, writer, text} = data._source
|
||||
const nextPageHandler = () => {
|
||||
if(Number(data._id) + 1 === Number(data._source.numOfPages) + 1) return
|
||||
|
||||
router.push(`/${book.toLowerCase()}/${Number(data._id) + 1}`)
|
||||
}
|
||||
|
||||
const prevPageHandler = () => {
|
||||
if(data._id - 1 === 0) return
|
||||
|
||||
router.push(`/${book.toLowerCase()}/${Number(data._id) - 1}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col laptop:flex-row flex-wrap items-end w-[100vw] laptop:w-[84vw] laptop:min-h-[20vh] laptop:max-w-[90vw]">
|
||||
<div className="p-10 w-[100vw] laptop:w-[25rem]">
|
||||
<Link href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></Link>
|
||||
</div>
|
||||
<div className="group
|
||||
my-3
|
||||
mx-auto
|
||||
py-5
|
||||
h-[5vh]
|
||||
min-w-[90vw]n
|
||||
w-[90vw]
|
||||
bg-[#202124]
|
||||
flex flex-row justify-around items-center
|
||||
|
||||
tablet:w-[70vw]
|
||||
|
||||
laptop:min-w-[40vw]
|
||||
laptop:w-[40vw]
|
||||
laptop:mx-0
|
||||
laptop:my-10
|
||||
laptop:justify-between
|
||||
"
|
||||
>
|
||||
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => prevPageHandler()}><AiOutlineLeft size={25} /></i>
|
||||
<p className="text-base tablet:text-2xl laptop:text-2xl text-[#fff] font-serif text-center">"{book}", {writer}, str.{data._id}</p>
|
||||
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => nextPageHandler()}><AiOutlineRight size={25} /></i>
|
||||
</div>
|
||||
<div className='page flex laptop:justify-center laptop:min-w-[100%]'>
|
||||
<p className='
|
||||
min-w-[90vw]
|
||||
w-[100%]
|
||||
px-5
|
||||
mt-8
|
||||
pb-[5rem]
|
||||
|
||||
tablet:w-[100%]
|
||||
tablet:px-[5rem]
|
||||
|
||||
laptop:min-w-[45vw]
|
||||
laptop:w-[60vw]
|
||||
|
||||
text-white
|
||||
font-serif
|
||||
text-2xl
|
||||
'
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default result
|
||||
|
||||
export async function getServerSideProps (context) {
|
||||
|
||||
try{
|
||||
const res = await fetch(`${ENV_VAR}library${context.resolvedUrl}`)
|
||||
const data = await res.json()
|
||||
|
||||
return { props: {data} }
|
||||
}
|
||||
catch{err => console.log(err)}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
@@ -1,7 +1,18 @@
|
||||
import { AiOutlineSearch, AiOutlineClose } from 'react-icons/ai'
|
||||
import Link from 'next/link'
|
||||
import { useRef } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export default function Home({data}) {
|
||||
const router = useRouter()
|
||||
const searchInputRef = useRef(null)
|
||||
|
||||
const search = () => {
|
||||
const term = searchInputRef.current.value
|
||||
if(!term) return
|
||||
router.push(`/search?term=${term}`)
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center w-[100vw] h-[50vh]">
|
||||
<div className="p-10 ">
|
||||
@@ -17,16 +28,16 @@ export default function HomePage() {
|
||||
laptop:w-[40%]
|
||||
"
|
||||
>
|
||||
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Search for results")}><AiOutlineSearch size={25}/></i>
|
||||
<input 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={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></i>
|
||||
<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"/>
|
||||
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => (searchInputRef.current.value = "")}><AiOutlineClose size={25} /></i>
|
||||
</div>
|
||||
<Link href='/search'><button
|
||||
<button
|
||||
className='py-1 px-10 mt-10 text-3xl rounded-md bg-[#303134] text-white font-serif border-[1px] border-[#303134] hover:border-[#fff] hover:border-[1px]'
|
||||
onClick={() => console.log("Searching")}
|
||||
onClick={() => search()}
|
||||
>
|
||||
Traži
|
||||
</button></Link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
|
||||
import Link from "next/link"
|
||||
import Page from '../../../components/Page'
|
||||
|
||||
const result = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col laptop:flex-row flex-wrap items-end w-[100vw] laptop:w-[84vw] laptop:min-h-[20vh] laptop:max-w-[90vw]">
|
||||
<div className="p-10 w-[100vw] laptop:w-[25rem]">
|
||||
<Link href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></Link>
|
||||
</div>
|
||||
<div className="group
|
||||
my-3
|
||||
mx-auto
|
||||
py-5
|
||||
h-[5vh]
|
||||
min-w-[90vw]
|
||||
w-[90vw]
|
||||
bg-[#202124]
|
||||
flex flex-row justify-around items-center
|
||||
|
||||
tablet:w-[70vw]
|
||||
|
||||
laptop:min-w-[40vw]
|
||||
laptop:w-[40vw]
|
||||
laptop:mx-0
|
||||
laptop:my-10
|
||||
laptop:justify-between
|
||||
"
|
||||
>
|
||||
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => console.log("Prev page")}><AiOutlineLeft size={25} /></i>
|
||||
<p className="text-base tablet:text-2xl laptop:text-2xl text-[#fff] font-serif text-center">"Hamine pustolovine", Muhamed Ahmed Mustafa, str.71</p>
|
||||
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => console.log("Next page")}><AiOutlineRight size={25} /></i>
|
||||
</div>
|
||||
<Page />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default result
|
||||
@@ -1,9 +1,23 @@
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import Results from '../components/Results'
|
||||
import { AiOutlineClose } from 'react-icons/ai'
|
||||
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'
|
||||
|
||||
const SearchPage = () => {
|
||||
|
||||
const SearchPage = ({data}) => {
|
||||
const router = useRouter()
|
||||
const [searchInput, setSearchInput] = useState(router.query.term)
|
||||
|
||||
const search = () => {
|
||||
const term = searchInput
|
||||
if(!term) return
|
||||
router.push(`/search?term=${term}`)
|
||||
}
|
||||
|
||||
console.log(data)
|
||||
|
||||
return (
|
||||
<div className='flex flex-col justify-center'>
|
||||
@@ -14,7 +28,7 @@ const SearchPage = () => {
|
||||
<div className="group
|
||||
my-3
|
||||
mx-auto
|
||||
py-5
|
||||
py-5
|
||||
h-[4vh]
|
||||
min-w-[90vw]
|
||||
bg-[#303134]
|
||||
@@ -30,13 +44,23 @@ const SearchPage = () => {
|
||||
laptop:justify-between
|
||||
"
|
||||
>
|
||||
<input className="bg-[#303134] ml-5 w-[80vw] active:border-none text-white outline-none text-lg "/>
|
||||
<i className='rounded-3xl text-[#9aa0a6] px-3 py-auto' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></i>
|
||||
<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 "/>
|
||||
<i className='rounded-3xl text-[#9aa0a6] px-3' onClick={() => setSearchInput("")}><AiOutlineClose size={25} /></i>
|
||||
</div>
|
||||
</div>
|
||||
<Results />
|
||||
<Results data={data.hits.hits}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
// Fetch data from external API
|
||||
const res = await fetch(`${ENV_VAR}_search?q=${context.query.term}`)
|
||||
const data = await res.json()
|
||||
|
||||
// Pass data to the page via props
|
||||
return { props: { data } }
|
||||
}
|
||||
|
||||
export default SearchPage
|
||||
Reference in New Issue
Block a user