add result component, env var and fetch functions

2023-02-09 15:49:17 +01:00
parent a801985548
commit bf2eebafb6
37 changed files with 175 additions and 139 deletions
--- a/kitabcitab/pages/[book]/[id]/index.js
+++ b/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)}
+
+    
+}
+