Filter threads by category

src/components/routes/Index.vue

@@ -53,7 +53,7 @@
 		},
 		computed: {
 			threads () {
-				return this.$store.state.index.threads;
+				return this.$store.getters.filteredThreads;
 			},
 			categories () {
 				return this.$store.state.meta.categories

src/store/modules/index.js

@@ -1,27 +1,54 @@
 const state = {
 	selectedCategory: 'ALL',
 	threads: [
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
-		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30}
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'TECHNOLOGY', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'PROGRAMMING', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'BOOKS', replies: 30},
+		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'FOOD', replies: 30}
 	]
 }
 
-const getters = {}
+const getters = {
+	filteredThreads (state, getters, rootState) {
+		var categories = {};
+		rootState.meta.categories.forEach(category => {
+			categories[category.value] = category.name;
+		})
+
+		return state.threads.filter(thread => {
+			return (thread.category === state.selectedCategory) || (state.selectedCategory === 'ALL');
+		}).map(thread => {
+			var _thread = Object.assign({}, thread);
+			_thread.category = categories[thread.category];
+
+			return _thread;
+		});
+	}
+}
 
 const actions = {}