refactors local cart data to include user settings

DataUSA · Feb 5, 2019 · 37b7a4e · 37b7a4e
1 parent d39f0f3
commit 37b7a4e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 29 deletions.
diff --git a/app/components/Viz/Options.jsx b/app/components/Viz/Options.jsx
@@ -15,6 +15,7 @@ import {Checkbox, Dialog, Icon, NonIdealState, Spinner, Tab2, Tabs2} from "@blue
 import {Cell, Column, SelectionModes, Table} from "@blueprintjs/table";
 import {Tooltip2} from "@blueprintjs/labs";
 import {Object} from "es6-shim";
+import {defaultCart} from "pages/Cart";
 
 const FORMATTERS = {
   Growth: d => `${formatAbbreviate(d * 100 || 0)}%`,
@@ -91,8 +92,8 @@ class Options extends Component {
     if (cartKey && slug) {
       localforage.getItem(cartKey)
         .then(cart => {
-          const inCart = cart && cart.find(c => c.slug === slug);
-          this.setState({cartSize: cart ? cart.length : 0, inCart});
+          const inCart = cart && cart.data.find(c => c.slug === slug);
+          this.setState({cartSize: cart ? cart.data.length : 0, inCart});
         })
         .catch(err => console.error(err));
     }
@@ -111,7 +112,7 @@ class Options extends Component {
       let cart = await localforage.getItem(cartKey)
         .catch(err => console.error(err));
 
-      if (!cart) cart = [];
+      if (!cart) cart = defaultCart;
 
       console.log(slug);
       console.log(data);
@@ -197,16 +198,16 @@ class Options extends Component {
       const cartTitle = `${stripHTML(title)}${drilldowns ? ` by ${list(drilldowns)}` : ""}`;
       console.log(cartTitle);
 
-      cart.push({urls, format, slug, title: cartTitle});
+      cart.data.push({urls, format, slug, title: cartTitle});
       localforage.setItem(cartKey, cart);
       this.setState({cartSize: this.state.cartSize + 1, inCart: true});
 
     }
     else {
       localforage.getItem(cartKey)
         .then(cart => {
-          const build = cart.find(c => c.slug === slug);
-          cart.splice(cart.indexOf(build), 1);
+          const build = cart.data.find(c => c.slug === slug);
+          cart.data.splice(cart.data.indexOf(build), 1);
           return localforage.setItem(cartKey, cart);
         })
         .then(() => this.setState({cartSize: this.state.cartSize - 1, inCart: false}))

diff --git a/app/pages/Cart.jsx b/app/pages/Cart.jsx
@@ -65,12 +65,20 @@ const FORMATTERS = {
   }
 };
 
+export const defaultCart = {
+  settings: {
+    pivotYear: true,
+    showMOE: false
+  },
+  data: []
+};
+
 class Cart extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      cart: [],
+      cart: defaultCart,
       columns: [],
       intro: true,
       results: false,
@@ -91,8 +99,8 @@ class Cart extends Component {
 
     localforage.getItem(cartKey)
       .then(cart => {
-        if (!cart) cart = [];
-        const urls = merge(cart.map(d => d.urls)).map(decodeURIComponent);
+        if (!cart) cart = defaultCart;
+        const urls = merge(cart.data.map(d => d.urls)).map(decodeURIComponent);
         stickies = merge(urls.map(url => url
           .match(/drilldowns\=[^&]+/g)[0]
           .split("=")[1].split(",")
@@ -152,16 +160,17 @@ class Cart extends Component {
 
   onClear() {
     const {cartKey} = this.props;
-    localforage.setItem(cartKey, [])
+    const {cart} = this.state;
+    localforage.setItem(cartKey, {...cart, data: []})
       .then(() => this.reload.bind(this)())
       .catch(err => console.error(err));
   }
 
   onRemove(d) {
     const {cart} = this.state;
     const {cartKey} = this.props;
-    const build = cart.find(c => c.slug === d.slug);
-    cart.splice(cart.indexOf(build), 1);
+    const build = cart.data.find(c => c.slug === d.slug);
+    cart.data.splice(cart.data.indexOf(build), 1);
     localforage.setItem(cartKey, cart)
       .then(() => this.reload.bind(this)())
       .catch(err => console.error(err));
@@ -199,14 +208,15 @@ class Cart extends Component {
   async gotoExample(data) {
 
     const {cartKey} = this.props;
+    const {cart} = this.state;
 
-    const cart = [{
+    const d = [{
       format: "function(resp) { return resp.data; }",
       title: data.title,
       ...data.cart
     }];
 
-    await localforage.setItem(cartKey, cart);
+    await localforage.setItem(cartKey, {...cart, data: d});
     this.reload.bind(this)();
 
   }
@@ -259,9 +269,9 @@ class Cart extends Component {
         <div className="controls">
           <div className="title">Data Cart</div>
           <div className="sub">
-            { cart.length } Dataset{ cart.length > 1 ? "s" : "" }
+            { cart.data.length } Dataset{ cart.length > 1 ? "s" : "" }
           </div>
-          { cart.map(d => <div key={d.slug} className="dataset">
+          { cart.data.map(d => <div key={d.slug} className="dataset">
             <div className="title">{d.title}</div>
             <Tooltip2 content="Remove from Cart">
               <img src="/images/viz/remove.svg" className="remove" onClick={this.onRemove.bind(this, d)} />
@@ -274,14 +284,14 @@ class Cart extends Component {
             Remove All Items from Cart
           </div>
         </div>
-        { !results ? null : <div>
+        { !results ? null : <div className="cart-table">
           <Table allowMultipleSelection={false}
             columnWidths={columnWidths}
             fillBodyWithGhostCells={true}
             isColumnResizable={false}
             isRowResizable={false}
             numRows={ results.length }
-            numFrozenColumns={stickies.length}
+            // numFrozenColumns={stickies.length}
             rowHeights={results.map(() => 30)}
             selectionModes={SelectionModes.NONE}>
             { columns.map(c => <Column id={ c } key={ c } name={ c.indexOf("ID") === 0 ? `${c.replace("ID ", "")} ID` : c } renderCell={ renderCell } />) }

diff --git a/app/pages/Home/Column.jsx b/app/pages/Home/Column.jsx
@@ -6,6 +6,7 @@ import Tile from "components/Tile/Tile";
 
 import "./Column.css";
 import {PropTypes} from "prop-types";
+import {defaultCart} from "pages/Cart";
 
 class Column extends Component {
 
@@ -20,11 +21,11 @@ class Column extends Component {
       ...data.cart
     };
 
-    const cart = await localforage.getItem(cartKey) || [];
-    const inCart = cart.find(c => c.slug === cartObj.slug);
+    const cart = await localforage.getItem(cartKey) || defaultCart;
+    const inCart = cart.data.find(c => c.slug === cartObj.slug);
 
     if (!inCart) {
-      cart.push(cartObj);
+      cart.data.push(cartObj);
       await localforage.setItem(cartKey, cart);
     }
 

diff --git a/app/pages/Map.jsx b/app/pages/Map.jsx
@@ -9,6 +9,7 @@ import "./Map.css";
 import {badMeasures} from "d3plus.js";
 import colors from "../../static/data/colors.json";
 import {Helmet} from "react-helmet";
+import {defaultCart} from "pages/Cart";
 
 const measureConfig = {};
 badMeasures.forEach(measure => {
@@ -37,7 +38,7 @@ class Map extends Component {
 
     localforage.getItem(cartKey)
       .then(cart => {
-        if (!cart) cart = [];
+        if (!cart) cart = defaultCart;
         this.setState({cart});
       })
       .catch(err => console.error(err));
@@ -69,9 +70,9 @@ class Map extends Component {
 
     const {cart, query} = this.state;
     const {cartKey} = this.props;
-    const inCart = cart.find(c => c.slug === query.slug);
-    if (inCart) cart.splice(cart.indexOf(query), 1);
-    else cart.push(query);
+    const inCart = cart.data.find(c => c.slug === query.slug);
+    if (inCart) cart.data.splice(cart.data.indexOf(query), 1);
+    else cart.data.push(query);
     localforage.setItem(cartKey, cart);
     this.forceUpdate();
 

diff --git a/app/pages/Visualize.jsx b/app/pages/Visualize.jsx
@@ -9,6 +9,7 @@ import "./Visualize.css";
 import {badMeasures} from "d3plus.js";
 import colors from "../../static/data/colors.json";
 import {Helmet} from "react-helmet";
+import {defaultCart} from "pages/Cart";
 
 const measureConfig = {};
 badMeasures.forEach(measure => {
@@ -62,7 +63,7 @@ class Visualize extends Component {
 
     localforage.getItem(cartKey)
       .then(cart => {
-        if (!cart) cart = [];
+        if (!cart) cart = defaultCart;
         this.setState({cart});
       })
       .catch(err => console.error(err));
@@ -107,9 +108,9 @@ class Visualize extends Component {
 
     const {cart, query} = this.state;
     const {cartKey} = this.props;
-    const inCart = cart.find(c => c.slug === query.slug);
-    if (inCart) cart.splice(cart.indexOf(query), 1);
-    else cart.push(query);
+    const inCart = cart.data.find(c => c.slug === query.slug);
+    if (inCart) cart.data.splice(cart.data.indexOf(query), 1);
+    else cart.data.push(query);
     localforage.setItem(cartKey, cart);
     this.forceUpdate();