diff options
| author | ꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id> | 2022-09-16 09:42:10 +0800 |
|---|---|---|
| committer | ꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id> | 2022-09-16 09:42:10 +0800 |
| commit | 672a291c88d1429c29786bca6fe31b89f685a292 (patch) | |
| tree | 97722bfbfe73baeeaabf4d30655a56c3aa0a3d80 | |
| parent | 060091e0b1c6d23146cfba720577be5967afcf00 (diff) | |
Revert "Preparation for CDN hosted version of frontend"
This reverts commit 060091e0b1c6d23146cfba720577be5967afcf00.
| -rw-r--r-- | web/frontend/hooks/useAppQuery.js | 26 | ||||
| -rw-r--r-- | web/frontend/hooks/useAuthenticatedFetch.js | 38 | ||||
| -rw-r--r-- | web/frontend/index.html | 10 |
3 files changed, 1 insertions, 73 deletions
diff --git a/web/frontend/hooks/useAppQuery.js b/web/frontend/hooks/useAppQuery.js deleted file mode 100644 index 7218274..0000000 --- a/web/frontend/hooks/useAppQuery.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * 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 deleted file mode 100644 index e5f36a8..0000000 --- a/web/frontend/hooks/useAuthenticatedFetch.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * 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 - ); - } -} diff --git a/web/frontend/index.html b/web/frontend/index.html index 70c4936..b6b3f23 100644 --- a/web/frontend/index.html +++ b/web/frontend/index.html @@ -2,16 +2,8 @@ <html lang=en> <head> <meta charset=utf-8/> - <meta name="viewport" content="width=device-width, initial-scale=1"/> - <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@10.2.0/build/esm/styles.css"/> </head> <body> - <script src="https://unpkg.com/react@18"></script> - <script src="https://unpkg.com/react-query@3"></script> - <script src="https://unpkg.com/@shopify/app-bridge@3"></script> - <script src="https://unpkg.com/@shopify/app-bridge-utils@3"></script> - <script src="https://unpkg.com/@shopify/app-bridge-react@3"></script> - <script async type="text/javascript" src="js/useAuthenticatedFetch.js"></script> - <script async type="text/javascript" src="js/useAppQuery.js"></script> + Hello from C! </body> </html> |