Remove useRequireLogin, show logged-out message

There was a bug in the new db auth method where `useRequireLogin` was expecting Auth0 logins to work, so it would get caught in an infinite redirect loop.

Rather than trying to figure out how to make `useRequireLogin` work with the new modal UI, I figured we can just delete it (since we only ended up using it once anyway), and add a little message if you happen to end up on the page while logged out. Easy peasy!

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() {
         <Center>
           <HangerSpinner />
         </Center>
+      ) : !isLoggedIn ? (
+        <Box textAlign="center">
+          You can see your list of saved outfits here, once you create an
+          account and log in!
+        </Box>
       ) : outfits.length === 0 ? (
-        <Box>You don't have any outfits yet. Maybe you can create some!</Box>
+        <Box textAlign="center">
+          You don't have any outfits yet. Maybe you can create some!
+        </Box>
       ) : (
         <Wrap spacing="4" justify="space-around">
           {outfits.map((outfit) => (

src/app/components/useRequireLogin.js

@@ -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;