diff --git a/client/src/App.tsx b/client/src/App.tsx index 8fe8308..0ed79af 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -10,7 +10,7 @@ import SignUp from './pages/SignUp'; const App: React.FC = () => { const [isDarkMode, setIsDarkMode] = useState(false); // Dark mode state - const [username, setUsername] = useState(null); + const [user, setUser] = useState | null>(null); const toggleDarkMode = () => { setIsDarkMode((prev) => !prev); @@ -19,16 +19,18 @@ const App: React.FC = () => { return ( - + - } /> + } /> } /> - } /> - } /> + {user !== null && <> + } /> + } /> } /> + } ); diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx index 4304f4b..b152c51 100644 --- a/client/src/components/Navbar.tsx +++ b/client/src/components/Navbar.tsx @@ -4,7 +4,7 @@ import { NavbarProps } from '../types'; import LOGO from '../assets/RAILGUIDE.png'; //import '../index.scss'; -const Navbar: React.FC = ({ toggleDarkMode, isDarkMode, username, setUsername }) => { +const Navbar: React.FC = ({ toggleDarkMode, isDarkMode, username, setUser }) => { const [dropdownOpen, setDropdownOpen] = useState(false); const dropdownRef = useRef(null); const navigate = useNavigate(); @@ -15,8 +15,8 @@ const Navbar: React.FC = ({ toggleDarkMode, isDarkMode, username, s const handleLogout = () => { console.log('User logged out'); - setUsername(null); - navigate('/'); + setUser(null); + navigate('/login'); }; useEffect(() => { diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx index 5cb1bc8..9b98e51 100644 --- a/client/src/pages/Login.tsx +++ b/client/src/pages/Login.tsx @@ -2,9 +2,9 @@ import React, { useState } from "react"; import { useNavigate, Link } from "react-router-dom"; const Login: React.FC<{ - setUsername: React.Dispatch>; -}> = ({ setUsername }) => { - const [username, setLocalUsername] = useState(""); + setUser: React.Dispatch | null>>; +}> = ({ setUser }) => { + const [localUsername, setLocalUsername] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(null); @@ -15,7 +15,7 @@ const Login: React.FC<{ setError(null); // Basic form validation - if ((!username && !email) || (username && email)) { + if ((!localUsername && !email) || (localUsername && email)) { setError("Please provide either a username or an email, but not both"); return; } @@ -37,15 +37,15 @@ const Login: React.FC<{ "Content-Type": "application/json", }, body: JSON.stringify({ - username: username || null, + username: localUsername || null, work_email: email || null, password, }), }); - const { username: dbUsername } = await response.json() as {username: string}; - console.log(dbUsername); + const user = await response.json() as {username: string}; + if (response.ok) { - setUsername(dbUsername); + setUser(user); console.log("Sign-up successful!"); navigate("/profile"); } @@ -69,7 +69,7 @@ const Login: React.FC<{ setLocalUsername(e.target.value)} autoComplete="username" /> diff --git a/client/src/pages/Profile.tsx b/client/src/pages/Profile.tsx index ffa2fcb..c60f731 100644 --- a/client/src/pages/Profile.tsx +++ b/client/src/pages/Profile.tsx @@ -1,26 +1,8 @@ import React from 'react'; import { ProfileProps } from "../types"; -//import "../profile.css"; -interface User { - username: string; - displayName: string; - email: string; - phone: string; - company: string; - link: string; -} +const Profile: React.FC = ({ isDarkMode, user }) => { -const user: User = { - username: "BobTest", - displayName: "Bob Test", - email: "BobTest@gmail.com", - phone: "+1 (234) 567-890", - company: "Test Guys Inc.", - link: "https://aws.amazon.com", -}; - -const Profile: React.FC = ({ isDarkMode }) => { return (
@@ -33,20 +15,20 @@ const Profile: React.FC = ({ isDarkMode }) => {
-

Username: {user.username}

+

Username: {user?.username ?? "Not Logged In"}

-

Display Name: {user.displayName}

+

Display Name: {user?.display_name ?? "Not Logged In"}

-

Work Email: {user.email}

+

Work Email: {user?.work_email ?? "Not Logged In"}

-

Work Phone: {user.phone}

+

Work Phone: {user?.work_phone ?? "Not Logged In"}

-
+ {/*

Company: {user.company}

-
+
*/} = ({ isDarkMode }) => {
- - + {/* */} + AWS Log-in Information
diff --git a/client/src/types.ts b/client/src/types.ts index 79384df..43ac74b 100644 --- a/client/src/types.ts +++ b/client/src/types.ts @@ -10,8 +10,7 @@ export interface ProfileProps { isDarkMode: boolean; - username: string | null - + user: Record | null } export interface CardProps { @@ -39,7 +38,7 @@ export interface NavbarProps { toggleDarkMode: () => void; isDarkMode: boolean; username: string | null; - setUsername: React.Dispatch>; + setUser: React.Dispatch | null>>; } export interface EventCardProps {