:sparkles: validating on record save | sync local and remote | using pouch | including compose ile for remote

docker-compose.yml

+version: "3"
+
+services:
+    siimee-db:
+        image: couchdb:latest
+        container_name: siimee-db
+        ports:
+            - 5984:5984
+        environment:
+            COUCHDB_USER: admin
+            COUCHDB_PASSWORD: couchdb
+        volumes:
+            - siimee_db:/opt/couchdb/data
+
+volumes:
+    siimee_db:
+
+networks:
+    siimee_net:

package.json

   "dependencies": {
     "ajv": "^8.2.0",
     "events": "^3.3.0",
-    "pouchdb": "^7.2.2",
+    "pouchdb-browser": "^7.2.2",
     "process": "^0.11.10",
     "vue": "^3.0.5"
   },

src/App.vue

 <template lang="pug">
 img(alt="Vue logo" src="./assets/logo.png")
-HelloWorld(msg="Hello Vue 3 + Vite")
+hello-world(msg="Hello Vue 3 + Vite")
 </template>
 
 <script setup>
-import PouchDB from 'pouchdb'
-
-import { Profile } from '@/entities/profile'
-
-const p = new Profile({
-    email: 'donot@disturb.com',
-    street: '123 strawberry ln',
-    apt: 2,
-    city: 'candyland',
-    state: 'lollipop',
-    zip: 90001
-})
-/** from ajv schema validation */
-if(p.isValid()) {
-    console.log('SUCCESS!', p)
-} else {
-    console.error('error!', p.isValid())
-}
-
-const db = new PouchDB('kittens')
-console.log('PouchDB', db)
-
-import HelloWorld from '@/components/HelloWorld.vue'
-
-// This starter template is using Vue 3 experimental <script setup> SFCs
-// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
+import helloWorld from '@/components/HelloWorld.vue'
 </script>
 
 <style lang="postcss">

src/components/HelloWorld.vue

 <template lang="pug">
-h1 {{ msg }}
+.wrapper(v-if="state.loaded")
+    h1 {{ msg }}
 
-p
-    a(href="https://vitejs.dev/guide/features.html" target="_blank") Vite Documentation | 
-    a(href="https://v3.vuejs.org/" target="_blank") Vue 3 Documentation
+    p
+        a(href="https://vitejs.dev/guide/features.html" target="_blank") Vite Documentation |
+        a(href="https://v3.vuejs.org/" target="_blank") Vue 3 Documentation
 
-button(@click="state.count++") count is: {{ state.count }}
+    button(@click="state.count++") count is: {{ state.count }}
 
-p Edit
-code components/HelloWorld.vue
-p to test hot module replacement.
+    p Edit
+    code components/HelloWorld.vue
+    p to test hot module replacement.
 </template>
 
 <script setup>
 import { defineProps, reactive } from 'vue'
 
+import { api } from '@/utils'
+import { Profile } from '@/entities/profile'
+
 defineProps({
     msg: String
 })
+const state = reactive({
+    count: 0,
+    loaded: false,
+    profile: null
+})
 
-const state = reactive({ count: 0 })
+state.profile = new Profile({
+    email: 'donot@disturb.com',
+    street: '123 strawberry ln',
+    apt: '2',
+    city: 'candyland',
+    state: 'lollipop',
+    zip: 90002
+})
+api.removeAll()
+api.put(state.profile).then(p => {
+    state.loaded = true
+    console.log(p)
+    api.sync()
+})
 </script>
 
 <style lang="postcss">

src/entities/_modules.js

      */
     constructor() {
         this.createdAt = new Date().toJSON()
-        this._id = Date.now()
+        this._id = Date.now().toString()
         this.lastUpdatedAt = null
 
         /** Set in subtype (ticket, user, etc) */
         }
         return module
     },
-    
+
     /**
      * Use hourly() for anything that needs to track money * time
      */

src/entities/profile/profile.schema.js

 /** @module entities/profileSchema */
 import { allModules } from '..'
 
-/** 
- * profile schema object 
+/**
+ * profile schema object
  * uses the module system to use common fields
  * but sets fields with our validation types
  * @constructor
     properties: {
         /** _baseRecord fields */
         createdAt: { type: 'string' },
-        _id: { type: 'number' },
+        _id: { type: 'string' },
         lastUpdatedAt: { type: 'string' },
         type: { type: 'string' },
 

src/utils/db.js

+import PouchDB from 'pouchdb-browser'
+
+const domain = 'localhost'
+const port = 5984
+const remote = `http://${domain}:${port}`
+
+class Connector {
+    constructor(dbName) {
+        this.local = new PouchDB(dbName)
+        this.db = new PouchDB(`${remote}/${dbName}`)
+    }
+    async put(entry) {
+        /** from ajv schema validation */
+        if(entry.isValid()) {
+            try {
+                const res = await this.local.put(entry)
+                if(!res.ok) throw 'put to PouchDB failed'
+                return res
+            }
+            /** valid data but can't save */
+            catch (err) {
+                console.error('can\'t put', entry)
+            }
+        }
+        else {
+            /** not valid data */
+            console.error('NOT VALID!', entry.isValid())
+        }
+    }
+    async sync() {
+        this.local.sync(this.db).on('complete', () => {
+            console.log("sync'd!")
+        }).on('error', err => {
+            console.error("not sync'd!", err)
+        })
+    }
+    /** !: DEV ONLY */
+    async removeAll() {
+        const allDocs = await this.local.allDocs({
+            include_docs: true,
+            deleted: true
+        })
+        return Promise.all(allDocs.rows.map(row => {
+            return this.local.remove(row.id, row.value.rev)
+        }))
+    }
+}
+
+export { Connector }

src/utils/index.js

+import { Connector } from './db'
+
+const api = new Connector('kittens')
+
+export { api }