From 6a5436a7f64b141d599b2d5a1871c8c0c837d7df Mon Sep 17 00:00:00 2001
From: "Yifan (Crystal) CAI" <49565183+yifcrystal@users.noreply.github.com>
Date: Tue, 25 Apr 2023 09:41:46 -0700
Subject: [PATCH] Update index.jsx

---
 qr-code/node/web/frontend/index.jsx | 75 +++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/qr-code/node/web/frontend/index.jsx b/qr-code/node/web/frontend/index.jsx
index cfa9184..de816c0 100644
--- a/qr-code/node/web/frontend/index.jsx
+++ b/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>
+  );
+}