OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Remove useRequireLogin, show logged-out message

Browse source 
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!
This commit is contained in:
Emi Matchu 2022-08-17 16:11:40 -07:00
parent db8fe9f3c2
commit f7f6f7b82b
2 changed files with 11 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/app/UserOutfitsPage.js
View file

@ -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) => (

33
src/app/components/useRequireLogin.js
View file

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