Migrate to typescript sdk

package.json

@@ -8,6 +8,7 @@
     "react-scripts": "0.9.0"
   },
   "dependencies": {
+    "kentico-cloud-delivery-typescript-sdk": "^1.6.0",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-router-scroll": "^0.4.1"
@@ -21,4 +22,4 @@
   "eslintConfig": {
     "extends": "react-app"
   }
-}
+}

src/Client.js

@@ -1,68 +1,40 @@
-const projectId = "975bf280-fd91-488c-994c-2f04416e5ee3";
-const previewApiKey = "";
-
-function isPreview() {
-  return previewApiKey !== "";
-}
-
-function getBaseUrl() {
-  if (isPreview()) {
-    return "https://preview-deliver.kenticocloud.com/";
-  }
-
-  return "https://deliver.kenticocloud.com/";
-}
-
-function getHeaders() {
-  const headers = {};
-  if (isPreview()) {
-    headers["Authorization"] = "Bearer " + previewApiKey;
-  }
-
-  return new Headers(headers);
-}
-
-function getJsonContent(relativeUrl, options) {
-  let url = getBaseUrl() + projectId + "/" + relativeUrl;
-  const headers = getHeaders();
-
-  if (options) {
-    let parameters = Object.getOwnPropertyNames(options).map((name) => encodeURIComponent(name) + "=" + encodeURIComponent(options[name]));
-    if (parameters.length > 0) {
-      url = url + "?" + parameters.join("&");
-    }
-  }
-
-  const context = {
-    headers: headers,
-  };
-
-  return fetch(url, context).then(checkStatus).then((response) => response.json());
-}
-
-function checkStatus(response) {
-  if (response.status >= 200 && response.status < 300) {
-    return response;
-  }
-
-  const error = "HTTP error " + response.status + ": " + response.statusText;
-  console.log(error); // eslint-disable-line no-console
-  throw error;
-}
-
-class Client {
-
-  getItem(codename, options) {
-    return getJsonContent("items/" + encodeURIComponent(codename), options);
-  }
-
-  getItems(options) {
-    return getJsonContent("items", options);
-  }
-
-  getType(codename, options) {
-    return getJsonContent("types/" + encodeURIComponent(codename), options);
-  }
-}
-
-export default new Client();
+// kentico cloud
+import { DeliveryClient, DeliveryClientConfig, TypeResolver } from 'kentico-cloud-delivery-typescript-sdk';
+
+const projectId = '975bf280-fd91-488c-994c-2f04416e5ee3';
+
+// models
+import { AboutUs } from './Models/AboutUs'
+import { Accessory } from './Models/Accessory'
+import { Article } from './Models/Article'
+import { Brewer } from './Models/Brewer'
+import { Cafe } from './Models/Cafe'
+import { Coffee } from './Models/Coffee'
+import { FactAboutUs } from './Models/FactAboutUs'
+import { Grinder } from './Models/Grinder'
+import { HeroUnit } from './Models/HeroUnit'
+import { Home } from './Models/Home'
+import { HostedVideo } from './Models/HostedVideo'
+import { Office } from './Models/Office'
+import { Tweet } from './Models/Tweet'
+
+// configure type resolvers
+let typeResolvers = [
+  new TypeResolver('about_us', () => new AboutUs()),
+  new TypeResolver('accessory', () => new Accessory()),
+  new TypeResolver('article', () => new Article()),
+  new TypeResolver('brewer', () => new Brewer()),
+  new TypeResolver('cafe', () => new Cafe()),
+  new TypeResolver('coffee', () => new Coffee()),
+  new TypeResolver('fact_about_us', () => new FactAboutUs()),
+  new TypeResolver('grinder', () => new Grinder()),
+  new TypeResolver('hero_unit', () => new HeroUnit()),
+  new TypeResolver('home', () => new Home()),
+  new TypeResolver('hosted_video', () => new HostedVideo()),
+  new TypeResolver('office', () => new Office()),
+  new TypeResolver('tweet', () => new Tweet())
+];
+
+export default new DeliveryClient(
+  new DeliveryClientConfig(projectId, typeResolvers)
+)

src/Components/BrewerFilter.js

@@ -7,21 +7,11 @@ let priceRanges = [
   { min: 250, max: 5000 },
 ];
 
-let productStatuses = [
-  "On sale",
-  "Bestseller",
-];
-
 let getState = () => {
   return {
     filter: BrewerStore.getFilter(),
-    manufacturers: BrewerStore.getBrewers().map((x) => x.elements.manufacturer.value).reduce((result, manufacturer) => {
-      if (manufacturer && result.indexOf(manufacturer) < 0) {
-        result.push(manufacturer);
-      }
-
-      return result;
-    }, []).sort()
+    manufacturers: BrewerStore.getManufacturers(),
+    productStatuses: BrewerStore.getProductStatuses()
   };
 };
 
@@ -36,6 +26,8 @@ class BrewerFilter extends Component {
   componentDidMount() {
     BrewerStore.addChangeListener(this.onChange);
     BrewerStore.provideBrewers();
+    BrewerStore.provideManufacturers();
+    BrewerStore.provideProductStatuses();
   }
 
   componentWillUnmount() {
@@ -49,24 +41,27 @@ class BrewerFilter extends Component {
   render() {
     let filter = this.state.filter;
     let manufacturers = this.state.manufacturers;
+    let productStatuses = this.state.productStatuses;
 
     return (
       <aside className="col-md-4 col-lg-3 product-filter">
         <h4>Manufacturer</h4>
-        <ManufacturerFilter manufacturers={manufacturers} filter={filter} />
+        <ManufacturerFilter manufacturers={manufacturers} filter={filter}/>
         <h4>Price</h4>
-        <PriceRangeFilter priceRanges={priceRanges} filter={filter} />
+        <PriceRangeFilter priceRanges={priceRanges} filter={filter}/>
         <h4>Status</h4>
-        <ProductStatusFilter productStatuses={productStatuses} filter={filter} />
+        <ProductStatusFilter productStatuses={productStatuses} filter={filter}/>
       </aside>
     );
   }
 }
 
 const ManufacturerFilter = (props) => {
-  let filterItems = props.manufacturers.map((manufacturer, index) => {
+  let filterItems = props.manufacturers.map((manufacturer) => {
     return (
-      <ManufacturerFilterItem manufacturer={manufacturer} id={"Manufacturer-" + index} filter={props.filter} key={index} />
+      <ManufacturerFilterItem manufacturer={manufacturer} id={"Manufacturer-" + manufacturer.codename}
+                              filter={props.filter}
+                              key={manufacturer.codename}/>
     );
   });
 
@@ -78,24 +73,25 @@ const ManufacturerFilter = (props) => {
 }
 
 const ManufacturerFilterItem = (props) => {
-  let checked = props.filter.manufacturers.indexOf(props.manufacturer) >= 0;
+  let codename = props.manufacturer.codename;
+  let checked = props.filter.manufacturers.includes(codename);
   let onChange = () => {
-    props.filter.toggleManufacturer(props.manufacturer);
+    props.filter.toggleManufacturer(codename);
     BrewerStore.setFilter(props.filter);
-  }
+  };
 
   return (
     <span className="checkbox js-postback">
-      <input id={props.id} type="checkbox" checked={checked} onChange={onChange} />
-      <label htmlFor={props.id}>{props.manufacturer}</label>
+      <input id={props.id} type="checkbox" checked={checked} onChange={onChange}/>
+      <label htmlFor={props.id}>{props.manufacturer.name}</label>
     </span>
   );
 }
 
 const PriceRangeFilter = (props) => {
   let filterItems = props.priceRanges.map((priceRange, index) => {
     return (
-      <PriceRangeFilterItem priceRange={priceRange} id={"PriceRange-" + index} filter={props.filter} key={index} />
+      <PriceRangeFilterItem priceRange={priceRange} id={"PriceRange-" + index} filter={props.filter} key={index}/>
     );
   });
 
@@ -112,7 +108,7 @@ const PriceRangeFilterItem = (props) => {
     return price.toLocaleString("en-US", {
       style: "currency",
       currency: "USD",
-      maximumFractionDigits: 0
+      maximumFractionDigits: 2
     });
   };
   let onChange = () => {
@@ -122,16 +118,18 @@ const PriceRangeFilterItem = (props) => {
 
   return (
     <span className="checkbox js-postback">
-      <input id={props.id} type="checkbox" checked={checked} onChange={onChange} />
+      <input id={props.id} type="checkbox" checked={checked} onChange={onChange}/>
       <label htmlFor={props.id}>{formatPrice(props.priceRange.min) + " – " + formatPrice(props.priceRange.max)}</label>
     </span>
   );
 }
 
 const ProductStatusFilter = (props) => {
-  let filterItems = props.productStatuses.map((productStatus, index) => {
+  let filterItems = props.productStatuses.map((productStatus) => {
     return (
-      <ProductStatusFilterItem productStatus={productStatus} id={"ProductStatus-" + index} filter={props.filter} key={index} />
+      <ProductStatusFilterItem productStatus={productStatus} id={"ProductStatus-" + productStatus.codename}
+                               filter={props.filter}
+                               key={productStatus.codename}/>
     );
   });
 
@@ -143,18 +141,19 @@ const ProductStatusFilter = (props) => {
 }
 
 const ProductStatusFilterItem = (props) => {
-  let checked = props.filter.productStatuses.indexOf(props.productStatus) >= 0;
+  let codename = props.productStatus.codename;
+  let checked = props.filter.productStatuses.includes(codename);
   let onChange = () => {
-    props.filter.toggleProductStatus(props.productStatus);
+    props.filter.toggleProductStatus(codename);
     BrewerStore.setFilter(props.filter);
-  }
+  };
 
   return (
     <span className="checkbox js-postback">
-      <input id={props.id} type="checkbox" checked={checked} onChange={onChange} />
-      <label htmlFor={props.id}>{props.productStatus}</label>
+      <input id={props.id} type="checkbox" checked={checked} onChange={onChange}/>
+      <label htmlFor={props.id}>{props.productStatus.name}</label>
     </span>
   );
 }
 
-export default BrewerFilter;
+export default BrewerFilter;

src/Components/Brewers.js

@@ -58,12 +58,11 @@ class Brewers extends Component {
     };
 
     let brewers = this.state.brewers.filter(filter).map((brewer, index) => {
-      let e = brewer.elements;
-      let price = formatPrice(e.price.value);
-      let name = e.product_name.value;
-      let imageLink = e.image.value[0].url;
-      let status = renderProductStatus(e.product_status);
-      let link = "store/brewers/" + brewer.elements.url_pattern.value;
+      let price = formatPrice(brewer.price.value);
+      let name = brewer.productName.value;
+      let imageLink = brewer.image.value[0].url;
+      let status = renderProductStatus(brewer.productStatus);
+      let link = "store/brewers/" + brewer.urlPattern.value;
 
       return (
         <div className="col-md-6 col-lg-4" key={index}>

src/Components/CoffeeFilter.js

@@ -4,6 +4,7 @@ import CoffeeStore from "../Stores/Coffee";
 let getState = () => {
   return {
     processings: CoffeeStore.getProcessings(),
+    productStatuses: CoffeeStore.getProductStatuses(),
     filter: CoffeeStore.getFilter()
   };
 };
@@ -19,6 +20,7 @@ class CoffeeFilter extends Component {
   componentDidMount() {
     CoffeeStore.addChangeListener(this.onChange);
     CoffeeStore.provideProcessings();
+    CoffeeStore.provideProductStatuses();
   }
 
   componentWillUnmount() {
@@ -31,21 +33,24 @@ class CoffeeFilter extends Component {
 
   render() {
     let processings = this.state.processings;
+    let productStatuses = this.state.productStatuses;
     let filter = this.state.filter;
 
     return (
       <aside className="col-md-4 col-lg-3 product-filter">
         <h4>Coffee processing</h4>
-        <ProcessingFilter processings={processings} filter={filter} />
+        <ProcessingFilter processings={processings} filter={filter}/>
+        <h4>Status</h4>
+        <ProductStatusFilter productStatuses={productStatuses} filter={filter}/>
       </aside>
     );
   }
 }
 
 const ProcessingFilter = (props) => {
-  let filterItems = props.processings.map((processing, index) => {
+  let filterItems = props.processings.map((processing) => {
     return (
-      <ProcessingFilterItem processing={processing} filter={props.filter} key={index} />
+      <ProcessingFilterItem processing={processing} filter={props.filter} key={processing.codename}/>
     );
   });
 
@@ -58,18 +63,48 @@ const ProcessingFilter = (props) => {
 
 const ProcessingFilterItem = (props) => {
   let codename = props.processing.codename;
-  let checked = props.filter.processings.indexOf(codename) >= 0;
+  let checked = props.filter.processings.includes(codename);
   let onChange = () => {
     props.filter.toggleProcessing(codename);
     CoffeeStore.setFilter(props.filter);
   }
 
   return (
     <span className="checkbox js-postback">
-      <input id={codename} type="checkbox" checked={checked} onChange={onChange} />
+      <input id={codename} type="checkbox" checked={checked} onChange={onChange}/>
       <label htmlFor={codename}>{props.processing.name}</label>
     </span>
   );
 }
 
-export default CoffeeFilter;
+const ProductStatusFilter = (props) => {
+  let filterItems = props.productStatuses.map((productStatus) => {
+    return (
+      <ProductStatusFilterItem productStatus={productStatus} filter={props.filter} key={productStatus.codename}/>
+    );
+  });
+
+  return (
+    <div>
+      {filterItems}
+    </div>
+  );
+}
+
+const ProductStatusFilterItem = (props) => {
+  let codename = props.productStatus.codename;
+  let checked = props.filter.productStatuses.includes(codename);
+  let onChange = () => {
+    props.filter.toggleProductStatus(codename);
+    CoffeeStore.setFilter(props.filter);
+  }
+
+  return (
+    <span className="checkbox js-postback">
+      <input id={codename} type="checkbox" checked={checked} onChange={onChange}/>
+      <label htmlFor={codename}>{props.productStatus.name}</label>
+    </span>
+  );
+}
+
+export default CoffeeFilter;