feat: added updated timetable option

Author: Zain-ul-din

src/components/Header.tsx

@@ -5,16 +5,20 @@ import handleGlowBlob from '~/lib/glow';
 
 import { Secular_One } from 'next/font/google';
 import { FcGoogle } from 'react-icons/fc';
-import { Button as Btn, Button } from '@chakra-ui/react';
+import { Button as Btn, Button, HStack } from '@chakra-ui/react';
 
 import { signInWithPopup, GoogleAuthProvider, UserCredential, User } from 'firebase/auth';
 import { firebase } from '~/lib/firebase';
-import { addLoggedInUser } from '~/lib/FirebaseAnalysis';
-import { useContext, useEffect, useState } from 'react';
+import {
+  FIREBASE_ANALYTICS_EVENTS,
+  addLoggedInUser,
+  reportFirebaseAnalytics
+} from '~/lib/FirebaseAnalysis';
+import { useContext } from 'react';
 import { UserCredentialsContext } from '~/hooks/UserCredentialsContext';
-
 import { Tooltip } from '@chakra-ui/react';
-import { getTimeRemaining } from '~/lib/util';
+import { useRouter } from 'next/router';
+import { ROUTING } from '~/lib/constant';
 
 const secular_One = Secular_One({ subsets: ['latin'], weight: '400' });
 
@@ -62,27 +66,42 @@ export const NotLoggedIn = ({ text, isLoading }: { text: string; isLoading?: boo
 };
 
 const LoggedIn = ({ user }: { user: User }) => {
+  const router = useRouter();
+
   return (
-    <Link href="/profile">
-      <Tooltip
-        background={'var(--bg-color)'}
-        color={'white'}
-        border={'1px solid var(--border-color)'}
-        label="profile link"
-        fontSize={'1xl'}
-        className="roboto">
-        <Image
-          src={user.photoURL as string}
-          alt={'user_avatar'}
-          width={40}
-          height={40}
-          style={{
-            borderRadius: '50%',
-            border: '1px solid var(--border-color)',
-            transform: 'translateY(1px)'
-          }}
-        />
-      </Tooltip>
-    </Link>
+    <>
+      <HStack alignItems={'center'}>
+        <Button
+          fontWeight={'normal'}
+          border={'1px solid var(--border-color)'}
+          onClick={() => {
+            reportFirebaseAnalytics(FIREBASE_ANALYTICS_EVENTS.updated_timetable, {});
+            router.push(ROUTING.developer);
+          }}>
+          Update Timetable
+        </Button>
+        <Link href="/profile">
+          <Tooltip
+            background={'var(--bg-color)'}
+            color={'white'}
+            border={'1px solid var(--border-color)'}
+            label="profile link"
+            fontSize={'1xl'}
+            className="roboto">
+            <Image
+              src={user.photoURL as string}
+              alt={'user_avatar'}
+              width={40}
+              height={40}
+              style={{
+                borderRadius: '50%',
+                border: '1px solid var(--border-color)',
+                transform: 'translateY(1px)'
+              }}
+            />
+          </Tooltip>
+        </Link>
+      </HStack>
+    </>
   );
 };

src/lib/FirebaseAnalysis.ts

@@ -41,6 +41,7 @@ export enum FIREBASE_ANALYTICS_EVENTS {
   notifications = 'notifications',
   clash_resolver = 'clash_resolver',
   // click events
+  updated_timetable = 'updated_timetable',
   link_share_on_whatsapp = 'link_share_on_whatsapp',
   print_time_table = 'print_time_table',
   promotion_closed = 'promotion_closed',

src/pages/timetable/[id].tsx

@@ -1,15 +1,12 @@
+import Head from 'next/head';
 import Timetable from '~/components/Timetable';
 
 import { useRouter } from 'next/router';
 import ClipLoader from 'react-spinners/ClipLoader';
 import { useContext, useEffect, useState } from 'react';
 
-import { doc, getDocs, getDoc } from 'firebase/firestore';
-import { timeTableCol } from '~/lib/firebase';
-
 import { motion } from 'framer-motion';
 import { Center } from '@chakra-ui/react';
-import Head from 'next/head';
 import { SocialLinks } from '~/components/seo/Seo';
 import { GetStaticPropsContext } from 'next';
 import { TimetableDocType } from '~/types/typedef';