feat: added nav profile removed proxyserver from api calls

GDGVIT · Dec 31, 2023 · bff20fc · bff20fc
1 parent ab7999c
commit bff20fc
Show file tree

Hide file tree

Showing 8 changed files with 263 additions and 34 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -23,7 +23,7 @@ const App: React.FC = () => {
   };
 
   const app = initializeApp(firebaseConfig);
-  const { initializeFromLocalStorge, login, isLoggedIn, username } =
+  const { initializeFromLocalStorge, login, isLoggedIn } =
     useAuthStore();
 
   useEffect(() => {
@@ -34,6 +34,7 @@ const App: React.FC = () => {
         localStorage.setItem("uuid", user1.uid);
         localStorage.setItem("profile", user1.photoURL || "");
         localStorage.setItem("username", user1.displayName || "");
+        localStorage.setItem("email", user1.email || "");
         login(user1.uid, user1.photoURL || "", user1.displayName || "");
       } else {
         console.log("user is null");

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -1,28 +1,49 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-// import React, { useContext, useEffect, useState } from "react";
-// import { getAuth, signOut } from 'firebase/auth'
-import VTLogo from "./../assets/landing_logo.png";
-import userIcon from "./../assets/icon.png";
-import { useAuthStore } from "../store/authStore";
-// import "./../styles/Nav.css";
+import React, { useContext, useEffect, useState } from 'react'
+import { getAuth, signOut } from 'firebase/auth'
+import VTLogo from './../assets/landing_logo.png'
+import userIcon from './../assets/icon.png'
+import './../styles/Nav.css'
+import { useAuthStore } from '../store/authStore'
 
 const Nav: React.FC = () => {
-  const { profile, name, logout } = useAuthStore();
+
+  const [text, setText] = useState('Sign In');
+  const [onShow, setShow] = useState(false);
+
+  const { name, profile, email, logout } = useAuthStore()
+  const user = name;
+  const pic = profile;
+  const logOut = (): void => {
+    const auth = getAuth()
+    signOut(auth).then(() => {
+      logout()
+    }).catch((error) => {
+      console.error(error)
+    })
+  }
+
+  useEffect(() => {
+    if (user !== '' && user !== 'loading') setText('Sign Out')
+  }, [user])
+
   return (
-    <>
-      <div className="flex h-[48px] border-b-blue-800 border-b flex-row w-full justify-between items-center px-8">
-        <img src={VTLogo} alt="VT Logo" className="max-h-[50%] w-auto" />
-        <div className="flex flex-row items-center gap-2">
-          <img
-            src={profile || userIcon}
-            alt="User Icon"
-            className="h-[32px] w-[32px] rounded-full"
-          />
-          <span className="text-white font-semibold">{name}</span>
-        </div>
+    <header>
+      <div className='logo'>
+        <img src={VTLogo} alt='VITTY' />
+        {/* <img src={Logo} alt='VITTY' /> */}
       </div>
-    </>
-  );
-};
+      {
+        user !== null && user !== '' &&
+          <div className='user-pfp' >
+            <img src={(pic !== null && pic !== '') ? pic : userIcon} alt='DP' />
+          </div>
+      }
+      {/* <div className='nav-right'>
+        <div className='sign-out' onClick={() => logOut()}>{text}</div>
+      </div> */}
+    </header>
+  )
+}
 
-export default Nav;
+export default Nav
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { FaTimes } from 'react-icons/fa'
+import './../styles/Modal.css'
+
+interface ProfileProps {
+    onClose: () => void;
+    onLogOut: () => void;
+    name: string | null;
+    email: string;
+}
+
+const Profile: React.FC<ProfileProps> = ({ onClose, onLogOut, name, email }) => {
+  return (
+    <div className='modal' onClick={onClose}>
+      <div className='modal-content' onClick={e => e.stopPropagation()}>
+        <div className='modal-header'>
+          <h3>Profile</h3>
+          <FaTimes onClick={onClose} />
+        </div>
+        <div className='modal-body'>
+          {name !== null && <div className='modal-message'><span>Name:</span> {name}</div>}
+          <div className='modal-message'><span>Email:</span> {email}</div>
+          <div className='modal-buttons'>
+            <button className='modal-yes' onClick={onLogOut}>Log Out</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Profile
diff --git a/src/pages/Template.tsx b/src/pages/Template.tsx
@@ -9,7 +9,7 @@ const Template: React.FC<TemplateProps> = ({ children }) => {
   return (
     <>
     <Navbar/>
-    <div className="h-auto w-auto">
+    <div className="h-auto w-auto mt-[64px]">
       {children}
     </div>
     </>

diff --git a/src/store/authStore.tsx b/src/store/authStore.tsx
@@ -89,12 +89,14 @@ export const useAuthStore = create<AuthStore>((set) => ({
     const uuid = localStorage.getItem("uuid");
     const profile = localStorage.getItem("profile");
     const username = localStorage.getItem("username");
-    if (uuid && profile && username) {
+    const email = localStorage.getItem("email");
+    if (uuid && profile && username && email) {
       set(() => ({
         uuid,
         isLoggedIn: true,
         profile,
         username,
+        email,
       }));
     }
   },

diff --git a/src/styles/Modal.css b/src/styles/Modal.css
@@ -0,0 +1,127 @@
+.modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease-in-out;
+  opacity: 1;
+  pointer-events: visible;
+  z-index: 10;
+}
+
+.modal-content {
+  width: 95vw;
+  max-width: 20rem;
+  padding: 0.75rem;
+  background-color: var(--dimmer);
+  transition: all 0.3s ease-in-out;
+  border-bottom: solid 0.25rem var(--dark);
+  border-top: solid 0.25rem var(--dark);
+  border-radius: 0.5rem;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+}
+
+.modal-header svg {
+  width: 1rem;
+  height: 1rem;
+  border: none;
+  cursor: pointer;
+  transition: all 0.1s ease-in;
+  color: #ff2424;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: flex-start;
+  margin: 0.5rem 0;
+}
+
+.modal-message {
+  font-size: 0.9rem;
+}
+
+.modal-message span {
+  font-size: 0.85rem;
+  font-family: monospace;
+  font-weight: bold;
+  color: var(--midblue);
+}
+
+.modal-input {
+  font-size: 0.8rem;
+  font-family: "Poppins", sans-serif;
+  border-radius: 0.5rem;
+  color: var(--light);
+  padding: 0.5rem 1rem;
+  border: solid 1px var(--blue);
+  background-color: var(--dark);
+  width: 100%;
+  text-overflow: ellipsis;
+  margin-top: 0.75rem;
+}
+
+.modal-input:focus {
+  outline: none;
+}
+
+.modal-buttons {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.modal-buttons button {
+  font-size: 0.9rem;
+  font-family: "Poppins", sans-serif;
+  border-radius: 0.5rem;
+  margin: 0.5rem;
+  margin-top: 1.5rem;
+  margin-right: 0;
+  padding: 0.5rem 1rem;
+  border: none;
+  font-weight: bold;
+  color: var(--light);
+}
+
+.modal-no {
+  background-color: var(--dimmer);
+  border: solid 1px var(--light) !important;
+}
+
+.modal-yes {
+  background-color: var(--bright);
+}
+
+.modal-buttons button:focus {
+  outline: none;
+}
+
+.modal-buttons button:hover {
+  cursor: pointer;
+  transform: scale(1.02);
+}
+
+.modal-tip {
+  font-size: 0.75rem;
+}
+
+@media screen and (min-width: 400px) {
+  .modal-content {
+    max-width: 25rem;
+    padding: 1rem 1.5rem;
+  }
+}
diff --git a/src/styles/Nav.css b/src/styles/Nav.css
@@ -0,0 +1,46 @@
+header {
+    width: 100%;
+    position: fixed;
+    height: 4rem;
+    padding: 1rem 2rem;
+    background-color: var(--dark);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    z-index: 2;
+  }
+
+  .logo img {
+    margin-right: 0.5rem;
+    height: 1.25rem;
+  }
+
+  .nav-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .user-pfp {
+    height: 2rem;
+    border-radius: 50%;
+    cursor: pointer;
+    background-color: var(--dimmer);
+    margin-right: 0.5rem;
+  }
+
+  .user-pfp img {
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .sign-out {
+    color: var(--blue);
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .sign-out:hover {
+    opacity: 0.5;
+  }
+
diff --git a/src/utils/apicalls.tsx b/src/utils/apicalls.tsx
@@ -4,9 +4,9 @@ import axios from "axios";
 const baseURL = "https://vitty-api.dhruvshah.live";
 
 export const parseAndReturn = (raw: string, apiKey: string): any => {
-  const corsProxyUrl = "https://cors-anywhere.herokuapp.com/";
+  // const corsProxyUrl = "https://cors-anywhere.herokuapp.com/";
   const remoteApiUrl = `${baseURL}/api/v2/timetable/parse`;
-  const url = `${corsProxyUrl}${remoteApiUrl}`;
+  // const url = `${corsProxyUrl}${remoteApiUrl}`;
   const myHeaders = {
     contentType: "application/json",
     Authorization: `Bearer ${apiKey}`
@@ -17,7 +17,7 @@ export const parseAndReturn = (raw: string, apiKey: string): any => {
   };
 
   try {
-    const response = axios.post(url, data, { headers: myHeaders });
+    const response = axios.post(remoteApiUrl, data, { headers: myHeaders });
     return response;
   } catch (e) {
     return {};
@@ -57,9 +57,9 @@ export const uploadText = async (
   apiKey: string,
   username: string
 ): Promise<any> => {
-  const corsProxyUrl = "https://cors-anywhere.herokuapp.com/";
+  // const corsProxyUrl = "https://cors-anywhere.herokuapp.com/";
   const remoteApiUrl = `${baseURL}/api/v2/timetable/${username.toLowerCase()}`;
-  const url = `${corsProxyUrl}${remoteApiUrl}`;
+  // const url = `${corsProxyUrl}${remoteApiUrl}`;
 
   const myHeaders = {
     Authorization: `Bearer ${apiKey}`,
@@ -70,7 +70,7 @@ export const uploadText = async (
   };
 
   try {
-    const response = await axios.post(url, data, {
+    const response = await axios.post(remoteApiUrl, data, {
       headers: myHeaders,
     });
     return response.data;
@@ -111,16 +111,16 @@ export const getTimetable = async (
   username: string,
   apiKey: string
 ): Promise<any> => {
-  const corsProxyUrl = "https://cors-anywhere.herokuapp.com/";
+  // const corsProxyUrl = "https://cors-anywhere.herokuapp.com/";
   const remoteApiUrl = `${baseURL}/api/v2/timetable/${username.toLowerCase()}`;
-  const url = `${corsProxyUrl}${remoteApiUrl}`;
+  // const url = `${corsProxyUrl}${remoteApiUrl}`;
   console.log(apiKey);
   const headers = {
     Authorization: `Bearer ${apiKey}`,
   };
 
   try {
-    const response = await axios.get(url, { headers });
+    const response = await axios.get(remoteApiUrl, { headers });
     const data = response.data;
     console.log("gettimetable data");
     console.log(data);