Skip to content

Instantly share code, notes, and snippets.

@nutterbrand
Last active January 3, 2021 23:36
Show Gist options
  • Save nutterbrand/f40f03bccb74eb1925ee59e4380b23cd to your computer and use it in GitHub Desktop.
Save nutterbrand/f40f03bccb74eb1925ee59e4380b23cd to your computer and use it in GitHub Desktop.
pages/index.js stores the products in localstorage & includes the ResourceList
import React from "react";
import { EmptyState, Layout, Page } from '@shopify/polaris';
import { ResourcePicker, TitleBar } from '@shopify/app-bridge-react';
import store from 'store-js';
import ResourceListWithProducts from '../components/ResourceList';
const img = 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';
class Index extends React.Component {
state = { open: false };
render() {
return (
<Page>
<TitleBar
title="Sample App"
primaryAction={{
content: 'Select products',
onAction: () => this.setState({ open: true }),
}}
/>
<ResourcePicker
resourceType="Product"
showVariants={false}
open={this.state.open}
onSelection={(resources) => this.handleSelection(resources)}
onCancel={() => this.setState({ open: false })}
/>
<Layout>
<EmptyState
heading="Select products to start"
action={{
content: 'Select products',
onAction: () => this.setState({ open: true }),
}}
image={img}
>
<p>Select products and change their price temporarily</p>
</EmptyState>
</Layout>
<ResourceListWithProducts />
</Page >
);
}
handleSelection = (resources) => {
const idsFromResources = resources.selection.map((product) => product.id);
this.setState({ open: false });
store.set('ids', idsFromResources);
};
}
export default Index;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment