From fc6f74d25f7a26b0caae4609cd1c0e45262fd6eb Mon Sep 17 00:00:00 2001 From: Ragad Alhaddi Date: Tue, 19 Nov 2024 00:19:18 -0500 Subject: [PATCH 1/2] implementing barber shop, hair stylist, and tattoo pages --- src/app/barber/page.tsx | 31 +++++++++++++++++++++++++++++++ src/app/hair/page.tsx | 31 +++++++++++++++++++++++++++++++ src/app/homepage/page.tsx | 12 +++++++++--- src/app/tattoo/page.tsx | 31 +++++++++++++++++++++++++++++++ 4 files changed, 102 insertions(+), 3 deletions(-) create mode 100644 src/app/barber/page.tsx create mode 100644 src/app/hair/page.tsx create mode 100644 src/app/tattoo/page.tsx diff --git a/src/app/barber/page.tsx b/src/app/barber/page.tsx new file mode 100644 index 00000000..0599734d --- /dev/null +++ b/src/app/barber/page.tsx @@ -0,0 +1,31 @@ +'use client'; +import React from 'react'; +import '../categories.css'; +import Card from '../components/ui/card'; + +export default function BarberShops() { + const businesses: any[] = []; + + return ( +
+

Barber Shops

+
+ {businesses.length > 0 ? ( + businesses.map((business, index) => ( + + )) + ) : ( +

No businesses available. Please check back later!

+ )} +
+
+ ); +} \ No newline at end of file diff --git a/src/app/hair/page.tsx b/src/app/hair/page.tsx new file mode 100644 index 00000000..c2588665 --- /dev/null +++ b/src/app/hair/page.tsx @@ -0,0 +1,31 @@ +'use client'; +import React from 'react'; +import '../categories.css'; +import Card from '../components/ui/card'; + +export default function HairStylists() { + const businesses: any[] = []; + + return ( +
+

Hair Stylists

+
+ {businesses.length > 0 ? ( + businesses.map((business, index) => ( + + )) + ) : ( +

No businesses available. Please check back later!

+ )} +
+
+ ); +} \ No newline at end of file diff --git a/src/app/homepage/page.tsx b/src/app/homepage/page.tsx index a9eda05f..4d2a56f1 100644 --- a/src/app/homepage/page.tsx +++ b/src/app/homepage/page.tsx @@ -155,7 +155,9 @@ export default function Home() { Hair Stylists
- Hair Stylists +
  • @@ -163,7 +165,9 @@ export default function Home() { Tattoo Artist
    - Tattoo Artist +
  • @@ -171,7 +175,9 @@ export default function Home() { Barber Shops
    - Barber Shops +
  • diff --git a/src/app/tattoo/page.tsx b/src/app/tattoo/page.tsx new file mode 100644 index 00000000..433e0903 --- /dev/null +++ b/src/app/tattoo/page.tsx @@ -0,0 +1,31 @@ +'use client'; +import React from 'react'; +import '../categories.css'; +import Card from '../components/ui/card'; + +export default function TattooPage() { + const businesses: any[] = []; + + return ( +
    +

    Tattoo Artists

    +
    + {businesses.length > 0 ? ( + businesses.map((business, index) => ( + + )) + ) : ( +

    No businesses available. Please check back later!

    + )} +
    +
    + ); +} \ No newline at end of file From ba2b1d54fd42d01a904784fafcc7b840d68a4a60 Mon Sep 17 00:00:00 2001 From: Ragad Alhaddi Date: Tue, 19 Nov 2024 01:43:59 -0500 Subject: [PATCH 2/2] implementing dynamic navbar based on user role i implemented a dynamic navbar that prevents users from cross-switching between artist and customer. It adjusts based on user role --- src/app/artistlogin/page.tsx | 1 + src/app/clients/page.tsx | 4 +- src/app/components/navbar_artist.tsx | 86 ++++++++++++++++++--------- src/app/components/navigationbar.css | 2 +- src/app/components/navigationbar.tsx | 88 ++++++++++++++++++++++++---- src/app/customerlogin/page.tsx | 1 + src/app/portfolio/page.tsx | 4 +- 7 files changed, 143 insertions(+), 43 deletions(-) diff --git a/src/app/artistlogin/page.tsx b/src/app/artistlogin/page.tsx index 707006e6..c531b8fc 100644 --- a/src/app/artistlogin/page.tsx +++ b/src/app/artistlogin/page.tsx @@ -52,6 +52,7 @@ export default function Login() { // Authenticate using email and password await signInWithEmailAndPassword(auth, email, password); // Redirect to portfolio page after successful login + localStorage.setItem('role', 'artist'); router.push('/portfolio'); } catch (error) { // Display error message if authentication fails diff --git a/src/app/clients/page.tsx b/src/app/clients/page.tsx index 471d163b..c63e4d94 100644 --- a/src/app/clients/page.tsx +++ b/src/app/clients/page.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'; import React from 'react'; -import Nav_bar from '../components/navbar_artist'; +import Navbar from '../components/navigationbar'; const Clients: React.FC = () => { const router = useRouter(); @@ -19,7 +19,7 @@ const Clients: React.FC = () => { return (
    - +

    Daves Barbershop

    Upcoming Bookings

    diff --git a/src/app/components/navbar_artist.tsx b/src/app/components/navbar_artist.tsx index 0c308bd8..c3ce30bd 100644 --- a/src/app/components/navbar_artist.tsx +++ b/src/app/components/navbar_artist.tsx @@ -1,27 +1,59 @@ -'use client' - -import React from 'react'; -import './navbar_artist.css'; -import { useRouter } from 'next/navigation'; - -export default function Nav_bar() { - const router = useRouter(); - - const handlelogout = () => { - localStorage.removeItem('authToken'); - alert('Logging out'); - router.push('/'); - } - - return ( - - ); -} \ No newline at end of file +//'use client' + +//import React, { useState, useEffect } from 'react'; +//import './navbar_artist.css'; +//import { useRouter } from 'next/navigation'; +//import { auth } from '../firebase'; + +//export default function NavbarArtist() { +// const router = useRouter(); +// const [user, setUser] = useState(null); +// const [role, setRole] = useState(''); +// const [isLoading, setIsLoading] = useState(true); + +// useEffect(() => { +// const userRole = localStorage.getItem('role'); +// setRole(userRole || ''); + +// const unsubscribe = auth.onAuthStateChanged((currentUser) => { +// setUser(currentUser); +// setIsLoading(false); +// }); + +// return () => unsubscribe(); +// }, []); + +// const handleLogout = () => { +// localStorage.removeItem('role'); +// auth.signOut(); +// alert('Logging out'); +// router.push('/'); +// }; + +// if (isLoading) { +// return null; +// } + +// if (role !== 'artist') { +// return null; +// } + +// return ( +// +// ); +//} \ No newline at end of file diff --git a/src/app/components/navigationbar.css b/src/app/components/navigationbar.css index fe9b7607..b00c5b51 100644 --- a/src/app/components/navigationbar.css +++ b/src/app/components/navigationbar.css @@ -37,6 +37,6 @@ } .navigation button:hover { - color: #f3cf9a; + color: #a7a39e; } \ No newline at end of file diff --git a/src/app/components/navigationbar.tsx b/src/app/components/navigationbar.tsx index dc279218..04b0e44c 100644 --- a/src/app/components/navigationbar.tsx +++ b/src/app/components/navigationbar.tsx @@ -1,27 +1,93 @@ -'use client' +'use client'; -import React from 'react'; -import './navigationbar.css'; +import React, { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; +import { auth } from '../firebase'; +import './navigationbar.css'; export default function Navbar() { const router = useRouter(); + const [user, setUser] = useState(null); + const [role, setRole] = useState(''); + const [isLoading, setIsLoading] = useState(true); + const [isAuthChecked, setIsAuthChecked] = useState(false); + + useEffect(() => { + if (typeof window !== 'undefined') { + const userRole = localStorage.getItem('role'); + setRole(userRole || ''); + } + const unsubscribe = auth.onAuthStateChanged((currentUser) => { + setUser(currentUser); + setIsLoading(false); + setIsAuthChecked(true); + }); - const handlelogout = () => { - localStorage.removeItem('authToken'); + return () => unsubscribe(); + }, []); + const handleLogout = () => { + localStorage.removeItem('role'); + auth.signOut(); alert('Logging out'); router.push('/'); + }; + if (isLoading || !isAuthChecked) { + return null; } return ( ); -} \ No newline at end of file +} diff --git a/src/app/customerlogin/page.tsx b/src/app/customerlogin/page.tsx index 44213670..3174b1ec 100644 --- a/src/app/customerlogin/page.tsx +++ b/src/app/customerlogin/page.tsx @@ -53,6 +53,7 @@ export default function CustomerLogin() { // Authenticate using email and password await signInWithEmailAndPassword(auth, email, password); // Redirect to user profile page after successful login + localStorage.setItem('role', 'customer'); router.push('/userprofile'); } catch (error) { // Display error message if authentication fails diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx index 99f3b4c8..2317d602 100644 --- a/src/app/portfolio/page.tsx +++ b/src/app/portfolio/page.tsx @@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react'; import { useRouter } from 'next/navigation'; import './portfolio.css'; -import Nav_bar from '../components/navbar_artist'; +import Navbar from '../components/navigationbar'; import SocialMediaInput from '../components/socialmediainput'; // Default import (no curly braces) export default function Portfolio() { @@ -133,7 +133,7 @@ export default function Portfolio() { return (
    - +