diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js index 7bed467..b399ed5 100644 --- a/src/app/UserOutfitsPage.js +++ b/src/app/UserOutfitsPage.js @@ -8,8 +8,8 @@ import { Link, useLocation } from "react-router-dom"; import { Heading1, MajorErrorMessage, useCommonStyles } from "./util"; import HangerSpinner from "./components/HangerSpinner"; import OutfitThumbnail from "./components/OutfitThumbnail"; -import useRequireLogin from "./components/useRequireLogin"; import PaginationToolbar from "./components/PaginationToolbar"; +import useCurrentUser from "./components/useCurrentUser"; function UserOutfitsPage() { return ( @@ -53,7 +53,7 @@ const USER_OUTFITS_PAGE_QUERY = gql` const PER_PAGE = 20; function UserOutfitsPageContent() { - const { isLoading: userLoading } = useRequireLogin(); + const { isLoggedIn, isLoading: userLoading } = useCurrentUser(); const { search } = useLocation(); const offset = parseInt(new URLSearchParams(search).get("offset")) || 0; @@ -63,7 +63,7 @@ function UserOutfitsPageContent() { { variables: { offset }, context: { sendAuth: true }, - skip: userLoading, + skip: !isLoggedIn, // This will give us the cached numTotalOutfits while we wait for the // next page! returnPartialData: true, @@ -110,8 +110,15 @@ function UserOutfitsPageContent() {
+ ) : !isLoggedIn ? ( + + You can see your list of saved outfits here, once you create an + account and log in! + ) : outfits.length === 0 ? ( - You don't have any outfits yet. Maybe you can create some! + + You don't have any outfits yet. Maybe you can create some! + ) : ( {outfits.map((outfit) => ( diff --git a/src/app/components/useRequireLogin.js b/src/app/components/useRequireLogin.js deleted file mode 100644 index b2916cc..0000000 --- a/src/app/components/useRequireLogin.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { useAuth0 } from "@auth0/auth0-react"; - -import useCurrentUser from "./useCurrentUser"; - -/** - * useRequireLogin redirects to a login page, if the user is not already logged - * in. - * - * Returns an object {isLoading: Boolean}, which is true if we're loading or - * redirecting, or false if the user is logged in and we can proceed. - */ -function useRequireLogin() { - const { isLoading, isLoggedIn } = useCurrentUser(); - const { loginWithRedirect } = useAuth0(); - - const isRedirecting = !isLoading && !isLoggedIn; - - React.useEffect(() => { - if (isRedirecting) { - loginWithRedirect({ - redirectUri: window.location.href, - }); - } - }, [isRedirecting, loginWithRedirect]); - - // We tell the caller that we're "loading" even in the authenticated case, - // because we want them to continue to show their loading state while we - // redirect. - return { isLoading: isLoading || isRedirecting }; -} - -export default useRequireLogin;