search

pages/search.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import Gallery from "react-photo-gallery";
+import { makeStyles } from '@material-ui/core/styles';
+import config from '../config/config'
+import AppBar from '../components/AppBar'
+import db_ops from '../server/helpers/db_ops'
+import Pagination from '@material-ui/lab/Pagination';
+import { useRouter } from 'next/router'
+import Photo from '../components/Photo'
+import ErrorPage from 'next/error'
+const useStyles = makeStyles(() => ({
+  pagination:{
+    display:"flex",
+    justifyContent:'center'
+  }
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function Search(props:any){
+  const classes = useStyles();
+  const router = useRouter()
+  if (props.err) {
+    return <ErrorPage statusCode={404} />
+  }
+  return (
+    <div>
+      <AppBar/>
+            {/* 
+  // @ts-ignore */ } 
+    <Gallery targetRowHeight={250} photos={props.photos} renderImage={Photo} />   {/* FIX THIS SHIT */}
+    <div className={classes.pagination}>
+      <Pagination count={props.max_page} defaultPage={props.current_page} onChange={(_e,p)=>router.push(`/search?q=${props.search_query}&page=${p}`)} siblingCount={3} color="primary" size="large"/>
+      </div>
+</div>
+  
+  )
+} 
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getServerSideProps(context: any) {
+  if (context.query.q) {
+    const tags = context.query.q.split(',')
+    const images = await db_ops.image_ops.find_images_by_tags(tags)
+    const images_on_page = 30
+    const photos = []
+    let page;
+    if (context.query.page) {
+      page = parseInt(context.query.page)
+    } else {
+      page = 1
+    }
+    for (let i = (page - 1) * images_on_page; (i < (page) * images_on_page) && (i < images.length); i++) {
+      photos.push({
+        src: `${config.domain}/images/${images[i].id}.${images[i].file_ext}`,
+        key: `${config.domain}/image/${images[i].id}`,
+        width: images[i].width,
+        height: images[i].height
+      })
+    }
+    return {
+      props: {
+        photos: photos,
+        search_query:context.query.q,
+        current_page: page,
+        max_page: Math.ceil(images.length / images_on_page)
+      }
+    }
+  }
+  return {
+    props: { err: true }, // will be passed to the page component as props
+  }
+}

server/helpers/db_ops.ts

@@ -101,6 +101,11 @@ async function get_all_images(){
     const imgs = findDocuments("images", {})
     return imgs
 }
+
+async function find_images_by_tags(tags:Array<string>){
+    const imgs = findDocuments("images", {tags:{$all:tags}})
+    return imgs
+}
 async function find_image_by_sha512(hash:string){
     const img = findDocuments("images", {
         sha512: hash
@@ -274,6 +279,7 @@ export default {
     get_all_images,
     find_image_by_id,
     find_max_image_id,
+    find_images_by_tags,
     find_image_by_phash,
     find_image_by_sha512,
     update_image_data_by_id