Merge pull request #123 from Cambalab/97-routes-being-recreated-on-ho…

…treload

Routes being recreated on hotreload

src/components/Resource/src/Resource.vue

@@ -44,24 +44,23 @@ export default {
     }
   },
   created: function() {
-    createCrudModule({
-      apiUrl: this.apiUrl,
-      resourceName: this.name,
-      resourceIdName: this.resourceIdName,
-      parseResponses: this.parseResponses,
-      store: this.$store
-    })
+    if (!this.storeHasModule(this.name)) {
+      createCrudModule({
+        apiUrl: this.apiUrl,
+        resourceName: this.name,
+        resourceIdName: this.resourceIdName,
+        parseResponses: this.parseResponses,
+        store: this.$store
+      })
+    }
   },
   methods: {
-    addRoute: function(path, name) {
+    addRoute: function(path, name, addedRouteCallback) {
       const resourceName = "resources/addRoute"
-      this.$store.commit(resourceName, { path, name })
+      return this.$store.commit(resourceName, { path, name, addedRouteCallback })
     },
-    loadRoutes() {
-      const resourcePath = `/${this.name}`
+    bindComponentsOnRoutes: function() {
       const routes = []
-      // Adds the 'resourceName' path, mainly used for the drawer
-      this.addRoute(resourcePath, this.name)
       // Initialises bindings to create the navigation routes
       const bind = createRouteBindings({
         list: this.list,
@@ -82,6 +81,15 @@ export default {
       routes.push(bind.edit({ wrapper: Edit }))
       // Adds the routes to the global router
       this.$router.addRoutes(routes)
+    },
+    loadRoutes() {
+      const resourcePath = `/${this.name}`
+      // Adds the 'resourceName' path, mainly used for the drawer
+      // and if the route was successfully added then it bind the components with their route
+      this.addRoute(resourcePath, this.name, this.bindComponentsOnRoutes)
+    },
+    storeHasModule(moduleName) {
+      return !!this.$store.state[moduleName]
     }
   },
   mounted: function() {

src/components/Ui/src/ui.vue

@@ -126,20 +126,21 @@ export default {
     };
   },
   mounted() {
-    // Listen to addRoutes mutations
-    let whitelist = ["resources/addRoute"];
-    this.$store.subscribe(mutation => {
-      if (whitelist.includes(mutation.type)) {
-        this.menuItems[0].children.push({
-          icon: "list",
-          title: mutation.payload.name,
-          link: mutation.payload.path
-        });
-      }
-    });
+    this.mapCurrentRegisteredRoutes()
   },
-  computed: {},
   methods: {
+    // Listen to addRoutes mutations
+    mapCurrentRegisteredRoutes() {
+      let whitelist = ["resources/addRoute"];
+      this.$store.subscribe((mutation, state) => {
+        if (whitelist.includes(mutation.type)) {
+          const currentRoutes = state.resources.routes.map(route => {
+            return { icon: 'list', title: route.name, link: route.path }
+          })
+          this.menuItems[0].children = currentRoutes
+        }
+      });
+    }
   }
 };
 </script>

src/store/modules/resource.js

@@ -4,11 +4,16 @@ export default {
     routes: []
   },
   mutations: {
-    addRoute({ routes }, payload) {
-      routes.push({
-        path: payload.path,
-        name: payload.name
-      });
+    addRoute({ routes }, { path, name, addedRouteCallback }) {
+      let matchingPathRouteIndex
+      let newRoute = { path, name }
+      routes.forEach((route, index) => (route.name === name) && (matchingPathRouteIndex = index))
+      if (matchingPathRouteIndex !== undefined) {
+        routes[matchingPathRouteIndex] = newRoute
+      } else {
+        routes.push(newRoute)
+        addedRouteCallback()
+      }
     }
   },
   getters: {

tests/unit/factory/store/initial.mutations.js

@@ -14,7 +14,9 @@ export default ({ snapshot = 'default' }) => {
     Resource: initMutationsForResource
   }
   const resourcesMutations = {
-    'resources/addRoute': () => {}
+    'resources/addRoute': (state, args) => {
+      args.addedRouteCallback && args.addedRouteCallback()
+    }
   }
 
   // Initialises default mutations

tests/unit/specs/resource.spec.js

@@ -94,7 +94,8 @@ describe('Resource.vue', () => {
     const { storeMethods } = resourceFixture.methods
     const { params } = storeMethods[methodName]
     expect(storeSpy.addRoute).toHaveBeenCalledTimes(1)
-    expect(storeSpy.addRoute).toHaveBeenCalledWith(methodName, params)
+    const addedRouteCallbackExpectation = { addedRouteCallback: expect.any(Function) }
+    expect(storeSpy.addRoute).toHaveBeenCalledWith(methodName, { ...params, ...addedRouteCallbackExpectation })
   })
 
   it('should have the store initialised with {initialResources} getters', () => {