Update index.jsx

qr-code/node/web/frontend/index.jsx

@@ -1,5 +1,74 @@
-import ReactDOM from "react-dom";
+import { useNavigate, TitleBar, Loading } from "@shopify/app-bridge-react";
+import {
+  Card,
+  EmptyState,
+  Layout,
+  Page,
+  SkeletonBodyText,
+} from "@shopify/polaris";
 
-import App from "./App";
+export default function HomePage() {
+  /*
+    Add an App Bridge useNavigate hook to set up the navigate function.
+    This function modifies the top-level browser URL so that you can
+    navigate within the embedded app and keep the browser in sync on reload.
+  */
+  const navigate = useNavigate();
 
-ReactDOM.render(<App />, document.getElementById("app"));
+  /*
+    These are mock values. Setting these values lets you preview the loading markup and the empty state.
+  */
+  const isLoading = true;
+  const isRefetching = false;
+  const QRCodes = [];
+
+  /* loadingMarkup uses the loading component from AppBridge and components from Polaris  */
+  const loadingMarkup = isLoading ? (
+    <Card sectioned>
+      <Loading />
+      <SkeletonBodyText />
+    </Card>
+  ) : null;
+
+  /* Use Polaris Card and EmptyState components to define the contents of the empty state */
+  const emptyStateMarkup =
+    !isLoading && !QRCodes?.length ? (
+      <Card sectioned>
+        <EmptyState
+          heading="Create unique QR codes for your product"
+          /* This button will take the user to a Create a QR code page */
+          action={{
+            content: "Create QR code",
+            onAction: () => navigate("/qrcodes/new"),
+          }}
+          image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
+        >
+          <p>
+            Allow customers to scan codes and buy products using their phones.
+          </p>
+        </EmptyState>
+      </Card>
+    ) : null;
+
+  /*
+    Use Polaris Page and TitleBar components to create the page layout,
+    and include the empty state contents set above.
+  */
+  return (
+    <Page>
+      <TitleBar
+        title="QR codes"
+        primaryAction={{
+          content: "Create QR code",
+          onAction: () => navigate("/qrcodes/new"),
+        }}
+      />
+      <Layout>
+        <Layout.Section>
+          {loadingMarkup}
+          {emptyStateMarkup}
+        </Layout.Section>
+      </Layout>
+    </Page>
+  );
+}