Add types and lazyloading

Remove and ignore comic images for testing

.gitignore

@@ -47,3 +47,5 @@ redis_config.json
 
 # Ignore __pycache__ stuff
 server/__pycache__
+
+app/public/0[1-5].jpg

app/@types/app.d.ts

@@ -0,0 +1,30 @@
+// import type { IconProp } from "@fortawesome/fontawesome-svg-core"
+
+declare interface ILayoutProps {
+  children?: React.ReactNode
+}
+
+declare interface IContainerProps extends ILayoutProps {
+  title?: string
+  description?: string
+  wrap?: boolean | undefined
+}
+
+declare interface INavLinkProps {
+  link?: string
+  name?: string
+  icon: IconProp
+}
+
+declare interface IFooterLinkProps extends INavLinkProps {}
+
+declare interface IFilterItemProps {
+  name: string | number
+  yearType?: boolean | undefined
+}
+
+declare interface IComicItemProps {
+  title: string
+  img: string
+  characters?: string[]
+}

app/@types/backend.d.ts

@@ -0,0 +1,5 @@
+declare interface RedisClient {
+  comics?: string[]
+  years: string[]
+  characters: string[]
+}

app/@types/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="./app.d.ts" />
+/// <reference path="./backend.d.ts" />

app/lib/redis.ts

@@ -1,35 +1,36 @@
-import { RedisClient } from '@/utils/Interfaces';
-import { Client, Entity, Schema, Repository } from "redis-om"
+// import { Client, Entity, Schema, Repository } from "redis-om"
 
-const client = new Client()
+// const client = new Client()
 
-async function connect() {
-  if (!client.isOpen()) {
-    await client.open(process.env.REDIS_URL)
-  }
-}
+// async function connect() {
+//   if (!client.isOpen()) {
+//     await client.open(process.env.REDIS_URL)
+//   }
+// }
 
-class Comic extends Entity {}
+// class Comic extends Entity {}
 
-let schema = new Schema(Comic, {
-  title: { type: "string" },
-  comic_link: { type: "string" },
-  characters: { type: "string[]" },
-  image: { type: "string" },
-  index: { type: "number", sortable: true }
-})
+// let schema = new Schema(Comic, {
+//   title: { type: "string" },
+//   comic_link: { type: "string" },
+//   characters: { type: "string[]" },
+//   image: { type: "string" },
+//   index: { type: "number", sortable: true }
+// })
 
-export async function searchComics<RedisClient>(years: string[], characters: string[]) {
-  await connect()
-  // for every year index given, search that year index that have the characters given
-  let comics: RedisClient[] = []
-  console.log(years)
-  console.log(characters)
+// export async function searchComics<RedisClient>(years: string[], characters: string[]) {
+//   await connect()
+//   // for every year index given, search that year index that have the characters given
+//   let comics: RedisClient[] = []
+//   console.log(years)
+//   console.log(characters)
 
-  years.forEach((year) => {
-    console.log(year)
-    // search the index for the year for comics that have the characters given
-    // once found, add them to the comics array
-  })
-  return { comics: comics }
-}
+//   years.forEach((year) => {
+//     console.log(year)
+//     // search the index for the year for comics that have the characters given
+//     // once found, add them to the comics array
+//   })
+//   return { comics: comics }
+// }
+
+export {}

app/src/components/ComicItem.tsx

@@ -1,7 +1,46 @@
+import { useState } from "react"
+import Image from "next/image"
 import styles from "@/styles/ComicItem.module.scss"
+import LoadingCircle from "./LoadingCircle"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faBookmark } from "@fortawesome/free-solid-svg-icons"
 
-export default function ComicItem() {
-  return <>yes</>
+export default function ComicItem({ title, img, characters }: IComicItemProps) {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles["heading-container"]}>
+        <h2 className={styles.heading}>{title}</h2>
+        <button className={styles["bookmark-btn"]}>
+          <FontAwesomeIcon icon={faBookmark} size="sm" />
+        </button>
+      </div>
+      <div className={styles["image-container"]}>
+        <LoadingCircle hidden={isLoaded !== true ? false : true} />
+        <Image
+          src={img}
+          loading="lazy"
+          alt="comic"
+          objectFit="contain"
+          layout="fill"
+          quality={75}
+          onLoadingComplete={() => setIsLoaded(true)}
+        />
+      </div>
+      <div className={styles["info-container"]}>
+        <div>
+          <h3 className={styles.subheading}>Characters</h3>
+          {/* <ul className={styles["characters-list"]}>
+            {characters!.map((character: string) => (
+              <li key={character}>{character}</li>
+            ))}
+          </ul> */}
+          <ul className={styles["characters-list"]}></ul>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export function ComicItemLoading() {

app/src/components/Container.tsx

@@ -1,5 +1,4 @@
 import styles from "@/styles/Base.module.scss"
-import { IContainerProps } from "@/utils/Interfaces"
 import Head from "next/head"
 
 export default function Container({

app/src/components/LoadingCircle.tsx

@@ -0,0 +1,26 @@
+import styles from "@/styles/LoadingCircle.module.scss"
+
+export default function LoadingCircle({ hidden }: { hidden?: boolean }) {
+  return (
+    <div
+      className={
+        hidden !== true
+        ? styles.wrapper.toString()
+        : styles["wrapper-hidden"].toString()
+      }
+    >
+      <div className={styles.circle}>
+        <svg>
+          <circle
+            cx="50"
+            cy="50"
+            r="35"
+            stroke="black"
+            className={styles.circle}
+          />
+        </svg>
+      </div>
+      <span id={styles.label}>Loading...</span>
+    </div>
+  )
+}

app/src/components/SearchContainer.tsx

@@ -1,6 +1,5 @@
 import { useRef, useState, useLayoutEffect } from "react"
 import styles from "@/styles/Search.module.scss"
-import { IFilterItemProps } from "@/utils/Interfaces"
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 

app/src/components/base/Footer.tsx

@@ -1,5 +1,4 @@
 import styles from "@/styles/Footer.module.scss"
-import { IFooterLinkProps } from "@/utils/Interfaces"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { faLink } from "@fortawesome/free-solid-svg-icons"

app/src/components/base/Layout.tsx

@@ -1,4 +1,3 @@
-import { ILayoutProps } from "@/utils/Interfaces"
 import Navbar from "./Navbar"
 import Footer from "./Footer"
 

app/src/components/base/Navbar.tsx

@@ -1,7 +1,6 @@
 import { useRouter } from "next/router"
 import Link from "next/link"
 import styles from "@/styles/Navbar.module.scss"
-import { INavLinkProps } from "@/utils/Interfaces"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
   faAdjust,

app/src/pages/api/characters.ts

@@ -1,14 +1,16 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import { resolve } from "path"
+// import type { NextApiRequest, NextApiResponse } from "next"
+// import { resolve } from "path"
 
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<string>
-) {
-  const reciveCharacters = (async () => {
-    const response = await fetch("http://localhost:5000/characters")
-    const json = await response.json()
-    res.end(JSON.stringify(json))
-    resolve()
-  })()
-}
+// export default function handler(
+//   req: NextApiRequest,
+//   res: NextApiResponse<string>
+// ) {
+//   const reciveCharacters = (async () => {
+//     const response = await fetch("http://localhost:5000/characters")
+//     const json = await response.json()
+//     res.end(JSON.stringify(json))
+//     resolve()
+//   })()
+// }
+
+export {}

app/src/pages/api/data.ts

@@ -1,14 +1,16 @@
-import type { NextApiRequest, NextApiResponse } from "next"
-import { resolve } from "path"
+// import type { NextApiRequest, NextApiResponse } from "next"
+// import { resolve } from "path"
 
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<string>
-) {
-  const receiveData = (async () => {
-    const response = await fetch("http://localhost:5000/data")
-    const json = await response.json()
-    res.end(JSON.stringify(json))
-    resolve()
-  })()
-}
+// export default function handler(
+//   req: NextApiRequest,
+//   res: NextApiResponse<string>
+// ) {
+//   const receiveData = (async () => {
+//     const response = await fetch("http://localhost:5000/data")
+//     const json = await response.json()
+//     res.end(JSON.stringify(json))
+//     resolve()
+//   })()
+// }
+
+export {}

app/src/pages/api/search.ts

@@ -1,15 +1,17 @@
-import { searchComics } from '../../../lib/redis'
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { resolve } from 'path'
+// import { searchComics } from '../../../lib/redis'
+// import type { NextApiRequest, NextApiResponse } from 'next'
+// import { resolve } from 'path'
 
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<string>
-) {
-  const sendData = (async () => {
-    let comics = await searchComics(req.body.year, req.body.characters)
-    console.log(comics)
-    res.status(200).send(JSON.stringify(comics))
-    resolve()
-  })()
-}
+// export default function handler(
+//   req: NextApiRequest,
+//   res: NextApiResponse<string>
+// ) {
+//   const sendData = (async () => {
+//     let comics = await searchComics(req.body.year, req.body.characters)
+//     console.log(comics)
+//     res.status(200).send(JSON.stringify(comics))
+//     resolve()
+//   })()
+// }
+
+export {}

app/src/pages/index.tsx

@@ -6,10 +6,12 @@ export default function Home() {
   return (
     <Container wrap>
       <SearchContainer />
-      <div>
-        <ComicItem />
-        <ComicItem />
-        <ComicItem />
+      <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-3 mt-2 px-1">
+        <ComicItem img="/static/01.jpg" title="title" />
+        <ComicItem img="/static/02.jpg" title="title" />
+        <ComicItem img="/static/03.jpg" title="title" />
+        <ComicItem img="/static/04.jpg" title="title" />
+        <ComicItem img="/static/05.jpg" title="title" />
       </div>
     </Container>
   )

app/src/styles/ComicItem.module.scss

@@ -0,0 +1,23 @@
+.wrapper {
+  @apply px-5 py-3 bg-gray-200 rounded-md flex flex-col;
+}
+
+.heading-container {
+  @apply flex items-center justify-between;
+}
+
+.heading {
+  @apply font-bold text-lg;
+}
+
+.bookmark-btn {
+  @apply text-gray-800 bg-yellow-200 hover:bg-yellow-300 px-3 py-2 rounded-md;
+}
+
+.image-container {
+  @apply relative h-[600px] w-full;
+
+  img {
+    @apply select-none;
+  }
+}