7 Commits

Author SHA1 Message Date
Ismail Šošić
02e0708a8c Merge branch 'resolve_confl' into 'Update_readme'
Update Result.js

See merge request saburly/kitabcitab/kitabcitab-frontend!12
2023-03-09 00:29:23 +00:00
Ismail Šošić
8b2ceebf0e Update Result.js 2023-03-09 00:29:06 +00:00
Ismail Šošić
07b7bcfda5 Update Result.js 2023-03-09 00:28:08 +00:00
ismailsosic
bcbf8b9fba resolve conflicts 2023-03-09 01:16:48 +01:00
ismailsosic
0a01e536e4 change pathnames and readme 2023-03-09 01:10:06 +01:00
ismailsosic
71811fac4b Update README file 2023-03-08 12:37:27 +01:00
Ismail Šošić
0a6aea44e8 Merge branch 'results_titles' into 'master'
change result title display

See merge request saburly/kitabcitab/kitabcitab-frontend!7
2023-02-15 23:08:52 +00:00
20 changed files with 265 additions and 46 deletions

View File

@@ -15,6 +15,19 @@
], ],
"rootMainFiles": [], "rootMainFiles": [],
"pages": { "pages": {
<<<<<<< Updated upstream
=======
"/": [
"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"
],
>>>>>>> Stashed changes
"/_app": [ "/_app": [
"static/chunks/webpack.js", "static/chunks/webpack.js",
"static/chunks/main.js", "static/chunks/main.js",

View File

@@ -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":{"/_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

View File

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

View File

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

View File

@@ -1 +1,5 @@
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() <<<<<<< 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

File diff suppressed because one or more lines are too long

View File

@@ -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 - Search books
npm run dev - Read books
# or
yarn dev
```
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.

View File

@@ -8,12 +8,13 @@ const Result = ({result, term}) => {
const [title, setTitle] = useState() const [title, setTitle] = useState()
let sentences let sentences
const checkForMatches = (props) => { const checkForMatches = (props) => {
if(props.length !== 1) return sentences.map((sentence) => { if(props.length === 1) return setTitle(props)
sentence.toLowerCase().includes(term.toLowerCase()) ? setTitle(sentence) : null if(props.length > 1){
}) return sentences.map(sentence => {
if(sentence.toLowerCase().includes(term.toLowerCase())) setTitle(sentence)
return setTitle(text) })
} else setTitle(props[0])
} }
@@ -26,13 +27,13 @@ const Result = ({result, term}) => {
useEffect(() => { useEffect(() => {
sentences = splitText() sentences = splitText()
checkForMatches(sentences) checkForMatches(sentences)
}) }, [])
// ako term nije pronadjen u textu onda // ako term nije pronadjen u textu onda
// treba provjeriti duzinu niza, ako niz ima jednu recenicu, recenica treba biti title, ako ne, naci medju recenicama onu koja ima term u sebi // treba provjeriti duzinu niza, ako niz ima jednu recenicu, recenica treba biti title, ako ne, naci medju recenicama onu koja ima term u sebi
return ( 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 self-end
bg-[#202124] bg-[#202124]
w-[100%] w-[100%]
@@ -52,4 +53,4 @@ const Result = ({result, term}) => {
) )
} }
export default Result export default Result

View File

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

View File

@@ -1,24 +1,23 @@
import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai' import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
import Link from "next/link" import Link from "next/link"
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { ENV_VAR } from '../../../envconfig' import { ENV_VAR } from '../../../../envconfig'
const result = ({data}) => { const result = ({data}) => {
const router = useRouter() const router = useRouter()
console.log(data)
const {book, writer, text} = data._source const {book, writer, text} = data._source
const nextPageHandler = () => { 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 = () => { const prevPageHandler = () => {
if(data._id - 1 === 0) return 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 ( return (
@@ -47,7 +46,7 @@ const result = ({data}) => {
" "
> >
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => prevPageHandler()}><AiOutlineLeft size={25} /></i> <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> <i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => nextPageHandler()}><AiOutlineRight size={25} /></i>
</div> </div>
<div className='page flex laptop:justify-center laptop:min-w-[100%]'> <div className='page flex laptop:justify-center laptop:min-w-[100%]'>
@@ -82,9 +81,8 @@ export default result
export async function getServerSideProps (context) { export async function getServerSideProps (context) {
try{ try{
const res = await fetch(`${ENV_VAR}library${context.resolvedUrl}`) const res = await fetch(`${ENV_VAR}${context.resolvedUrl}`)
const data = await res.json() const data = await res.json()
return { props: {data} } return { props: {data} }
} }
catch{err => console.log(err)} catch{err => console.log(err)}

View File

@@ -56,7 +56,7 @@ const SearchPage = ({data}) => {
export async function getServerSideProps(context) { export async function getServerSideProps(context) {
// Fetch data from external API // 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() const data = await res.json()
// Pass data to the page via props // Pass data to the page via props