diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx index 41c79ec..c636baf 100644 --- a/apps/frontend/src/app/app.tsx +++ b/apps/frontend/src/app/app.tsx @@ -1,94 +1,15 @@ -import React, { useEffect, useState } from 'react'; import { BrowserRouter } from 'react-router-dom'; -import Footer from './components/footer/footer'; import Header from './components/header/header'; -import Router from './views/router/router'; -import { AssetProvider } from './views/assets/AssetContext'; -import './app.module.scss'; -// import { UpdateAssets } from './views/assets/UpdateAssets'; -import { AssetsInput } from './views/assets/AssetsInput'; - -// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any -export const UserContext = React.createContext({ - user: { - firstName: null, - lastName: null, - id: null, - joinDate: null, - email: null, - userType: 'Reader', - picture: null, - name: null, - roles: ['None'], - }, - setUser: (user: any) => {}, -}); - - +import Router from './router'; export function App() { - const [user, setUser] = React.useState({ - firstName: null, - lastName: null, - id: null, - joinDate: null, - email: null, - userType: 'Reader', - picture: null, - name: null, - roles: ['None'], - }); - - useEffect(() => { - const user = localStorage.getItem('user'); - if (user) { - setUser(JSON.parse(user)); - } - }, []); - - useEffect(() => { - console.log(user); - }, [user]); - - // this is for cypress testing, to have a test user logged in - useEffect(() => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - if (window.Cypress) { - const user = { - firstName: 'Test', - lastName: 'User', - id: 'test', - joinDate: '05/05/2023', - email: 'testUser@test.com', - userType: 'Reader', - picture: 'www.google.com', - name: 'Test User', - roles: ['None'], - }; - setUser(user); - } - }, []); - return ( - // - // {/* */} - // {/* */} - - -
-
-
- - -
- -
- - // {/* */} - // + +
+ + ); } -export default App; +export default App; \ No newline at end of file diff --git a/apps/frontend/src/app/components/ProtectedRoute.tsx b/apps/frontend/src/app/components/ProtectedRoute.tsx new file mode 100644 index 0000000..9ad559f --- /dev/null +++ b/apps/frontend/src/app/components/ProtectedRoute.tsx @@ -0,0 +1,41 @@ +import React, { ReactNode, useState, useEffect } from 'react'; +import { getAuth, onAuthStateChanged } from 'firebase/auth'; +import { useNavigate } from 'react-router-dom'; + +interface Props { + children: ReactNode; +} + +const ProtectedRoute: React.FC = ({ children }) => { + const auth = getAuth(); + const navigate = useNavigate(); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const unsubscribe = AuthCheck(); + return () => unsubscribe(); + }, []); + + const AuthCheck = () => { + return onAuthStateChanged(auth, (user) => { + if (user) { + setLoading(false); + } else { + navigate('/home'); + } + }); + }; + + if (loading) return

...loading

+ + return <>{children} +}; + +export default ProtectedRoute; + + + + + + + diff --git a/apps/frontend/src/app/components/footer/footer.tsx b/apps/frontend/src/app/components/footer/Footer.tsx similarity index 100% rename from apps/frontend/src/app/components/footer/footer.tsx rename to apps/frontend/src/app/components/footer/Footer.tsx diff --git a/apps/frontend/src/app/components/header/Logo.tsx b/apps/frontend/src/app/components/header/Logo.tsx deleted file mode 100644 index d7df92c..0000000 --- a/apps/frontend/src/app/components/header/Logo.tsx +++ /dev/null @@ -1,32 +0,0 @@ -export function Logo(props:any) { - return ( - - ) -} diff --git a/apps/frontend/src/app/components/header/header.css b/apps/frontend/src/app/components/header/header.css index 631155a..3f1faa6 100644 --- a/apps/frontend/src/app/components/header/header.css +++ b/apps/frontend/src/app/components/header/header.css @@ -47,34 +47,6 @@ flex-grow: 1; } - -.trademark-image, -.trademark-letter { - font-size: large; - color: white; -} - -.trademark-letter { - margin-top: 0.25rem; - padding-left: 1rem; - padding-right: 1rem; -} - -.vertical-line { - position: relative; - display: flex; -} - -.vertical-line::before { - content: ' '; - position: absolute; - top: 0.5rem; - bottom: 0.25rem; - left: 0.02rem; - width: 1px; - background-color: rgb(255, 255, 255); -} - .head-trademark-lineList { margin-top: 0.40rem; width: 1.25rem; @@ -85,7 +57,6 @@ justify-content: space-around; } - .head-trademark-container { padding-top: 25%; padding-bottom: 15%; @@ -97,46 +68,9 @@ height: 10rem; } -.head-trademark-letter { - font-size: 1.5rem; - color: white; - padding: 0; - margin: 0; - bottom: 0; -} - -.head-trademark-symbol { - width: 1.55rem; - height: 1.55rem; - padding: 0; - margin: 0; -} - -.head-vertical-line { - position: relative; - display: flex; -} - -.head-vertical-line::before { - content: ''; - position: absolute; - top: 0.35rem; - bottom: 0.25rem; - left: 0.02rem; - width: 1px; - background-color: rgb(255, 255, 255); -} - -.head-crystalball { - width: 1.95rem; - height: 1.95rem; - padding: 0; - margin: 0; - padding-left: 0.5rem; -} - .unordered-list { justify-content: space-around; + align-items: center; width: 100%; display: flex; flex-direction: row; @@ -144,13 +78,20 @@ padding: 0; } -.li-navlink { +.li-nav-logo { color: white; font-weight: bold; margin-bottom: 0; padding-right: 0.5rem; } +.li-navlink { + font-size: x-large; + color: white; + font-weight: bold; + padding-right: 0.5rem; +} + .li-navlink:hover { text-decoration: underline; } @@ -176,8 +117,6 @@ text-decoration: underline; } - - .header-profile-image { height: 2rem; width: 2rem; diff --git a/apps/frontend/src/app/components/header/header.tsx b/apps/frontend/src/app/components/header/header.tsx index 973a106..b68120e 100644 --- a/apps/frontend/src/app/components/header/header.tsx +++ b/apps/frontend/src/app/components/header/header.tsx @@ -1,22 +1,16 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { NavLink, Navigate } from 'react-router-dom'; -import { UserContext } from '../../app'; +import { useState } from 'react'; +import { NavLink } from 'react-router-dom'; import hamburger_menu from '../../images/dash/hamburger_menu.svg'; import HamburgerNav from '../hamburger-nav/HamburgerNav'; - -import crystalBall from '../../images/dash/crystal-ball.svg'; -import lineList from '../../images/dash/line-md_list-3-filled.svg'; import hankHill from '../../images/dash/Hank_Hill.webp'; - -import firebase from 'firebase/app' import { auth } from '../../firebase/firebase'; import { signOut } from 'firebase/auth'; +import { useUser } from '../../context/UserContext'; +import HeaderLogo from '../logo/HeaderLogo'; -import { Logo } from './Logo'; import './header.css' export default function Header() { - const { user, setUser } = React.useContext(UserContext); const [error, setError] = useState(null); const [showSidebar, setShowSidebar] = useState(false); const toggleSidebar = () => { @@ -35,11 +29,11 @@ export default function Header() { setError(error.message); } }; + const { user } = useUser(); return ( -
-
); diff --git a/apps/frontend/src/app/components/home-page/Footer.tsx b/apps/frontend/src/app/components/home-page/Footer.tsx index 3c5f4e5..1ada605 100644 --- a/apps/frontend/src/app/components/home-page/Footer.tsx +++ b/apps/frontend/src/app/components/home-page/Footer.tsx @@ -1,7 +1,6 @@ // import Link from 'next/link' import { Container } from './Container' -import { Logo } from '../header/Logo' import { NavLink } from './NavLink' export function Footer() { @@ -9,7 +8,6 @@ export function Footer() {