Home page for sample Shopify app

index.jsx

import { useState } from 'react'
import { EmptyState, Layout, Page } from '@shopify/polaris'
import { ResourcePicker } from '@shopify/app-bridge-react'

const MAIN_IMAGE = "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"

function Index() {
    // State
    const [modal, setModal] = useState({ open: false })

    // Methods
    const openModal = () => setModal({ open: true })
    const closeModal = () => setModal({ open: false })

    const handleSelection = (resources) => {
        this.setState({ open: false });
        console.log(resources);
    };

    return (
        <Page>
            <ResourcePicker
                resourceType="Product"
                showVariants={false}
                open={modal.open}
                onSelection={handleSelection}
                onCancel={closeModal}/>
            <Layout>
                <EmptyState
                    heading="Manage your inventory transfers"
                    action={{ content: 'Select Products', onAction: openModal }}
                    secondaryAction={{ content: 'Learn More', url: 'https://help.shopify.com' }}
                    image={MAIN_IMAGE}>
                    <p>Select products</p>
                </EmptyState>
            </Layout>
        </Page>
    )
}

export default Index