From 778eefbdd5b72bb6db99cf928e533937c401da64 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 4 Jan 2021 07:31:02 +0000
Subject: [PATCH] placeholder Your Outfits page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

it requires login, and runs a GQL query that will fail 😅
---
 src/app/App.js                        |  6 +++
 src/app/UserOutfitsPage.js            | 54 +++++++++++++++++++++++++++
 src/app/components/useRequireLogin.js | 30 +++++++++++++++
 src/app/util.js                       |  7 ++++
 4 files changed, 97 insertions(+)
 create mode 100644 src/app/UserOutfitsPage.js
 create mode 100644 src/app/components/useRequireLogin.js

diff --git a/src/app/App.js b/src/app/App.js
index 1c3238b..477da72 100644
--- a/src/app/App.js
+++ b/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 />
diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js
new file mode 100644
index 0000000..2c78348
--- /dev/null
+++ b/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;
diff --git a/src/app/components/useRequireLogin.js b/src/app/components/useRequireLogin.js
new file mode 100644
index 0000000..ebc057c
--- /dev/null
+++ b/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;
diff --git a/src/app/util.js b/src/app/util.js
index 3b9ccad..0d8a2f0 100644
--- a/src/app/util.js
+++ b/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!
  */