Merge branch 'resolve_confl' into 'Update_readme'

Update Result.js

See merge request saburly/kitabcitab/kitabcitab-frontend!12

kitabcitab/.next/build-manifest.json

@@ -15,16 +15,19 @@
   ],
   "rootMainFiles": [],
   "pages": {
+<<<<<<< Updated upstream
+=======
     "/": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",
       "static/chunks/pages/index.js"
     ],
-    "/[book]/[id]": [
+    "/[book]/[type]/[id]": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",
-      "static/chunks/pages/[book]/[id].js"
+      "static/chunks/pages/[book]/[type]/[id].js"
     ],
+>>>>>>> Stashed changes
     "/_app": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",

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

@@ -1 +1,5 @@
-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"],"/[book]/[id]":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/[book]/[id].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":[]}
+<<<<<<< Updated upstream
+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":{"/_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":[]}
+=======
+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"],"/[book]/[type]/[id]":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/[book]/[type]/[id].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":[]}
+>>>>>>> Stashed changes

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

@@ -2,7 +2,10 @@
   "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
+<<<<<<< Updated upstream
+=======
+  "/[book]/[type]/[id]": "pages/[book]/[type]/[id].js",
   "/": "pages/index.js",
-  "/[book]/[id]": "pages/[book]/[id].js",
+>>>>>>> Stashed changes
   "/search": "pages/search.js"
 }

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

@@ -131,7 +131,11 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "a2eda309a2e86c12"; }
+<<<<<<< Updated upstream
+/******/ 		__webpack_require__.h = function() { return "93e21dfb81445514"; }
+=======
+/******/ 		__webpack_require__.h = function() { return "95af3d6f0b2398ce"; }
+>>>>>>> Stashed changes
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

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

@@ -1 +1,5 @@
-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"],"/[book]/[id]":["static\u002Fchunks\u002Fpages\u002F[book]\u002F[id].js"],sortedPages:["\u002F","\u002F_app","\u002F_error","\u002Fsearch","\u002F[book]\u002F[id]"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+<<<<<<< Updated upstream
+self.__BUILD_MANIFEST = {__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],"/search":["static\u002Fchunks\u002Fpages\u002Fsearch.js"],sortedPages:["\u002F_app","\u002F_error","\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"],"/[book]/[type]/[id]":["static\u002Fchunks\u002Fpages\u002F[book]\u002F[type]\u002F[id].js"],sortedPages:["\u002F","\u002F_app","\u002F_error","\u002Fsearch","\u002F[book]\u002F[type]\u002F[id]"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+>>>>>>> Stashed changes

kitabcitab/README.md

@@ -1,36 +1,32 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# KitabCitab Web App
 
-## Getting Started
+KitabCitab Web App is app that provides books search services by name, author and terms from books.
 
-First, run the development server:
+## Functionalities
 
-```bash
-npm run dev
-# or
-yarn dev
-```
+- Search books
+- Read books
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## App requirements
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+- Node.js
+- Next.js
+- ElasticSearch server (data)
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+## Installation
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+1. Clone this project from GitLab repository "https://gitlab.com/saburly/kitabcitab/kitabcitab-frontend.git".
+2. In terminal, go to directory of the project and run "npm install" to install all packages.
+3. Change ENV_VAR variable inside "envconfig.js" to your server url. Default is "http://localhost:9200".
+4. Run "npm run dev" to start app, and then go to url "http://localhost:3000".
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Example of data object
 
-## Learn More
+result = {
+    "book" : "Hamine pustolovine",
+    "writer" : "Muhamed Ahmed Mustafa",
+    "pages": "98",
+    "text" : "Lorem ipsum"
+}
 
-To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

kitabcitab/components/Result.js

@@ -8,15 +8,13 @@ const Result = ({result, term}) => {
     const [title, setTitle] = useState()
     let sentences
 
-    const checkForMatches = (props) => {
-
+    const checkForMatches = (props) => {      
       if(props.length === 1) return setTitle(props)
-      if(props.length > 1 ){
-      return sentences.map((sentence) => {
-        if(sentence.toLowerCase().includes(term.toLowerCase())) setTitle(sentence)
-        else setTitle(props[0])
-      })
-      }
+      if(props.length > 1){
+        return sentences.map(sentence => {
+          if(sentence.toLowerCase().includes(term.toLowerCase())) setTitle(sentence)
+        })
+      } else setTitle(props[0])
       
     }
 
@@ -35,7 +33,7 @@ const Result = ({result, term}) => {
 
 
   return (
-    <div onClick={() => (router.push({pathname: `/${result._type}/${result._id}`}))} className='
+    <div onClick={() => (router.push({pathname: `${result._index}/${result._type}/${result._id}`}))} className='
     self-end
     bg-[#202124] 
     w-[100%]
@@ -55,4 +53,4 @@ const Result = ({result, term}) => {
   )
 }
 
-export default Result
+export default Result

kitabcitab/components/Results.js

@@ -3,7 +3,6 @@ import Result from './Result'
 
 const Results = ({data, term}) => {
 
-  console.log(data)
 
   return (
     <div className='

kitabcitab/envconfig.js

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

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

@@ -1,24 +1,23 @@
 import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
 import Link from "next/link"
 import { useRouter } from 'next/router'
-import { ENV_VAR } from '../../../envconfig'
+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
+        if(Number(data._id) + 1 === Number(data._source.pages) + 1) return
 
-        router.push(`/${book.toLowerCase()}/${Number(data._id) + 1}`)
+        router.push(`/${data._index}/${data._type}/${Number(data._id) + 1}`)
     }
 
     const prevPageHandler = () => {
         if(data._id - 1 === 0) return
 
-        router.push(`/${book.toLowerCase()}/${Number(data._id) - 1}`)
+        router.push(`/${data._index}/${data._type}/${Number(data._id) - 1}`)
     } 
 
   return (
@@ -47,7 +46,7 @@ const result = ({data}) => {
                 "
             >
                 <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>
+                <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%]'>
@@ -82,9 +81,8 @@ export default result
 export async function getServerSideProps (context) {
     
     try{
-    const res = await fetch(`${ENV_VAR}library${context.resolvedUrl}`)
+    const res = await fetch(`${ENV_VAR}${context.resolvedUrl}`)
     const data = await res.json()
-
     return { props: {data} }
     }
     catch{err => console.log(err)}

kitabcitab/pages/index.js

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 
 export default function Home({data}) {
   const router = useRouter()
-  const searchInputRef = useRef("")
+  const searchInputRef = useRef(null)
 
   const search = () => {
     const term = searchInputRef.current.value
@@ -13,11 +13,6 @@ 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 ">
@@ -34,7 +29,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} onKeyDown={(e) => enterHandler(e)} className="bg-[#202124] group-hover:bg-[#303134] w-[80%] px-2 active:border-none text-white outline-none text-xl"/>
+        <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>
       <button

kitabcitab/pages/search.js

@@ -2,6 +2,7 @@ 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'
 
@@ -9,16 +10,14 @@ 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}`)
   }
 
-  const enterHandler = (e) => {
-    if(e.key === "Enter" && term !== "") router.push(`/search?term=${term}`)
-  }
+  console.log(data)
 
   return (
     <div className='flex flex-col justify-center'>
@@ -46,7 +45,7 @@ const SearchPage = ({data}) => {
                 "
             >
                 <i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => search()}><AiOutlineSearch size={25}/></i>
-                <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 "/>
+                <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>
@@ -57,7 +56,7 @@ const SearchPage = ({data}) => {
 
 export async function getServerSideProps(context) {
     // Fetch data from external API
-    const res = await fetch(`${ENV_VAR}_search?q=${context.query.term}`)
+    const res = await fetch(`${ENV_VAR}/_search?q=${context.query.term}`)
     const data = await res.json()
   
     // Pass data to the page via props