Adjust to use sync-progress/messages endpoint

Agilo · Mar 15, 2024 · d711494 · d711494
1 parent 139b407
commit d711494
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 17 deletions.
diff --git a/wordpress-plugin/admin/src/App.tsx b/wordpress-plugin/admin/src/App.tsx
@@ -34,6 +34,7 @@ import {
 import {
   getSyncMessages,
   getSyncProgress,
+  getSyncProgressMessages,
   removeSyncedData,
   startImportThumbnails,
   sync,
@@ -257,6 +258,18 @@ const SyncInProgress: React.FC<{
     previousSyncedItems.current = syncedItems;
   }, [syncedItems]);
 
+  const [searchParams] = useSearchParams();
+  const errorsPage = Number(searchParams.get("epage")) || 1;
+
+  const syncErrorMessagesQuery = useQuery({
+    queryKey: ["medusawp", "wp", "sync-progress-messages", "error", errorsPage],
+    queryFn: () =>
+      getSyncProgressMessages({
+        page: errorsPage,
+      }),
+    refetchInterval: errorsPage === 1 ? 5000 : false,
+  });
+
   return (
     <UiCard>
       <div className="mwp-items-baseline mwp-justify-between mwp-gap-8 md:mwp-flex">
@@ -283,23 +296,25 @@ const SyncInProgress: React.FC<{
             : `${formatDistance(timeLeft, 0)} left`}
         </p>
       </div>
-      {/* {progress.messages.length > 0 && (
-        <>
-          <h3 className="mwp-mt-12 mwp-text-sm md:mwp-text-md">
-            Errors ({progress.messages.length})
-          </h3>
-          <div className="mwp-mt-6 mwp-flex mwp-flex-col mwp-gap-4">
-            {progress.messages.map((message) => (
-              <SyncMessage key={message.id} message={message} />
-            ))}
-          </div>
-          <p className="mwp-mt-4 mwp-text-2xs">
-            It seems like there were some error in your data. Please check your
-            data in Medusa admin. Items will be automatically synced when
-            corrected in Medusa.
-          </p>
-        </>
-      )} */}
+      {syncErrorMessagesQuery.isSuccess &&
+        syncErrorMessagesQuery.data.messages.length > 0 && (
+          <>
+            <h3 className="mwp-mt-12 mwp-text-sm md:mwp-text-md">
+              Errors ({syncErrorMessagesQuery.data.messages.length})
+            </h3>
+            <div className="mwp-mt-6 mwp-flex mwp-flex-col mwp-gap-4">
+              {syncErrorMessagesQuery.data.messages.map((message) => (
+                <SyncMessage key={message.id} message={message} />
+              ))}
+            </div>
+            <p className="mwp-mt-4 mwp-text-2xs">
+              It seems like there were some error in your data. Please check your
+              data in Medusa admin. Items will be automatically synced when
+              corrected in Medusa.
+            </p>
+          </>
+        )
+      }
       {progress.type !== "import_thumbnails" && (
         <div className="mwp-mt-12">
           <UiCheckbox

diff --git a/wordpress-plugin/admin/src/api/sync.ts b/wordpress-plugin/admin/src/api/sync.ts
@@ -150,6 +150,45 @@ export async function getSyncProgress() {
   throw new Error("Unknown error");
 }
 
+export async function getSyncProgressMessages(options?: {
+  page?: number;
+  per_page?: number;
+}) {
+  let url = `${root}wp/v2/admin/medusa/sync-progress/messages`;
+
+  if (options) {
+    const params = new URLSearchParams();
+
+    if (options.page) {
+      params.append("page", options.page.toString());
+    }
+
+    if (options.per_page) {
+      params.append("per_page", options.per_page.toString());
+    }
+
+    url += `?${params.toString()}`;
+  }
+
+  const response = await fetch(url, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "X-WP-Nonce": nonce,
+    },
+    credentials: "include",
+    method: "GET",
+  });
+
+  if (response.status === 200) {
+    const data = await response.json();
+
+    return SyncMessagesResponseSchema.parse(data);
+  }
+
+  throw new Error("Unknown error");
+}
+
 export async function removeSyncedData() {
   const response = await fetch(`${root}wp/v2/admin/medusa/remove-synced`, {
     headers: {