-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
107 lines (98 loc) · 3.55 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { useState, useMemo, useCallback } from "react";
import { Button, Card, DataTable, EmptyState, Frame, Heading, Page, Stack,Toast, TextField } from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge-react";
import { useMutation } from "react-apollo";
import { ProductUpdatemutation } from "../graphql/ProductUpdate";
const Index = () => {
const [appendToTitle, setAppendToTitle] = useState('');
const [appendToDescription, setAppendToDescription] = useState('');
const [pickerOpen, setPickerOpen] = useState(false);
const [products, setProducts] = useState([]);
const [showToast, setShowToast] = useState(false);
const [updateProduct] = useMutation(ProductUpdatemutation);
const productTableDisplayData = useMemo(() => (products.map((product) => [
product.id,
product.title,
`${product.title}${appendToTitle}`,
product.descriptionHtml,
`${product.descriptionHtml}${appendToDescription}`,
])), [products, appendToTitle, appendToDescription]);
const submitHandler = useCallback(() => {
let count = 0;
const runMutation = (product) => {
updateProduct({
variables: {
input: {
descriptionHtml: `${product.descriptionHtml}${appendToDescription}`,
title: `${product.title}${appendToTitle}`,
id: product.id
}
}
}).then((data) => {
console.log(data.data.productUpdate.product.variants.edges[0].node.price);
console.log(products);
console.log(data);
console.log('Update Product', count, data);
count++;
if (products[count]) {
runMutation(products[count])
} else {
console.log(('Update Complete'));
setShowToast(true);
}
})
}
runMutation(products[count]);
}, [products, appendToTitle, appendToDescription]);
const toastMarkup = showToast ?
<Toast
content="Update Successful"
onDismiss={() => setShowToast(false)}
duration={4000}
/> : null;
return (
<Frame>
<Page>
<Heading>Product Updater App</Heading>
<Card>
<Card.Section>
<Stack vertical>
<TextField
label="Append to title"
value={appendToTitle}
onChange={setAppendToTitle}
/>
<TextField
label="Append to description"
value={appendToDescription}
onChange={setAppendToDescription}
multiline={3}
/>
<ResourcePicker
resourceType="Product"
showVariants={false}
open={pickerOpen}
onSelection={(resources) => {
setProducts(resources.selection);
}}
/>
<Button primary onClick={() => setPickerOpen(true)}>Select Products</Button>
</Stack>
</Card.Section>
<Card.Section>
{productTableDisplayData.length ? <DataTable
columnContentTypes={['text','text','text','numeric','numeric']}
headings={['ID', 'Old Title', 'New Title', 'Old Description', 'New Description', 'Old Price', 'New Price']}
rows={productTableDisplayData}
/> : <EmptyState heading="no products selection"/>}
</Card.Section>
<Card.Section>
<Button primary onClick={submitHandler} disabled={!products.length}>Submit</Button>
</Card.Section>
</Card>
{toastMarkup}
</Page>
</Frame>
);
};
export default Index;