not sure why my Resource picker won't render? (react, rails & app bridge)

jamesvdev
New Member
2 0 0
import React from "react"
import PropTypes from "prop-types"
import { Page } from '@shopify/polaris';
import { ResourcePicker } from '@shopify/app-bridge-react';

class CreateUpsell extends React.Component {
  state = { open: false }
  render () {
    return (
      <Page
        title='Create upsell'
        primaryAction={{
          content: 'Select product upsell',
          onAction: () => this.setState({open: true})
        }}
      >
        <ResourcePicker
          resourceType='Product'
          open={this.state.open}
          onCancel={() => this.setState({open: false})}
          onSelection={(resources) => this.handleSelection({resources})}
        />
      </Page>
    );
  }
  handleSelection = (resources) => {
    const idFromResources = resources.selection.map((product) => product.id);
    this.setState({open: false})
    console.log(idFromResources);
  }
}

export default CreateUpsell
0 Likes
jamesvdev
New Member
2 0 0

for some reason my console error and app.js component file didn't load into the post, so here it is too thanks in advance.

console errorsconsole errors

 

 

 

 

 

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache,
} from '@apollo/client';
import { AppProvider, EmptyState, Page } from '@shopify/polaris';
import { authenticatedFetch } from '@shopify/app-bridge-utils';

import enTranslations from '@shopify/polaris/locales/en.json';
import React from 'react';

import TestData from './TestData';
import CreateUpsell from './CreateUpsell'

export default function App() {
  const client = new ApolloClient({
    link: new HttpLink({
      credentials: 'same-origin',
      fetch: authenticatedFetch(window.app), // created in shopify_app.js
      uri: '/graphql'
    }),
    cache: new InMemoryCache()
  });

  return (
    <AppProvider i18n={enTranslations}>
      <ApolloProvider client={client}>
        <Page>
          <EmptyState
            heading='Say goodbye to third-party cookies'
            action={{
              content: 'GitHub repo',
              url: 'https://github.com/Shopify/next-gen-auth-app-demo',
              external: true
            }}
            secondaryAction={{
              content: 'Learn more',
              url: 'https://shopify.dev/tools/app-bridge/authentication',
              external: true
            }}
            image='https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg'
          >
            <TestData />
          </EmptyState>
        <CreateUpsell />
      </Page>
    </ApolloProvider>
  </AppProvider>
  );
}

 

 

0 Likes