feat: add cache (#40)

* feat: disable PWA in dev

* feat: add caching

* --amend

* feat: make sure cache <= 30 minutes

* refactor: use cacheKey

components/search/Search.tsx

@@ -164,9 +164,9 @@ const Search = () => {
             try {
                 const universityParam = university;
                 const geParam = !ge.includes("GE") ? ge : ge.split(" ")[1];
-                const data = await queryDatabase(universityParam, geParam);
+                const courses = await queryDatabase(universityParam, geParam);
 
-                setCourses(data.courses);
+                setCourses(courses);
                 setLoading(false);
                 setError(false);
 
@@ -287,7 +287,7 @@ const Search = () => {
                             searchGE={ge}
                         />
                         <div className="mt-8 flex flex-row gap-4 md:mt-16 md:gap-8">
-                            <div className="hidden h-fit rounded-xl bg-bg_secondary p-8 xl:flex xl:flex-col">
+                            <div className="bg-bg_secondary hidden h-fit rounded-xl p-8 xl:flex xl:flex-col">
                                 <div className="mb-8 text-3xl font-medium">
                                     Search Filters
                                 </div>
@@ -317,7 +317,7 @@ const Search = () => {
                                     </button>
 
                                     <div className="flex items-center gap-4 md:flex-row">
-                                        <div className="hidden text-gray sm:flex">
+                                        <div className="text-gray hidden sm:flex">
                                             Sort By:
                                         </div>
                                         <SortDropdown

components/search/query-db.ts

@@ -1,4 +1,22 @@
-export async function queryDatabase(university: string, ge: string) {
+import { CollegeObject } from "./Search";
+
+const cache: Record<string, [Date, CollegeObject[]]> = {};
+
+export async function queryDatabase(
+    university: string,
+    ge: string,
+): Promise<CollegeObject[]> {
+    const cacheKey = university + ge;
+
+    if (cache[cacheKey] && cache[cacheKey][0]) {
+        const [cachedDate, cachedData] = cache[cacheKey];
+
+        // If not older than 30 minutes, return cached courses
+        if ((new Date().getTime() - cachedDate.getTime()) / (1000 * 60) <= 30) {
+            return cachedData;
+        }
+    }
+
     const universityParam = encodeURIComponent(university);
     const geParam = encodeURIComponent(ge);
 
@@ -11,7 +29,10 @@ export async function queryDatabase(university: string, ge: string) {
         }
 
         const data = await response.json();
-        return data;
+
+        cache[cacheKey] = [new Date(), data.courses];
+
+        return data.courses;
     } catch (error) {
         console.error("Error:", error);
         throw error;

next.config.js

@@ -1,13 +1,14 @@
 /** @type {import('next').NextConfig} */
 
 const runtimeCaching = require("next-pwa/cache");
-const withPWA = require('next-pwa')({
-    dest: 'public',
+const withPWA = require("next-pwa")({
+    dest: "public",
     register: true,
     skipWaiting: true,
-    runtimeCaching
-})
+    runtimeCaching,
+    disable: process.env.NODE_ENV === "DEVELOPMENT",
+});
 
 module.exports = withPWA({
-    reactStrictMode: false
-})
+    reactStrictMode: false,
+});