feat(config): store is configured client- server-side

nuxt.config.js

@@ -44,12 +44,13 @@ module.exports = async () => {
 
     /*
     ** Plugins to load before mounting the App
+    * Order matters!
     */
     plugins: [
       '@/plugins/libs/rdf',
-      '@/plugins/libs/proposals',
       '@/plugins/models/Class',
       '@/plugins/models/Property',
+      '@/plugins/libs/proposals',
       '@/plugins/filters',
       '@/plugins/directives',
       '@/plugins/nuxt-init.client',

pages/proposal/class.vue

@@ -255,7 +255,10 @@ export default {
       }
       return this.iri
     },
-    ...classGetters(['success', 'error', 'serialized'])
+    serialized () {
+      return this.$proposalSerializer(this.clss)
+    },
+    ...classGetters(['success', 'error'])
   },
   watch: {
     success () {

pages/proposal/property.vue

@@ -254,7 +254,10 @@ export default {
       }
       return this.iri
     },
-    ...propertyGetters(['success', 'error', 'serialized'])
+    serialized () {
+      return this.$proposalSerializer(this.prop)
+    },
+    ...propertyGetters(['success', 'error'])
   },
   watch: {
     success () {

plugins/models/Class.js

@@ -1,7 +1,7 @@
 import rdf from 'rdf-ext'
 import QuadExt from 'rdf-ext/lib/Quad'
 import Resource from './Resource'
-import { firstVal, datasetToCanonicalN3 } from '@/libs/utils'
+import { firstVal, datasetToCanonicalN3, normalizeLabel } from '@/libs/utils'
 
 export default ({ app, store }, inject) => {
   class Class extends Resource {
@@ -10,13 +10,15 @@ export default ({ app, store }, inject) => {
 
       const {
         baseIRI = store.state.config.ontology.classBaseUrl,
+        iri = '',
         // properties newly added to this Class
         propChildren = [] // Array<Quad|Property>
       } = args
 
       this.proposalType = 'Class'
 
       this.baseIRI = baseIRI
+      this.iri = iri || this.baseIRI + normalizeLabel(this.label, 'camel')
 
       this.propChildren = propChildren
     }

plugins/models/Property.js

@@ -1,7 +1,7 @@
 import rdf from 'rdf-ext'
 import QuadExt from 'rdf-ext/lib/Quad'
 import Resource from './Resource'
-import { firstVal, datasetToCanonicalN3 } from '@/libs/utils'
+import { firstVal, datasetToCanonicalN3, normalizeLabel } from '@/libs/utils'
 
 export default ({ app, store }, inject) => {
   class Property extends Resource {
@@ -10,6 +10,7 @@ export default ({ app, store }, inject) => {
 
       const {
         baseIRI = store.state.config.ontology.propertyBaseUrl,
+        iri = '',
         ranges = [],
         // ranges removed from this Property, only used when editing a Property
         rangesRemoved = [], // Array<string iri>
@@ -20,6 +21,7 @@ export default ({ app, store }, inject) => {
       this.proposalType = 'Property'
 
       this.baseIRI = baseIRI
+      this.iri = iri || this.baseIRI + normalizeLabel(this.label, 'camel')
 
       this.ranges = ranges
       this.rangesRemoved = rangesRemoved

plugins/models/Resource.js

@@ -1,10 +1,7 @@
-import { normalizeLabel } from '@/libs/utils'
-
 export default class Resource {
   constructor ({
     motivation = '',
     threadId = null,
-    iri = '',
     // when editing a Resource, originalIRI is the IRI that this.iri will replace
     originalIRI = '',
     label = '',
@@ -33,7 +30,6 @@ export default class Resource {
 
     this.threadId = threadId
 
-    this.iri = iri || this.baseIRI + normalizeLabel(label, 'camel')
     this.originalIRI = originalIRI
 
     this.label = label

store/class.js

@@ -1,25 +1,30 @@
 import * as VueDeepSet from 'vue-deepset'
 import _get from 'lodash/get'
 import gql from 'graphql-tag'
+import rdf from 'rdf-ext'
 
 import proposalById from '@/apollo/queries/proposalById'
 
 import { SAVE, SUBMIT, NEW, LOAD } from '@/store/action-types'
 import { SET_ID, ERROR, SUCCESS } from '@/store/mutation-types'
 
-export function state () {
-  return {
-    clss: {},
-    error: false,
-    success: false
-  }
-}
+export const state = () => ({
+  clss: null,
+  error: false,
+  success: false
+})
 
 export const getters = {
   error: (state) => state.error,
   success: (state) => state.success,
-  dataset: (state) => state.clss.proposalDataset(false),
-  serialized: (state) => this.$proposalSerializer(state.clss)
+  dataset: (state) => {
+    if (state.clss) {
+      if (typeof state.clss.proposalDataset === 'function') {
+        return state.clss.proposalDataset(false)
+      }
+    }
+    return rdf.dataset()
+  }
 }
 
 export const mutations = VueDeepSet.extendMutation({

store/index.js

@@ -19,6 +19,8 @@ export const actions = {
   // b. why it will be broken client-side: data will be (de)serialized to/from JSON for the client
   async nuxtServerInit ({ commit, dispatch }, { req, res }) {
     await dispatch('config/LOAD_CONFIG')
+    commit('class/NEW')
+    commit('prop/NEW')
 
     if (req && req.ontology) {
       commit('graph/ontologyInit', req.ontology)
@@ -27,7 +29,9 @@ export const actions = {
       commit('graph/structureInit', req.structure)
     }
   },
-  async nuxtClientInit ({ dispatch }, context) {
+  async nuxtClientInit ({ commit, dispatch }, context) {
+    commit('class/NEW')
+    commit('prop/NEW')
     await dispatch('graph/DESERIALIZE')
   }
 }

store/prop.js

@@ -1,25 +1,30 @@
 import * as VueDeepSet from 'vue-deepset'
 import _get from 'lodash/get'
 import gql from 'graphql-tag'
+import rdf from 'rdf-ext'
 
 import proposalById from '@/apollo/queries/proposalById'
 
 import { SAVE, SUBMIT, NEW, LOAD } from '@/store/action-types'
 import { SET_ID, ERROR, SUCCESS } from '@/store/mutation-types'
 
-export function state () {
-  return {
-    prop: {},
-    error: false,
-    success: false
-  }
-}
+export const state = () => ({
+  prop: null,
+  error: false,
+  success: false
+})
 
 export const getters = {
-  dataset: (state) => state.prop.proposalDataset(false),
   error: (state) => state.error,
   success: (state) => state.success,
-  serialized: (state) => this.$proposalSerializer(state.prop)
+  dataset: (state) => {
+    if (state.prop) {
+      if (typeof state.prop.proposalDataset === 'function') {
+        return state.prop.proposalDataset(false)
+      }
+    }
+    return rdf.dataset()
+  }
 }
 
 export const mutations = VueDeepSet.extendMutation({