Updated @moltin/sdk to v4.0.0 (#52)

dusanradovanovic · web-flow · commit 4a633ca04613 · 2020-08-14T16:09:36.000-04:00
* Updated to sdk beta.3: built in types with extensions

* Updated @moltin/sdk to 4.0.0
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.1.0",
   "private": true,
   "dependencies": {
-    "@moltin/sdk": "^3.23.0",
+    "@moltin/sdk": "^4.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
diff --git a/src/Address.tsx b/src/Address.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
+import * as moltin from '@moltin/sdk';
 import { useAddressData } from './app-state';
-import { Address as IAddress, deleteAddress } from './service';
+import { deleteAddress } from './service';
 import { useTranslation } from './app-state';
 import { AddressForm } from './AddressForm';
 import { DeleteAddressDialog } from './DeleteAddressDialog';
@@ -64,7 +65,7 @@ export const Address: React.FC = () => {
       <h1 className="address__title">{t("address-book")}</h1>
       {addressData && addressData.length > 0 ? (
         <div className="address__maincontainer">
-          {addressData.map((address: IAddress) => (
+          {addressData.map((address: moltin.Address) => (
             <div className="address__container" key={address.id}>
               <ul className="address__list">
                 <li className="">
diff --git a/src/Category.tsx b/src/Category.tsx
@@ -24,7 +24,7 @@ function useCategoryProducts(categoryId: string | undefined, pageNum: number) {
     // during initial loading of categories categoryId might be undefined
     if (categoryId) {
       const result = await loadCategoryProducts(categoryId, pageNum, selectedLanguage, selectedCurrency);
-      setTotalPages(result.pagination.totalPages);
+      setTotalPages(result.meta.page.total);
       return result;
     }
   }, [categoryId, pageNum, selectedLanguage, selectedCurrency]);
@@ -79,7 +79,7 @@ export const Category: React.FC = () => {
             {totalPages && (
               <Pagination
                 totalPages={totalPages}
-                currentPage={products?.pagination?.currentPage ?? pageNum}
+                currentPage={products?.meta.page.current ?? pageNum}
                 formatUrl={(page) => createCategoryUrl(categorySlug, page)}
               />
             )}
diff --git a/src/CompareCheck.tsx b/src/CompareCheck.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
+import * as moltin from '@moltin/sdk';
 import { useCompareProducts } from './app-state';
-import { Product } from './service';
 import { useTranslation } from './app-state';
 
 import './CompareCheck.scss';
 
 
 interface CompareCheckProps {
-  product: Product;
+  product: moltin.Product;
 }
 
 export const CompareCheck: React.FC<CompareCheckProps> = (props) => {
diff --git a/src/CompareOverlay.tsx b/src/CompareOverlay.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import * as moltin from '@moltin/sdk';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useCompareProducts, useTranslation } from './app-state';
 import { createCompareProductsUrl } from './routes';
 import { ProductMainImage } from './ProductMainImage';
-import { Product } from './service';
 import { ReactComponent as RemoveIcon } from './images/icons/ic_close.svg';
 
 import './CompareOverlay.scss';
@@ -22,7 +22,7 @@ export const CompareOverlay: React.FC = (props) => {
     history.push(compareUrl);
   };
 
-  const handleRemoveProduct = (product: Product) => {
+  const handleRemoveProduct = (product: moltin.Product) => {
     removeFromCompare(product.id);
   };
 
diff --git a/src/CompareProducts.tsx b/src/CompareProducts.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
+import * as moltin from '@moltin/sdk';
 import { useCompareProducts, useTranslation } from './app-state';
 import { ProductMainImage } from './ProductMainImage';
 import { Availability } from './Availability';
-import { Product } from './service';
 import { isProductAvailable } from './helper';
 import { config } from './config';
 import { ReactComponent as RemoveIcon } from './images/icons/ic_close.svg';
@@ -14,7 +14,7 @@ export const CompareProducts: React.FC = () => {
   const { compareProducts, removeFromCompare } =  useCompareProducts();
   const { t } = useTranslation();
 
-  const handleRemoveItem = (product: Product) => {
+  const handleRemoveItem = (product: moltin.Product) => {
     removeFromCompare(product.id);
   };
 
diff --git a/src/NavMenu.tsx b/src/NavMenu.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { createCategoryUrl } from './routes';
-import { Category } from './service';
+import * as moltin from '@moltin/sdk';
 import { useCategories } from './app-state';
 
 import './NavMenu.scss';
@@ -20,11 +20,11 @@ export const NavMenu: React.FC<NavMenuProps> = (props) => {
     handleCloseNavigation();
   };
 
-  const handleShow = (category: Category) => {
+  const handleShow = (category: moltin.Category) => {
     handleCategoryClick(category.id, category.name);
   };
 
-  function renderCategories(categories: Category[], level: number = 0, isVisible: boolean = false): React.ReactElement {
+  function renderCategories(categories: moltin.Category[], level: number = 0, isVisible: boolean = false): React.ReactElement {
     return (
       <ul className={`navmenu__sub --level-${level} ${isVisible ? '--show' : ''}`}>
         {categories?.map(category => (
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
@@ -1,9 +1,8 @@
 import React, { useState }  from 'react';
 import { Link } from 'react-router-dom';
 import useOnclickOutside from 'react-cool-onclickoutside';
+import * as moltin from '@moltin/sdk';
 import { useTranslation } from './app-state';
-
-import { Category } from './service';
 import { useCategories } from './app-state';
 
 import './Navigation.scss';
@@ -56,7 +55,7 @@ export const Navigation: React.FC = () => {
     window.history.back();
   };
 
-  function renderTopCategories(categories: Category[]): React.ReactElement {
+  function renderTopCategories(categories: moltin.Category[]): React.ReactElement {
     const topCategories = [
       { name: 'home', displayName: t('home'), url: '/' },
       { name: 'products', displayName: t('products'), children: categories },
diff --git a/src/ProductMainImage.tsx b/src/ProductMainImage.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Product, loadImageHref } from './service';
+import * as moltin from '@moltin/sdk';
+import { loadImageHref } from './service';
 import { useResolve } from './hooks';
 import { ImageContainer } from './ImageContainer';
 
 interface ProductMainImageProps {
-  product: Product;
+  product: moltin.Product;
   size?: number;
 }
 
diff --git a/src/ProductThumbnail.tsx b/src/ProductThumbnail.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Product } from './service';
+import * as moltin from '@moltin/sdk';
 import { createProductUrl } from './routes';
 import { Link } from 'react-router-dom';
 import { CompareCheck } from './CompareCheck';
@@ -12,7 +12,7 @@ import './ProductThumbnail.scss';
 
 
 interface ProductThumbnailProps {
-  product: Product;
+  product: moltin.Product;
 }
 
 export const ProductThumbnail: React.FC<ProductThumbnailProps> = (props) => {
diff --git a/src/PurchaseHistory.tsx b/src/PurchaseHistory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import * as moltin from '@moltin/sdk';
 import { Link } from 'react-router-dom';
 import { useOrdersData, useTranslation } from './app-state';
-import { Purchase as IPurchase } from './service';
 
 import './PurchaseHistory.scss';
 
@@ -25,7 +25,7 @@ export const PurchaseHistory: React.FC = () => {
             </tr>
             </thead>
             <tbody>
-            {ordersData.map((order: IPurchase)=> (
+            {ordersData.map((order: moltin.Order)=> (
               <tr key={order.id}>
                 <td className="purchasehistory__td">
                   <Link
diff --git a/src/app-state.ts b/src/app-state.ts
@@ -1,15 +1,7 @@
 import { useState, useEffect } from 'react';
 import constate from 'constate';
-import {
-  Category,
-  getAddresses,
-  getCustomer,
-  loadCategoryTree,
-  getAllOrders,
-  Product,
-  Address,
-  Purchase
-} from './service';
+import * as moltin from '@moltin/sdk';
+import { getCustomer, getAddresses, getAllOrders, loadCategoryTree } from './service';
 import * as service from './service';
 import { config } from './config';
 
@@ -123,10 +115,10 @@ function useCustomerDataState() {
 
   useEffect(() => {
     if (customerToken) {
-      getCustomer(customerId, customerToken).then(res => {
-        if (res.data.email) {
-          setCustomerEmail(res.data.email);
-          setCustomerName(res.data.name);
+      getCustomer(customerId, customerToken).then(customer => {
+        if (customer.email) {
+          setCustomerEmail(customer.email);
+          setCustomerName(customer.name);
         }
         setIsLoggedIn(true);
       });
@@ -175,7 +167,7 @@ function useAddressDataState() {
   const token = localStorage.getItem('mtoken') || '';
   const id = localStorage.getItem('mcustomer') || '';
 
-  const [addressData, setAddressData] = useState<service.Address[]>([]);
+  const [addressData, setAddressData] = useState<moltin.Address[]>([]);
 
   useEffect(() => {
     if (token) {
@@ -209,7 +201,7 @@ function usePurchaseHistoryState() {
   const token = localStorage.getItem('mtoken') || '';
   const id = localStorage.getItem('mcustomer') || '';
 
-  const [ordersData, setOrdersData] = useState<service.Purchase[]>([]);
+  const [ordersData, setOrdersData] = useState<moltin.Order[]>([]);
 
   useEffect(() => {
     if (token) {
@@ -236,7 +228,7 @@ function usePurchaseHistoryState() {
 const defaultCurrency = 'USD';
 
 function useCurrencyState() {
-  const [allCurrencies, setAllCurrencies] = useState<service.Currency[]>([]);
+  const [allCurrencies, setAllCurrencies] = useState<moltin.Currency[]>([]);
   // Set previously saved or defautlt currency before fetching the list of supported ones
   const [selectedCurrency, setSelectedCurrency] = useState(localStorage.getItem('selectedCurrency') ?? defaultCurrency);
 
@@ -275,10 +267,10 @@ function useCurrencyState() {
   }
 }
 
-function getCategoryPaths(categories: Category[]): { [categoryId: string]: Category[] } {
+function getCategoryPaths(categories: moltin.Category[]): { [categoryId: string]: moltin.Category[] } {
   const lastCat = categories[categories.length - 1];
 
-  let map: { [categoryId: string]: Category[] } = {
+  let map: { [categoryId: string]: moltin.Category[] } = {
     [lastCat.slug]: [...categories]
   };
 
@@ -291,13 +283,13 @@ function getCategoryPaths(categories: Category[]): { [categoryId: string]: Categ
   return map;
 }
 
-function mergeMaps(tree: Category[]): { [categoryId: string]: Category[] } {
+function mergeMaps(tree: moltin.Category[]): { [categoryId: string]: moltin.Category[] } {
   return tree.reduce((acc, c) => ({ ...acc, ...getCategoryPaths([c]) }), {});
 }
 
 function useCategoriesState(selectedLanguage: string) {
-  const [categoryPaths, setCategoryPaths] = useState<{ [categoryId: string]: Category[] }>();
-  const [categoriesTree, setCategoriesTree] = useState<Category[]>();
+  const [categoryPaths, setCategoryPaths] = useState<{ [categoryId: string]: moltin.Category[] }>();
+  const [categoriesTree, setCategoriesTree] = useState<moltin.Category[]>();
 
   useEffect(() => {
     setCategoryPaths(undefined);
@@ -320,13 +312,13 @@ function useCategoriesState(selectedLanguage: string) {
 }
 
 function useCompareProductsState() {
-  const [compareProducts, setCompareProducts] = useState<Product[]>([]);
+  const [compareProducts, setCompareProducts] = useState<moltin.Product[]>([]);
   const [showCompareMenu, setShowCompareMenu] = useState(false);
 
   const isComparing = (productId: string) => compareProducts.filter(p => p.id === productId).length > 0;
   const isCompareEnabled = (productId: string) => isComparing(productId) || compareProducts.length < config.maxCompareProducts;
 
-  const addToCompare = (product: Product) => {
+  const addToCompare = (product: moltin.Product) => {
     if (!compareProducts.find(p => p.id === product.id)) {
       setCompareProducts([...compareProducts, product]);
       if (!showCompareMenu) {
diff --git a/src/extensions.d.ts b/src/extensions.d.ts
@@ -0,0 +1,25 @@
+import * as moltin from '@moltin/sdk';
+
+declare module '@moltin/sdk' {
+
+  interface Weight {
+    g: number;
+    kg: number;
+    lb: number;
+    oz: number;
+  }
+
+  interface ProductBase {
+    background_color: string;
+    background_colour: string | null;
+    bulb: string;
+    bulb_qty: string;
+    finish: string;
+    material: string;
+    max_watt: string;
+    new: string | null;
+    on_sale: string | null;
+    weight: Weight;
+  }
+
+}
diff --git a/src/helper.ts b/src/helper.ts
@@ -1,6 +1,6 @@
-import { Product } from "./service";
+import * as moltin from '@moltin/sdk';
 
-export function isProductAvailable(product: Product): boolean {
+export function isProductAvailable(product: moltin.Product): boolean {
   // we assume that product is available if we are not managing the stock
   return !product.manage_stock || product.meta?.stock?.availability === 'in-stock';
 }
diff --git a/src/hooks.ts b/src/hooks.ts
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Product, loadImageHref } from './service';
+import * as moltin from '@moltin/sdk';
+import { loadImageHref } from './service';
 
 type FetchHookResult<R> = [
   R | undefined,
@@ -36,7 +37,7 @@ export function useResolve<R>(promiseFn: () => Promise<R> | undefined, deps?: Re
   return result;
 }
 
-export function useProductImages(product: Product | undefined) {
+export function useProductImages(product: moltin.Product | undefined) {
   const [productImageHrefs, setProductImageHrefs] = useState<string[]>([]);
 
   useEffect(() => {
diff --git a/src/service.ts b/src/service.ts
diff --git a/yarn.lock b/yarn.lock
