10 files changed, 131 insertions, 131 deletions
diff --git a/iridescence/src/api/dichroism.js b/iridescence/src/api/dichroism.js
new file mode 100644
index 0000000..2bbad2b
--- /dev/null
+++ b/iridescence/src/api/dichroism.js
@@ -0,0 +1,58 @@
+const _products = [
+  {
+    id: 1,
+    name: "Beach Box",
+    quantity: 0,
+    cents: 1100,
+    imgPath: "/beach_box.jpg",
+    description: "This is a beach box.",
+    featured: false,
+    categories: ["Fused Glass", ["Beachy"]]
+  },
+  {
+    id: 2,
+    name: "Wind Chime",
+    quantity: 0,
+    cents: 4500,
+    imgPath: "/wind-chime.jpg",
+    description: "Makes noise when the wind blows.",
+    featured: false,
+    categories: ["Fused Glass", ["Beachy"]]
+  },
+  {
+    id: 3,
+    name: "Beach Box",
+    quantity: 5,
+    cents: 1100,
+    imgPath: "/beach_box.jpg",
+    description: "This is a beach box.",
+    featured: false,
+    categories: ["Stained Glass", ["Christmas"]]
+  },
+  {
+    id: 4,
+    name: "Wind Chime",
+    quantity: 2,
+    cents: 4500,
+    imgPath: "/wind-chime.jpg",
+    description: "Makes noise when the wind blows.",
+    featured: false,
+    categories: ["Fused Glass", ["Kiln-y"]]
+  },
+  {
+    id: 5,
+    name: "Beach Box (New!)",
+    quantity: 5,
+    cents: 1100,
+    imgPath: "/beach_box.jpg",
+    description: "This is a beach box.",
+    featured: true,
+    categories: ["Stained Glass", ["Christmas"]]
+  }
+];
+
+export default {
+  getProducts() {
+    return _products;
+  }
+};
diff --git a/iridescence/src/components/InventoryList.vue b/iridescence/src/components/InventoryList.vue
deleted file mode 100644
index a4962cd..0000000
--- a/iridescence/src/components/InventoryList.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div id="inventoryList">
-    <div class="columns is-multiline is-variable is-7-desktop">
-      <div
-        class="column is-one-quarter"
-        v-for="item in inventory"
-        :key="item.id"
-      >
-        <InventoryCard v-bind="item"></InventoryCard>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import InventoryCard from "@/components/InventoryCard.vue";
-
-export default {
-  name: "InventoryList",
-  components: {
-    InventoryCard
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    inventory() {
-      return this.$store.getters.inventory;
-    }
-  },
-  methods: {}
-};
-</script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 65d5032..551ce5a 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -77,11 +77,8 @@ export default {
       }
     },
     categories() {
-      const inventory = this.$store.getters.inventory;
-      console.log(inventory);
-      console.log(inventory.map(item => item.categories));
-
-      //console.log(cats);
+      const products = this.$store.getters.products;
+      console.log(products.map(item => item.categories));
       return [];
     }
   },
diff --git a/iridescence/src/components/InventoryCard.vue b/iridescence/src/components/ProductCard.vue
index 6bcc548..269e416 100644
--- a/iridescence/src/components/InventoryCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="inventoryCard">
+  <div id="productCard">
     <div class="card">
       <div class="card-image">
         <figure class="image is-4by3">
@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: "InventoryCard",
+  name: "ProductCard",
   props: {
     id: Number,
     name: String,
diff --git a/iridescence/src/components/InventoryFilter.vue b/iridescence/src/components/ProductFilter.vue
index 349b0f5..6fdd461 100644
--- a/iridescence/src/components/InventoryFilter.vue
+++ b/iridescence/src/components/ProductFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="inventoryFilter">
+  <div id="productFilter">
     <aside class="menu">
       <p class="menu-label">
         Availability
@@ -47,6 +47,6 @@
 
 <script>
 export default {
-  name: "InventoryFilter"
+  name: "ProductFilter"
 };
 </script>
diff --git a/iridescence/src/components/ProductList.vue b/iridescence/src/components/ProductList.vue
new file mode 100644
index 0000000..537e802
--- /dev/null
+++ b/iridescence/src/components/ProductList.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="productsList">
+    <div class="columns is-multiline is-variable is-7-desktop">
+      <div
+        class="column is-one-quarter"
+        v-for="item in products"
+        :key="item.id"
+      >
+        <ProductCard v-bind="item"></ProductCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductCard from "@/components/ProductCard.vue";
+
+export default {
+  name: "ProductsList",
+  components: {
+    ProductCard
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    products() {
+      return this.$store.getters.products;
+    }
+  },
+  methods: {},
+  created() {
+    this.$store.dispatch("refreshProducts");
+  }
+};
+</script>
diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/ProductSearch.vue
index 6145246..d452e83 100644
--- a/iridescence/src/components/InventorySearch.vue
+++ b/iridescence/src/components/ProductSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="inventorySearch">
+  <div id="productSearch">
     <div class="field is-grouped is-grouped-multiline">
       <div class="control is-expanded">
         <input
@@ -32,7 +32,7 @@
 
 <script>
 export default {
-  name: "InventorySearch",
+  name: "ProductSearch",
   data() {
     return {
       term: ""
@@ -40,12 +40,12 @@ export default {
   },
   computed: {
     noResults() {
-      return !this.$store.getters.inventory.length;
+      return !this.$store.getters.products.length;
     }
   },
   methods: {
     updateSearch() {
-      this.$store.commit("filterTerm", this.term);
+      this.$store.commit("searchTerm", this.term);
     }
   }
 };
diff --git a/iridescence/src/models/category.js b/iridescence/src/models/category.js
deleted file mode 100644
index 04966f5..0000000
--- a/iridescence/src/models/category.js
+++ /dev/null
@@ -1,14 +0,0 @@
-
-export class Category {
-  name: string;
-  subcategory: Category;
-
-  /**
-   * @param {string} name
-   * @param {Category=} subcategory
-   */
-  constructor(name, subcategory) {
-    this.name = name;
-    this.subcategory = subcategory;
-  }
-}
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index b5b0445..e2b40b4 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -1,82 +1,38 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import Dichroism from "@/api/dichroism.js";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    inventory: [
-      {
-        id: 1,
-        name: "Beach Box",
-        quantity: 0,
-        cents: 1100,
-        imgPath: "/beach_box.jpg",
-        description: "This is a beach box.",
-        featured: false,
-        category: { name: "Stained Glass", subcategory: { name: "Gardeny" } }
-      },
-      {
-        id: 2,
-        name: "Wind Chime",
-        quantity: 0,
-        cents: 4500,
-        imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows.",
-        featured: false,
-        categories: ["Fused Glass", ["Beachy"]]
-      },
-      {
-        id: 3,
-        name: "Beach Box",
-        quantity: 5,
-        cents: 1100,
-        imgPath: "/beach_box.jpg",
-        description: "This is a beach box.",
-        featured: false,
-        categories: ["Stained Glass", ["Christmas"]]
-      },
-      {
-        id: 4,
-        name: "Wind Chime",
-        quantity: 2,
-        cents: 4500,
-        imgPath: "/wind-chime.jpg",
-        description: "Makes noise when the wind blows.",
-        featured: false,
-        categories: ["Fused Glass", ["Kiln-y"]]
-      },
-      {
-        id: 5,
-        name: "Beach Box (New!)",
-        quantity: 5,
-        cents: 1100,
-        imgPath: "/beach_box.jpg",
-        description: "This is a beach box.",
-        featured: true,
-        categories: ["Stained Glass", ["Christmas"]]
-      }
-    ],
-    term: ""
+    searchTerm: "",
+    products: []
   },
   getters: {
-    inventory(state) {
-      const term = state.term.toLowerCase();
+    products(state) {
+      const searchTerm = state.searchTerm.toLowerCase();
 
-      return state.inventory.filter(item => {
-        // TODO: move into class for items
+      return state.products.filter(item => {
         return (
-          item.name.toLowerCase().indexOf(term) != -1 ||
-          item.description.toLowerCase().indexOf(term) != -1
+          item.name.toLowerCase().indexOf(searchTerm) != -1 ||
+          item.description.toLowerCase().indexOf(searchTerm) != -1
         );
       });
     }
   },
   mutations: {
-    filterTerm(state, term) {
-      state.term = term;
+    searchTerm(state, term) {
+      state.searchTerm = term;
+    },
+    setProducts(state, products) {
+      state.products = products;
+    }
+  },
+  actions: {
+    refreshProducts({ commit }) {
+      commit("setProducts", Dichroism.getProducts());
     }
   },
-  actions: {},
   modules: {}
 });
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index b01b78d..1212d2c 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -8,7 +8,7 @@
       <div class="column is-narrow">
         <section class="section">
           <div class="box">
-            <InventoryFilter></InventoryFilter>
+            <ProductFilter></ProductFilter>
           </div>
         </section>
       </div>
@@ -16,10 +16,10 @@
       <div class="column">
         <div class="container">
           <section class="section">
-            <InventorySearch></InventorySearch>
+            <ProductSearch></ProductSearch>
           </section>
           <section class="section">
-            <InventoryList></InventoryList>
+            <ProductList></ProductList>
           </section>
         </div>
       </div>
@@ -28,16 +28,16 @@
 </template>
 
 <script>
-import InventoryList from "@/components/InventoryList.vue";
-import InventoryFilter from "@/components/InventoryFilter.vue";
-import InventorySearch from "@/components/InventorySearch.vue";
+import ProductList from "@/components/ProductList.vue";
+import ProductFilter from "@/components/ProductFilter.vue";
+import ProductSearch from "@/components/ProductSearch.vue";
 
 export default {
   name: "Home",
   components: {
-    InventoryList,
-    InventorySearch,
-    InventoryFilter
+    ProductList,
+    ProductSearch,
+    ProductFilter
   }
 };
 </script>