feat: timetable history

Author: Zain-ul-din

src/components/TimetableSelection.tsx

@@ -55,21 +55,23 @@ import Fuse from 'fuse.js';
 import ViewLinkTxt from './design/ViewLinkTxt';
 import { ROUTING } from '~/lib/constant';
 import { hashStr } from '~/lib/cipher';
+import useTimetableHistory from '~/hooks/useTimetableHistory';
 
 function Selection({ metaData }: { metaData: any }): JSX.Element {
   const [userInput, setUserInput] = useState<TimetableInput>({
     fall: null,
     semester: null,
     section: null
   });
+
   const [currTabIdx, setCurrTabIdx] = useState<number>(0);
   const [history, setHistory] = useState<Array<ITimetableHistory>>([]);
+  const [isUnder400] = useMediaQuery('(max-width: 400px)');
+  const [localHistory, setLocalHistory] = useTimetableHistory();
 
   const user = useContext(UserCredentialsContext);
   const router = useRouter();
 
-  const [isUnder400] = useMediaQuery('(max-width: 400px)');
-
   useEffect(() => {
     if (!user?.user) return;
     const fetchTimetableHistory = async () => {
@@ -205,12 +207,14 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
                             createdAt: serverTimestamp()
                           });
                         }
+
+                        setLocalHistory({
+                          payload: userInput,
+                          created_at: new Date().toDateString(),
+                          hash: hashStr(`${fall} ${semester} ${section}`.replaceAll('/', ''))
+                        });
+
                         const hash = hashStr(`${fall} ${semester} ${section}`.replaceAll('/', ''));
-                        console.log(
-                          `${fall} ${semester} ${section}`.replaceAll('/', ''),
-                          ' ~ ',
-                          hash
-                        );
                         router.push(`/timetable/${hash}`);
                       }}
                     />

src/hooks/useTimetableHistory.tsx

@@ -0,0 +1,67 @@
+import { useContext, useState, useEffect } from 'react';
+import { TimetableInput } from '~/types/typedef';
+import { UserCredentialsContext } from './UserCredentialsContext';
+import { timetableHistoryCol } from '~/lib/firebase';
+import { doc, getCountFromServer, query, serverTimestamp, setDoc, where } from 'firebase/firestore';
+
+const STORAGE_KEY = 'TIME_TABLE_HISTORY';
+
+interface UseTimetableHistory {
+  payload: TimetableInput;
+  created_at: string;
+  hash: string;
+}
+
+const useTimetableHistory = (): [
+  UseTimetableHistory[],
+  (timetable: UseTimetableHistory) => void
+] => {
+  const user = useContext(UserCredentialsContext);
+  const [timetableHistory, setTimetableHistory] = useState<UseTimetableHistory[]>([]);
+
+  useEffect(() => {
+    const storedTimetableHistory = localStorage.getItem(STORAGE_KEY);
+    if (storedTimetableHistory) setTimetableHistory(JSON.parse(storedTimetableHistory));
+  }, []);
+
+  useEffect(() => {
+    if (user == null || user.user == null) return;
+
+    const timetableHistoryQuery = query(
+      timetableHistoryCol,
+      where('email', '==', user.user?.email)
+    );
+
+    const email = user.user.email as string;
+
+    getCountFromServer(timetableHistoryQuery).then((snapShot) => {
+      const count = snapShot.data().count;
+      if (count !== 0) return;
+
+      timetableHistory.forEach((history) => {
+        setDoc(doc(timetableHistoryCol), {
+          payload: history.payload,
+          email: email,
+          createdAt: serverTimestamp()
+        });
+      });
+    });
+
+    return () => {};
+  }, [user, timetableHistory]);
+
+  const addTimetableHistory = (timetable: UseTimetableHistory) => {
+    setTimetableHistory((prev) => {
+      const isAlreadyInHistory = prev.some((history) => history.hash === timetable.hash);
+      if (isAlreadyInHistory) return prev;
+      const newTimetableHistory = [timetable, ...prev];
+      if (newTimetableHistory.length > 50) newTimetableHistory.pop();
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(newTimetableHistory));
+      return newTimetableHistory;
+    });
+  };
+
+  return [timetableHistory, addTimetableHistory];
+};
+
+export default useTimetableHistory;

src/pages/_document.tsx

@@ -4,7 +4,6 @@ import { FavIcons } from '~/components/seo/Seo';
 
 import { themeConfig } from '~/styles/Style';
 
-// re-deploying.
 export default function Document() {
   return (
     <Html lang="en">