migration to github apis

Zain-ul-din · Mar 12, 2024 · 503e8c4 · 503e8c4
1 parent fa8c967
commit 503e8c4
Show file tree

Hide file tree

Showing 25 changed files with 325 additions and 239 deletions.
diff --git a/.env.example b/.env.example
@@ -19,3 +19,8 @@ NEXT_PUBLIC_OPENAI_API_KEY=
 
 # Preview
 NEXT_PUBLIC_preview=
+
+# crypto keys
+
+OPEN_DB_KEY=
+OPEN_DB_IV=
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "axios": "^1.3.5",
     "chakra-paginator": "^0.7.3",
     "chatgpt": "^5.2.2",
+    "crypto-js": "^4.2.0",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "firebase": "^9.19.1",
@@ -53,6 +54,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@types/uuid": "^9.0.1",
     "next-sitemap": "^4.0.7",
     "prettier": "^2.8.7"

diff --git a/src/components/FreeClassRooms.tsx b/src/components/FreeClassRooms.tsx
@@ -22,6 +22,7 @@ import { ChevronDownIcon, WarningTwoIcon } from '@chakra-ui/icons';
 import DropDown from './design/DropDown';
 import { FreeClassRoomStateType, UseStateProps } from '~/types/typedef';
 import { BiVerticalTop } from 'react-icons/bi';
+import { hashStr } from '~/lib/cipher';
 
 interface IRoomsType {
   room: Array<string>;
@@ -228,7 +229,7 @@ const RoomsRenderer = ({
                 border={'1px solid var(--border-color)'}
                 fontWeight={'light'}
                 _hover={{ cursor: 'pointer', textDecoration: 'underline' }}>
-                <Link href={`${ROUTING.rooms}/${room}`}>{room}</Link>
+                <Link href={`${ROUTING.rooms}/${hashStr(room)}`}>{room}</Link>
               </Card>
             );
           })}

diff --git a/src/components/TableOfContent.tsx b/src/components/TableOfContent.tsx
@@ -13,6 +13,7 @@ type TableOfContent = {
 };
 
 import { ROUTING } from '~/lib/constant';
+import ClashResolverAd from './announcements/ClashResolverAd';
 
 const tableOfContent: TableOfContent[] = [
   {
@@ -108,42 +109,44 @@ export default function TableOfContent() {
   }, [scrollPos, refs]);
 
   return (
-    <div
-      className={styles.content}
-      onMouseMove={(e) => {
-        refs.forEach((ele) => {
-          if (!ele) return;
-          const rect = ele.getBoundingClientRect(),
-            x = e.clientX - rect.left,
-            y = e.clientY - rect.top;
+    <>
+      <div
+        className={styles.content}
+        onMouseMove={(e) => {
+          refs.forEach((ele) => {
+            if (!ele) return;
+            const rect = ele.getBoundingClientRect(),
+              x = e.clientX - rect.left,
+              y = e.clientY - rect.top;
 
-          ele.style.setProperty('--mouse-x', `${x}px`);
-          ele.style.setProperty('--mouse-y', `${y}px`);
-        });
-      }}>
-      {tableOfContent.map((content, idx) => {
-        return (
-          <Link key={idx} href={content.link}>
-            <motion.div
-              className={styles.card}
-              ref={(ele) => refs.push(ele)}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{
-                delay: idx % 3 == 0 ? 0.15 : (idx % 3) * 0.2,
-                duration: idx % 3 ? 2 : 1.5
-              }}>
-              {/* <>
+            ele.style.setProperty('--mouse-x', `${x}px`);
+            ele.style.setProperty('--mouse-y', `${y}px`);
+          });
+        }}>
+        {tableOfContent.map((content, idx) => {
+          return (
+            <Link key={idx} href={content.link}>
+              <motion.div
+                className={styles.card}
+                ref={(ele) => refs.push(ele)}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{
+                  delay: idx % 3 == 0 ? 0.15 : (idx % 3) * 0.2,
+                  duration: idx % 3 ? 2 : 1.5
+                }}>
+                {/* <>
                     {content.title == "Notifications" && <>
                         <span>10 New Notifications</span>
                     </>}
                 </> */}
-              {content.img}
-              <h1 className={oxygen.className}>{content.title.toUpperCase()}</h1>
-            </motion.div>
-          </Link>
-        );
-      })}
-    </div>
+                {content.img}
+                <h1 className={oxygen.className}>{content.title.toUpperCase()}</h1>
+              </motion.div>
+            </Link>
+          );
+        })}
+      </div>
+    </>
   );
 }
diff --git a/src/components/TeachersTimetableSelection.tsx b/src/components/TeachersTimetableSelection.tsx
@@ -10,6 +10,7 @@ import { ROUTING } from '~/lib/constant';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import BackBtn from './design/BackBtn';
+import { hashStr } from '~/lib/cipher';
 
 export default function TeacherTimetableSelection({ teachers }: { teachers: Array<string> }) {
   const router = useRouter();
@@ -62,30 +63,31 @@ export default function TeacherTimetableSelection({ teachers }: { teachers: Arra
         </div>
         {filterTeachers.map((val, key) => {
           return (
-            <Flex
-              onClick={(e) => router.push(`${ROUTING.teachers}/${val}`)}
-              className="roboto"
-              key={key}
-              bg={'var(--card-color)'}
-              py={'0.5rem'}
-              px={'1rem'}
-              border={'1px solid var(--border-color)'}
-              _hover={{ bg: 'var(--card-dark-color)' }}
-              rounded={'sm'}
-              cursor={'pointer'}>
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{
-                  duration: Math.random() * 0.5,
-                  delay: (Math.random() * 1.5) % 1
-                }}>
-                <Icon style={{ transform: 'TranslateY(-2px)' }} mx={'6px'}>
-                  <LinkIcon />
-                </Icon>{' '}
-                {val}
-              </motion.div>
-            </Flex>
+            <Link href={`${ROUTING.teachers}/${hashStr(val)}`} key={key}>
+              <Flex
+                onClick={(e) => router.push(``)}
+                className="roboto"
+                bg={'var(--card-color)'}
+                py={'0.5rem'}
+                px={'1rem'}
+                border={'1px solid var(--border-color)'}
+                _hover={{ bg: 'var(--card-dark-color)' }}
+                rounded={'sm'}
+                cursor={'pointer'}>
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{
+                    duration: Math.random() * 0.5,
+                    delay: (Math.random() * 1.5) % 1
+                  }}>
+                  <Icon style={{ transform: 'TranslateY(-2px)' }} mx={'6px'}>
+                    <LinkIcon />
+                  </Icon>{' '}
+                  {val}
+                </motion.div>
+              </Flex>
+            </Link>
           );
         })}
       </Flex>

diff --git a/src/components/Timetable.tsx b/src/components/Timetable.tsx
@@ -277,6 +277,7 @@ import BackBtn from './design/BackBtn';
 import TimetableChart from './charts/TimetableChart';
 import PalestineSideAd from './announcements/PalestineSideAd';
 import { useRouter } from 'next/router';
+import { hashStr } from '~/lib/cipher';
 
 const Card = ({ day, data, idx }: { idx: number; day: string; data: Array<any> }) => {
   const { isOpen, onToggle } = useDisclosure({
@@ -358,8 +359,8 @@ const TimetableRenderer = ({ data }: { data: Array<any> }) => {
                   <Link
                     href={
                       curr.room
-                        ? `${ROUTING.teachers}/${curr.teacher}`
-                        : `${ROUTING.rooms}/${curr.roomNo}`
+                        ? `${ROUTING.teachers}/${hashStr(curr.teacher)}`
+                        : `${ROUTING.rooms}/${hashStr(curr.roomNo)}`
                     }>
                     {curr.room ? curr.teacher : curr.roomNo}
                   </Link>
@@ -375,8 +376,8 @@ const TimetableRenderer = ({ data }: { data: Array<any> }) => {
                   <Link
                     href={
                       curr.class
-                        ? `${ROUTING.timetable}/${curr.class}`
-                        : `${ROUTING.teachers}/${curr.teacher}`
+                        ? `${ROUTING.timetable}/${hashStr(curr.class)}`
+                        : `${ROUTING.teachers}/${hashStr(curr.teacher)}`
                     }>
                     {curr.class ? curr.class : curr.teacher}
                   </Link>

diff --git a/src/components/TimetableSelection.tsx b/src/components/TimetableSelection.tsx
@@ -31,29 +31,19 @@ import { Fragment, useContext, useEffect, useRef, useState } from 'react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
 import { Flex, Text, Button, useMediaQuery, Input, Divider } from '@chakra-ui/react';
 import { MenuStyle, TabStyle, Transitions } from '~/styles/Style';
-import {
-  getDocs,
-  increment,
-  limit,
-  orderBy,
-  query,
-  serverTimestamp,
-  updateDoc,
-  where
-} from 'firebase/firestore';
+import { serverTimestamp } from 'firebase/firestore';
 
 const tabTitles = ['Semester', 'Program', 'Section'];
 
 import { useRouter } from 'next/router';
 import { UserCredentialsContext } from '~/hooks/UserCredentialsContext';
 import { doc, setDoc } from 'firebase/firestore';
 import { timetableHistoryCol } from '~/lib/firebase';
-import { ITimetableHistory, TimetableInput } from '~/types/typedef';
-import { removeDuplicateTimetableHistory } from '~/lib/util';
-import Link from 'next/link';
+import { TimetableInput } from '~/types/typedef';
 import Fuse from 'fuse.js';
 import ViewLinkTxt from './design/ViewLinkTxt';
 import { ROUTING } from '~/lib/constant';
+import { hashStr } from '~/lib/cipher';
 
 function Selection({ metaData }: { metaData: any }): JSX.Element {
   const [userInput, setUserInput] = useState<TimetableInput>({
@@ -62,32 +52,10 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
     section: null
   });
   const [currTabIdx, setCurrTabIdx] = useState<number>(0);
-  const [history, setHistory] = useState<Array<ITimetableHistory>>([]);
 
   const user = useContext(UserCredentialsContext);
   const router = useRouter();
 
-  useEffect(() => {
-    if (!user?.user) return;
-    const fetchTimetableHistory = async () => {
-      const timetableHistoryQuery = query(
-        timetableHistoryCol,
-        limit(50),
-        where('email', '==', user.user?.email),
-        orderBy('createdAt', 'desc')
-      );
-      const timetableHistoryDocs = await getDocs(timetableHistoryQuery);
-      const res = timetableHistoryDocs.docs.map((historyDoc) => ({
-        docId: historyDoc.id,
-        ...historyDoc.data()
-      }));
-
-      setHistory(res as any);
-    };
-
-    fetchTimetableHistory();
-  }, [user]);
-
   const [isUnder400] = useMediaQuery('(max-width: 400px)');
 
   return (
@@ -108,12 +76,6 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
             <ViewLinkTxt href={ROUTING.clash_resolver}>Timetable Clash Resolver</ViewLinkTxt>
           </Flex>
 
-          {history.length > 0 && (
-            <Flex marginY={'1rem'} flexDirection={'column'}>
-              <HistoryDropDown menuItems={removeDuplicateTimetableHistory(history)} />
-            </Flex>
-          )}
-
           <Text fontSize={{ base: '1xl', md: '2xl', lg: '3xl' }} fontWeight={'light'}>
             {`Select ${tabTitles[currTabIdx]}`.toLocaleUpperCase()}
           </Text>
@@ -204,8 +166,13 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
                             createdAt: serverTimestamp()
                           });
                         }
-
-                        router.push(`/timetable/${fall?.replace('/', '-')} ${semester} ${section}`);
+                        const hash = hashStr(`${fall} ${semester} ${section}`.replaceAll('/', ''));
+                        console.log(
+                          `${fall} ${semester} ${section}`.replaceAll('/', ''),
+                          ' ~ ',
+                          hash
+                        );
+                        router.push(`/timetable/${hash}`);
                       }}
                     />
                   )}
@@ -264,35 +231,8 @@ function DropDown({
           className="dropDown"
           overflowY={'scroll'}
           maxH={'80'}
-          onScroll={(e) => {
-            if ((e as any).target.scrollTop > 5) {
-              (searchRef.current as HTMLElement).style.bottom = '0';
-              (searchRef.current as HTMLElement).style.top = '';
-            } else {
-              (searchRef.current as HTMLElement).style.top = '0';
-              (searchRef.current as HTMLElement).style.bottom = '';
-            }
-          }}
           maxW={'98vw'}
           m={'0.5rem'}>
-          {/* <Input 
-                        value={query}
-                        ref={searchRef} 
-                        placeholder='search' w={'95%'} 
-                        m={'0.5rem'} 
-                        onChange={(e)=> {
-                            var val = e.target.value
-                            setQuery(val)
-                            const results = fuse.search(e.target.value);
-                            setFilterItems(results.map((val) => val.item));
-                            if (e.target.value == '') setFilterItems(menuItems as string[]);
-                            searchRef.current.scrollIntoView({behavior : 'smooth'})
-                        }}
-                        position={'fixed'}
-                        left={'0'}
-                        right={'0'}
-                    /> */}
-
           {filterItems &&
             filterItems?.map(
               (item: string, idx: number): JSX.Element => (
@@ -316,47 +256,3 @@ function DropDown({
     </Transitions.SlideFade>
   );
 }
-
-function HistoryDropDown({ menuItems }: { menuItems: Array<ITimetableHistory> }): JSX.Element {
-  return (
-    <Transitions.SlideFade in={true}>
-      <MenuStyle.Menu preventOverflow={true}>
-        <MenuStyle.MenuButton
-          as={Button}
-          rightIcon={<ChevronDownIcon />}
-          textOverflow={'clip'}
-          fontSize={{ base: 'xs', sm: 'md', lg: 'md' }}>
-          {'Previous Selection History'}
-        </MenuStyle.MenuButton>
-        <MenuStyle.MenuList
-          className="dropDown"
-          overflowY={'scroll'}
-          maxH={'80'}
-          maxW={'98vw'}
-          m={'0.5rem'}>
-          {menuItems &&
-            menuItems?.map(
-              ({ payload, email, createdAt, docId }: any, idx: number): JSX.Element => (
-                <Link
-                  key={idx}
-                  href={`/timetable/${payload.fall?.replace('/', '-')} ${payload.semester} ${
-                    payload.section
-                  }`}
-                  onClick={() => {
-                    const historyDoc = doc(timetableHistoryCol, docId);
-                    updateDoc(historyDoc, {
-                      clickCount: increment(1)
-                    });
-                  }}>
-                  <MenuStyle.MenuItem>
-                    {`${payload.fall?.replace('/', '-')}  ${payload.semester}  ${payload.section}`}
-                  </MenuStyle.MenuItem>
-                  <Divider />
-                </Link>
-              )
-            )}
-        </MenuStyle.MenuList>
-      </MenuStyle.Menu>
-    </Transitions.SlideFade>
-  );
-}