add result component, env var and fetch functions

kitabcitab/.next/build-manifest.json

@@ -30,11 +30,6 @@
       "static/chunks/main.js",
       "static/chunks/pages/_error.js"
     ],
-    "/results/[id]": [
-      "static/chunks/webpack.js",
-      "static/chunks/main.js",
-      "static/chunks/pages/results/[id].js"
-    ],
     "/search": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",

kitabcitab/.next/server/middleware-build-manifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":["static/chunks/react-refresh.js"],"ampDevFiles":["static/chunks/webpack.js","static/chunks/amp.js"],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":[],"pages":{"/":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/index.js"],"/_app":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_app.js"],"/_error":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_error.js"],"/results/[id]":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/results/[id].js"],"/search":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/search.js"]},"ampFirstPages":[]}
+self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":["static/chunks/react-refresh.js"],"ampDevFiles":["static/chunks/webpack.js","static/chunks/amp.js"],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":[],"pages":{"/":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/index.js"],"/_app":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_app.js"],"/_error":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_error.js"],"/search":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/search.js"]},"ampFirstPages":[]}

kitabcitab/.next/server/pages-manifest.json

@@ -2,7 +2,6 @@
   "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
-  "/results/[id]": "pages/results/[id].js",
-  "/search": "pages/search.js",
-  "/": "pages/index.js"
+  "/": "pages/index.js",
+  "/search": "pages/search.js"
 }

kitabcitab/.next/static/chunks/webpack.js

@@ -131,7 +131,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "7b8e61181ee4068a"; }
+/******/ 		__webpack_require__.h = function() { return "06125453a5487fc9"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

kitabcitab/.next/static/development/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST = {__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static\u002Fchunks\u002Fpages\u002Findex.js"],"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],"/results/[id]":["static\u002Fchunks\u002Fpages\u002Fresults\u002F[id].js"],"/search":["static\u002Fchunks\u002Fpages\u002Fsearch.js"],sortedPages:["\u002F","\u002F_app","\u002F_error","\u002Fresults\u002F[id]","\u002Fsearch"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+self.__BUILD_MANIFEST = {__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static\u002Fchunks\u002Fpages\u002Findex.js"],"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],"/search":["static\u002Fchunks\u002Fpages\u002Fsearch.js"],sortedPages:["\u002F","\u002F_app","\u002F_error","\u002Fsearch"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

kitabcitab/components/Page.js

@@ -1,33 +0,0 @@
-import React from 'react'
-
-const Page = () => {
-
-    const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet, ante non condimentum tincidunt, nulla eros consectetur lacus, eu sagittis massa massa sit amet odio. Cras porttitor pharetra dapibus. Pellentesque lacinia iaculis libero eget dapibus. Nulla fermentum consectetur nisi, a sodales nisi dictum non. Sed placerat, enim quis tristique ullamcorper, nisl nisl semper lorem, vel euismod nunc mauris fringilla est. Vestibulum sit amet dui varius, posuere velit et, tempus est. Nullam pellentesque pretium nulla tempor ullamcorper. Curabitur at nisi pharetra, rhoncus risus at, malesuada velit. Nulla lobortis est vel odio pellentesque gravida. Ut id sem suscipit, maximus augue at, dictum sem. Ut vestibulum felis massa, ut dapibus elit porttitor et. Aenean consequat a ipsum volutpat pellentesque. Phasellus turpis ligula, mollis vel maximus ac, pretium sit amet magna. Suspendisse commodo sit amet arcu at condimentum. Praesent vitae enim turpis. Pellentesque luctus orci tincidunt felis iaculis scelerisque. Maecenas placerat, erat vitae scelerisque vehicula, neque augue imperdiet ligula, in pretium turpis mi at nulla. Nullam ornare dolor sapien, non suscipit risus laoreet ac. Suspendisse molestie leo a diam tincidunt, ac mattis nisi laoreet. Curabitur ultrices id augue suscipit euismod. Praesent rhoncus vitae nulla ultricies molestie. Quisque mi dolor, aliquam nec pellentesque sollicitudin, sagittis ut metus. Fusce eu diam eget lorem sollicitudin feugiat. Sed a urna mauris. Vestibulum eget elit dui. Curabitur at ex dolor. Aliquam erat volutpat. Duis quam ligula, imperdiet viverra quam vitae, facilisis suscipit metus. Praesent et pretium velit, ut sollicitudin mi. Nulla lacinia id nisi sit amet venenatis. In sollicitudin, dolor sit amet faucibus efficitur, metus urna pretium sapien, quis lacinia risus quam in felis. Curabitur tempor dui eget odio eleifend viverra."
-
-  return (
-    <div className='page flex laptop:justify-center laptop:min-w-[100%]'>
-    <p className='
-    min-w-[90vw]
-    w-[100%]
-    px-5
-    mt-8
-
-    tablet:w-[100%]
-    tablet:px-[5rem]
-
-    laptop:min-w-[45vw]
-    laptop:w-[50vw]
-
-    text-justify
-    text-white
-    font-serif
-    text-2xl
-    '
-    >
-        {text}
-    </p>
-    </div>
-  )
-}
-
-export default Page

kitabcitab/components/Result.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 const Result = ({result}) => {
 
-    const {title, heading, writer, page} = result
+    const router = useRouter()
+    const {book, writer, text, page} = result._source
 
   return (
-    <Link href="/results/[id]" as={`/results/${result.id}`} className='
+    <div onClick={() => (router.push({pathname: `/${result._type}/${result._id}`}))} className='
     self-end
     bg-[#202124] 
     w-[100%]
@@ -20,9 +21,9 @@ const Result = ({result}) => {
     laptop:text-lg
     '
     >
-        <p className='m-3'>{heading}</p>
-        <p className='m-3'>"{title}" - {writer} - str. {page}.</p>
-    </Link>
+        <p className='m-3'>{text}</p>
+        <p className='m-3'>"{book}" - {writer} - str. {page}.</p>
+    </div>
   )
 }
 

kitabcitab/components/Results.js

@@ -1,26 +1,9 @@
 import React from 'react'
 import Result from './Result'
 
-const Results = () => {
+const Results = ({data}) => {
 
 
-    const data = [
-        {
-            id: 1,
-            title: 'Prevod Kur\'ana',
-            writer: 'Besim Korkut',
-            heading: '16. "Pa, koju blagodat Gospodara svoga poricete?"',
-            page: 531
-        },
-        {
-            id: 2,
-            title: 'Hamine pustolovine',
-            writer: 'Muhamed Ahmed Mustafa',
-            heading: 'Kad mu se Ramo pozalio da zena ne prica sa njim, Hamo je citirao ajet: "Pa, koju blagodat Gospodara svoga poricete?"',
-            page: 71
-        },
-    ]
-
   return (
     <div className='
     flex flex-col justify-around gap-5
@@ -36,7 +19,7 @@ const Results = () => {
 
 
     '>
-        {data.map((result, id) => <Result key={id} result={result}/>)}
+        {data.map((result) => <Result key={result._id} result={result}/>)}
     </div>
   )
 }

kitabcitab/envconfig.js

@@ -0,0 +1 @@
+export const ENV_VAR = "http://localhost:9200/"

kitabcitab/pages/[book]/[id]/index.js

@@ -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)}
+
+    
+}
+

kitabcitab/pages/api/hello.js

@@ -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' })
-}

kitabcitab/pages/index.js

@@ -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>
 
     

kitabcitab/pages/results/[id]/index.js

@@ -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

kitabcitab/pages/search.js

@@ -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