Skip to content

Commit 04f9e16

Browse files
paulomargpaulomarg
authored
Merge pull request #255 from Shopify/dependabot/npm_and_yarn/shopify/app-bridge-react-4.1.3
Bump @shopify/app-bridge-react from 3.7.10 to 4.1.3
2 parents 851e8b0 + 752641b commit 04f9e16

File tree

14 files changed

+77
-272
lines changed

14 files changed

+77
-272
lines changed

‎App.jsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import { BrowserRouter } from "react-router-dom";
22
import { useTranslation } from "react-i18next";
3-
import { NavigationMenu } from "@shopify/app-bridge-react";
3+
import { NavMenu } from "@shopify/app-bridge-react";
44
import Routes from "./Routes";
55

6-
import {
7-
AppBridgeProvider,
8-
QueryProvider,
9-
PolarisProvider,
10-
} from "./components";
6+
import { QueryProvider, PolarisProvider } from "./components";
117

128
export default function App() {
139
// Any .tsx or .jsx files in /pages will become a route
@@ -18,19 +14,13 @@ export default function App() {
1814
return (
1915
<PolarisProvider>
2016
<BrowserRouter>
21-
<AppBridgeProvider>
22-
<QueryProvider>
23-
<NavigationMenu
24-
navigationLinks={[
25-
{
26-
label: t("NavigationMenu.pageName"),
27-
destination: "/pagename",
28-
},
29-
]}
30-
/>
31-
<Routes pages={pages} />
32-
</QueryProvider>
33-
</AppBridgeProvider>
17+
<QueryProvider>
18+
<NavMenu>
19+
<a href="/" rel="home" />
20+
<a href="/pagename">{t("NavigationMenu.pageName")}</a>
21+
</NavMenu>
22+
<Routes pages={pages} />
23+
</QueryProvider>
3424
</BrowserRouter>
3525
</PolarisProvider>
3626
);

‎components/ProductsCard.jsx‎

Lines changed: 44 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,73 @@
11
import { useState } from "react";
22
import { Card, TextContainer, Text } from "@shopify/polaris";
3-
import { Toast } from "@shopify/app-bridge-react";
3+
import { useAppBridge } from "@shopify/app-bridge-react";
44
import { useTranslation } from "react-i18next";
5-
import { useAppQuery, useAuthenticatedFetch } from "../hooks";
5+
import { useQuery } from "react-query";
66

77
export function ProductsCard() {
8-
const emptyToastProps = { content: null };
9-
const [isLoading, setIsLoading] = useState(true);
10-
const [toastProps, setToastProps] = useState(emptyToastProps);
11-
const fetch = useAuthenticatedFetch();
8+
const shopify = useAppBridge();
129
const { t } = useTranslation();
10+
const [isPopulating, setIsPopulating] = useState(false);
1311
const productsCount = 5;
1412

1513
const {
1614
data,
1715
refetch: refetchProductCount,
1816
isLoading: isLoadingCount,
19-
isRefetching: isRefetchingCount,
20-
} = useAppQuery({
21-
url: "/api/products/count",
22-
reactQueryOptions: {
23-
onSuccess: () => {
24-
setIsLoading(false);
25-
},
17+
} = useQuery({
18+
queryKey: ["productCount"],
19+
queryFn: async () => {
20+
const response = await fetch("/api/products/count");
21+
return await response.json();
2622
},
23+
refetchOnWindowFocus: false,
2724
});
2825

29-
const toastMarkup = toastProps.content && !isRefetchingCount && (
30-
<Toast {...toastProps} onDismiss={() => setToastProps(emptyToastProps)} />
31-
);
26+
const setPopulating = (flag) => {
27+
shopify.loading(flag);
28+
setIsPopulating(flag);
29+
};
3230

3331
const handlePopulate = async () => {
34-
setIsLoading(true);
35-
const response = await fetch("/api/products", {method: "POST"});
32+
setPopulating(true);
33+
const response = await fetch("/api/products", { method: "POST" });
3634

3735
if (response.ok) {
3836
await refetchProductCount();
39-
setToastProps({
40-
content: t("ProductsCard.productsCreatedToast", {
41-
count: productsCount,
42-
}),
43-
});
37+
38+
shopify.toast.show(
39+
t("ProductsCard.productsCreatedToast", { count: productsCount })
40+
);
4441
} else {
45-
setIsLoading(false);
46-
setToastProps({
47-
content: t("ProductsCard.errorCreatingProductsToast"),
48-
error: true,
42+
shopify.toast.show(t("ProductsCard.errorCreatingProductsToast"), {
43+
isError: true,
4944
});
5045
}
46+
47+
setPopulating(false);
5148
};
5249

5350
return (
54-
<>
55-
{toastMarkup}
56-
<Card
57-
title={t("ProductsCard.title")}
58-
sectioned
59-
primaryFooterAction={{
60-
content: t("ProductsCard.populateProductsButton", {
61-
count: productsCount,
62-
}),
63-
onAction: handlePopulate,
64-
loading: isLoading,
65-
}}
66-
>
67-
<TextContainer spacing="loose">
68-
<p>{t("ProductsCard.description")}</p>
69-
<Text as="h4" variant="headingMd">
70-
{t("ProductsCard.totalProductsHeading")}
71-
<Text variant="bodyMd" as="p" fontWeight="semibold">
72-
{isLoadingCount ? "-" : data.count}
73-
</Text>
51+
<Card
52+
title={t("ProductsCard.title")}
53+
sectioned
54+
primaryFooterAction={{
55+
content: t("ProductsCard.populateProductsButton", {
56+
count: productsCount,
57+
}),
58+
onAction: handlePopulate,
59+
loading: isPopulating,
60+
}}
61+
>
62+
<TextContainer spacing="loose">
63+
<p>{t("ProductsCard.description")}</p>
64+
<Text as="h4" variant="headingMd">
65+
{t("ProductsCard.totalProductsHeading")}
66+
<Text variant="bodyMd" as="p" fontWeight="semibold">
67+
{isLoadingCount ? "-" : data?.count}
7468
</Text>
75-
</TextContainer>
76-
</Card>
77-
</>
69+
</Text>
70+
</TextContainer>
71+
</Card>
7872
);
7973
}

‎components/providers/AppBridgeProvider.jsx‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎components/providers/PolarisProvider.jsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import { useCallback } from "react";
22
import { AppProvider } from "@shopify/polaris";
3-
import { useNavigate } from "@shopify/app-bridge-react";
43
import "@shopify/polaris/build/esm/styles.css";
54
import { getPolarisTranslations } from "../../utils/i18nUtils";
65

76
function AppBridgeLink({ url, children, external, ...rest }) {
8-
const navigate = useNavigate();
9-
const handleClick = useCallback(() => {
10-
navigate(url);
11-
}, [url]);
7+
const handleClick = useCallback(() => window.open(url), [url]);
128

139
const IS_EXTERNAL_LINK_REGEX = /^(?:[a-z][a-z\d+.-]*:|\/\/)/;
1410

‎components/providers/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
export { AppBridgeProvider } from "./AppBridgeProvider";
21
export { QueryProvider } from "./QueryProvider";
32
export { PolarisProvider } from "./PolarisProvider";

‎hooks/index.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎hooks/useAppQuery.js‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎hooks/useAuthenticatedFetch.js‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
document.getElementsByTagName('head')[0].append(script);
1717
}
1818
</script>
19+
20+
<meta name="shopify-api-key" content="%VITE_SHOPIFY_API_KEY%" />
21+
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
1922
</head>
2023
<body>
2124
<div id="app"><!--index.jsx injects App.jsx here--></div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@formatjs/intl-localematcher": "^0.4.0",
2121
"@formatjs/intl-pluralrules": "^5.2.4",
2222
"@shopify/app-bridge": "^3.7.7",
23-
"@shopify/app-bridge-react": "^3.7.7",
23+
"@shopify/app-bridge-react": "^4.1.3",
2424
"@shopify/i18next-shopify": "^0.2.9",
2525
"@shopify/polaris": "^10.49.1",
2626
"@vitejs/plugin-react": "4.2.1",

0 commit comments

Comments
 (0)