Merge pull request #46 from the-collab-lab/dtp-teampage

Issue #16: Create Team Component and Loading Screen

Author: dterceroparker

package-lock.json

@@ -1,5 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { Home, Layout, ManageList } from './views';
+import { Suspense } from 'react';
+import { Home, Layout, ManageList, Team } from './views';
+import { Loading } from './components/Loading';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
@@ -64,6 +66,14 @@ export function App() {
 							</ProtectedRoute>
 						}
 					/>
+					<Route
+						path="developers"
+						element={
+							<Suspense fallback={<Loading />}>
+								<Team />
+							</Suspense>
+						}
+					/>
 				</Route>
 			</Routes>
 		</Router>

src/App.jsx

@@ -9,15 +9,23 @@ import { useNavigate } from 'react-router-dom';
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = ({ children, className }) => (
-	<button
-		type="button"
-		className={className}
-		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-	>
-		{children}
-	</button>
-);
+
+export const SignInButton = ({ children, className }) => {
+	const navigate = useNavigate();
+	const handleSignIn = async () => {
+		try {
+			await signInWithPopup(auth, new GoogleAuthProvider());
+			navigate('/');
+		} catch (error) {
+			console.error('Error signing in: ', error);
+		}
+	};
+	return (
+		<button type="button" className={className} onClick={handleSignIn}>
+			{children}
+		</button>
+	);
+};
 
 /**
  * A button that signs the user out of the app using Firebase Auth.

src/api/useAuth.jsx

@@ -0,0 +1,12 @@
+export function Loading() {
+	return (
+		<div style={{ textAlign: 'center', padding: '20px' }}>
+			<img
+				src={`${import.meta.env.BASE_URL}logo.png`}
+				alt="Loading..."
+				style={{ width: '150px' }}
+			/>
+			<h2>Please hold on while we prepare your experience.</h2>
+		</div>
+	);
+}

src/assets/avatars/doribelAvatar.jpg

@@ -1,13 +1,10 @@
 import './LandingPage.css';
+import logo from '../assets/logo.png';
 
 export function LandingPage() {
 	return (
 		<div className="landing-container">
-			<img
-				src={`${import.meta.env.BASE_URL}logo.png`}
-				alt="Logo"
-				className="logo"
-			/>
+			<img src={logo} alt="Logo" className="logo" />
 			<h1 className="main-heading">
 				<strong>CollabShop</strong> is more than just a grocery app—it&apos;s a
 				tool that embodies the spirit of teamwork and collaboration. Created by