import {
AppProxyProvider,
AppProxyForm,
} from "@shopify/shopify-app-remix/react";
import { authenticate } from "~/shopify.server";
export async function loader({ request }) {
await authenticate.public.appProxy(request);
return json({ appUrl: process.env.SHOPIFY_APP_URL });
}
export async function action({ request }) {
await authenticate.public.appProxy(request);
const formData = await request.formData();
const field = formData.get("field")?.toString();
if (field) {
console.log("Field:", field);
}
return json({ message: "Success!" });
}
export default function App() {
const { appUrl } = useLoaderData();
const data = useActionData();
return (
<AppProxyProvider appUrl={appUrl}>
<AppProxyForm action="/">
<input type="text" name="field" defaultValue={data?.field} />
<input type="submit" name="Submit" />
</AppProxyForm>
</AppProxyProvider>
);
}
