From bff20fcff33c53bd7efec30d933a728337777128 Mon Sep 17 00:00:00 2001 From: Rupaak Srinivas Date: Sun, 31 Dec 2023 14:04:10 +0530 Subject: [PATCH] feat: added nav profile removed proxyserver from api calls --- src/App.tsx | 3 +- src/components/Nav.tsx | 65 ++++++++++++------- src/components/Profile.tsx | 32 ++++++++++ src/pages/Template.tsx | 2 +- src/store/authStore.tsx | 4 +- src/styles/Modal.css | 127 +++++++++++++++++++++++++++++++++++++ src/styles/Nav.css | 46 ++++++++++++++ src/utils/apicalls.tsx | 18 +++--- 8 files changed, 263 insertions(+), 34 deletions(-) create mode 100644 src/components/Profile.tsx create mode 100644 src/styles/Modal.css create mode 100644 src/styles/Nav.css diff --git a/src/App.tsx b/src/App.tsx index ccf0977..50a8679 100644 --- 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 index f55f837..a7d8ebf 100644 --- 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 ( - <> -
- VT Logo -
- User Icon - {name} -
+
+
+ VITTY + {/* VITTY */}
- - ); -}; + { + user !== null && user !== '' && +
+ DP +
+ } + {/*
+
logOut()}>{text}
+
*/} +
+ ) +} -export default Nav; +export default Nav diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx new file mode 100644 index 0000000..1128b20 --- /dev/null +++ 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 = ({ onClose, onLogOut, name, email }) => { + return ( +
+
e.stopPropagation()}> +
+

Profile

+ +
+
+ {name !== null &&
Name: {name}
} +
Email: {email}
+
+ +
+
+
+
+ ) +} + +export default Profile diff --git a/src/pages/Template.tsx b/src/pages/Template.tsx index 65fb83c..34745c1 100644 --- a/src/pages/Template.tsx +++ b/src/pages/Template.tsx @@ -9,7 +9,7 @@ const Template: React.FC = ({ children }) => { return ( <> -
+
{children}
diff --git a/src/store/authStore.tsx b/src/store/authStore.tsx index 6973764..611f7bf 100644 --- a/src/store/authStore.tsx +++ b/src/store/authStore.tsx @@ -89,12 +89,14 @@ export const useAuthStore = create((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 new file mode 100644 index 0000000..4fc31d7 --- /dev/null +++ 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 new file mode 100644 index 0000000..b0f0ba2 --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/src/utils/apicalls.tsx b/src/utils/apicalls.tsx index 5042d84..370c684 100644 --- 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 => { - 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 => { - 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);