medusa-plugin-meilisearch-variants-v3/.medusa/server/src/admin/routes/settings/meilisearch-variants/page.js

Meilisearch plugin for Medusa 2 Product Variants

import { jsxs, jsx } from "react/jsx-runtime";
import { toast, Container, Heading, Button } from "@medusajs/ui";
import { useMutation } from "@tanstack/react-query";
import { defineRouteConfig } from "@medusajs/admin-sdk";
import { useEffect } from "react";
const SyncPage = () => {
  console.log("🔧 [SyncPage] Component initialization started");
  useEffect(() => {
    console.log("🚀 [SyncPage] Component mounted successfully");
    console.log("📊 [SyncPage] Initial state - isPending: false");
    return () => {
      console.log("🧹 [SyncPage] Component unmounting");
    };
  }, []);
  const { mutate, isPending } = useMutation({
    mutationFn: async () => {
      console.log("🔄 [SyncPage] Starting sync mutation");
      console.log(
        "📡 [SyncPage] Making API call to /admin/meilisearch-variants/sync"
      );
      try {
        const response = await fetch("/admin/meilisearch-variants/sync", {
          method: "POST"
        });
        console.log("✅ [SyncPage] API call successful", { response });
        return response;
      } catch (error) {
        console.error("❌ [SyncPage] API call failed", { error });
        throw error;
      }
    },
    onMutate: () => {
      console.log("🎯 [SyncPage] Mutation started - onMutate callback");
    },
    onSuccess: (data) => {
      console.log("🎉 [SyncPage] Sync completed successfully", { data });
      console.log("📢 [SyncPage] Showing success toast");
      toast.success("Successfully triggered data sync to Meilisearch");
    },
    onError: (err) => {
      console.error("💥 [SyncPage] Sync error occurred", { error: err });
      console.log("📢 [SyncPage] Showing error toast");
      toast.error("Failed to sync data to Meilisearch");
    },
    onSettled: (data, error) => {
      console.log("🏁 [SyncPage] Mutation settled", { data, error });
    }
  });
  const handleSync = () => {
    console.log("🖱️ [SyncPage] Sync button clicked");
    console.log(
      "📊 [SyncPage] Current state before mutation - isPending:",
      isPending
    );
    mutate();
    console.log("📊 [SyncPage] Mutation triggered, isPending should be true");
  };
  console.log("🎨 [SyncPage] Rendering component", { isPending });
  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Meilisearch Variants Sync" }) }),
    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
      /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Manually trigger synchronization of all product variants with Meilisearch. This will clear existing indexes and re-sync all variants." }),
      /* @__PURE__ */ jsx(
        Button,
        {
          onClick: handleSync,
          isLoading: isPending,
          variant: "primary",
          disabled: isPending,
          children: isPending ? "Syncing..." : "Sync All Variants"
        }
      )
    ] }) })
  ] });
};
const config = defineRouteConfig({
  label: "Meilisearch Variants"
});
const handle = {
  breadcrumb: () => "Meilisearch Variants"
};
export {
  config,
  SyncPage as default,
  handle
};