placeholder Your Outfits page

it requires login, and runs a GQL query that will fail 😅

src/app/App.js

@@ -27,6 +27,7 @@ const ItemTradesSeekingPage = loadable(() =>
 const ModelingPage = loadable(() => import("./ModelingPage"));
 const PrivacyPolicyPage = loadable(() => import("./PrivacyPolicyPage"));
 const UserItemsPage = loadable(() => import("./UserItemsPage"));
+const UserOutfitsPage = loadable(() => import("./UserOutfitsPage"));
 const WardrobePage = loadable(() => import("./WardrobePage"), {
   fallback: <WardrobePageLayout />,
 });
@@ -92,6 +93,11 @@ function App() {
                   <UserItemsPage />
                 </PageLayout>
               </Route>
+              <Route path="/your-outfits">
+                <PageLayout>
+                  <UserOutfitsPage />
+                </PageLayout>
+              </Route>
               <Route path="/modeling">
                 <PageLayout>
                   <ModelingPage />

src/app/UserOutfitsPage.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box, Center } from "@chakra-ui/react";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/client";
+
+import { ErrorMessage, Heading1 } from "./util";
+import HangerSpinner from "./components/HangerSpinner";
+import useRequireLogin from "./components/useRequireLogin";
+
+function UserOutfitsPage() {
+  return (
+    <Box>
+      <Heading1>Your outfits</Heading1>
+      <UserOutfitsPageContent />
+    </Box>
+  );
+}
+
+function UserOutfitsPageContent() {
+  const { isLoading: userLoading } = useRequireLogin();
+
+  const { loading: queryLoading, error, data } = useQuery(
+    gql`
+      query UserOutfitsPageContent {
+        currentUser {
+          outfits {
+            id
+          }
+        }
+      }
+    `,
+    { skip: userLoading }
+  );
+
+  if (userLoading || queryLoading) {
+    return (
+      <Center>
+        <HangerSpinner />
+      </Center>
+    );
+  }
+
+  if (error) {
+    return <ErrorMessage>Error loading outfits: {error.message}</ErrorMessage>;
+  }
+
+  return (
+    <code>
+      <pre>Data: {JSON.stringify(data)}</pre>
+    </code>
+  );
+}
+
+export default UserOutfitsPage;

src/app/components/useRequireLogin.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+/**
+ * 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, isAuthenticated, loginWithRedirect } = useAuth0();
+
+  const isRedirecting = !isLoading && !isAuthenticated;
+
+  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;

src/app/util.js

@@ -81,6 +81,13 @@ export function Heading3({ children, ...props }) {
   );
 }
 
+/**
+ * ErrorMessage is a simple error message for simple errors!
+ */
+export function ErrorMessage({ children }) {
+  return <Box color="red.400">{children}</Box>;
+}
+
 /**
  * safeImageUrl returns an HTTPS-safe image URL for Neopets assets!
  */