Wired up commercejs

.env

@@ -0,0 +1 @@
+REACT_APP_CHEC_PUBLIC_KEY=pk_test_193037b865ee81e89ff82cb93aa448630d5614b9b0098

package.json

@@ -4,6 +4,7 @@
  "private": true,
  "dependencies": {
  "@capacitor/core": "2.4.6",
+ "@chec/commerce.js": "^2.3.1",
  "@ionic/react": "^5.5.0",
  "@ionic/react-router": "^5.5.0",
  "@testing-library/jest-dom": "^5.11.9",

src/App.tsx

@@ -1,7 +1,7 @@
 import { Redirect, Route } from "react-router-dom";
 import { IonApp, IonRouterOutlet, setupConfig, isPlatform } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
-import Home from "./pages/Home";
+import Home from "./pages/home/Home";
 
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/react/css/core.css";

src/components/product-listing/ProductListing.css

@@ -0,0 +1,3 @@
+.container {
+
+}

src/components/product-listing/ProductListing.tsx

@@ -0,0 +1,15 @@
+import "./ProductListing.css";
+
+interface ProductListingProps {
+ product: object;
+}
+
+const ProductListing: React.FC<ProductListingProps> = ({ product }) => {
+ return (
+ <div className="container">
+ <p>My product</p>
+ </div>
+ );
+};
+
+export default ProductListing;

src/pages/Home.tsx → src/pages/home/Home.tsx

@@ -1,14 +1,25 @@
 import {
+ IonCol,
  IonContent,
+ IonGrid,
  IonHeader,
  IonPage,
+ IonRow,
  IonTitle,
  IonToolbar,
 } from "@ionic/react";
-import ExploreContainer from "../components/ExploreContainer";
 import "./Home.css";
+import Commerce from "@chec/commerce.js";
+import { useEffect, useState } from "react";
 
 const Home: React.FC = () => {
+ const [products, setProducts] = useState([]);
+
+ useEffect(() => {
+ const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY);
+ commerce.products.list().then((products) => setProducts(products));
+ }, []);
+
  return (
  <IonPage>
  <IonHeader>
@@ -22,7 +33,12 @@ const Home: React.FC = () => {
  <IonTitle size="large">ChopChop</IonTitle>
  </IonToolbar>
  </IonHeader>
- <ExploreContainer />
+ <IonGrid>
+ <IonRow>
+ <IonCol>1 of 2</IonCol>
+ <IonCol>2 of 2</IonCol>
+ </IonRow>
+ </IonGrid>
  </IonContent>
  </IonPage>
  );

tsconfig.json

@@ -1,16 +1,12 @@
 {
  "compilerOptions": {
  "target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
  "allowJs": true,
  "skipLibCheck": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
- "strict": true,
+ "strict": false,
  "forceConsistentCasingInFileNames": true,
  "noFallthroughCasesInSwitch": true,
  "module": "esnext",
@@ -20,7 +16,5 @@
  "noEmit": true,
  "jsx": "react-jsx"
  },
- "include": [
- "src"
- ]
+ "include": ["src"]
 }