perf(api): ⚡ improve database queries for the main page

Related to #1

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "conventionalCommits.scopes": [
         "repo",
-        "header"
+        "header",
+        "api"
     ]
 }

components/ToolSearchTable.tsx

@@ -8,7 +8,7 @@ import { FaStar, FaTable } from 'react-icons/fa';
 export default function ToolSearchTable(props: any) {
 
     const cachedPreviewData   = props.tablePreviewData.firstTools;
-    const cachedRecentlyAdded = props.tablePreviewData.recentlyAdded;
+    const cachedRecentlyAdded = props.tablePreviewData.recentlyAddedData;
 
     const [tablePreviewData, setTablePreviewData] = useState(cachedPreviewData)
     const [standardTableViewVisible, setStandardTableViewVisible] = useState(true)

db.ts

@@ -0,0 +1,15 @@
+import { PrismaClient } from '@prisma/client'
+
+declare global {
+  // allow global `var` declarations
+  // eslint-disable-next-line no-var
+  var prisma: PrismaClient | undefined
+}
+
+export const prisma =
+  global.prisma ||
+  new PrismaClient({
+    log: ['query'],
+  })
+
+if (process.env.NODE_ENV !== 'production') global.prisma = prisma

pages/api/getEntries.ts

@@ -0,0 +1,91 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { prisma } from './../../db'
+
+type Data = {
+  name: string
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  const params = req.query
+
+  if(params.get === "standard"){
+    const tools = await prisma.tools.findMany({
+      select: {
+        id: true,
+        tool_name: true,
+        submitted_by: true,
+        tool_link: true,
+        logo: true,
+        github_repo: true,
+        twitter_link: true,
+        tool_categories: {
+          select: {
+            categories: {
+              select: {
+                id: true,
+                category_name: true,
+                category_icon: true
+              }
+            }
+          }
+        },
+      },
+      take: 10,
+    });
+
+    return res.status(200).json(tools)
+  }
+
+  if (params.get === "categories") {
+    const categories = await prisma.categories.findMany({
+      select: {
+        id: true,
+        category_name: true,
+        category_icon: true,
+        category_description: true,
+      }
+    });
+
+    return res.status(200).json(categories)
+  }
+
+  if (params.get === "recentlyAdded") {
+    const recentlyAdded = await prisma.tools.findMany({
+      select: {
+        id: true,
+        tool_name: true,
+        submitted_by: true,
+        tool_link: true,
+        logo: true,
+        github_repo: true,
+        twitter_link: true,
+        tool_categories: {
+          select: {
+            categories: {
+              select: {
+                id: true,
+                category_name: true,
+                category_icon: true
+              }
+            }
+          }
+        },
+      },
+      take: 10,
+      orderBy: {
+        created_at: "desc"
+      }
+    });
+
+    return res.status(200).json(recentlyAdded)
+  }
+
+  return res.status(200).json({
+    "message": "No data found"
+  })
+
+}

pages/api/querySearch/[query].ts

@@ -1,7 +1,5 @@
-import { PrismaClient, tools } from "@prisma/client";
+import { prisma } from './../../../db'
 
-const prisma = new PrismaClient()
-
 export default async function handler(req: any, res: any) {
 
     let { query } = req.query

pages/category/[id].tsx

@@ -4,11 +4,9 @@ import CategoryMain from "../../components/CategoryMain";
 import Footer from "../../components/Footer";
 import { NextSeo } from "next-seo";
 import { useRouter } from 'next/router'
-import { PrismaClient } from "@prisma/client";
+import { prisma } from './../../db'
 import Script from "next/script";
 
-const prisma = new PrismaClient();
-
 export default function ToolPage(props: any) {
 
     const router = useRouter()

pages/donate.tsx

@@ -1,6 +1,5 @@
 import Head from "next/head";
 import Header from "../components/Header";
-import Main from "../components/Main";
 import Footer from "../components/Footer";
 import { NextSeo } from "next-seo";
 import Script from "next/script";

pages/index.tsx

@@ -3,13 +3,56 @@ import Header from "../components/Header";
 import Main from "../components/Main";
 import Footer from "../components/Footer";
 import { NextSeo } from "next-seo";
-import { PrismaClient } from "@prisma/client";
+import { prisma } from './../db'
 import Script from "next/script";
+import axios from "axios";
+import useSWR from "swr";
+import { Progress } from "flowbite-react";
 
-const prisma = new PrismaClient()
+const fetcher = (url:any) => axios.get(url).then(res => res.data)
 
 export default function Home(props: any) {
 
+  const { data: standardData, error: standardError }: any = useSWR('/api/getEntries?get=standard', fetcher)
+  const { data: recentlyAddedData, error: recentlyAddedError }: any = useSWR('/api/getEntries?get=recentlyAdded', fetcher)
+  const { data: categoriesData, error: categoriesError }: any = useSWR('/api/getEntries?get=categories', fetcher)
+
+  if (!standardData ) return (
+    <div className="mx-auto max-w-5xl text-white">
+      <Progress
+        progress={33}
+        size="md"
+        label="Loading tooldb..."
+        labelPosition="outside"
+        labelProgress={true}
+      />
+    </div>
+  );
+  if (!recentlyAddedData ) return (
+    <div className="mx-auto max-w-5xl text-white">
+      <Progress
+        progress={66}
+        size="md"
+        label="Loading tooldb..."
+        labelPosition="outside"
+        labelProgress={true}
+      />
+    </div>
+  );
+  if (!categoriesData ) return (
+    <div className="mx-auto max-w-5xl text-white">
+      <Progress
+        progress={100}
+        size="md"
+        label="Loading tooldb..."
+        labelPosition="outside"
+        labelProgress={true}
+      />
+    </div>
+  );
+
+  const tablePreviewData = {firstTools: standardData, recentlyAddedData}
+
   return (
     <div>
       <NextSeo
@@ -36,80 +79,8 @@ export default function Home(props: any) {
       <Script type="text/javascript" src="//cdn.iubenda.com/cs/ccpa/stub.js" />
       <Script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charSet="UTF-8" async />
       <Header />
-      <Main tablePreviewData={props.tablePreviewData} categories={props.categories}/>
+      <Main tablePreviewData={tablePreviewData} categories={categoriesData}/>
       <Footer />
     </div>
   );
-}
-
-export async function getServerSideProps(context: any) {
-
-  const tools = await prisma.tools.findMany({
-    select: {
-      id: true,
-      tool_name: true,
-      submitted_by: true,
-      tool_link: true,
-      logo: true,
-      github_repo: true,
-      twitter_link: true,
-      tool_categories: {
-        select: {
-          categories: {
-            select: {
-              id: true,
-              category_name: true,
-              category_icon: true
-            }
-          }
-        }
-      },
-    },
-    take: 10,
-  });
-
-  const categories = await prisma.categories.findMany({
-    select: {
-      id: true,
-      category_name: true,
-      category_icon: true,
-      category_description: true,
-    }
-  });
-
-  const recentlyAdded = await prisma.tools.findMany({
-    select: {
-      id: true,
-      tool_name: true,
-      submitted_by: true,
-      tool_link: true,
-      logo: true,
-      github_repo: true,
-      twitter_link: true,
-      tool_categories: {
-        select: {
-          categories: {
-            select: {
-              id: true,
-              category_name: true,
-              category_icon: true
-            }
-          }
-        }
-      },
-    },
-    take: 10,
-    orderBy: {
-      created_at: "desc"
-    }
-  });
-
-  console.log(tools)
-
-  return {
-    props: {
-      tablePreviewData: {firstTools: tools, recentlyAdded},
-      categories: categories
-    }
-  }
 }

pages/tool/[id].tsx

@@ -4,15 +4,13 @@ import ToolMain from "../../components/ToolMain";
 import Footer from "../../components/Footer";
 import { NextSeo } from "next-seo";
 import { useRouter } from 'next/router'
-import { PrismaClient } from "@prisma/client";
+import { prisma } from './../../db'
 import { serialize } from 'next-mdx-remote/serialize'
 import Image from "next/image";
 import { Suspense } from "react";
 import { Spinner } from "flowbite-react";
 import Script from "next/script";
 
-const prisma = new PrismaClient();
-
 export default function ToolPage(props: any) {
 
     const router = useRouter()