linting and refactoring

.github/workflows/typescript-check.yml

@@ -26,4 +26,4 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Checking types
-        run: yarn --cwd ./app tsc --noEmit
+        run: yarn --cwd ./app ./node_modules/.bin/tsc --noEmit

app/.env.local.example

@@ -1 +1,2 @@
+REDIS_URL=
 GA=

app/@types/app.d.ts

@@ -1,14 +1,14 @@
 declare type ThemeOverrides = "light" | "dark" | ""
 
 declare type OptionsCtxTypes = {
-  theme?: ThemeOverrides
-  highContrast?: boolean
+  theme: ThemeOverrides
+  highContrast: boolean
   expandComics?: boolean
-  animations?: boolean
-  setTheme?: (theme: ThemeOverrides) => void
+  animations: boolean | undefined
+  setTheme: (theme: ThemeOverrides) => void
   setExpandComics?: (expandComics: boolean) => void
-  setHighContrast?: (highContrast: boolean) => void
-  setAnimations?: (animations: boolean) => void
+  setHighContrast: (highContrast: boolean) => void
+  setAnimations: (animations: boolean) => void
 }
 
 declare type SidebarCtxTypes = {

app/@types/backend.d.ts

@@ -15,12 +15,4 @@ declare global {
   type CharacterRes = {
     characters: string[]
   }
-
-  // Redis.ts
-  type ComicItems = {
-    title: string
-    characters: string[]
-    comic_link: string
-    image: string
-  }
 }

app/lib/redis.ts

@@ -1,10 +1,19 @@
 import { createClient } from "redis"
 
-const searchComics = async (years: string[], characters: string[]) => {
-  const client = createClient({
-    url: process.env.REDIS_URL
-  })
+type ComicItems = {
+  title: string
+  characters: string[]
+  comic_link: string
+  image: string
+}
+
+const client = createClient({
+  url: process.env.REDIS_URL
+})
+
+export async function searchComics(years: string[], characters: string[]) {
   client.connect()
+
   try {
     years = Array.isArray(years) ? years : [years]
     characters = Array.isArray(characters) ? characters : [characters]
@@ -25,13 +34,11 @@ const searchComics = async (years: string[], characters: string[]) => {
     for (const year of years) {
       console.log(year)
       console.log("this needs to run after the above")
+
       await client.ft
         .search(year, character_query, { LIMIT: { from: 0, size: 500 } })
         .then((result) => {
-          // console.log(result.documents)
-
           result.documents.forEach((doc) => {
-            // console.log(doc.value.title)
             const comic: ComicItems = {
               title: doc.value.title as string,
               characters: (doc.value.characters as string).split(", "),
@@ -42,19 +49,17 @@ const searchComics = async (years: string[], characters: string[]) => {
           })
         })
     }
+
     client.quit()
-    // console.log(comicsOutput)
     return { comics: comicsOutput }
   } catch {
     client.quit()
+
     return { comics: "ERROR: Search failed!" }
   }
 }
 
-const grabData = async () => {
-  const client = createClient({
-    url: process.env.REDIS_URL
-  })
+export async function grabData() {
   client.connect()
   let comicCount = 0
   let charCount = 0
@@ -63,18 +68,17 @@ const grabData = async () => {
     console.log(result - 1)
     comicCount = result - 1
   })
+
   await client.LLEN("characters_db").then((result) => {
     console.log(result)
     charCount = result
   })
+
   client.quit()
   return { comicCount: comicCount, charCount: charCount }
 }
 
-const grabCharacters = async () => {
-  const client = createClient({
-    url: process.env.REDIS_URL
-  })
+export async function grabCharacters() {
   client.connect()
 
   let characters: string[] | undefined
@@ -85,5 +89,3 @@ const grabCharacters = async () => {
   })
   return { characters_db: characters }
 }
-
-export { searchComics, grabData, grabCharacters }

app/src/components/ComicItem/CharacterItem.tsx

@@ -11,6 +11,7 @@ export default function CharacterItem({ name }: { name?: string }) {
   return (
     <li
       role="button"
+      title="Append character to the search query"
       className={styles["char-item"]}
       style={{
         backgroundColor: `var(--bg-${character})`,

app/src/components/base/Container.tsx

@@ -2,7 +2,7 @@ import { useContext } from "react"
 import styles from "@/styles/base/Base.module.scss"
 import Head from "next/head"
 import lazy from "next/dynamic"
-import SidebarMenu from "../navigation/Sidebar/SidebarMenu"
+import SidebarMenu from "./Sidebar/SidebarMenu"
 import { SidebarContext } from "@/utils/Contexts"
 
 const MarginFiller = lazy(() => import("../MarginFiller.client"), {

app/src/components/base/Layout.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"
 import { SidebarContext, OptionsContext } from "@/utils/Contexts"
 import Navbar from "./Navbar"
-import BackToTopBtn from "../navigation/BackToTopBtn"
+import BackToTopBtn from "../BackToTopBtn"
 
 export default function Layout({ children }: LayoutProps) {
   // Options state

app/src/components/base/Navbar/Navbar.tsx

@@ -1,22 +1,19 @@
 import { useRouter } from "next/router"
 import { NavbarRoot } from "./NavbarRoot"
 import { LogoNav } from "./LogoNav"
-import SearchBox from "../Searchbox/SearchBox"
-import OptionsMenu from "../../navigation/Options/OptionsMenu"
+import SearchBox from "../SearchBox"
+import Options from "../Options"
 
 export default function Navbar() {
   const router = useRouter()
 
   return (
     <NavbarRoot>
       <LogoNav />
-      {router.pathname === "/" ||
-      router.pathname === "/search" ||
-      router.pathname === "/characters" ||
-      router.pathname === "/chapters" ? (
+      {router.pathname === "/" || router.pathname === "/about" ? null : (
         <SearchBox />
-      ) : null}
-      <OptionsMenu />
+      )}
+      <Options />
     </NavbarRoot>
   )
 }

app/src/components/navigation/Options/OptionsMenu.tsx → app/src/components/base/Options/Options.tsx

@@ -52,9 +52,9 @@ export default function OptionsMenu() {
           <OptionsItem title="Theme" themeItem>
             Changing the theme will override system theme and is applied to this
             browser only
-            <span className={styles["override-label"]}>
+            {/* <span className={styles["override-label"]}>
               THEME OVERWRITTEN &bull; REVERT TO DEFAULT
-            </span>
+            </span> */}
           </OptionsItem>
           <OptionsItem title="Expand width contents">
             Fill comic contents for larger displays
@@ -79,7 +79,7 @@ export default function OptionsMenu() {
           </OptionsItem>
         </section>
         <section className={styles.section}>
-          <OptionsItem icon={faWarning} header="Danger zone" />
+          <OptionsItem icon={faWarning} header="Reset settings" />
           <div className={styles.toggle}>
             <article>
               <p>Revert to default settings</p>

app/src/components/navigation/Options/index.tsx → app/src/components/base/Options/index.tsx

@@ -1,2 +1,2 @@
-export { default } from "./OptionsMenu"
+export { default } from "./Options"
 export { OptionsItem } from "./OptionsItem"

app/src/components/base/Searchbox/index.tsx

@@ -0,0 +1 @@
+export { default } from "./SearchBox"

app/src/components/navigation/Sidebar/SidebarMenu.tsx → app/src/components/base/Sidebar/SidebarMenu.tsx

@@ -26,7 +26,7 @@ export default function Sidebar() {
       }
     >
       <nav className={styles["menu-nav"]}>
-        <SidebarItem name="Search" link="/" icon={faSearch} />
+        <SidebarItem name="Search" link="/search" icon={faSearch} />
         <SidebarItem name="Character List" link="/characters" icon={faPaw} />
         <SidebarItem name="Chapter List" icon={faList} disabled />
         <hr className={styles.separator} />

app/src/handlers/ApiHandler.ts

@@ -1,7 +1,7 @@
 export async function Search(
   years: string[],
   characters: string[]
-): Promise<SearchRes> {
+): Promise<SearchRes | {}> {
   return fetch("/api/search", {
     method: "POST",
     headers: {
@@ -13,7 +13,7 @@ export async function Search(
     })
   })
     .then((res) => res.json())
-    .then((res) => {
+    .then((res: SearchRes) => {
       return res.comics
     })
 }
@@ -24,10 +24,10 @@ export async function Data(): Promise<DataRes> {
   })
 }
 
-export async function Characters(): Promise<CharacterRes> {
+export async function Characters(): Promise<CharacterRes | {}> {
   return fetch("/api/characters")
     .then((res) => res.json())
-    .then((data) => {
+    .then((data: { characters_db: string[] }) => {
       return data.characters_db
     })
 }

app/src/pages/_app.tsx

@@ -23,6 +23,7 @@ import {
 import Layout from "@/components/base/Layout"
 import "@fortawesome/fontawesome-svg-core/styles.css"
 import "@/styles/globals.scss"
+import Script from "next/script"
 
 import * as ga from "../../lib/ga"
 
@@ -56,19 +57,15 @@ export default function SearchpetsApp({ Component, pageProps }: AppProps) {
     return () => router.events.off("routeChangeComplete", handleRouteChange)
   }, [router.events])
 
-  if (router.pathname === "/about") {
-    return (
-      <Layout>
+  return (
+    <Layout>
+      {router.pathname === "/about" ? (
         <MDXProvider>
           <Component {...pageProps} />
         </MDXProvider>
-      </Layout>
-    )
-  }
-
-  return (
-    <Layout>
-      <Component {...pageProps} />
+      ) : (
+        <Component {...pageProps} />
+      )}
     </Layout>
   )
 }

app/src/pages/_document.tsx

@@ -24,7 +24,6 @@ export default class SearchpetsApp extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Lato:wght@300;400;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
           />
-
           <meta name="application-name" content="Searchpets" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
           {/* prettier-ignore */}
@@ -39,22 +38,20 @@ export default class SearchpetsApp extends Document {
           {/* prettier-ignore */}
           <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#7f5bd5" />
           <link rel="manifest" href="/manifest.json" />
-          <script
-            async
+          <Script
+            strategy="lazyOnload"
             src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA}`}
           />
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
+          <Script id="ga" strategy="lazyOnload">
+            {`
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
             gtag('config', '${process.env.GA}', {
               page_path: window.location.pathname,
             });
-          `
-            }}
-          />
+          `}
+          </Script>
         </Head>
         <body>
           <Main />

app/src/pages/api/characters.ts

@@ -6,12 +6,11 @@ export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<string>
 ) {
-  const reciveCharacters = (async () => {
+  const recieveCharacters = (async () => {
     console.log("api is running")
     const characters = await grabCharacters()
     console.log(characters)
     res.status(200).send(JSON.stringify(characters))
-
   })()
 }
 

app/src/pages/index.tsx

@@ -1,5 +1,12 @@
-import Container from "@/components/base/Container";
+import Container from "@/components/base/Container"
 
 export default function Home() {
-  return <Container>Home page</Container>
+  return (
+    <Container>
+      <div className="text-center flex flex-col items-center w-full">
+        charCount characters and comicCount comics
+        <div>searchbox here</div>
+      </div>
+    </Container>
+  )
 }

app/src/pages/search.tsx

@@ -47,7 +47,7 @@ export default function SearchPage() {
       <div className={styles["comic-contents"]}>
         <ComicItem
           title="(Isolated component debug mode)"
-          characters={["test", "your mom gay"]}
+          characters={["test", "test2"]}
           img="https://www.housepetscomic.com/wp-content/uploads/2017/07/2017-07-14-concerned-1.png"
           link=""
           guestItem