Ledger Nano X - The secure hardware wallet
SHARE
TWEET

Untitled

a guest Apr 9th, 2020 134 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* index.js */
  2.  
  3. import React, { useState } from "react";
  4. import { EmptyState, Layout, Page } from "@shopify/polaris";
  5. import { ResourcePicker } from "@shopify/app-bridge-react";
  6. import store from "store-js";
  7. import ProductList from "../components/ProductList";
  8.  
  9. function Index() {
  10.   const [modal, setModal] = useState({ open: false });
  11.   const emptyState = !store.get("ids");
  12.  
  13.   function handleSelection(resources) {
  14.     const ids = resources.selection.map((product) => product.id);
  15.     setModal({ open: false });
  16.     store.set("ids", ids);
  17.     console.log(store.get("ids"));
  18.   }
  19.  
  20.   return (
  21.     <Page>
  22.       <ResourcePicker
  23.         resourceType="Product"
  24.         showVariants={true}
  25.         open={modal.open}
  26.         onSelection={(resources) => handleSelection(resources)}
  27.         onCancel={() => setModal({ open: false })}></ResourcePicker>
  28.       <Layout>
  29.         {emptyState ? (
  30.           <EmptyState
  31.             heading="Manage your inventory transfers"
  32.             action={{
  33.               content: "Add transfer",
  34.               onAction: () => setModal({ open: true }),
  35.             }}
  36.             secondaryAction={{
  37.               content: "Learn more",
  38.               url: "https://help.shopify.com",
  39.             }}
  40.             image="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg">
  41.             <p>Select products</p>
  42.           </EmptyState>
  43.         ) : (
  44.           <ProductList />
  45.         )}
  46.       </Layout>
  47.     </Page>
  48.   );
  49. }
  50.  
  51. export default Index;
  52.  
  53.  
  54. /* ProductList.js */
  55. import gql from "graphql-tag";
  56. import { useQuery } from "@apollo/react-hooks";
  57. import {
  58.   Card,
  59.   ResourceList,
  60.   Stack,
  61.   TextStyle,
  62.   Thumbnail,
  63. } from "@shopify/polaris";
  64. import store from "store-js";
  65.  
  66. const GET_PRODUCTS_BY_ID = gql`
  67.   query getProducts($ids: [ID!]!) {
  68.     nodes(ids: $ids) {
  69.       ... on Product {
  70.         title
  71.         handle
  72.         id
  73.         images(first: 1) {
  74.           edges {
  75.             node {
  76.               originalSrc
  77.               altText
  78.             }
  79.           }
  80.         }
  81.         variants(first: 1) {
  82.           edges {
  83.             node {
  84.               price
  85.               id
  86.             }
  87.           }
  88.         }
  89.       }
  90.     }
  91.   }
  92. `;
  93.  
  94. function ProductList() {
  95.   const { loading, error, data } = useQuery(GET_PRODUCTS_BY_ID, {
  96.     variables: { ids: store.get("ids") },
  97.   });
  98.  
  99.   if (loading) return <div>Loading...</div>;
  100.   if (error) return <div>{error.message}</div>;
  101.  
  102.   console.log("data: ", data);
  103.  
  104.   return (
  105.     <div>
  106.       <p>he.lo PRODUCOT LSIT</p>
  107.     </div>
  108.   );
  109. }
  110.  
  111. export default ProductList;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top