Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev scrum 65 #33

Merged
merged 2 commits into from
Apr 26, 2024
Merged

Dev scrum 65 #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0721274
Made header aware of auth state
Apr 26, 2024
aff956b
No longer redirects you to dash if login fails
Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,28 @@
import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
import "../assets/css/Header.css"
import {Link, useNavigate, useLocation} from "react-router-dom";
import {Link, useNavigate} from "react-router-dom";
import {auth} from "../utils/firebase.ts";
import {useState} from "react";
import {User} from "firebase/auth";

interface Props {
user?: string;
children?: React.ReactNode;
}

export function Header({ user }: Props) {
export function Header() {
const { width, height } = useWindowDimensions();
const aspect_ratio = (width == 0? 1 : width) / (height == 0? 1 : height);
const use_narrow = aspect_ratio < 0.7;

const currentUser = auth.currentUser?.displayName?? "";
const [userName, setUserName] = useState<string | null>(null);
auth.onAuthStateChanged((new_user: User | null) => {
if (new_user === null) { setUserName(null); }
else { setUserName(new_user?.displayName) }
});

const navigate = useNavigate();
const location = useLocation();

const handleLogout = () => {
auth.signOut();
const handleLogout = async () => {
await auth.signOut();
navigate("/", { replace: true });
};

const isIndexPage = location.pathname === "/";

return (
<header className="header">
{/* App Name reloads home page */}
Expand All @@ -35,16 +33,16 @@ export function Header({ user }: Props) {
{/* Pages */}
<ul className="header-nav">
{/* Links to dashboard with tiles */}
<li><Link to="/dash" className={`header-item ${isIndexPage ? "text-muted bg-transparent" : "header-item"}`}>Dashboard</Link></li>
<li><Link to="/dash" className={`header-item ${userName ? "header-item" : "text-muted bg-transparent"}`}>Dashboard</Link></li>

{/* Links to transactions page with table of expenses */}
<li><Link to="/transactions" className={`header-item ${isIndexPage ? "text-muted bg-transparent" : "header-item"}`}>Transactions</Link></li>
<li><Link to="/transactions" className={`header-item ${userName ? "header-item" : "text-muted bg-transparent"}`}>Transactions</Link></li>

<li><Link to="/test" className="header-item">Firestore Test</Link></li>

{user && (
{userName && (
<li>
<span className="username">{currentUser}</span>
<span className="username">{userName}</span>
<button type="button" className="logout-btn" onClick={handleLogout}>Logout</button>
</li>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Graphs/Graphs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export default function GraphDashboard(){

return (
<div className="vh-100 d-flex flex-column">
<Header user="testUser"/>
<Header/>
<Sidebar>
<div className="App ps-5 pe-5 mt-3">
<h1>Testing Graph Tiles</h1>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/dashboard/DashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function Dashboard(props: Props) {

return <>
<div className="vh-100 d-flex flex-column">
<Header user="testUser"/>
<Header/>

{/* TODO: MOVE TO CORRECT POSITION ON DASHBOARD */}
<div>
Expand Down
66 changes: 39 additions & 27 deletions src/pages/index/IndexPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,32 @@ import {Header} from "../../components/Header.tsx";
import {Footer} from "../../components/Footer.tsx";

import "./IndexPage.scss"
import {Link, useNavigate} from "react-router-dom";
import {useNavigate} from "react-router-dom";
import { signInWithGoogle } from '../../utils/authentication';
import { useState } from "react";
import {useState} from "react";
import {auth} from "../../utils/firebase.ts";
import {User} from "firebase/auth";

interface IndexPageProps {
user?: string;
}

function IndexPage({ user }: IndexPageProps) {
const [currentUser, setCurrentUser] = useState<string | undefined>(user);
function IndexPage() {
const navigate = useNavigate();

const handleSignIn = async () => {
const user = await signInWithGoogle();
setCurrentUser(user);
navigate('/dash', { replace: true }); // Redirect to /dash after signing in
await signInWithGoogle();
if (auth.currentUser !== null) {
navigate('/dash', { replace: true }); // Redirect to /dash after signing in
}
};

const [userName, setUserName] = useState<string | null>(null);
auth.onAuthStateChanged((new_user: User | null) => {
if (new_user === null) { setUserName(null); }
else { setUserName(new_user?.displayName) }
});

return (<>
<div className="d-flex vh-100 flex-column">
{currentUser? (
<Header user={currentUser} />
) : (
<Header user="" /> // or some other default value
)}
<Header/>
<div className="row vw-100" style={{flexGrow: 1, maxWidth: "99vw"}}>
<div className="col-6 p-0 d-flex justify-content-center align-items-center">
<div className="text-center">
Expand All @@ -45,21 +46,32 @@ function IndexPage({ user }: IndexPageProps) {
}}></div>
<div className="col-6 p-0 d-flex justify-content-center align-items-center">
<div className="text-center">
<h1 className="pb-2" style={{fontSize: "60px"}}>Login</h1>
<div className="row">
<div className="col p-2">
<button type="button" className="login-with-google-btn" onClick={handleSignIn}>
Sign in with Google
</button>
{userName ? <>
<h1 className="pb-2" style={{fontSize: "60px"}}>Hello, {userName}</h1>
<div className="row">
<div className="col p-2">
<button type="button" className="login-with-google-btn" onClick={async () => { await auth.signOut() }}>
Logout
</button>
</div>
</div>
<div className="col p-2">
<Link to="/login-page">
<button type="button" className="login-with-ms-btn text-nowrap">Sign in with
Microsoft
</> : <>
<h1 className="pb-2" style={{fontSize: "60px"}}>Login</h1>
<div className="row">
<div className="col p-2">
<button type="button" className="login-with-google-btn" onClick={handleSignIn}>
Sign in with Google
</button>
</Link>
</div>
{/*<div className="col p-2">*/}
{/* <Link to="/login-page">*/}
{/* <button type="button" className="login-with-ms-btn text-nowrap">Sign in with*/}
{/* Microsoft*/}
{/* </button>*/}
{/* </Link>*/}
{/*</div>*/}
</div>
</div>
</> }
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export const router = createBrowserRouter([

{
path: "/user-test",
element: <IndexPage user={"testUserName"}/>,
element: <IndexPage/>,
errorElement:<_404Page/>
},
{
Expand Down
Loading