Skip to content
GitLab
Commit a85f60b6 authored by Adam Procter's avatar Adam Procter
Browse files

refactoring Vuex 

splitting vuex store into modules.
parent 4f6d1a29
Hide whitespace changes
Inline Side-by-side
src/components/JoinMicrocosm.vue
View file @ a85f60b6
......@@ -5,7 +5,7 @@
<p>
First we need to connect this device to your ideas. This name is what
allows you to create and edit your nodes and this name can be anything you
like, this name is always anonymous.
like, this name is always anonymous. <strong>This is required.</strong>
</p>
<div class="breaker-one">
<label for="name">Your Name: {{ nameFormatted }}</label>
......@@ -14,13 +14,11 @@
v-model.trim="name"
type="text"
id="name"
autofocus
placeholder="type name here!"
autocorrect="off"
autocapitalize="none"
@keyup.enter="setName()"
required
/>
<button type="button" @click="setName()">Store</button>
</div>
<h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2>
......@@ -39,9 +37,11 @@
placeholder="type microcosm name here!"
autocorrect="off"
autocapitalize="none"
@keyup.enter="setMicrocosm()"
@keyup.enter="setName(), setMicrocosm()"
/>
<button type="button" @click="setMicrocosm()">Start or Join</button>
<button type="button" @click="setName(), setMicrocosm()">
Start or Join
</button>
<button class="configButton" type="button" @click="settings = !settings">
Change CouchDB Configuration
</button>
......@@ -141,7 +141,7 @@ export default {
// focus on next input field for speed
this.focusInput()
// now we sent this same data set to the store
this.$store.dispatch('setName', this.nameFormatted)
// this.$store.dispatch('setName', this.nameFormatted)
},
setMicrocosm() {
......@@ -152,7 +152,10 @@ export default {
this.microcosmSet = true
localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
// now we sent this same data set to the store
this.$store.dispatch('setMicrocosm', this.microcosmFormatted)
var devicename = this.nameFormatted
var microcosm = this.microcosmFormatted
this.$store.dispatch('setMicrocosm', { devicename, microcosm })
this.$store.dispatch('startDB')
},
configureRemote(protocol, username, password, url) {
// console.log(protocol, username, password, url)
......
src/main.js
View file @ a85f60b6
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import store from './store/store'
createApp(App)
.use(store)
.use(router)
.mount('#app')
createApp(App).use(store).use(router).mount('#app')
src/store/index.js deleted 100644 → 0
View file @ 4f6d1a29
import { createStore } from 'vuex'
import PouchDB from 'pouchdb'
//import Router from '@/router'
// Checking for previous microcosm last entered from LocalStorage
if (localStorage.getItem('nogg_microcosm') == null) {
var microcosm = 'first_visit'
} else {
microcosm = localStorage.getItem('nogg_microcosm')
}
// Checking for previous name last entered from LocalStorage
if (localStorage.getItem('nogg_name') == null) {
var name = 'no_name'
} else {
name = localStorage.getItem('nogg_name')
}
// set up PouchDB and add a remote from env files
var pouchdb = new PouchDB(microcosm)
var remote =
process.env.VUE_APP_COUCH_HTTP +
'://' +
process.env.VUE_APP_COUCH_USER +
':' +
process.env.VUE_APP_COUCH_PASS +
process.env.VUE_APP_COUCH_URL +
microcosm +
'/'
export const store = createStore({
state() {
return {
version: process.env.VUE_APP_VERSION,
microcosm: '',
name: name,
myNodes: [],
allNodes: [],
configRemote: [],
}
},
mutations: {
SET_NAME(state, e) {
state.name = e
},
SET_MICROCOSM(state, e) {
// const urlmicrocosm = Router.currentRoute.params.microcosm
pouchdb.close().then(function () {
// if the URL Parameter has /microcosm/usethisname
microcosm = e
// if (urlmicrocosm != undefined) {
// microcosm = urlmicrocosm
// localStorage.setItem('nogg_microcosm', microcosm)
// } else {
// microcosm = doc
// }
pouchdb = new PouchDB(microcosm)
if (state.configRemote && state.configRemote.length > 0) {
remote =
state.configRemote[0].protocol +
'://' +
state.configRemote[0].username +
':' +
state.configRemote[0].password +
'@' +
state.configRemote[0].url +
'/' +
microcosm +
'/'
} else {
remote =
process.env.VUE_APP_COUCH_HTTP +
'://' +
process.env.VUE_APP_COUCH_USER +
':' +
process.env.VUE_APP_COUCH_PASS +
process.env.VUE_APP_COUCH_URL +
microcosm +
'/'
}
store.dispatch('syncDB')
})
},
SET_REMOTE(state, e) {
state.configRemote = [
{
protocol: e.protocol,
username: e.username,
password: e.password,
url: e.url,
},
]
},
// ADD_NODE(state) {
// var uniqueid =
// Math.random().toString(36).substring(2, 15) +
// Math.random().toString(36).substring(2, 15)
// if (state.microcosm == 'first_visit') {
// console.log('not allowed on this microcosm')
// } else {
// pouchdb.get(state.name).then(function (doc) {
// doc.nodes.push({
// node_id: uniqueid,
// node_text: '',
// node_owner: state.name,
// node_type: 'sheet',
// node_shape: 'square',
// node_deleted: false,
// node_readmode: false,
// node_color: '#9bc2d8',
// })
// return pouchdb
// .put({
// _id: state.name,
// _rev: doc._rev,
// _attachments: doc._attachments,
// nodes: doc.nodes,
// })
// .then(function () {
// return pouchdb.get(state.name).then(function (doc) {
// state.myNodes = doc.nodes
// var end = Object.keys(state.myNodes).length - 1
// const newNode = {
// nodeid: state.myNodes[end].id,
// nodetext: state.myNodes[end].text,
// }
// console.log(newNode)
// })
// })
// .catch(function (err) {
// if (err.status == 404) {
// // pouchdb.put({ })
// }
// })
// })
// }
// },
GET_ALL_NODES(state) {
pouchdb
.allDocs({
include_docs: true,
})
.then(function (doc) {
state.allNodes = doc.rows
store.commit('GET_MY_NODES')
})
.catch(function () {
//console.log(err)
})
},
GET_MY_NODES(state) {
pouchdb
.get(state.name)
.then(function (doc) {
var i
for (i = 0; i < Object.keys(doc.nodes).length; i++) {
state.myNodes = doc.nodes
}
})
.catch(function () {
// console.log(err)
})
},
},
actions: {
syncDB: () => {
pouchdb.replicate.from(remote).on('complete', function () {
// turn on two-way, continuous, retriable sync
store.commit('GET_ALL_NODES')
pouchdb
.sync(remote, {
live: true,
since: 'now',
retry: true,
attachments: true,
})
.on('change', function () {
// pop info into function to find out more
store.commit('GET_ALL_NODES')
})
.on('paused', function () {})
.on('active', function () {})
.on('denied', function () {})
.on('complete', function () {})
.on('error', function (err) {
console.log(err)
})
})
},
setName: ({ commit }, e) => {
commit('SET_NAME', e)
},
setMicrocosm: ({ commit }, e) => {
commit('SET_MICROCOSM', e)
},
configureRemote: ({ commit }, e) => {
commit('SET_REMOTE', e)
},
},
modules: {},
})
export default store
store.dispatch('syncDB')
src/store/modules/nodes.js 0 → 100644
View file @ a85f60b6
import { createStore } from 'vuex'
export const nodesstore = createStore({
state() {
return {
version: process.env.VUE_APP_VERSION,
myNodes: [],
allNodes: [],
}
},
mutations: {},
actions: {
})
export default nodesstore
// ADD_NODE(state) {
// var uniqueid =
// Math.random().toString(36).substring(2, 15) +
// Math.random().toString(36).substring(2, 15)
// if (state.microcosm == 'first_visit') {
// console.log('not allowed on this microcosm')
// } else {
// pouchdb.get(state.deviceName).then(function (doc) {
// doc.nodes.push({
// node_id: uniqueid,
// node_text: '',
// node_owner: state.deviceName,
// node_type: 'sheet',
// node_shape: 'square',
// node_deleted: false,
// node_readmode: false,
// node_color: '#9bc2d8',
// })
// return pouchdb
// .put({
// _id: state.name,
// _rev: doc._rev,
// _attachments: doc._attachments,
// nodes: doc.nodes,
// })
// .then(function () {
// return pouchdb.get(state.name).then(function (doc) {
// state.myNodes = doc.nodes
// var end = Object.keys(state.myNodes).length - 1
// const newNode = {
// nodeid: state.myNodes[end].id,
// nodetext: state.myNodes[end].text,
// }
// console.log(newNode)
// })
// })
// .catch(function (err) {
// if (err.status == 404) {
// // pouchdb.put({ })
// }
// })
// })
// }
// },
// GET_ALL_NODES(state) {
// pouchdb
// .allDocs({
// include_docs: true,
// })
// .then(function (doc) {
// state.allNodes = doc.rows
// })
// .catch(function () {
// //console.log(err)
// })
// },
// GET_MY_NODES(state) {
// pouchdb
// .get(state.deviceName)
// .then(function (doc) {
// var i
// for (i = 0; i < Object.keys(doc.nodes).length; i++) {
// state.myNodes = doc.nodes
// }
// })
// .catch(function () {
// // console.log(err)
// })
// },
src/store/modules/setup.js 0 → 100644
View file @ a85f60b6
import PouchDB from 'pouchdb'
var pouchdb
var remote
export const state = {
microcosmName: '',
deviceName: '',
remoteAddress: '',
configRemote: [],
}
export const mutations = {
SET_MICROCOSM(state, e) {
state.deviceName = e.devicename
state.microcosmName = e.microcosm
pouchdb = new PouchDB(state.microcosmName)
if (state.configRemote && state.configRemote.length > 0) {
remote =
state.configRemote[0].protocol +
'://' +
state.configRemote[0].username +
':' +
state.configRemote[0].password +
'@' +
state.configRemote[0].url +
'/' +
state.microcosmName +
'/'
} else {
remote =
process.env.VUE_APP_COUCH_HTTP +
'://' +
process.env.VUE_APP_COUCH_USER +
':' +
process.env.VUE_APP_COUCH_PASS +
process.env.VUE_APP_COUCH_URL +
state.microcosmName +
'/'
}
state.remoteAddress = remote
},
SET_REMOTE(state, e) {
state.configRemote = [
{
protocol: e.protocol,
username: e.username,
password: e.password,
url: e.url,
},
]
},
}
export const actions = {
setMicrocosm: ({ commit }, e) => {
commit('SET_MICROCOSM', e)
},
configureRemote: ({ commit }, e) => {
commit('SET_REMOTE', e)
},
startDB: () => {
pouchdb.replicate.from(remote).on('complete', function () {})
},
}
src/store/store.js 0 → 100644
View file @ a85f60b6
import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js'
//import * as nodes from '@/store/modules/nodes.js'
export const store = createStore({
//
modules: {
setup,
// nodes,
},
})
export default store
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment