61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import { authenticate } from "../shopify.server";
|
|
import { useLoaderData } from "react-router";
|
|
import { Page, Layout, Card, BlockStack } from "@shopify/polaris";
|
|
|
|
import { DashboardMetrics } from "../components/DashboardMetrics";
|
|
import { ReviewList } from "../components/ReviewList";
|
|
import { TechStackCard } from "../components/TechStackCard";
|
|
import { StorefrontSetupCard } from "../components/StorefrontSetupCard";
|
|
|
|
export const loader = async ({ request }) => {
|
|
const { admin } = await authenticate.admin(request);
|
|
|
|
// Fetch some reviews to show in the admin dashboard
|
|
const response = await admin.graphql(`#graphql
|
|
query {
|
|
metaobjects(first: 50, type: "custom_product_review") {
|
|
edges {
|
|
node {
|
|
id
|
|
fields { key value }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`);
|
|
const data = await response.json();
|
|
const reviews = (data.data?.metaobjects?.edges || []).map(edge => {
|
|
const fields = {};
|
|
edge.node.fields.forEach(f => { fields[f.key] = f.value; });
|
|
return { id: edge.node.id, ...fields };
|
|
});
|
|
|
|
return { reviews };
|
|
};
|
|
|
|
export default function Index() {
|
|
const { reviews } = useLoaderData();
|
|
|
|
return (
|
|
<Page title="Product Reviews Dashboard">
|
|
<Layout>
|
|
<Layout.Section>
|
|
<BlockStack gap="400">
|
|
<DashboardMetrics reviews={reviews} />
|
|
<Card padding="0">
|
|
<ReviewList reviews={reviews} />
|
|
</Card>
|
|
</BlockStack>
|
|
</Layout.Section>
|
|
|
|
<Layout.Section variant="oneThird">
|
|
<BlockStack gap="500">
|
|
<TechStackCard />
|
|
<StorefrontSetupCard />
|
|
</BlockStack>
|
|
</Layout.Section>
|
|
</Layout>
|
|
</Page>
|
|
);
|
|
}
|