diff --git a/src/App.jsx b/src/App.jsx index 90d1fc6..3e49ad1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { Home, Layout, List, ManageList, LandingPage } from './views'; +import { ProtectedRoute } from './components/ProtectedRoute'; import { useAuth, useShoppingListData, useShoppingLists } from './api'; import { useStateWithStorage } from './utils'; @@ -44,7 +45,7 @@ export function App() { - ) : ( - - ) + } /> ( +export const SignInButton = ({ children, className }) => ( ); diff --git a/src/components/IconButton.jsx b/src/components/IconButton.jsx index 29c1011..465f6ec 100644 --- a/src/components/IconButton.jsx +++ b/src/components/IconButton.jsx @@ -2,14 +2,13 @@ import '../views/Layout.css'; export function IconButton({ as: Component = 'button', - icon, - label, + IconComponent, ...props }) { return ( - {icon && }
- {label && {label}} + {IconComponent && }
+ {props.label && {props.label}}
); } diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx new file mode 100644 index 0000000..d44ed75 --- /dev/null +++ b/src/components/ProtectedRoute.jsx @@ -0,0 +1,11 @@ +import { useAuth } from '../api/useAuth.jsx'; +import { LandingPage } from '../views/index.js'; + +export function ProtectedRoute({ children }) { + const { user } = useAuth(); + + if (!user) { + return ; + } + return children; +} diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index d7c94e5..23f3904 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -1,8 +1,14 @@ import { Outlet, NavLink } from 'react-router-dom'; +import { + FaList, + FaSignInAlt, + FaSignOutAlt, + FaInfoCircle, +} from 'react-icons/fa'; import { IconButton } from '../components/IconButton'; -import './Layout.css'; import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx'; import { auth } from '../api/config.js'; +import './Layout.css'; /** * TODO: The links defined in this file don't work! @@ -61,14 +67,14 @@ export function Layout() {