Revert "more store"

This reverts commit f58c0bc.

Author: arcadeJHS

README.md

@@ -1234,109 +1234,10 @@ import Search from '@/ngVueBridgeCode/components/Search/index.js';
 ngVueComponentsModule.component('search', Search);
 ```
 
-And delete all files and code related to the original component.     
-Refer to `tag-07-es6-components`.
+And delete all files and code related to the original component. Our Angular app is reducing to its bare bones.   
+See `tag-07-es6-components`.
 
 
-Bonus #2: free Vue components from Angular services
-----
-Now we have got a store we can move on and strip `searchService` of unnecessary parts.   
-For example, the `store.currentDetail` property and the `selectItem(id)` method are exclusively used by the `detail` Vue component. Let's move them from the Angular service to the Vuex store.   
-
-Comment (or delete) the following lines:
-
-**ngVueBridgeCode/services/searchService.js**
-```javascript
-export class SearchService {
-    constructor($timeout, VuexStore) {
-        /* ... */
-        this.store = {
-            searching: false,
-            searchParam: '',
-            searchResults: []
-            //, currentDetail: null
-        };
-        /* ... */
-    }
-
-    /*
-    selectItem(id) {
-        this.store.currentDetail = this.store.searchResults.find(function (r) {
-            return r.id === id;
-        });
-    }
-    */
-
-    query (searchParam) {
-        /* ... */
-        // this.store.currentDetail = null;
-        /* ... */
-    }
-};
-```
-
-And modify the store:
-
-**vueCode/store.js**
-```javascript
-export default new Vuex.Store({
-    state: {
-        /* ... */
-        selectedDetailId: null
-    },
-    actions: {
-        getResults: (store, searchParam) => {
-            return new Promise((resolve, reject) => {
-                /* ... */
-
-                setTimeout(() => {
-                    store.commit('setSelectedDetail', null);
-                    store.commit('setResults', results);
-                    resolve(results);
-                }, 2000);
-            });
-        },
-        /* ... */
-        selectItem: (store, id) => { 
-            store.commit('setSelectedDetail', id);
-        }
-    },
-    mutations: {
-        /* ... */
-        setSelectedDetail: (state, id) => { 
-            state.selectedDetailId = id;
-        }
-    },
-    getters: {
-        /* ... */
-        currentDetail: state => state.results.find(r => r.id === state.selectedDetailId)
-    }
-});
-```
-
-Lastly, rewrite the component to use the store in place of the service:
-
-**vueCode/components/Detail/index.vue**
-```javascript
-export default {
-    /* ... */
-    computed: {
-        currentDetail () {
-            return this.$store.getters['currentDetail'];
-        }
-    },
-    methods: {
-        getDetail (detailId) {
-            this.$store.dispatch('selectItem', Number(detailId));
-        },
-        /* ... */
-    },
-    /* ... */
-};
-```
-
-Sure, you can probably do the same with the `store.searchResults` property. Our Angular app is reducing to its bare bones.   
-Refer to `tag-08-more-store`.
 
 
 

code/vueApp/dist/js/appVueLib.js

@@ -5,7 +5,8 @@ export class SearchService {
 		this.store = {
 			searching: false,
 			searchParam: '',
-			searchResults: []
+			searchResults: [],
+			currentDetail: null
 		};
 		this.VuexStore = VuexStore;
 	}
@@ -19,10 +20,17 @@ export class SearchService {
 		this.store.searching = false;
 	}
 
+	selectItem (id) {
+		this.store.currentDetail = this.store.searchResults.find(function (r) {
+			return r.id === id;
+		});
+	}
+
 	query (searchParam) {
 		this.store.searching = true;
 		this.store.searchParam = searchParam;
 		this.store.searchResults = [];
+		this.store.currentDetail = null;
 		return this.executeQuery(searchParam).then(this.resolveQuery.bind(this));
 	}
 };

code/vueApp/dist/js/appVueLib_NgVueBridge.js

@@ -14,16 +14,19 @@
 </template>
 
 <script>
+import { searchService } from '@/ngVueBridgeCode/ngVueComponentsModule';
+
 export default {
 	name: "Detail",
-	computed: {
-    	currentDetail () {
-      		return this.$store.getters['currentDetail'];
-    	}
-  	},
+	data() {
+		return {
+			currentDetail: null
+		}
+	},
 	methods: {
 		getDetail (detailId) {
-			this.$store.dispatch('selectItem', Number(detailId));
+			searchService.selectItem(Number(detailId));
+			this.currentDetail = searchService.store.currentDetail;
 		},
 		addResult () {
 			this.$store.dispatch('addResult', { 
@@ -35,7 +38,9 @@ export default {
 		}
 	},
 	beforeRouteEnter (to, from, next) {
-		next(component => component.getDetail(to.params.itemId));
+		next(component => {
+			component.getDetail(to.params.itemId);
+		});
 	},
 	beforeRouteUpdate (to, from, next) {
 		this.getDetail(to.params.itemId);

code/vueApp/src/ngVueBridgeCode/services/searchService.js

@@ -6,8 +6,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
 	state: {
-		results: [],
-		selectedDetailId: null
+		results: []
 	},
 
 	actions: {
@@ -20,17 +19,13 @@ export default new Vuex.Store({
 				];
 
 				setTimeout(() => {
-					store.commit('setSelectedDetail', null);
 					store.commit('setResults', results);
 					resolve(results);
 				}, 2000);
 			});
 		},
 		addResult: (store, result) => { 
 			store.commit('addResult', result);
-		},
-		selectItem: (store, id) => { 
-			store.commit('setSelectedDetail', id);
 		}
 	},
 
@@ -41,14 +36,10 @@ export default new Vuex.Store({
 		addResult: (state, result) => {
 			state.results = state.results.concat(result);
 			VueAngularEventBus.$emit('result-added');
-		},
-		setSelectedDetail: (state, id) => { 
-			state.selectedDetailId = id;
 		}
 	},
 
 	getters: {
-		resultsCount: state => state.results.length,
-		currentDetail: state => state.results.find(r => r.id === state.selectedDetailId)
+		resultsCount: state => state.results.length
 	}
 });