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;