70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
import { authenticate } from "../shopify.server";
|
|
import { useLoaderData } from "react-router";
|
|
|
|
export const loader = async ({ request }) => {
|
|
const { admin, session } = await authenticate.admin(request);
|
|
|
|
// Fetch some reviews to show in the admin dashboard
|
|
const response = await admin.graphql(`#graphql
|
|
query {
|
|
metaobjects(first: 10, 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 (
|
|
<s-page heading="Product Reviews Dashboard">
|
|
<s-section heading="Manage your reviews">
|
|
<s-paragraph>
|
|
All reviews are stored directly in Shopify Metaobjects. You can view, edit, or delete them here.
|
|
</s-paragraph>
|
|
|
|
{reviews.length === 0 ? (
|
|
<s-paragraph>No reviews found yet. Try adding one from your store!</s-paragraph>
|
|
) : (
|
|
<s-stack direction="block" gap="base">
|
|
{reviews.map((r) => (
|
|
<s-box padding="base" borderWidth="base" borderRadius="base" background="subdued" key={r.id}>
|
|
<s-stack direction="block" gap="small">
|
|
<s-text style={{ fontWeight: 'bold' }}>{r.customer_name || 'Anonymous'}</s-text>
|
|
<s-text>{r.content}</s-text>
|
|
<s-text style={{ color: '#666', fontSize: '0.8em' }}>Product ID: {r.product_id}</s-text>
|
|
</s-stack>
|
|
</s-box>
|
|
))}
|
|
</s-stack>
|
|
)}
|
|
</s-section>
|
|
|
|
<s-section slot="aside" heading="Tech Stack">
|
|
<s-paragraph>
|
|
This app is 100% database-less.
|
|
</s-paragraph>
|
|
<s-unordered-list>
|
|
<s-list-item>Storage: Shopify Metaobjects</s-list-item>
|
|
<s-list-item>Auth: App Proxy & Admin API</s-list-item>
|
|
<s-list-item>Framework: React Router</s-list-item>
|
|
</s-unordered-list>
|
|
</s-section>
|
|
</s-page>
|
|
);
|
|
}
|