From 888dd606ffd5459d47743f4b8f97ef14dd4f7b1c Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 26 Aug 2018 12:41:02 +0530
Subject: [PATCH] feat: Add PageContainer

---
 erpnext/public/js/hub/PageContainer.vue | 40 +++++++++++++++++
 erpnext/public/js/hub/marketplace.js    |  8 ++++
 erpnext/public/js/hub/pages/home.js     | 60 -------------------------
 3 files changed, 48 insertions(+), 60 deletions(-)
 create mode 100644 erpnext/public/js/hub/PageContainer.vue
 delete mode 100644 erpnext/public/js/hub/pages/home.js

diff --git a/erpnext/public/js/hub/PageContainer.vue b/erpnext/public/js/hub/PageContainer.vue
new file mode 100644
index 00000000000..456da9a4f12
--- /dev/null
+++ b/erpnext/public/js/hub/PageContainer.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="hub-page-container">
+		<component :is="current_page"></component>
+	</div>
+</template>
+<script>
+import Home from './pages/Home.vue';
+import SavedProducts from './pages/SavedProducts.vue';
+import Publish from './pages/Publish.vue';
+import Category from './pages/Category.vue';
+import Search from './pages/Search.vue';
+import PublishedProducts from './pages/PublishedProducts.vue';
+
+const route_map = {
+	'marketplace/home': Home,
+	'marketplace/saved-products': SavedProducts,
+	'marketplace/publish': Publish
+}
+
+export default {
+	data() {
+		return {
+			current_page: this.get_current_page()
+		}
+	},
+	mounted() {
+		frappe.route.on('change', () => {
+			this.set_current_page();
+		});
+	},
+	methods: {
+		set_current_page() {
+			this.current_page = this.get_current_page();
+		},
+		get_current_page() {
+			return route_map[frappe.get_route_str()];
+		}
+	}
+}
+</script>
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index 98e84e0ab30..931c5f9cc9f 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -8,6 +8,7 @@ import './pages/messages';
 import './pages/buying_messages';
 import './pages/not_found';
 
+import PageContainer from './PageContainer.vue';
 import Home from './pages/Home.vue';
 import SavedProducts from './pages/SavedProducts.vue';
 import Publish from './pages/Publish.vue';
@@ -147,6 +148,13 @@ erpnext.hub.Marketplace = class Marketplace {
 
 	make_body() {
 		this.$body = this.$parent.find('.layout-main-section');
+		// this.$page_container = $('<div class="hub-page-container">').appendTo(this.$body);
+
+		// new Vue({
+		// 	el: '.hub-page-container',
+		// 	render: h => h(PageContainer)
+		// });
+
 		erpnext.hub.on('seller-registered', () => {
 			this.registered = 1;
 			this.make_sidebar_nav_buttons();
diff --git a/erpnext/public/js/hub/pages/home.js b/erpnext/public/js/hub/pages/home.js
deleted file mode 100644
index b011e7ead42..00000000000
--- a/erpnext/public/js/hub/pages/home.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import SubPage from './subpage';
-import { make_search_bar } from '../components/search_bar';
-import { get_item_card_container_html } from '../components/items_container';
-import { get_item_card_html } from '../components/item_card';
-
-erpnext.hub.Home = class Home extends SubPage {
-	make_wrapper() {
-		super.make_wrapper();
-
-		make_search_bar({
-			wrapper: this.$wrapper,
-			on_search: keyword => {
-				frappe.set_route('marketplace', 'search', keyword);
-			}
-		});
-	}
-
-	refresh() {
-		this.get_items_and_render();
-	}
-
-	get_items_and_render() {
-		this.$wrapper.find('.hub-items-container').empty();
-		this.get_data()
-			.then(data => {
-				this.render(data);
-			});
-	}
-
-	get_data() {
-		return hub.call('get_data_for_homepage', { country: frappe.defaults.get_user_default('country') });
-	}
-
-	render(data) {
-		let html = get_item_card_container_html(data.random_items, __('Explore'));
-		this.$wrapper.append(html);
-
-		if (data.items_by_country.length) {
-			html = get_item_card_container_html(data.items_by_country, __('Near You'));
-			this.$wrapper.append(html);
-		}
-
-		const category_items = data.category_items;
-
-		if (category_items) {
-			Object.keys(category_items).map(category => {
-				const items = category_items[category];
-				const see_all_link = `<p data-route="marketplace/category/${category}">See All</p>`;
-
-				html = get_item_card_container_html(
-					items,
-					__(category),
-					get_item_card_html,
-					see_all_link
-				);
-				this.$wrapper.append(html);
-			});
-		}
-	}
-}