Merge pull request #19 from chec/feature/api-call-optimisations

Update useAllCountries and useIsFree to make less API calls

Author: robbieaverill

src/checkout/CheckoutProvider.tsx

@@ -7,12 +7,16 @@ export interface CheckoutContextInterface {
   checkout: any,
   updateLive: Function,
   createCheckout: Function,
+  countries: object[]|undefined,
+  setCountries: Function,
 }
 
 export const CheckoutContext = createContext<CheckoutContextInterface>({
   checkout: undefined,
   updateLive: () => {},
   createCheckout: () => {},
+  countries: undefined,
+  setCountries: () => {},
 });
 
 export enum CheckoutIdType {
@@ -34,6 +38,7 @@ export default function CheckoutProvider(
 ) {
   const commerce = useCommerce();
   const [checkout, setCheckout] = useState<object|undefined>();
+  const [countries, setCountries] = useState<object[]>();
   const createCheckout = async () => setCheckout(await commerce.checkout.generateTokenFrom(type, id));
 
   useEffect(() => {
@@ -57,7 +62,13 @@ export default function CheckoutProvider(
   }
 
   return (
-    <CheckoutContext.Provider value={{ checkout, updateLive, createCheckout }}>
+    <CheckoutContext.Provider value={{
+      checkout,
+      updateLive,
+      createCheckout,
+      countries,
+      setCountries,
+    }}>
       { children }
     </CheckoutContext.Provider>
   );

src/checkout/useAllCountries.ts

@@ -1,16 +1,22 @@
-import { useEffect, useState } from 'react';
+import { useContext, useEffect } from 'react';
 import useCommerce from '../useCommerce';
+import { CheckoutContext } from "./CheckoutProvider";
 
 export default function useAllCountries() {
-  const [countries, setCountries] = useState<object[]>();
   const commerce = useCommerce();
+  const { countries, setCountries } = useContext(CheckoutContext);
 
   useEffect(() => {
-    if (!commerce) {
+    if (!commerce || countries !== undefined) {
       return;
     }
 
-    commerce.services.localeListCountries().then((response: any) => setCountries(response.countries));
+    // Set an initial value for countries to prevent more than one instance of this hook queuing the same API call
+    setCountries([]);
+
+    commerce.services.localeListCountries().then((response: any) => {
+      setCountries(response.countries)
+    });
   }, [commerce]);
 
   return countries;

src/checkout/useIsFree.ts

@@ -8,12 +8,19 @@ export default function useIsFree(): boolean|null {
   const [isFree, setIsFree] = useState<boolean|null>(null);
 
   useEffect(() => {
-    if (!commerce || !checkout) {
+    if (!commerce || !checkout?.live?.total) {
       setIsFree(null);
       return;
     }
 
-    commerce.checkout.isFree(checkout.id).then((response: any) => setIsFree(response.is_free));
+    const total = checkout.live.total.raw;
+
+    if (typeof total !== 'number') {
+      setIsFree(null);
+      return;
+    }
+
+    setIsFree(total < 0.01);
   }, [commerce, checkout]);
 
   return isFree;