From 060091e0b1c6d23146cfba720577be5967afcf00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?=
 =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?=
 <erik@darapsa.co.id>
Date: Fri, 16 Sep 2022 09:38:08 +0800
Subject: Preparation for CDN hosted version of frontend

---
 web/frontend/hooks/useAppQuery.js           | 26 ++++++++++++++++++++
 web/frontend/hooks/useAuthenticatedFetch.js | 38 +++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 web/frontend/hooks/useAppQuery.js
 create mode 100644 web/frontend/hooks/useAuthenticatedFetch.js

(limited to 'web/frontend/hooks')

diff --git a/web/frontend/hooks/useAppQuery.js b/web/frontend/hooks/useAppQuery.js
new file mode 100644
index 0000000..7218274
--- /dev/null
+++ b/web/frontend/hooks/useAppQuery.js
@@ -0,0 +1,26 @@
+/**
+ * A hook for querying your custom app data.
+ * @desc A thin wrapper around useAuthenticatedFetch and react-query's useQuery.
+ *
+ * @param {Object} options - The options for your query. Accepts 3 keys:
+ *
+ * 1. url: The URL to query. E.g: /api/widgets/1`
+ * 2. fetchInit: The init options for fetch.  See: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
+ * 3. reactQueryOptions: The options for `useQuery`. See: https://react-query.tanstack.com/reference/useQuery
+ *
+ * @returns Return value of useQuery.  See: https://react-query.tanstack.com/reference/useQuery.
+ */
+const useAppQuery = ({ url, fetchInit = {}, reactQueryOptions }) => {
+  const authenticatedFetch = useAuthenticatedFetch();
+  const fetch = useMemo(() => {
+    return async () => {
+      const response = await authenticatedFetch(url, fetchInit);
+      return response.json();
+    };
+  }, [url, JSON.stringify(fetchInit)]);
+
+  return useQuery(url, fetch, {
+    ...reactQueryOptions,
+    refetchOnWindowFocus: false,
+  });
+};
diff --git a/web/frontend/hooks/useAuthenticatedFetch.js b/web/frontend/hooks/useAuthenticatedFetch.js
new file mode 100644
index 0000000..e5f36a8
--- /dev/null
+++ b/web/frontend/hooks/useAuthenticatedFetch.js
@@ -0,0 +1,38 @@
+/**
+ * A hook that returns an auth-aware fetch function.
+ * @desc The returned fetch function that matches the browser's fetch API
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+ * It will provide the following functionality:
+ *
+ * 1. Add a `X-Shopify-Access-Token` header to the request.
+ * 2. Check response for `X-Shopify-API-Request-Failure-Reauthorize` header.
+ * 3. Redirect the user to the reauthorization URL if the header is present.
+ *
+ * @returns {Function} fetch function
+ */
+function useAuthenticatedFetch() {
+  const app = useAppBridge();
+  const fetchFunction = authenticatedFetch(app);
+
+  return async (uri, options) => {
+    const response = await fetchFunction(uri, options);
+    checkHeadersForReauthorization(response.headers, app);
+    return response;
+  };
+}
+
+function checkHeadersForReauthorization(headers, app) {
+  if (headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1") {
+    const authUrlHeader =
+      headers.get("X-Shopify-API-Request-Failure-Reauthorize-Url") ||
+      `/api/auth`;
+
+    const redirect = Redirect.create(app);
+    redirect.dispatch(
+      Redirect.Action.REMOTE,
+      authUrlHeader.startsWith("/")
+        ? `https://${window.location.host}${authUrlHeader}`
+        : authUrlHeader
+    );
+  }
+}
-- 
cgit v1.2.3