another pre-release (#53)

.drone.yml

@@ -55,7 +55,6 @@ type: docker
 name: frontend_run_build
 depends_on:
     - frontend_run_tests
-    - backend_run_tests
 trigger:
     status:
         - success
@@ -86,3 +85,30 @@ volumes:
     - name: frontend_build
       host:
           path: /tmp/cache/drone/frontend/build
+---
+#####################
+# Deploy to Staging #
+#####################
+kind: pipeline
+name: deploy
+trigger:
+    branch:
+        - dev
+
+steps:
+    # post-receive hook
+    - name: push commit
+      image: appleboy/drone-git-push:0.2.0-linux-amd64
+      settings:
+          branch: master
+          remote: maeda@165.232.128.85:/opt/staging/siimee.git
+          remote_name: staging
+          force: true
+          ssh_key:
+              # !: id_rsa from DRONE machine
+              from_secret: push_deploy_key
+
+volumes:
+    - name: backend_node_cache
+      host:
+          path: /tmp/cache/drone/backend/node_modules

backend/.env.sample

@@ -1,20 +1,34 @@
 # Rename me to .env then fill me with runtime configuration and credentials
 # Just don't try to check me into your repo :)
 # Confused? See https://github.com/motdotla/dotenv
-#
-# e.g.
+
+# API host:port
 API_HOST=localhost
 API_PORT=3001
-APP_SECRET=mysecret
 
 USE_LOCAL_DB=true
+DB_TYPE=mysql
 
-DB_ROOT_PASSWORD=root
-DB_USER=root
-DB_NAME=test
+
+# Extra pepper for auth encryption
+PEPPER=kosho
+APP_SECRET=mysecret
+
+
+# Config for local test dB
 DB_HOST=localhost
-DB_TYPE=mysql
 DB_PORT=3307
+DB_NAME=test
+
+DB_USER=root
+DB_ROOT_PASSWORD=root
 
+
+# Config for remote planet scale production dB
+PSCALE_DB_HOST=planet-scale-db
+PSCALE_DB_PORT=3306
+PSCALE_DB_NAME=pscale-db
 PSCALE_DB_BRANCH=main
-PSCALE_DB_NAME=planet-scale-db
+
+PSCALE_DB_USER=myuserpleasechange
+PSCALE_DB_PASSWORD=pscale_pw_abc123efg456hij789

backend/db/data-generator/config.json

@@ -2,6 +2,7 @@
     "mockOutputPath": "./db/generated",
     "magic": 1000,
     "total": 100,
+    "ignore": [45],
     "batchSize": 10,
     "percentageOfSeekers": 90,
     "scoreVals": [1, 2, 3, 4, 5, 6, 7],

backend/db/data-generator/mock.js

@@ -38,54 +38,80 @@ module.exports = {
             tag_description: 'urgency',
             is_active: true,
         },
+        {
+            tag_id: 7,
+            tag_category: 'reveal',
+            tag_description: 'user_name',
+            is_active: true,
+        },
+        {
+            tag_id: 8,
+            tag_category: 'reveal',
+            tag_description: 'user_email',
+            is_active: true,
+        },
     ],
     tag_associations: [
         {
             tag_association_id: 1,
             profile_id: 1,
-            membership_id: null,
+            grouping_id: null,
             tag_id: 1,
             is_deleted: false,
         },
         {
             tag_association_id: 2,
             profile_id: 2,
-            membership_id: null,
+            grouping_id: null,
             tag_id: 1,
             is_deleted: false,
         },
         {
             tag_association_id: 3,
             profile_id: 3,
-            membership_id: null,
+            grouping_id: null,
             tag_id: 1,
             is_deleted: false,
         },
         {
             tag_association_id: 4,
             profile_id: 45,
-            membership_id: null,
+            grouping_id: null,
             tag_id: 1,
             is_deleted: false,
         },
         {
             tag_association_id: 5,
             profile_id: 45,
-            membership_id: 1,
+            grouping_id: 2,
             tag_id: 4,
             is_deleted: false,
         },
         {
             tag_association_id: 6,
             profile_id: 45,
-            membership_id: 1,
+            grouping_id: 2,
             tag_id: 5,
             is_deleted: false,
         },
         {
             tag_association_id: 7,
             profile_id: 2,
-            membership_id: 1,
+            grouping_id: 2,
+            tag_id: 5,
+            is_deleted: false,
+        },
+        {
+            tag_association_id: 8,
+            profile_id: 41,
+            grouping_id: 1,
+            tag_id: 4,
+            is_deleted: false,
+        },
+        {
+            tag_association_id: 9,
+            profile_id: 41,
+            grouping_id: 1,
             tag_id: 5,
             is_deleted: false,
         },
@@ -94,7 +120,8 @@ module.exports = {
         {
             response_key_id: 1,
             response_key_category: 'visionary_vs_implementer',
-            response_key_prompt: 'While managing your team, do you find success in your employees being more Visionary or Implementer?',
+            response_key_prompt:
+                'While managing your team, do you find success in your employees being more Visionary or Implementer?',
             response_key_description: 'first round draft scoring question',
         },
         {
@@ -225,12 +252,12 @@ module.exports = {
     ],
     messages: [],
     match_queues: [
-        { match_queue_id: 1, profile_id: 45, target_id: 62, is_deleted: false },
-        { match_queue_id: 2, profile_id: 62, target_id: 45, is_deleted: false },
+        { match_queue_id: 1, profile_id: 47, target_id: 62, is_deleted: false },
+        { match_queue_id: 2, profile_id: 62, target_id: 47, is_deleted: false },
         { match_queue_id: 3, profile_id: 62, target_id: 46, is_deleted: false },
         { match_queue_id: 4, profile_id: 46, target_id: 62, is_deleted: false },
-        { match_queue_id: 5, profile_id: 45, target_id: 46, is_deleted: false },
-        { match_queue_id: 6, profile_id: 46, target_id: 45, is_deleted: false },
+        { match_queue_id: 5, profile_id: 47, target_id: 46, is_deleted: false },
+        { match_queue_id: 6, profile_id: 46, target_id: 48, is_deleted: false },
         { match_queue_id: 7, profile_id: 46, target_id: 44, is_deleted: false },
         { match_queue_id: 8, profile_id: 46, target_id: 43, is_deleted: false },
         { match_queue_id: 9, profile_id: 46, target_id: 42, is_deleted: false },

backend/db/dataSort.js

@@ -1,3 +1,3 @@
-const dataSort = (table, id) => { return table.sort((a,b) => {return a[`${id}`] < b[`${id}`]})}
+const dataSort = (table, id) => table.sort((a, b) => a[`${id}`] < b[`${id}`])
 
-module.exports = dataSort
+module.exports = dataSort

backend/db/migrations/20220403111037_create_tag_associations_table.js

@@ -2,7 +2,7 @@ exports.up = function (knex) {
     return knex.schema.createTable('tag_associations', function (table) {
         table.increments('tag_association_id').primary()
         table.integer('profile_id').notNullable()
-        table.integer('membership_id')
+        table.integer('grouping_id')
         table.integer('tag_id').notNullable()
         table.boolean('is_deleted').notNullable()
     })

backend/db/seeds/02-profiles.js

@@ -1,21 +1,21 @@
 const mock = require('../data-generator/mock')
 const fs = require('fs')
-const dataSort = require ('../dataSort')
-const { batchSize } = require('../data-generator/config.json')
-
+const dataSort = require('../dataSort')
+const { batchSize, ignore } = require('../data-generator/config.json')
 
 let profiles = []
 const generatedDataPath = './db/generated'
 let fileNames = fs.readdirSync(generatedDataPath)
 for (let name of fileNames) {
     const data = require(`../generated/${name}`)
-    if(name[0] == '_') {
+    if (name[0] == '_') {
         profiles = [...profiles, ...data.profiles]
     }
 }
-// sort data
-profiles = dataSort(profiles, 'profile_id')
 
+profiles = dataSort(profiles, 'profile_id').filter(
+    profile => !ignore.includes(profile.profile_id),
+)
 
 exports.seed = async knex => {
     await knex('profiles').del()

backend/db/seeds/04-responses.js

@@ -1,20 +1,25 @@
 const mock = require('../data-generator/mock')
 const fs = require('fs')
-const dataSort = require ('../dataSort')
-const { batchSize } = require('../data-generator/config.json')
+const dataSort = require('../dataSort')
+const { batchSize, ignore } = require('../data-generator/config.json')
 
 let responses = []
 const generatedDataPath = './db/generated'
 let fileNames = fs.readdirSync(generatedDataPath)
 for (let name of fileNames) {
     const data = require(`../generated/${name}`)
-    if(name[0] == '_') {
+    if (name[0] == '_') {
         responses = [...responses, ...data.responses]
     }
 }
 
-// sort data
-responses = dataSort(responses, 'response_id')
+/**
+ * Prevent seeding responses for
+ * profile ids so we can test oboarding
+ */
+responses = dataSort(responses, 'response_id').filter(
+    response => !ignore.includes(response.profile_id),
+)
 
 exports.seed = async knex => {
     await knex('responses').del()
@@ -23,7 +28,7 @@ exports.seed = async knex => {
     for (let i = 1; i <= len; i += 1) {
         responsesToPush.push(responses.shift())
         if (i % batchSize === 0 || i > responses.length) {
-            await knex('responses').insert(responsesToPush)
+            // await knex('responses').insert(responsesToPush)
             responsesToPush = []
         }
     }

backend/knexfile.js

@@ -1,4 +1,5 @@
 require('dotenv').config()
+const fs = require('fs')
 
 const local = {
     host: process.env.DB_HOST,
@@ -8,6 +9,7 @@ const local = {
     port: process.env.DB_PORT,
 }
 const pscale = {
+    ssl: true,
     host: process.env.PSCALE_DB_HOST ? process.env.PSCALE_DB_HOST : '127.0.0.1',
     user: process.env.PSCALE_DB_USER ? process.env.PSCALE_DB_USER : 'root',
     password: process.env.PSCALE_DB_PASSWORD
@@ -33,5 +35,8 @@ module.exports = {
         seeds: {
             directory: './db/seeds',
         },
+        ssl: {
+            ca: fs.readFileSync('/etc/ssl/certs/ca-certificates.crt'),
+        },
     },
 }

backend/lib/plugins/membership.js

@@ -9,6 +9,7 @@ const MembershipService = require('../services/membership')
 const MembershipJoinRoute = require('../routes/membership/join')
 const MembershipLeaveRoute = require('../routes/membership/leave')
 const MembershipActiveRoute = require('../routes/membership/active')
+const MembershipRevealRoute = require('../routes/membership/reveal')
 
 module.exports = {
     name: 'membership-plugin',
@@ -29,5 +30,6 @@ module.exports = {
         await server.route(MembershipJoinRoute)
         await server.route(MembershipLeaveRoute)
         await server.route(MembershipActiveRoute)
+        await server.route(MembershipRevealRoute)
     },
 }

backend/lib/plugins/profile.js

@@ -21,6 +21,8 @@ const ProfileMatchRoute = require('../routes/profile/match')
 const ProfileQueueRoute = require('../routes/profile/queue')
 const ProfileGetRoute = require('../routes/profile/get')
 const ProfilePatchQueueRoute = require('../routes/profile/patch-queue')
+const TagRevealRoute = require('../routes/tag/reveal')
+const TagGetRoute = require('../routes/tag/get')
 
 module.exports = {
     name: 'profile-plugin',
@@ -53,5 +55,7 @@ module.exports = {
         await server.route(ProfileQueueRoute)
         await server.route(ProfileGetRoute)
         await server.route(ProfilePatchQueueRoute)
+        await server.route(TagRevealRoute)
+        await server.route(TagGetRoute)
     },
 }

backend/lib/routes/membership/active.js

@@ -74,7 +74,6 @@ module.exports = {
             let memberships = await membershipService.findMemberships(
                 groupings.map(grouping => grouping.grouping_id),
             )
-            // console.log('groupings :>> ', memberships)
 
             /**
              * Heavily process the result by storing just a profile_id

backend/lib/routes/membership/reveal.js

@@ -0,0 +1,104 @@
+const Joi = require('joi')
+
+const apiSchema = require('../../schemas/api')
+const errorSchema = require('../../schemas/errors')
+
+const pluginConfig = {
+    handlerType: 'reveal',
+    docs: {
+        description: 'reveal',
+        notes: 'Reveal profile information to a grouping by membership',
+    },
+}
+
+const validators = {
+    params: Joi.object({ grouping_id: Joi.number() }),
+    query: Joi.object({ profile_id: Joi.number(), tag_id: Joi.number() }),
+}
+
+const responseSchemas = {
+    response: Joi.object({
+        tags: Joi.array().items(),
+    }),
+    error: errorSchema.single,
+}
+module.exports = {
+    method: 'POST',
+    path: '/{grouping_id}/reveal',
+    options: {
+        ...pluginConfig.docs,
+        tags: ['api'],
+        auth: false,
+        cors: true,
+        handler: async function (request, h) {
+            const { membershipService, profileService } =
+                request.server.services()
+            const grouping_id = request.params.grouping_id
+            const { profile_id, tag_id } = request.query
+            try {
+                const tags = await profileService.revealProfileInfo({
+                    profile_id,
+                    grouping_id,
+                    tag_id,
+                    is_deleted: false,
+                })
+
+                // Notify both profiles that information has been revealed
+                const memberships = await membershipService.findMemberships([
+                    grouping_id,
+                ])
+                const idsInGroup = memberships.map(
+                    membership => membership.profile_id,
+                )
+                idsInGroup.forEach(profile_id => {
+                    request.server.methods.notify(
+                        `${profile_id}.stonk`,
+                        {
+                            name: 'REVEALED INFO',
+                            tag: tag_id,
+                            type: 'info',
+                        },
+                        h,
+                    )
+                })
+                return h
+                    .response({
+                        ok: true,
+                        handler: pluginConfig.handlerType,
+                        data: { tags },
+                    })
+                    .code(200)
+            } catch (err) {
+                return h
+                    .response({
+                        ok: false,
+                        handler: pluginConfig.handlerType,
+                        data: { error: `${err}` },
+                    })
+                    .code(409)
+            }
+        },
+
+        /** Validate based on validators object */
+        validate: {
+            ...validators,
+            failAction: 'log',
+        },
+
+        /** Validate the server response */
+        response: {
+            status: {
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('reveal_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
+            },
+        },
+    },
+}

backend/lib/routes/tag/get.js

@@ -0,0 +1,87 @@
+'use strict'
+
+const apiSchema = require('../../schemas/api')
+const errorSchema = require('../../schemas/errors')
+const params = require('../../schemas/params')
+const Joi = require('joi')
+
+const pluginConfig = {
+    handlerType: 'get',
+    docs: {
+        description: 'Get tags based on membership id',
+        notes: 'returns from the Tag Associations Table',
+    },
+}
+
+const responseSchemas = {
+    tags: Joi.array().items(Joi.object()),
+    error: errorSchema.single,
+}
+
+const validators = {
+    params: Joi.object({
+        profile_id: params.profileId,
+        grouping_id: params.groupingId,
+    }),
+    query: Joi.object({ category: Joi.string() }),
+}
+
+module.exports = {
+    method: 'GET',
+    path: '/{profile_id}/tags/{grouping_id}',
+    options: {
+        ...pluginConfig.docs,
+        tags: ['api'],
+        /** Protect this route with authentication? */
+        auth: false,
+        cors: true,
+        handler: async function (request, h) {
+            const { grouping_id, profile_id } = request.params
+            const { profileService } = request.server.services()
+            const { category } = request.query
+            const revealedTags = await profileService.getTagsFor(
+                profile_id,
+                grouping_id,
+                category,
+            )
+            try {
+                return h
+                    .response({
+                        ok: true,
+                        handler: pluginConfig.handlerType,
+                        data: revealedTags,
+                    })
+                    .code(200)
+            } catch (err) {
+                return h
+                    .response({
+                        ok: false,
+                        handler: pluginConfig.handlerType,
+                        data: { error: `${err}` },
+                    })
+                    .code(409)
+            }
+        },
+        /** Validate based on validators object */
+        validate: {
+            ...validators,
+            failAction: 'log',
+        },
+
+        /** Validate the server response */
+        response: {
+            status: {
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.tags,
+                    })
+                    .label('tags_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
+            },
+        },
+    },
+}

backend/lib/routes/tag/reveal.js

@@ -0,0 +1,91 @@
+'use strict'
+
+const apiSchema = require('../../schemas/api')
+const errorSchema = require('../../schemas/errors')
+const params = require('../../schemas/params')
+const Joi = require('joi')
+
+const pluginConfig = {
+    handlerType: 'reveal',
+    docs: {
+        description: 'Reveals part of a profile based on tag',
+        notes: 'returns from the Tag Associations Table',
+    },
+}
+
+const responseSchemas = {
+    tags: Joi.array().items(Joi.object()),
+    error: errorSchema.single,
+}
+
+const validators = {
+    params: params.profileId.append({ tag_id: Joi.number() }),
+    payload: Joi.object({
+        profile_id: Joi.number(),
+        membership_id: Joi.string().optional(),
+    }),
+}
+
+module.exports = {
+    method: 'POST',
+    path: '/{profile_id}/reveal/{tag_id}',
+    options: {
+        ...pluginConfig.docs,
+        tags: ['api'],
+        /** Protect this route with authentication? */
+        auth: false,
+        cors: true,
+        handler: async function (request, h) {
+            const { profile_id, tag_id } = request.params
+            const { profileService } = request.server.services()
+
+            const revealedTags = await profileService.revealProfileInfo({
+                profile_id,
+                tag_id,
+                is_deleted: false,
+            })
+            try {
+                const tag = profileService.tagLookup[tag_id]
+                if (!tag || tag.tag_category != 'reveal') {
+                    throw `cannot reveal ${tag} tag`
+                }
+                return h
+                    .response({
+                        ok: true,
+                        handler: pluginConfig.handlerType,
+                        data: revealedTags,
+                    })
+                    .code(200)
+            } catch (err) {
+                return h
+                    .response({
+                        ok: false,
+                        handler: pluginConfig.handlerType,
+                        data: { error: `${err}` },
+                    })
+                    .code(409)
+            }
+        },
+        /** Validate based on validators object */
+        validate: {
+            ...validators,
+            failAction: 'log',
+        },
+
+        /** Validate the server response */
+        response: {
+            status: {
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.tags,
+                    })
+                    .label('reveal_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
+            },
+        },
+    },
+}

backend/lib/schemas/params.js

@@ -1,12 +1,19 @@
 const Joi = require('joi')
 
 module.exports = {
-    profileId: Joi.object({ profile_id: Joi.number() }).label('profile_id_param'),
+    profileId: Joi.object({ profile_id: Joi.number() }).label(
+        'profile_id_param',
+    ),
+    groupingId: Joi.object({ grouping_id: Joi.number() }).label(
+        'grouping_id_param',
+    ),
     profileInclude: Joi.object({ include_profile: Joi.bool() }),
     userId: Joi.object({ user_id: Joi.number() }).label('user_id_param'),
     userName: Joi.object({
         name: Joi.string().min(3).max(11),
         all: Joi.array(),
     }).label('user_name_param'),
-    userEmail: Joi.object({ user_email: Joi.string() }).label('user_email_param')
-}
+    userEmail: Joi.object({ user_email: Joi.string() }).label(
+        'user_email_param',
+    ),
+}

backend/lib/schemas/tags.js

@@ -12,7 +12,7 @@ const singleTag = Joi.object({
 const singleTagAssociation = Joi.object({
     tag_association_id: Joi.number(),
     profile_id: Joi.number().required(),
-    membership_id: Joi.number(),
+    grouping_id: Joi.number(),
     tag_id: Joi.number().required(),
     is_deleted: Joi.boolean().required(),
 }).label('tag_association_single')

backend/lib/services/profile/index.js

@@ -11,7 +11,7 @@ module.exports = class ProfileService extends Schmervice.Service {
         super(...args)
         /** Scores available in the db to map against score indices*/
         this.scoreLookup = {}
-        /** Tags available in the db to map against tagg_associations*/
+        /** Tags available in the db to map against tag_associations*/
         this.tagLookup = {}
         // this.responseKeyLookup = ResponseKey.query()
     }
@@ -345,4 +345,36 @@ module.exports = class ProfileService extends Schmervice.Service {
         const end = await this._latLonForZip(end_zip)
         return haversine(start, end, { unit: distanceUnit })
     }
+
+    /**
+     * Use the db to grab tag associations
+     * by profile and match them to tag types
+     * @param {number} profileId
+     * @param {object}
+     */
+    async getTagsFor(profileId, groupingId, category) {
+        const { TagAssociation } = this.server.models()
+        await this._setTagLookup()
+        let associations = groupingId
+            ? await TagAssociation.query()
+                  .where('grouping_id', groupingId)
+                  .andWhere('profile_id', profileId)
+            : await TagAssociation.query().andWhere('profile_id', profileId)
+        return associations
+            .map(assoc => ({
+                ...assoc,
+                tag: this.tagLookup[assoc.tag_id],
+            }))
+            .filter(tagWithAssoc => {
+                return category
+                    ? tagWithAssoc.tag.tag_category == category
+                    : true
+            })
+    }
+    async revealProfileInfo(association) {
+        const { TagAssociation } = this.server.models()
+        await TagAssociation.query().insert(association)
+
+        return await this.getTagsFor(association.profile_id)
+    }
 }

backend/lib/services/profile/profiler.js

@@ -14,7 +14,7 @@ class CompleteProfile {
         this.user_email = profile.user.user_email
         this.responses = []
         this.user_type = type
-        this.tags = profile.tags.filter(t => t.category != 'reveal')
+        this.tags = profile.tags.filter(t => t.tag_category != 'reveal')
 
         // TODO: generalize this for multiple images, and languages
         this.profile_description = ''

backend/package.json

@@ -25,10 +25,11 @@
         "@hapipal/confidence": "^6.0.1",
         "@hapipal/schmervice": "^2.0.0",
         "@hapipal/schwifty": "^6.0.0",
+        "@planetscale/database": "^1.4.0",
         "compute-cosine-similarity": "^1.0.0",
         "dotenv": "^10.0.0",
         "exiting": "^6.0.1",
-        "hapi-swagger": "^14.2.5",
+        "hapi-swagger": "^14.5.5",
         "haversine": "^1.1.1",
         "joi": "^17.4.0",
         "knex": "^0.21.19",

backend/server/index.js

@@ -13,6 +13,7 @@ exports.deployment = async ({ start } = {}) => {
     if (start) {
         await Exiting.createManager(server).start()
         server.log(['start'], `Server started at ${server.info.uri}`)
+        process.title = 'siimee_backend'
         return server
     }
 

backend/server/manifest.js

@@ -1,10 +1,43 @@
-const Dotenv = require('dotenv').config({ path: './server/.env' })
+require('dotenv').config()
 const Confidence = require('@hapipal/confidence')
 const Inert = require('@hapi/inert')
 const Vision = require('@hapi/vision')
 const Schwifty = require('@hapipal/schwifty')
 const HapiSwagger = require('hapi-swagger')
 
+const confs = {
+    local: {
+        db: process.env.DB_NAME,
+        host: process.env.DB_HOST,
+        port: process.env.DB_PORT,
+        ssl: false,
+        user: process.env.DB_USER,
+        pw: process.env.DB_ROOT_PASSWORD,
+    },
+    prod: {
+        db: process.env.PSCALE_DB_NAME,
+        host: process.env.PSCALE_DB_HOST,
+        port: process.env.PSCALE_DB_PORT,
+        branch: process.env.PSCALE_DB_BRANCH,
+        ssl: true,
+        user: process.env.PSCALE_DB_USER,
+        pw: process.env.PSCALE_DB_PASSWORD,
+    },
+    dbFlavor: process.env.DB_TYPE,
+    useLocalDb: () => {
+        return process.env.USE_LOCAL_DB == 'true'
+    },
+}
+
+const _current = {
+    ssl: confs.useLocalDb() ? confs.local.ssl : confs.prod.ssl,
+    host: confs.useLocalDb() ? confs.local.host : confs.prod.host,
+    port: confs.useLocalDb() ? confs.local.port : confs.prod.port,
+    database: confs.useLocalDb() ? confs.local.db : confs.prod.db,
+    user: confs.useLocalDb() ? confs.local.user : confs.prod.user,
+    password: confs.useLocalDb() ? confs.local.pw : confs.prod.pw,
+}
+
 /** Glue manifest as a confidence store */
 module.exports = new Confidence.Store({
     server: {
@@ -70,14 +103,15 @@ module.exports = new Confidence.Store({
                     $base: {
                         migrateOnStart: true,
                         knex: {
-                            client: process.env.DB_TYPE,
+                            client: confs.dbFlavor,
                             useNullAsDefault: true,
                             connection: {
-                                host: process.env.DB_HOST,
-                                user: process.env.DB_USER,
-                                password: process.env.DB_ROOT_PASSWORD,
-                                database: process.env.DB_NAME,
-                                port: process.env.DB_PORT,
+                                database: _current.database,
+                                host: _current.host,
+                                port: _current.port,
+                                ssl: _current.ssl,
+                                user: _current.user,
+                                password: _current.password,
                             },
                         },
                     },

deployment/post-receive

@@ -1,5 +1,4 @@
 #!/bin/bash
-
 REPO="/opt/staging/siimee.git"
 commands=(
     "cd ${REPO}"
@@ -8,9 +7,9 @@ commands=(
     "echo no build needed!"
     "cd ${REPO}/frontend && rm -f ${REPO}/frontend/package-lock.json && npm install"
     "npm run build"
-    "cd ${REPO}/backend && npm run generate && npm run reseed"
+    # "cd ${REPO}/backend && npm run generate && npm run reseed"
+    "pm2 restart siimee_backend -i -1 -n siimee_backend"
 )
-
 steps=(
     "navigate to project…"
     "git checkout…"
@@ -18,9 +17,10 @@ steps=(
     "building backend…"
     "frontend npm install…"
     "building frontend…"
-    "regenerate db data…"
+    # "regenerate db data…"
+    "start-up…"
 )
-SPAN=92
+SPAN=80
 COUNT=0
 hr() {
     printf "\n"

frontend/assets/icons/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.378,3.822H18.267V6.044H14.933V3.822H8.267V6.044H4.933V3.822H3.822A2.228,2.228,0,0,0,1.6,6.044V19.378A2.228,2.228,0,0,0,3.822,21.6H19.378A2.229,2.229,0,0,0,21.6,19.378V6.044a2.229,2.229,0,0,0-2.222-2.222Zm0,15.556H3.822V10.489H19.378ZM7.711,1.6H5.489V5.489H7.711Zm10,0H15.489V5.489h2.222Z" transform="translate(-1.6 -1.6)" fill="#fff"/></svg>

frontend/assets/icons/chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.778" height="25" viewBox="0 0 27.778 25"><path d="M8.056,17.156V8.544H2.778A2.786,2.786,0,0,0,0,11.322v8.333a2.786,2.786,0,0,0,2.778,2.778H4.167V26.6l4.167-4.167h6.944a2.786,2.786,0,0,0,2.778-2.778V17.128a1.328,1.328,0,0,1-.278.03l-9.722,0ZM25,1.6H12.5A2.786,2.786,0,0,0,9.722,4.378V15.489h9.722l4.167,4.167V15.489H25a2.785,2.785,0,0,0,2.778-2.778V4.378A2.786,2.786,0,0,0,25,1.6Z" transform="translate(0 -1.6)" fill="#fff"/></svg>

frontend/assets/icons/close-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.414" height="17.414" viewBox="0 0 17.414 17.414"><g transform="translate(0.707 0.707)"><line x1="16" y1="16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/><line y1="16" x2="16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/></g></svg>

frontend/assets/icons/options-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="5" viewBox="0 0 19 5"><g fill="none" stroke="#fff" stroke-width="1"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="2" fill="none"/></g><g transform="translate(7)" fill="none" stroke="#fff" stroke-width="1"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="2" fill="none"/></g><g transform="translate(14)" fill="none" stroke="#fff" stroke-width="1"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="2" fill="none"/></g></svg>

frontend/package-lock.json

@@ -8,6 +8,7 @@
             "name": "vite-project",
             "version": "0.0.0",
             "dependencies": {
+                "chart.js": "^3.9.1",
                 "joi": "^17.6.0",
                 "pubnub": "^5.0.0",
                 "vue": "^3.2.31",
@@ -1288,6 +1289,11 @@
                 "is-regex": "^1.0.3"
             }
         },
+        "node_modules/chart.js": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+            "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+        },
         "node_modules/chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6918,6 +6924,11 @@
                 "is-regex": "^1.0.3"
             }
         },
+        "chart.js": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+            "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+        },
         "chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
         "test": "ava"
     },
     "dependencies": {
+        "chart.js": "^3.9.1",
         "joi": "^17.6.0",
         "pubnub": "^5.0.0",
         "vue": "^3.2.31",

frontend/src/App.vue

@@ -1,16 +1,11 @@
 <template lang="pug">
 w-app 
-    TopNav(@on-open="openDrawer = !openDrawer")
+    TopNav(@on-open='openDrawer = !openDrawer')
 
-    w-drawer(v-model="openDrawer")
-        SideBar(@updatePid="setPid" :pid="profile.id.value")
-        
-    RouterView(
-        v-if="profile.isLoggedIn"
-        :pid="profile.id.value"
-        @updatePid="setPid"
-        @show-sidebar="showSidebar = !showSidebar"
-    )
+    w-drawer(v-model='openDrawer')
+        SideBar(:pid='profile.id.value' @updatePid='setPid')
+
+    RouterView(@updatePid='setPid')
 </template>
 
 <script>
@@ -22,8 +17,7 @@ import { currentProfile } from './services'
 import { surveyFactory } from './utils'
 
 const DEV_MODE = import.meta.env.VITE_DEV == 'true'
-// const DEV_MODE = false
-const DEV_PID = 45
+const DEV_PID = 46
 
 export default {
     components: { TopNav, SideBar },
@@ -46,6 +40,12 @@ export default {
          * using the login form
          */
         if (DEV_MODE) {
+            console.info('===============================================')
+            console.info('-                   SIIMEE                    -')
+            console.info('-----------------------------------------------')
+            console.info('[Siimee App]: You are in development mode:', DEV_MODE)
+            console.info('[Siimee App]: Starting application...')
+            console.info('-----------------------------------------------')
             await this.setPid(DEV_PID)
         }
     },

frontend/src/components/AspectBar.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 figure.w-flex.column
     figcaption.w-flex.xs12.justify-space-between.align-center
-        p(v-for="label in labels" :key="label").text-upper {{ label }}
-    w-progress(v-model="percentage" size="0.5em" round).mt4
+        p(v-for="(label, index) in labels" :key="label" :class="{ 'main': index === 1 }")  {{ label }}
+    w-progress(v-model="percentage" size="0.5em" round).mb7
 </template>
 
 <script>
@@ -21,3 +21,20 @@ export default {
     data: () => ({}),
 }
 </script>
+<style lang="sass">
+    figure
+        figcaption
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            text-transform: capitalize
+            .main
+                color: #4D9127
+                font-weight: bold
+                text-transform: uppercase
+
+
+        .w-progress
+            background-color: #4C5264
+            .w-progress__progress
+                color: #4D9127
+        
+</style>

frontend/src/components/ChatBubble.vue

@@ -0,0 +1,29 @@
+<template lang="pug">
+.chat-blob.message-wrapper.pa4
+    p.pb1
+        span(v-if='publisherId == profile.id.value') you
+        span(v-else) {{ publisherId }}
+        span @{{ new Date(parseInt(time) / 10000).toLocaleTimeString('en-US') }}
+    p {{ message }}
+</template>
+
+<script>
+import { mixins } from '../utils'
+export default {
+    props: {
+        publisherId: {
+            type: String,
+            required: true,
+        },
+        message: {
+            type: String,
+            required: true,
+        },
+        time: {
+            type: String,
+            required: true,
+        },
+    },
+    mixins: [mixins.profileMixin],
+}
+</script>

frontend/src/components/DynamicTagList.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+.ListControls(style="display:flex; flex-direction:row;")
+    input(type="text" :placeholder='`Add ${placeholder}...`' v-model="newTag")
+    w-button.ma1(@click="addTag") +
+TagList(:tags="mutableTags")
+</template>
+<script>
+import TagList from './TagList.vue'
+export default {
+    name: 'DynamicTagList',
+    components:{
+        TagList,
+    },
+    props:{
+        tags: {
+            required: true,
+            type: Array,
+        },
+        placeholder:{
+            required: true,
+            type: String,
+        }
+    },
+    data() {
+        return {
+            newTag: null,
+            mutableTags: this.tags,
+        }    
+    },
+    methods:{
+        addTag(){
+            if(!this.newTag){
+                console.warn('Type a new tag before adding')
+                return
+            }
+            this.mutableTags.push(this.newTag)
+            this.newTag = ''
+        }
+    }
+}
+</script>

frontend/src/components/Messages.vue

@@ -2,7 +2,7 @@
 .sidebar--messages
   h5.message__title matches
   router-link(
-        :to="`/chats/${match.profile.profile_id}`" 
+        :to="`/chat/${match.profile.profile_id}`" 
         v-for='match in matches' 
         :key='match.profile.profile_id' 
         :class="[pid == match.profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"

frontend/src/components/NamePlate.vue

@@ -1,14 +1,13 @@
 <template lang="pug">
 .name-plate.xs12.w-flex.justify-center
-    section(v-if="pid" :class="{ box: !isList }")
-        router-link(:to="`/profile/${pid}`" disabled)
+    section(:class='{ box: !isList }' v-if='pid')
+        router-link(:to='`/profile/${pid}`' disabled)
             h1.text-capitalize {{ name }}
                 span O
-            p.text-capitalize {{role}}&nbsp;
-                span.text-capitalize(v-if="isList") |&nbsp;
-                    span.text-capitalize location, st
-            p.text-capitalize(v-if="!isList") {{ pronouns }}&nbsp;
-                span.text-capitalize | ethnicity
+            p.text-capitalize {{ role }}&nbsp;
+                span.text-capitalize(v-if='isList')
+                    span.text-capitalize | {{ locale }}
+            p.text-capitalize(v-if='!isList') {{ pronouns }}
 </template>
 
 <script>
@@ -22,6 +21,14 @@ export default {
             type: String,
             required: true,
         },
+        role: {
+            type: String,
+            required: true,
+        },
+        locale: {
+            type: String,
+            required: true,
+        },
         pronouns: {
             type: String,
             required: true,
@@ -32,7 +39,6 @@ export default {
             default: true,
         },
     },
-    data: () => ({}),
 }
 </script>
 <style lang="sass">
@@ -42,12 +48,32 @@ export default {
         flex-direction: column
         align-items: center
         justify-content: center
-        padding: 15px 15px
+        padding: 15px
         min-height: 10vh
         width: 100%
         &.box
-            border: 1px black solid
+            background-color: #D5D5D5
+            border-radius: 6px
             height: 15vw
             width: 15vw
             text-align: center
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            h1
+                font-weight: bold
+                font-size: 1.619em
+                color: #183770
+            p
+                font-weight: bolder
+                font-size: 0.8095em
+                color: #183770
+        h1
+            font-weight: bold
+            font-size: 1.619em
+            color: #F7F5A6
+            text-align: center
+        p
+            font-weight: bolder
+            font-size: 1em
+            color: #F7F5A6
+            text-align: center
 </style>

frontend/src/components/PairingButton.vue

@@ -1,16 +1,28 @@
 <template lang="pug">
 .pairing-button.w-flex.row
-    w-button.xs6.mt4.mb4(@click='pass' bg-color='red' color='white' xl)
-        p.pa4.text-upper pass
-    w-button.xs6.mt4.mb4(@click='pair' bg-color='green' color='mint-green' xl)
-        p.pa4.text-upper pair
+    template(v-if='status == "pristine"')
+        w-button(:class='status' @click='pass')
+            p.pa4.text-upper pass
+        w-button(:class='status' @click='pair')
+            p.pa4.text-upper pair
+    template(v-else-if='status == "pending"')
+        w-button(:class='status')
+            p.pa4.text-upper pending
+    template(v-else)
+        w-button(:class='status')
+            p.pa4.text-upper paired
 </template>
 
 <script>
 export default {
-    props: {},
+    props: {
+        status: {
+            required: false,
+            type: String,
+            default: 'pristine',
+        },
+    },
     emits: ['pair', 'pass'],
-    data: () => ({}),
     methods: {
         pair() {
             this.$emit('pair')
@@ -21,3 +33,29 @@ export default {
     },
 }
 </script>
+
+<style lang="sass">
+.w-button
+    p
+        font-size: 1.6em
+        font-weight: bold
+    &.pristine
+        background-color: #000
+        border: 2px solid #4D9127
+        max-width: 350px
+        width: 50%
+        margin: 11px 0
+        padding: 22px
+    &.pending
+        background-image: linear-gradient(to right, #4C5264, #A8A8A8)
+        min-width: 350px
+        width: 100%
+        margin: 11px 0
+        padding: 22px
+    &.paired
+        background: #8168F8
+        min-width: 350px
+        width: 100%
+        margin: 11px 0
+        padding: 22px
+</style>

frontend/src/components/PairsList.vue

@@ -2,26 +2,30 @@
 section.pairs-list
     article(v-if='pairs.length')
         template(v-for='pair in pairs')
-            router-link.pair.w-flex.align-center.justify-space-around(
-                :to='`/profile/${pair.profile.pid}`'
-                v-if='tabName == "pending"'
-            )
-            router-link.pair.w-flex.align-center.justify-space-around(
-                :to='`/chat/${pair.profile.pid}`'
-                v-else
-            )
-                .dot--icon
-                .avatar
-                .idCard
-                    p {{ pair.profile.name }}
-                    p {{ pair.profile.pid }}
-                    p since: {{ pair.grouping.createdAt }}
-                    p updated: {{ pair.grouping.lastUpdatedAt }}
-                    p paired: {{ pair.grouping.is_paired }}
+            w-flex().align-center.flex-start
+                router-link.pair.w-flex.align-center.flex-start(
+    :to='`/profile/${pair.profile.pid}`')
+                    .dot--icon
+                    .avatar
+                    .idCard
+                        h3 {{ pair.profile.name }} {{ pair.profile.pid }}
+                        p registered nurse
+
+                w-menu( left v-model='showMenu')
+                    template(#activator)
+                        w-button.mr3(@click='showMenu = !showMenu' icon="mdi mdi-dots-horizontal")
+                    w-flex()
+                        router-link(
+                            :to='`/chat/${pair.profile.pid}`')
+                            w-button.mx2(@click='showMenu = false' bg-color="success" tile icon="mdi mdi-forum") Chat
+                        w-button.mx2(@click='showMenu = false' bg-color="info" tile icon="mdi mdi-calendar") Calendar
+                        w-button.mx2(@click='showMenu = false' bg-color="primary" icon="wi-cross")
+
     p(v-else) No {{ tabName }} profiles.
 </template>
 
 <script setup>
+import { ref } from 'vue'
 const props = defineProps({
     pairs: {
         type: [Object, Array],
@@ -32,18 +36,33 @@ const props = defineProps({
         default: 'paired',
     },
 })
+const showMenu = ref(false)
 </script>
 
 <style lang="sass">
 .pairs-list
+    color: #fff
     article
+        font-family: 'Century Gothic'
         .dot--icon
-            width:3vw
-            height:3vw
+            width:12px
+            height:12px
+            margin: 11px
             border-radius:50%
             background-color:#60C3FF
         .avatar
-            width:10vw
-            height:10vw
+            width:40px
+            height:40px
+            margin: 11px
+            border-radius: 6px
             background-color:#D5D5D5
+        .idCard
+            color: #fff
+            margin: 11px
+            h3
+                font-size: 16px
+            p
+                font-size: 14px
+.w-menu--card
+    background-color: #000000 !important
 </style>

frontend/src/components/ProfileCard.vue

@@ -1,21 +1,28 @@
 <template lang="pug">
-w-card.profile-card-list--card.xs12.pa12
+w-card.profile-card-list--card.xs12
     header.xs12.w-flex.column.center
         NamePlate(
+            :ethnicity='card.ethnicity'
             :is-list='isList'
             :is-paired='isPaired'
+            :locale='card.locale'
             :name='card.name'
             :pid='card.pid'
             :pronouns='card.pronouns'
             :role='card.role'
         )
 
-        w-button.text-upper.xs12.pa6(v-if='isPaired && !isList')
-            w-icon.mr1(xl) mdi mdi-chat
-            | start chat
-
         template(v-if='!isList')
-            SummaryBar(:is-tab='isPaired' :tab-content='card.summary')
+            w-button.text-upper.xs12.pa6(v-if='currentTab == 0 && isPaired')
+                w-icon.mr1(xl) mdi mdi-chat
+                | start chat
+
+            SummaryBar(
+                :aspects='aspects'
+                :is-tab='isPaired'
+                :tab-content='card.summary'
+                @tab-change='onTab'
+            )
             TagList(v-if='!isPaired || isList')
 
     article.xs12.w-flex.column.justify-space-between
@@ -28,19 +35,18 @@ w-card.profile-card-list--card.xs12.pa12
         )
 
     footer(v-if='!isList && !isPaired')
-        .pa12
+        .px3
             p {{ card.summary.about.tab }}
         PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
+        w-button.text-upper.xs12.pa6(v-else-if='currentTab != 0')
+            w-icon.mr1(xl) mdi mdi-chat
+            | start chat
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import {
-    updateQueueByProfileId,
-    postMembershipByProfileId,
-    currentProfile,
-} from '../services'
+import { postMembershipByProfileId, currentProfile } from '../services'
 
 import NamePlate from './NamePlate.vue'
 import AspectBar from './AspectBar.vue'
@@ -68,24 +74,33 @@ const props = defineProps({
     },
 })
 
+/**
+ * Track tab state for conditional rendering
+ */
+const currentTab = ref(0)
+const onTab = tabIndex => {
+    if (currentTab.value == tabIndex) return
+    currentTab.value = tabIndex
+}
+
 /**
  * Attempt to pair with target profile
  * Creates a grouping, and a membership
  * for both profileId and targetId
  */
 const onPair = async () => {
-    const group = await postMembershipByProfileId({
-        profileId: currentProfile.id.value,
-        targetId: props.card.pid,
+    currentProfile._loading = true
+    const profileId = currentProfile.id.value
+    const targetId = props.card.pid
+    await postMembershipByProfileId({
+        profileId,
+        targetId,
     })
-    updateQueueByProfileId(currentProfile.id.value, props.card.pid, false)
-    currentProfile.getGroupings()
-    console.warn('created grouping:', group)
+    await currentProfile.updateQueue(profileId, targetId, false)
+    await currentProfile.getGroupings()
+    currentProfile._loading = false
 
     let goToRoute = { name: 'HomeView' }
-    // if (group.membershipMatch.hasMatch) {
-    //     goToRoute = { name: 'PairsView' }
-    // }
     router.push(goToRoute)
 }
 
@@ -94,8 +109,16 @@ const onPair = async () => {
  * and forward back home
  */
 const onPass = async () => {
-    updateQueueByProfileId(currentProfile.id.value, props.card.pid, true)
-    router.push({ name: 'HomeView' })
+    currentProfile._loading = true
+    await currentProfile.updateQueue(
+        currentProfile.id.value,
+        props.card.pid,
+        true,
+    )
+    currentProfile._loading = false
+
+    let goToRoute = { name: 'HomeView' }
+    router.push(goToRoute)
 }
 </script>
 
@@ -103,7 +126,17 @@ const onPass = async () => {
 .profile-card-list--card
     background-color: #000
     color: #fff
+    width: 100%
+    max-width: 450px
+    margin: 11px auto
     header > .w-button
         background-color: #116006
         color: #fff
+    footer
+        margin-bottom: 22px
+        p
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            margin: 11px auto
+            padding: 0 7px
+            line-height: 1.619em
 </style>

frontend/src/components/ProfileCardList.vue

@@ -1,46 +1,21 @@
 <template lang="pug">
 section.profile-card-list.xs12.w-flex.column
-    header.xs12.w-flex 
-        w-select(:items="['one', 'two', 'three']" outline) Label
-    
     article
         ProfileCard.match-layout(
-            v-for="(card, i) in cards"
-            :key="`${card.pid}-${i}`"
-            :card="card"
-            :aspects="aspects"
-            :is-list="true"
+            :aspects='aspects'
+            :card='card'
+            :is-list='true'
+            :key='`${card.pid}-${i}`'
+            v-for='(card, i) in cards'
         )
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-    updateQueueByProfileId,
-    postMembershipByProfileId,
-    currentProfile,
-} from '../services'
+import { cardAspects } from '../entities'
 import ProfileCard from './ProfileCard.vue'
 
-class Aspect {
-    constructor({ name, labels, percentage = 50 }) {
-        this.name = name
-        this.labels = labels
-        this.percentage = percentage
-    }
-}
-const aspects = ref([
-    new Aspect({ name: 'creativity', labels: ['creative', 'methodical'] }),
-    new Aspect({ name: 'dynamism', labels: ['dynamic', 'ordered'] }),
-    new Aspect({ name: 'precision', labels: ['precise', 'resourceful'] }),
-    new Aspect({ name: 'vision', labels: ['visionary', 'implementer'] }),
-    new Aspect({ name: 'focus', labels: ['big picture', 'focused'] }),
-    new Aspect({ name: 'attention', labels: ['guided', 'self-managed'] }),
-])
-
-const router = useRouter()
-const emit = defineEmits(['reload'])
+const aspects = ref(cardAspects)
 
 const props = defineProps({
     cards: {
@@ -51,63 +26,12 @@ const props = defineProps({
                 name: 'Full Name',
                 avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                 metadata: { age: '21', rawMetadata: 'Some Text Here!' },
+                role: 'more filler',
+                ethnicity: 'some background',
             },
         ],
     },
-    pid: {
-        type: Number,
-        default: 9999,
-    },
-    isGrid: {
-        type: Boolean,
-    },
 })
-
-// AHP Button behavior
-const accept = async targetId => {
-    if (targetId == props.pid) return
-    // need to pass these arguments (profileId, targetId, status)
-    // the url structure is
-    // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=false`)
-    // http://localhost:3001/api/profile/38/queue/9/delete?include_profile=true&reinsert=true
-    const profileId = props.pid
-    await updateQueueByProfileId(profileId, targetId, false)
-    const { membershipMatch, groupingName } = await postMembershipByProfileId({
-        profileId,
-        targetId,
-    })
-
-    // Reuse old grouping name if theres a match
-    let channel = groupingName
-    if (membershipMatch?.hasMatch) {
-        channel = membershipMatch.groupings[0].grouping_name
-    }
-    await subscribeToChannel(channel)
-    emit('reload')
-}
-
-const subscribeToChannel = async channelName => {
-    // create a chatter reference from the current profile
-    const chatter = currentProfile.chatter
-
-    /**
-     * publish a new message to the chatter with the channel and the message & title is optional
-     */
-    // You MUST send chatter channels as an array in an object
-    chatter.subscribe({ channels: [channelName] })
-    const res = await chatter.publish(channelName, {
-        title: 'New Message',
-        description: `This is the checking to see if we are subscribed to the ${channelName} channel!`,
-    })
-    // PubNub response will be a timecode of when the message was published
-    //router.push({ path: `/chat/${pid}` })
-}
-
-const pass = targetId => {
-    if (targetId == props.pid) return
-    updateQueueByProfileId(props.pid, targetId, true)
-    emit('reload')
-}
 </script>
 
 <style lang="sass">

frontend/src/components/SpiderChart.vue

@@ -0,0 +1,91 @@
+<template lang="pug">
+.spider-chart.w-flex.pt6.pb6
+    canvas#spider-chart-canvas
+</template>
+
+<script setup>
+import { Chart, registerables } from 'chart.js'
+import { onMounted } from 'vue'
+
+const props = defineProps({
+    profileName: {
+        required: true,
+        type: String,
+    },
+    profileData: {
+        required: true,
+        type: Object,
+    },
+    targetData: {
+        required: true,
+        type: Object,
+    },
+    labels: {
+        required: true,
+        type: Array,
+    },
+})
+
+const chartStyleDefaults = {
+    borderWidth: '1px',
+    fill: true,
+}
+const profile = {
+    label: props.profileName,
+    data: props.profileData,
+    backgroundColor: 'rgba(242, 205, 92, 0.3)',
+    borderColor: '#F2CD5C',
+    ...chartStyleDefaults,
+}
+const role = {
+    label: 'Role',
+    data: props.targetData,
+    backgroundColor: 'rgba(3, 136, 166, 0.30)',
+    borderColor: '#0388A6',
+    ...chartStyleDefaults,
+}
+
+const options = {
+    plugins: {
+        legend: {
+            position: 'bottom',
+            labels: {
+                color: '#FFFFFF',
+                boxWidth: 10,
+            },
+        },
+    },
+    scales: {
+        r: {
+            angleLines: {
+                color: '#FFFFFF',
+            },
+            grid: {
+                color: '#EAF0F4',
+                lineWidth: 1,
+            },
+            pointLabels: {
+                color: '#FFFFFF',
+            },
+            suggestedMax: 6,
+            ticks: {
+                display: false,
+                stepSize: 1.6,
+            },
+        },
+    },
+}
+
+onMounted(() => {
+    Chart.register(...registerables)
+    const ctx = document.getElementById('spider-chart-canvas')
+    new Chart(ctx, {
+        type: 'radar',
+        data: {
+            labels: props.labels,
+            datasets: [profile, role],
+        },
+        options,
+    })
+})
+</script>

frontend/src/components/SummaryBar.vue

@@ -1,51 +1,74 @@
 <template lang="pug">
 section.w-flex.column.pb5
     nav.fill-width.w-flex.column.justify-space-between
-
         // Tabbed Layout
-        w-tabs(v-if="isTab" :items="Object.keys(tabContent)" center fill-bar)
-            template(#item-title="{ item }")
+        w-tabs(
+            :items='Object.keys(tabContent)'
+            @input='onTabChanged'
+            center
+            fill-bar
+            v-if='isTab'
+        )
+            template(#item-title='{ item }')
                 .w-flex.column.justify-start
-                    p(v-if="tabContent[item].matchPerc") {{ tabContent[item].matchPerc }}%
+                    p(v-if='tabContent[item].matchPerc') {{ tabContent[item].matchPerc }}%
                     p(v-else) &nbsp;
                     p {{ item }}
             // About Tab
-            template(#item-content.1="{ item }")
+            template(#item-content.1='{ item }')
                 .tab--about
                     p {{ tabContent[item].tab }}
                     br
                     p {{ tabContent[item].tab }}
                     br
                     hr
-            
+
             // Passion Tab
-            template(#item-content.2="{ item }")
+            template(#item-content.2='{ item }')
                 .tab--passion
                     p {{ tabContent[item].tab }}
+                    SpiderChart(
+                        :labels='aspects.map(label => label.name)'
+                        :profile-data='profileScore'
+                        :target-data='targetScore'
+                        profile-name='lucy'
+                        v-if='isTab'
+                    )
 
             // Aspirations Tab
-            template(#item-content.3="{ item }")
+            template(#item-content.3='{ item }')
                 .tab--aspirations
                     p {{ tabContent[item].tab }}
 
             // Skills Tab
-            template(#item-content.4="{ item }")
+            template(#item-content.4='{ item }')
                 .tab--skills
                     p {{ tabContent[item].tab }}
 
         // Untabbed Layout
         ul.w-flex.row.justify-space-between(v-else)
-            template(v-for="(item, index) in Object.keys(tabContent)" :key="index")
-                li.w-flex.row(v-if="item !== 'about'")
-                    w-icon(xl).mr1 mdi mdi-heart
+            template(
+                :key='index'
+                v-for='(item, index) in Object.keys(tabContent)'
+            )
+                li.w-flex.row(v-if='item !== "about"')
+                    w-icon.mr1(xl) mdi mdi-heart
                     .w-flex.column.justify-start
-                        p {{ tabContent[item].matchPerc }}%
-                        p {{ item }}
+                        p 
+                            span {{ tabContent[item].matchPerc }}%
+                        p.text-capitalize {{ item }}
 </template>
 
 <script>
+import SpiderChart from './SpiderChart.vue'
+
 export default {
+    components: { SpiderChart },
     props: {
+        aspects: {
+            required: true,
+            type: Array,
+        },
         tabContent: {
             required: true,
             type: Object,
@@ -61,5 +84,29 @@ export default {
             default: true,
         },
     },
+    emits: ['tab-change'],
+    data: () => ({
+        profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9],
+        targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8],
+    }),
+    methods: {
+        onTabChanged(tabs) {
+            this.$emit('tab-change', tabs)
+        },
+    },
 }
 </script>
+<style lang="sass">
+    section
+        font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+        ul
+            margin: 11px 0
+            li
+                margin: 0 7px
+                font-size: .8em
+                p > span
+                    font-weight: bold
+                    font-size: 1em
+            li:not(:last-child)
+                border-right: 1px solid #fff
+</style>

frontend/src/components/TagList.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
-section.w-flex.row.pb5
-    w-tag(v-for="tag in tags" color="pink-light1" bg-color="pink-light5").w-flex.grow.mr12.pa12
-        w-icon(v-if="icon" class="mr1" sm) {{ icon.family }} {{ icon.family }}-{{ icon.shape }}
+section.w-flex.row.wrap.pb5.justify-space-between
+    w-tag(v-for='tag in tags')
         p {{ tag }}
 </template>
 
@@ -9,12 +8,15 @@ section.w-flex.row.pb5
 export default {
     props: {
         tags: {
-            required: true,
+            required: false,
             type: Array,
             default: () => [
-                'tag one',
-                'tag another thing',
-                'tag something long',
+                'California RN License',
+                'BSN',
+                'Patient Happiness',
+                'ACLS',
+                'Strong Communication',
+                'High Volume',
             ],
         },
         icon: {
@@ -24,3 +26,17 @@ export default {
     data: () => ({}),
 }
 </script>
+
+<style lang="sass">
+section
+    min-height: 100%
+    .w-tag
+        background-color: #F7F5A6
+        margin: 3px 0
+        p
+            color: #183770
+            padding: 5px
+            font-size: 12px
+            font-weight: bolder
+            text-align: center
+</style>

frontend/src/components/onboarding/AccountType.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+w-card.w-flex.column
+    p {Name}, let's get started on your profile while we verify your account
+    w-button.search-type(@click='handleSubmit("Recruiter")')
+        w-icon.mr1 mdi mdi-account-multiple
+        | CANDIDATES
+    w-button.search-type(@click='handleSubmit("Jobseeker")')
+        w-icon.mr1 mdi mdi-bookmark-box-multiple
+        | JOBS
+</template>
+
+<script>
+export default {
+    name: 'AccountType',
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+        aspectQuestions: {
+            required: false,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        question:
+            "{Name}, let's get started on your profile while we verify your account.",
+    }),
+    methods: {
+        handleSubmit(accountType) {
+            let payload = {
+                key: 'AccountType',
+                question: this.question,
+                answer: accountType,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/Aspects.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+w-card.aspects.w-flex.column
+    form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
+        QuestionResponse(
+            :question='question'
+            @updated='updateRadio'
+            v-for='question in aspectQuestions'
+        )
+        w-button.ma1.grow(bg-color='success' type='submit')
+            w-icon.mr1 wi-check
+            | SUBMIT ANSWERS
+</template>
+
+<script>
+import QuestionResponse from './QuestionResponse.vue'
+const answered = [null, null, null, null, null, null]
+
+export default {
+    name: 'Aspects',
+    components: {
+        QuestionResponse,
+    },
+    props: {
+        aspectQuestions: {
+            required: true,
+            type: Array,
+        },
+    },
+    emits: ['handle-submit', 'update-answers'],
+    async created() {
+        this.aspectQuestions.forEach((q, i) => {
+            console.log(`Aspect #${i}: ${JSON.stringify(q)}`)
+        })
+    },
+    methods: {
+        updateRadio(onRadioSelect) {
+            answered[onRadioSelect.id - 1] = onRadioSelect.answer
+            this.$emit('update-answers', {
+                key: 'Aspects',
+                question: {
+                    response_key_prompt: 'aspects',
+                },
+                answer: answered,
+            })
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/CompanyID.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+w-card.company-id.w-flex.column
+    h3 Company ID
+    p {{ question }}
+    input(
+        placeholder='Get this from your admin.'
+        type='text'
+        v-model='companyID'
+    )
+    w-button.next-btn(@click='handleSubmit') Next
+</template>
+
+<script>
+export default {
+    name: 'CompanyID',
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        companyID: null,
+        question: 'PLEASE ENTER YOUR COMPANY ID#:',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'CompanyID',
+                question: this.question,
+                answer: this.companyID,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/FormDropdown.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+.role
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    w-select.mt4(:items='items' placeholder='i am' v-model='selection')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+
+<script>
+export default {
+    name: 'FormDropdown',
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        selection: null,
+    }),
+    computed: {
+        items() {
+            return this.question.responses.map(res => ({ label: res }))
+        },
+    },
+    methods: {
+        handleSubmit() {
+            if (!this.selection) {
+                console.warn('Please select a role.')
+                return
+            }
+            let payload = {
+                question: this.question,
+                answer: this.selection,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/FormInput.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+.form-input
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    input(placeholder='i am a little teapot' type='text' v-model='input')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+<script>
+export default {
+    name: 'FormInput',
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        input: null,
+    }),
+    methods: {
+        handleSubmit() {
+            if(this.question.response_key_prompt === 'password') {
+                this.$emit('update-answers') // no password collection
+                return
+            }
+
+            let payload = {
+                question: this.question,
+                answer: this.input,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/FormTags.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+.form-tags
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    DynamicTagList(:placeholder='"a tag"' :tags='tags')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+<script>
+import DynamicTagList from '../DynamicTagList.vue'
+
+export default {
+    name: 'FormTags',
+    components: {
+        DynamicTagList,
+    },
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        tags: [],
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                question: this.question,
+                answer: this.tags,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/Interests.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+w-card.interests.w-flex.column
+    h3 Interests
+    p {{ question }}
+    w-button.next-btn(@click='handleSubmit') NEXT
+</template>
+
+<script>
+import DynamicTagList from '../DynamicTagList.vue'
+
+export default {
+    name: 'Interests',
+    components: {
+        DynamicTagList,
+    },
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        interests: [],
+        question:
+            'What are some interests you would like in your next candidates?',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'Interests',
+                question: this.question,
+                answer: this.interests,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/LicensesAndCertifications.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+w-card.licenses-certifications.w-flex.column
+    h3 Licenses & Certifications
+    p {{ question }}
+    DynamicTagList(
+        :placeholder='"requirement"'
+        :tags='licensesAndCertifications'
+    )
+    w-button.next-btn(@click='handleSubmit') NEXT
+</template>
+
+<script>
+import DynamicTagList from '../DynamicTagList.vue'
+
+export default {
+    name: 'LicensesAndCertifications',
+    components: {
+        DynamicTagList,
+    },
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        licensesAndCertifications: [],
+        question: 'Are there any licenses and certification requirements?',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'LicensesAndCertifications',
+                question: this.question,
+                answer: this.licensesAndCertifications,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/Location.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+w-card.location.w-flex.column
+    h3 Location
+    p {{ question }}
+    DynamicTagList(:placeholder='"location"' :tags='locations')
+    w-button.next-btn(@click='handleSubmit') NEXT
+</template>
+
+<script>
+import DynamicTagList from '../DynamicTagList.vue'
+export default {
+    name: 'Location',
+    components: {
+        DynamicTagList,
+    },
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        locations: [],
+        question: 'Where would you like to select your candidates from?',
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'Location',
+                question: this.question,
+                answer: this.locations,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
+    },
+}
+</script>

frontend/src/components/QuestionResponse.vue → frontend/src/components/onboarding/QuestionResponse.vue

@@ -1,10 +1,9 @@
 <template lang="pug">
-.question.pa12
-    header.w-flex.row.justify-space-between.pb6
-        label {{question.question}}
+w-card.question
+    p {{question.question}} 
     section.radio-buttons.w-flex.row.justify-space-between
-        h3(v-for="label in question.labels") {{label}}
-    w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems")
+        p(v-for="label in question.labels") {{label}}
+    w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
 </template>
 
 <script>

frontend/src/components/onboarding/Role.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+w-card.role.w-flex.column
+    h3 Actively Searching
+    p {{ question }}
+    w-select.mt4(:items='items' placeholder='i am' v-model='selectedRole')
+    w-button.next-btn(@click='handleSubmit') NEXT
+</template>
+
+<script>
+export default {
+    name: 'Role',
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+    },
+    data: () => ({
+        items: [{ label: 'RECRUITER' }, { label: 'HIRING MANAGER' }],
+        question: 'What is your role at your company?',
+        selectedRole: null,
+    }),
+    methods: {
+        handleSubmit() {
+            if (!this.selectedRole) {
+                console.warn('Please select a role.')
+                return
+            }
+            let payload = {
+                key: 'Role',
+                question: this.question,
+                answer: this.selectedRole,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/Skills.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+w-card.skills.w-flex.column
+    h3 Recruiter
+    p {{ question }}
+    DynamicTagList(:placeholder='"skill"' :tags='skills')
+    w-button.next-btn(@click='handleSubmit') NEXT
+</template>
+
+<script>
+import DynamicTagList from '../DynamicTagList.vue'
+
+export default {
+    name: 'Skills',
+    components: {
+        DynamicTagList,
+    },
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['go-to-step', 'update-answers'],
+    data: () => ({
+        question: 'What are some skills you are looking for at your company?',
+        skills: [],
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                key: 'Skills',
+                question: this.question,
+                answer: this.skills,
+            }
+            this.$emit('update-answers', payload)
+            this.$emit('go-to-step', this.currentStep + 1)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/Splash.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+w-flex.column
+    w-image.splash-logo(
+        :height='300'
+        :src='`/assets/logos/siimee_logo.jpg`'
+        :width='300'
+    )
+    w-button.ma1.grow.next-btn(
+        :height='50'
+        :width='315'
+        @click='this.$emit("go-to-step", currentStep + 1)'
+        bg-color='success'
+        shadow
+        text
+        xl
+    ) GET STARTED
+</template>
+
+<script>
+export default {
+    name: 'Splash',
+    props: {
+        currentStep: {
+            required: true,
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['update-answers'],
+    methods: {
+        handleSubmit() {
+            this.$emit('update-answers', null)
+        },
+    },
+}
+</script>
+
+<style lang="sass">
+.w-button
+    &.next-btn
+        background-color: #5BA626
+</style>

frontend/src/components/onboarding/index.js

@@ -0,0 +1,27 @@
+import Splash from './Splash.vue'
+import AccountType from './AccountType.vue'
+import CompanyID from './CompanyID.vue'
+import Role from './Role.vue'
+import Skills from './Skills.vue'
+import Location from './Location.vue'
+import Interests from './Interests.vue'
+import LicensesAndCertifications from './LicensesAndCertifications.vue'
+import Aspects from './Aspects.vue'
+import FormInput from './FormInput.vue'
+import FormTags from './FormTags.vue'
+import FormDropdown from './FormDropdown.vue'
+
+export default {
+    Splash,
+    AccountType,
+    CompanyID,
+    Role,
+    Skills,
+    Location,
+    Interests,
+    LicensesAndCertifications,
+    Aspects,
+    FormDropdown,
+    FormTags,
+    FormInput,
+}

frontend/src/entities/card/card.js

@@ -1,7 +1,7 @@
 /** @module card/card */
 
 const DEFAULT_ABOUT =
-    'A really really really really really. Really really really really really really really really really really really long bio.'
+    'Hello! My name is L.L. and I am a nurse from New York. I have been in the healthcare industry for over 6 years.'
 
 class SummaryGroup {
     constructor() {
@@ -46,6 +46,32 @@ class Aspect {
         this.percentage = percentage
     }
 }
+const cardAspects = [
+    new Aspect({
+        name: 'creativity',
+        labels: ['creative', 'methodical'],
+    }),
+    new Aspect({
+        name: 'dynamism',
+        labels: ['dynamic', 'ordered'],
+    }),
+    new Aspect({
+        name: 'precision',
+        labels: ['precise', 'resourceful'],
+    }),
+    new Aspect({
+        name: 'vision',
+        labels: ['visionary', 'implementer'],
+    }),
+    new Aspect({
+        name: 'focus',
+        labels: ['big picture', 'focused'],
+    }),
+    new Aspect({
+        name: 'attention',
+        labels: ['guided', 'self-managed'],
+    }),
+]
 
 /**
  * Class representing a profile card
@@ -54,52 +80,28 @@ class Aspect {
  * card facade
  */
 class Card {
-    constructor({ pid, name, role }) {
+    constructor({ pid, name, email, role }) {
         this.pid = pid
 
         /**  Fields */
         this.name = name
 
-        this.role = role ? role : null
+        this.role = role ? role : 'registered nurse'
 
         this.presence = null
         this.urgency = null
         this.pronouns = 'she/her/hers'
-        this.ethinicity = null
-        this.locale = null
-        this.email = null
+        this.ethinicity = 'something'
+        this.locale = 'los angeles ca'
+        this.email = email
 
         this.images = []
         this.tags = []
+        this.reveal = {}
 
         this.summary = new SummaryGroup()
 
-        this.aspects = [
-            new Aspect({
-                name: 'creativity',
-                labels: ['creative', 'methodical'],
-            }),
-            new Aspect({
-                name: 'dynamism',
-                labels: ['dynamic', 'ordered'],
-            }),
-            new Aspect({
-                name: 'precision',
-                labels: ['precise', 'resourceful'],
-            }),
-            new Aspect({
-                name: 'vision',
-                labels: ['visionary', 'implementer'],
-            }),
-            new Aspect({
-                name: 'focus',
-                labels: ['big picture', 'focused'],
-            }),
-            new Aspect({
-                name: 'attention',
-                labels: ['guided', 'self-managed'],
-            }),
-        ]
+        this.aspects = cardAspects
 
         return this
     }
@@ -109,6 +111,7 @@ const makeCardFromProfile = profile => {
     const c = new Card({
         pid: profile.profile_id,
         name: profile.user_name,
+        email: profile.user_email,
         role: profile?.profile_prefs?.role?.val,
     })
 
@@ -128,4 +131,4 @@ const makeCardFromProfile = profile => {
     }
     return c
 }
-export { Card, makeCardFromProfile }
+export { Card, makeCardFromProfile, cardAspects }

frontend/src/entities/grouping/grouping.js

@@ -1,7 +1,9 @@
 /** @module entities/grouping */
 
+import { ref } from 'vue'
 import { _baseRecord } from '../index.js'
 import { groupingSchema } from './grouping.schema.js'
+import { revealProfileInfo } from '../../services/profile.service.js'
 
 /** Class representing a grouping */
 class Grouping extends _baseRecord {
@@ -13,14 +15,55 @@ class Grouping extends _baseRecord {
      */
     constructor({ ...membership }) {
         super()
+        this._loading = ref(true)
 
         this.type = this.constructor.name.toLowerCase()
+        this.tags = []
 
         /** Pass destructured data to the module system */
         Object.assign(this, membership)
 
         return this
     }
+    get revealed() {
+        const revealed = {}
+        this.tags
+            .filter(assoc => assoc.tag.tag_category == 'reveal')
+            .forEach(assoc => {
+                if (!revealed[assoc.profile_id]) {
+                    revealed[assoc.profile_id] = []
+                }
+                revealed[assoc.profile_id].push({
+                    description: assoc.tag.tag_description,
+                })
+            })
+        return revealed
+    }
+    get participants() {
+        return [this.profile.profile_id]
+    }
+    async reveal(profileId, tagId) {
+        console.log('[Grouping Entity log]: Attempting to reveal...', tagId)
+        this._loading.value = true
+        try {
+            const revealed = await revealProfileInfo(
+                this.grouping_id,
+                profileId,
+                tagId,
+            )
+            if (!revealed.tags) {
+                throw `[Grouping Entity error]: Could not reveal ${tagId} for ${profileId}`
+            }
+            // Overwrite with new revealed tags completely
+            const toKeep = this.tags.filter(
+                assoc => assoc.profile_id != profileId,
+            )
+            this.tags = [...toKeep, ...revealed.tags]
+        } catch (err) {
+            console.error(err)
+        }
+        this._loading.value = false
+    }
     /**
      * validate this record
      * @return {boolean} is it valid or not?

frontend/src/entities/grouping/grouping.schema.js

@@ -10,11 +10,15 @@ import Joi from 'joi'
 const groupingSchema = {
     type: 'object',
     properties: Joi.object().keys({
+        /** for vue reactivity */
+        _loading: Joi.object(),
+
         /** _baseRecord fields */
         createdAt: Joi.string(),
         _id: Joi.string(),
         lastUpdatedAt: Joi.string(),
         type: Joi.string(),
+        tags: Joi.array(),
 
         /** our fields */
         grouping_id: Joi.number().required(),

frontend/src/entities/profile/profile.js

@@ -36,7 +36,7 @@ class Profile extends _baseRecord {
          * TODO: Send validate.error to logging error handler
          */
         if (validate.error) {
-            console.error(`error: ${validate.error} - ${this.type} validation`)
+            console.error(`[Profile Entitiy error]: ${validate.error}`)
         }
 
         /** validate(this) always returns something so force it to a bool */

frontend/src/entities/survey/survey.js

@@ -2,24 +2,42 @@
 import { _baseRecord } from '../index.js'
 import { surveySchema } from './survey.schema.js'
 
+const SCORED = [1, 2, 3, 4, 5, 6]
+const _isScored = id => SCORED.includes(id)
+const _makeCategoryFriendly = responseCategory => {
+    const labels = responseCategory.split('_vs_')
+    labels.forEach((a, i) => {
+        if (a.indexOf('_') == -1) return
+        labels[i] = a.split('_').join(' ')
+    })
+    return labels
+}
+const _formatAspectQuestions = steps => {
+    return steps
+        .map(q => {
+            if (!_isScored(q.response_key_id)) return null
+            return {
+                id: q.response_key_id,
+                question: q.response_key_prompt,
+                labels: _makeCategoryFriendly(q.response_key_category),
+                answer: null,
+            }
+        })
+        .filter(step => step != null)
+}
+
 class Survey extends _baseRecord {
-    constructor(questionSteps, roles) {
+    constructor(questionSteps) {
         super()
 
         this.type = this.constructor.name.toLowerCase()
 
         /**  Fields */
         this.steps = [...questionSteps] // ! required
-        this.roleTree = roles
-
-        return this
-    }
-    setRoleResponses(position) {
-        const roleStep = this.steps.filter(
-            step => step.response_key_prompt == 'role',
-        )[0]
-        roleStep.responses = this.roleTree[position]
+        this.aspectQuestions = _formatAspectQuestions(this.steps)
+        console.log('this.aspectQuestions: ', JSON.stringify(this.aspectQuestions))
     }
+
     isValid() {
         const validate = surveySchema.validate(this)
 

frontend/src/main.js

@@ -8,7 +8,8 @@ import components from './wave'
 import App from './App.vue'
 import MainNav from './components/MainNav.vue'
 
-const DEV = import.meta.env.VITE_DEV == 'true'
+// const DEV = import.meta.env.VITE_DEV == 'true'
+const DEV = false
 
 /**
  * Check between route changes for login/timeout

frontend/src/router/guards.js

@@ -1,17 +1,29 @@
 import { currentProfile } from '../services'
 
+const DEV_MODE = import.meta.env.VITE_DEV == 'true'
 
-const checkLoginStatus = (destination, nextCb) => {
-    if(!currentProfile.isLoggedIn || !currentProfile.isComplete) {
-        console.warn(`profile: ${currentProfile.id.value} | login: ${currentProfile.isLoggedIn} | completed: ${currentProfile.isComplete}`)
+async function log(to) {
+    if (DEV_MODE) {
+        if (!currentProfile.isLoggedIn || !currentProfile.isComplete) {
+            console.info(
+                `[Guard Status debug]: Profile: ${currentProfile.id.value} | Login: ${currentProfile.isLoggedIn} | Complete: ${currentProfile.isComplete}`,
+            )
+        }
+        console.info('[Guard Status debug]: being routed to:', to.fullPath)
     }
-    if (
+}
+
+const checkLoginStatus = (destination, nextCb) => {
+    log(destination)
+    if (DEV_MODE) {
+        nextCb()
+    } else if (
         destination.meta.requiresCompleteProfile &&
         !currentProfile.isLoggedIn &&
-        !currentProfile.isComplete 
+        !currentProfile.isComplete
     ) {
-        nextCb('survey')
-    } else if(
+        nextCb('onboarding')
+    } else if (
         destination.meta.requiresCompleteProfile &&
         destination.meta.requiresAuth &&
         !currentProfile.isLoggedIn
@@ -22,4 +34,4 @@ const checkLoginStatus = (destination, nextCb) => {
     }
 }
 
-export { checkLoginStatus }
+export { checkLoginStatus }

frontend/src/router/index.js

@@ -69,6 +69,18 @@ const routes = [
         name: `LoginView`,
         meta: { requiresAuth: false, requiresCompleteProfile: false },
     },
+    {
+        path: `/settings`,
+        component: HomeView,
+        name: `SettingsView`,
+        meta: { requiresAuth: true, requiresCompleteProfile: true },
+    },
+    {
+        path: `/search`,
+        component: HomeView,
+        name: `SearchView`,
+        meta: { requiresAuth: true, requiresCompleteProfile: true },
+    },
 ]
 
 const router = createRouter({

frontend/src/services/chat.service.js

@@ -101,6 +101,31 @@ class Chatter {
         this.subscribe({ channels: this._subscriptions })
         return this.subscriptions
     }
+    async getHistory(channel, count = 10) {
+        console.warn('[chatter] grabbing history for channel:', channel)
+        let pastMessages = null
+        try {
+            pastMessages = await this.provider.fetchMessages({
+                channels: [channel],
+                count: count,
+                includeMessageType: true,
+                includeUUID: true,
+                includeMeta: true,
+                includeMessageActions: false,
+            })
+        } catch (error) {
+            console.error('[chatter]', error)
+        }
+        const channelHistory = pastMessages.channels[channel]
+        console.log('channelHistory :>> ', channelHistory)
+        return channelHistory
+            ? channelHistory.map(msg => ({
+                  publisher: msg.uuid,
+                  message: new ChatMessage(msg.message.description),
+                  timetoken: msg.timetoken,
+              }))
+            : []
+    }
     /**
      * Send a message to a channel
      * example = new ChatMessage({ title: 'example', description: 'ni' })
@@ -118,10 +143,9 @@ class Chatter {
     /**
      * Subscribe to a channels
      * Facade so we can hide provider specific methods
-     * @param {array} channels
+     * @param {array} channels grouping name
      */
     subscribe({ channels }) {
-        console.log('subscribing to:', channels)
         _providerMethods.subscribe({ channels })
     }
     /**
@@ -131,8 +155,10 @@ class Chatter {
     _listenFor({ listeners }) {
         _providerMethods.listen(listeners)
     }
-    //  step 2: build the this.subscriptions array from the this.groupings object
-    // fetch all groupings for this profile and then store them in the chatter groupings object for reference
+    /**
+     * Get all groupings for this profile and
+     * then store them as subscriptions
+     */
     async _setupAllChannels(groupings) {
         groupings.forEach(grouping => {
             this._subscriptions.push(grouping.grouping_name)

frontend/src/services/grouping.service.js

@@ -1,5 +1,5 @@
-import { db } from '../utils/db'
-import { Grouping, Profile } from '../entities'
+import { db } from '../utils/db.js'
+import { Grouping, Profile } from '../entities/index.js'
 
 /**
  * Get Memberships associated with a single Profile from the database and
@@ -9,15 +9,28 @@ import { Grouping, Profile } from '../entities'
  * @returns {array} instantiated Profile objects (see: /entites/profile)
  */
 const fetchMembershipsByProfileId = async profileId => {
-    const membershipsForProfileId = await db.get(`/membership/${profileId}`)
     const validGroupingInstances = []
-    for (let membership of membershipsForProfileId) {
-        const grouping = new Grouping(membership)
-        if (grouping.isValid()) {
-            // Reformat incoming profile data into Profile entity
-            grouping.profile = new Profile(grouping.profile)
-            validGroupingInstances.push(grouping)
+    let memberships
+    try {
+        memberships = await db.get(`/membership/${profileId}`)
+        for (let membership of memberships) {
+            const grouping = new Grouping(membership)
+            if (grouping.isValid()) {
+                // Reformat incoming profile data into Profile entity
+                grouping.profile = new Profile(grouping.profile)
+                const targetTags = await db.get(
+                    `/profile/${grouping.profile.profile_id}/tags/${grouping.grouping_id}`,
+                )
+                const profileTags = await db.get(
+                    `/profile/${profileId}/tags/${grouping.grouping_id}`,
+                )
+                grouping.tags = [...targetTags, ...profileTags]
+                grouping._loading.value = false
+                validGroupingInstances.push(grouping)
+            }
         }
+    } catch (error) {
+        console.error(`[Grouping Service]: ${error}\ngroupings: ${memberships}`)
     }
     return validGroupingInstances
 }
@@ -46,4 +59,16 @@ const postMembershipByProfileId = async ({
     )
     return { membershipMatch, groupingName: membership.grouping_name }
 }
-export { fetchMembershipsByProfileId, postMembershipByProfileId }
+
+const revealProfileInfo = async (membershipId, profileId, tagId) => {
+    const revealed = await db.post(
+        `/membership/${membershipId}/reveal?profile=${profileId}&tag=${tagId}`,
+    )
+    return revealed
+}
+
+export {
+    fetchMembershipsByProfileId,
+    postMembershipByProfileId,
+    revealProfileInfo,
+}

frontend/src/services/index.js

@@ -1,9 +1,8 @@
-export * from './user.service'
-export * from './profile.service'
-export * from './grouping.service'
-export * from './survey.service'
-export * from './queue.service'
-export * from './chat.service'
-export * from './notification.service'
-export * from './login.service'
-
+export * from './user.service.js'
+export * from './profile.service.js'
+export * from './grouping.service.js'
+export * from './survey.service.js'
+export * from './queue.service.js'
+export * from './chat.service.js'
+export * from './notification.service.js'
+export * from './login.service.js'

frontend/src/services/login.service.js

@@ -1,11 +1,14 @@
 import { ref } from 'vue'
 import {
+    fetchQueueByProfileId,
+    updateQueueByProfileId,
     fetchMembershipsByProfileId,
     fetchResponsesByProfileId,
+    fetchProfileByProfileId,
     Chatter,
     StonkAlert,
-} from '../services'
-import { surveyFactory } from '../utils'
+} from '../services/index.js'
+import { surveyFactory } from '../utils/index.js'
 
 /**
  * Logged in profile state manager
@@ -15,10 +18,13 @@ class Login {
     constructor() {
         this._loading = ref(true)
 
+        // Profile entity instance for self
+        this._profile = null
         // Make reactive with vue observer
         this.id = ref(null)
 
         this.groupings = []
+        this.queue = []
         this.responses = []
         this.tags = []
 
@@ -72,22 +78,41 @@ class Login {
      */
     async login(profileId, cb) {
         this._loading.value = true
+        // First check if profile exists
+        console.warn('[Login Service warn]: Logging in:', profileId)
 
-        console.warn('logging in:', profileId)
-        this.id.value = parseInt(profileId)
+        // TODO: You can probably use this call to get responses, groupings and tags
+        this._profile = await fetchProfileByProfileId(profileId)
+        this.id.value = this._profile.profile_id
 
+        if (!this.id.value) {
+            console.error(
+                `[Login Service error]: No profile found for profile_id: ${profileId}`,
+            )
+        }
+
+        // Then grab groupings and queue for display
         await this.getGroupings()
+        await this.getQueue()
 
-        await this.setupChatter()
+        // Then hook into chat services
+        try {
+            await this.setupChatter()
+            console.warn(
+                `[Login Service warn]: ${profileId} subscribed to:`,
+                this.chatter.subscriptions,
+            )
+        } catch (err) {
+            console.error(err)
+        }
+        // Finally setup notifications and sse handling
         this.setupToaster(cb)
-
+        console.warn('[Login Service warn]: Login SUCCESSFUL')
         this._loading.value = false
-        console.warn('logged in:', this.isLoggedIn)
-        console.warn('subscribed to:', this.chatter.subscriptions)
         return this.id.value
     }
     logout() {
-        console.warn('logging out:', this.id.value)
+        console.warn('[Login Service warn]: Logging out:', this.id.value)
         this.id.value = null
         if (this.toaster) {
             this.toaster.stop()
@@ -102,7 +127,7 @@ class Login {
             const tags = []
             this.setTags(tags)
         } catch (err) {
-            console.error(err)
+            console.error(`[Login Service]: ${err}`)
         }
     }
     setTags(tags) {
@@ -114,7 +139,7 @@ class Login {
             const responseList = await fetchResponsesByProfileId(this.id.value)
             this.setResponses(responseList)
         } catch (err) {
-            console.error(err)
+            console.error(`[Login Service]: ${err}`)
         }
     }
     setResponses(responses) {
@@ -125,9 +150,17 @@ class Login {
         try {
             this.groupings = await fetchMembershipsByProfileId(this.id.value)
         } catch (err) {
-            console.error(err)
+            console.error(`[Login Service]: ${err}`)
         }
     }
+
+    async getQueue() {
+        this.queue = await fetchQueueByProfileId(this.id.value)
+    }
+    async updateQueue(profileId, targetId, reinsert) {
+        this.queue = await updateQueueByProfileId(profileId, targetId, reinsert)
+    }
+
     /**
      * For push notifications and chat
      */
@@ -143,4 +176,4 @@ class Login {
 
 const currentProfile = new Login()
 
-export { currentProfile }
+export { currentProfile, Login }

frontend/src/services/notification.service.js

@@ -1,4 +1,4 @@
-import { remote } from '../utils/db'
+import { remote } from '../utils/db.js'
 
 /**
  * Base notifier class

frontend/src/services/profile.service.js

@@ -1,5 +1,5 @@
-import { db } from '../utils/db'
-import { Profile } from '../entities/profile'
+import { db } from '../utils/db.js'
+import { Profile } from '../entities/profile/profile.js'
 
 /**
  * Get Profiles associated with a single user from the database and
@@ -26,8 +26,28 @@ const createProfileForUserId = async (userId, responses) => {
 }
 
 const fetchProfileByProfileId = async profileId => {
-    const profile = await db.get(`/profile/${profileId}`)
+    let profile
+    try {
+        const profileData = await db.get(`/profile/${profileId}`)
+        profile = new Profile(profileData)
+        if (!profile.isValid()) {
+            throw '[Profile Service error]: Invalid or incomplete profile returned.'
+        }
+    } catch (err) {
+        console.error(err)
+    }
     return profile
 }
 
-export { fetchProfilesByUserId, fetchProfileByProfileId, createProfileForUserId }
+const revealProfileInfo = async (groupingId, profileId, tagId) => {
+    const revealed = await db.post(
+        `/membership/${groupingId}/reveal?profile_id=${profileId}&tag_id=${tagId}`,
+    )
+    return revealed
+}
+export {
+    fetchProfilesByUserId,
+    fetchProfileByProfileId,
+    createProfileForUserId,
+    revealProfileInfo,
+}

frontend/src/services/queue.service.js

@@ -1,5 +1,5 @@
-import { db } from '../utils/db'
-import { Profile } from '../entities'
+import { db } from '../utils/db.js'
+import { Profile } from '../entities/index.js'
 
 /**
  * Get a match queue of profiles
@@ -8,16 +8,14 @@ import { Profile } from '../entities'
  */
 const fetchQueueByProfileId = async profileId => {
     let queue
-
     try {
         queue = await db.get(`/profile/${profileId}/queue?include_profile=true`)
         if (!queue?.length) {
-            throw 'Could not retrieve match queue. Please take the survey and rescore.'
+            throw '[Queue Service]: Could not retrieve match queue.\nHave you taken the survey and scored this profile?'
         }
     } catch (err) {
         console.error(err)
     }
-
     return queue
         ? queue.map(profileData => {
               return new Profile({ email: 'fixme@gmail.com', ...profileData })
@@ -33,9 +31,17 @@ const fetchQueueByProfileId = async profileId => {
  * @returns {array} profiles
  */
 const updateQueueByProfileId = async (profileId, targetId, reinsert) => {
-    const updateQueue = await db.patch(
-        `/profile/${profileId}/queue/${targetId}/delete?include_profile=true&reinsert=${reinsert}`,
-    )
+    let updateQueue
+    try {
+        updateQueue = await db.patch(
+            `/profile/${profileId}/queue/${targetId}/delete?include_profile=true&reinsert=${reinsert}`,
+        )
+        if (!updateQueue?.length) {
+            throw '[Queue Service]: Could not update match queue.'
+        }
+    } catch (err) {
+        console.error(err)
+    }
     return updateQueue
         ? updateQueue.map(profileData => {
               return new Profile({ email: 'fixme@gmail.com', ...profileData })

frontend/src/services/survey.service.js

@@ -1,4 +1,4 @@
-import { db } from '../utils/db'
+import { db } from '../utils/db.js'
 
 /**
  * Get Survey for first time profile creation from the database and
@@ -8,12 +8,18 @@ import { db } from '../utils/db'
  * @returns {array} instantiated Profile objects (see: /entites/profile)
  */
 const fetchQuestions = async () => {
-    const questions = await db.get(`/survey/questions`)
-    // Add responses to match the format from the survery factory
-    return questions.map(q => {
-        q.responses = !q.responses ? [] : q.responses
-        return q
-    })
+    let withResponses
+    try {
+        const questions = await db.get(`/survey/questions`)
+        // Add responses to match the format from the survery factory
+        withResponses = questions.map(q => {
+            q.responses = !q.responses ? [] : q.responses
+            return q
+        })
+    } catch (error) {
+        console.error(`[Survey Service]: ${error}\nquestions: ${withResponses}`)
+    }
+    return withResponses
 }
 
 const updateSurveyByProfileId = async (surveyResponses, profileId) => {

frontend/src/services/user.service.js

@@ -1,4 +1,4 @@
-import { db } from '../utils/db'
+import { db } from '../utils/db.js'
 
 /**
  * Signup a new user
@@ -8,7 +8,7 @@ const signupUser = async user => {
     const payload = {
         user_name: user.name,
         user_email: user.email,
-        is_poster: user.seeking == 'position' ? 0 : 1
+        is_poster: user.seeking == 'position' ? 0 : 1,
     }
     return await db.post(`/user/signup`, payload)
 }

frontend/src/utils/db.js

@@ -21,53 +21,51 @@ const headerTemplate = {
 class Connector {
     constructor() {
         this.apiPrefix = prefix
+        this._verbs = {
+            get: 'GET',
+            post: 'POST',
+            patch: 'PATCH',
+        }
     }
-    async get(endpoint) {
+    _makeHeader({ method, payload }) {
         const header = { ...headerTemplate }
-        header.method = 'GET'
-        try {
-            // console.log(`${remote}${endpoint}`)
-            let res = await fetch(`${remote}${endpoint}`, header)
-            if (!res.ok) {
-                throw Error(res.statusText)
-            }
-            const jsonRes = await res.json()
-            return jsonRes.data
-        } catch (error) {
-            console.error(error)
+        header.method = method
+        if (payload) {
+            header.body = JSON.stringify(payload)
         }
+        return header
     }
-    async post(endpoint, payload = {}) {
-        const header = { ...headerTemplate }
-        header.method = 'POST'
-        header.body = JSON.stringify(payload)
+    async _tryFetch({ endpoint, header }) {
         try {
-            let res = await fetch(`${remote}${endpoint}`, header)
+            const res = await fetch(`${remote}${endpoint}`, header)
             if (!res.ok) {
                 throw Error(res.statusText)
             }
             const jsonRes = await res.json()
             return jsonRes.data
         } catch (error) {
-            console.error(error)
+            console.error(`[API Util]: ${error}\nroute:`, endpoint)
         }
     }
+    async get(endpoint) {
+        return await this._tryFetch({
+            endpoint,
+            header: this._makeHeader({ method: this._verbs.get }),
+        })
+    }
+    async post(endpoint, payload = {}) {
+        return await this._tryFetch({
+            endpoint,
+            header: this._makeHeader({ method: this._verbs.post, payload }),
+        })
+    }
     async patch(endpoint, payload = {}) {
-        const header = { ...headerTemplate }
-        header.method = 'PATCH'
-        header.body = JSON.stringify(payload)
-        try {
-            let res = await fetch(`${remote}${endpoint}`, header)
-            if (!res.ok) {
-                throw Error(res.statusText)
-            }
-            const jsonRes = await res.json()
-            return jsonRes.data
-        } catch (error) {
-            console.error(error)
-        }
+        return await this._tryFetch({
+            endpoint,
+            header: this._makeHeader({ method: this._verbs.patch, payload }),
+        })
     }
-    
+
     /** !: DEV ONLY */
     // async removeAll() { }
 }

frontend/src/utils/index.js

@@ -1,18 +1,39 @@
 import Joi from 'joi'
+import { SurveyFactory } from './survey.js'
+import { possible } from './lang.js'
+import { pidMixin, profileMixin } from './mixins.js'
 
-import { Connector } from './db'
-import { SurveyFactory } from './survey'
-import { possible } from './lang'
-import { pidMixin, cardMixin } from './mixins'
-
-import { possibleZipcodes } from '../../../backend/db/data-generator/config.json'
-
-const api = new Connector('kittens')
+// This will NOT work until ES2022 gets assert in browsers
+// import config from '../../../backend/db/data-generator/config.json' assert { type: 'json' }
+// TODO: Remove this when assert works in browsers
+const possibleZipcodes = [
+    '90012',
+    '90040',
+    '90058',
+    '90064',
+    '90065',
+    '90240',
+    '90274',
+    '90278',
+    '90280',
+    '90290',
+    '90291',
+    '90292',
+    '90293',
+    '90840',
+    '91001',
+    '91011',
+    '91030',
+    '91201',
+    '91399',
+    '91401',
+    '97075',
+]
 
 const validatorMapping = {
     'input-string': Joi.string(),
     'tag-cloud': Joi.string(),
-    'checklist': Joi.string(),
+    checklist: Joi.string(),
     'input-slide': Joi.string(),
 }
 
@@ -20,11 +41,9 @@ const makeKebob = input => {
     return input.toLowerCase().split(' ').join('-')
 }
 
-const surveyFactory = new SurveyFactory(possible['usa'])
-
-
-const mixins = { pidMixin, cardMixin }
+const surveyFactory = new SurveyFactory()
 
+const mixins = { pidMixin, profileMixin }
 
 const randomNumber = max => {
     return Math.floor(Math.random() * max) < 1
@@ -75,32 +94,42 @@ const randomMedia = () => {
 
 const randomSurveyResponses = count => {
     const surveyResponses = [
-        { id: null, "idOrPrompt": "email", "val": `${randomEmail()}` },
-        { id: null, "idOrPrompt": "name", "val": `john test-${count}` },
-        { id: 99, "idOrPrompt": 15, "val": randomValFrom(possible.usa.pronouns) },
-        { id: null, "idOrPrompt": "seeking", "val": Math.random() > 0.2 ? possible.usa.seeking[0] : possible.usa.seeking[1] },
-        { id: 99, "idOrPrompt": 13, "val": randomValFrom(possible.usa.urgency) },
-        { id: null, "idOrPrompt": "experience", "val": randomValFrom(possible.usa.experience) },
-        { id: 99, "idOrPrompt": 14, "val": "swe" },
-        { id: 99, "idOrPrompt": 10, "val": randomValFrom(possible.usa.duration) },
-        { id: 99, "idOrPrompt": 9, "val": randomValFrom(possible.usa.language) },
-        { id: 99, "idOrPrompt": 11, "val": randomValFrom(possible.usa.presence) },
-        { id: 99, "idOrPrompt": 7, "val": `${randomValFrom(possibleZipcodes)}` },
-        { id: 99, "idOrPrompt": 16, "val": `${randomNumber(55)}` },
-        { id: 99, "idOrPrompt": 12, "val": "this is a test of the survey signup" },
-        { id: 99, "idOrPrompt": 8, "val": randomMedia() },
-        { id: 99, "idOrPrompt": 1, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99, "idOrPrompt": 2, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99, "idOrPrompt": 3, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99, "idOrPrompt": 4, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99, "idOrPrompt": 5, "val": `${randomNumber(3) - randomNumber(3)}` },
-        { id: 99, "idOrPrompt": 6, "val": `${randomNumber(3) - randomNumber(3)}` }
+        { id: null, idOrPrompt: 'email', val: `${randomEmail()}` },
+        { id: null, idOrPrompt: 'name', val: `john test-${count}` },
+        { id: 99, idOrPrompt: 15, val: randomValFrom(possible.usa.pronouns) },
+        {
+            id: null,
+            idOrPrompt: 'seeking',
+            val:
+                Math.random() > 0.2
+                    ? possible.usa.seeking[0]
+                    : possible.usa.seeking[1],
+        },
+        { id: 99, idOrPrompt: 13, val: randomValFrom(possible.usa.urgency) },
+        {
+            id: null,
+            idOrPrompt: 'experience',
+            val: randomValFrom(possible.usa.experience),
+        },
+        { id: 99, idOrPrompt: 14, val: 'swe' },
+        { id: 99, idOrPrompt: 10, val: randomValFrom(possible.usa.duration) },
+        { id: 99, idOrPrompt: 9, val: randomValFrom(possible.usa.language) },
+        { id: 99, idOrPrompt: 11, val: randomValFrom(possible.usa.presence) },
+        { id: 99, idOrPrompt: 7, val: `${randomValFrom(possibleZipcodes)}` },
+        { id: 99, idOrPrompt: 16, val: `${randomNumber(55)}` },
+        { id: 99, idOrPrompt: 12, val: 'this is a test of the survey signup' },
+        { id: 99, idOrPrompt: 8, val: randomMedia() },
+        { id: 99, idOrPrompt: 1, val: `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, idOrPrompt: 2, val: `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, idOrPrompt: 3, val: `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, idOrPrompt: 4, val: `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, idOrPrompt: 5, val: `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99, idOrPrompt: 6, val: `${randomNumber(3) - randomNumber(3)}` },
     ]
     return surveyResponses
 }
 
 export {
-    api,
     validatorMapping,
     surveyFactory,
     makeKebob,
@@ -110,5 +139,5 @@ export {
     randomValFrom,
     randomMedia,
     randomName,
-    randomEmail
+    randomEmail,
 }

frontend/src/utils/lang.js

@@ -3,21 +3,24 @@ const DELIMITER = '_'
 // TODO: Combine these two
 const allSteps = {
     usa: {
-        email: 'email',
+        splash: 'splash',
         name: 'name',
-        pronouns: 'pronouns',
-        seeking: 'seeking',
-        urgency: 'urgency',
-        experience: 'experience',
-        roles: 'role',
-        duration: 'duration',
-        presence: 'presence',
-        language: 'language',
+        email: 'email',
+        password: 'password',
+        // pronouns: 'pronouns',
+        // seeking: 'seeking',
+        // urgency: 'urgency',
+        // experience: 'experience',
+        // roles: 'role',
+        // duration: 'duration',
+        // presence: 'presence',
+        // language: 'language',
         zipcode: 'zipcode',
-        distance: 'distance',
+        // distance: 'distance',
         blurb: 'blurb',
         image: 'image',
-    }
+        aspects: 'aspects'
+    },
 }
 
 const aspectResponses = {
@@ -29,7 +32,7 @@ const aspectResponses = {
         mostly: 'mostly',
         often: 'often',
         everytime: 'everytime',
-    }
+    },
 }
 
 const possible = {}
@@ -37,17 +40,7 @@ possible.usa = {
     email: [],
     name: [],
     seeking: ['position', 'candidate'],
-    language: [
-        'javascript',
-        'python',
-        'c#',
-        'c++',
-        'go',
-        'java',
-        'ruby',
-        'html',
-        'css',
-    ],
+    language: ['english', 'spanish'],
     // key 13
     urgency: [
         'actively_looking',
@@ -55,27 +48,11 @@ possible.usa = {
         'casually_browsing',
     ],
     // key 11
-    presence: [
-        'remote',
-        'in_person',
-        'hybrid',
-        'flexible'
-    ],
+    presence: ['remote', 'in_person', 'hybrid', 'flexible'],
     // key 10
-    duration: [
-        'full-time',
-        'part-time',
-        'contract',
-        'flexible',
-    ],
+    duration: ['full-time', 'part-time', 'contract', 'flexible'],
     // Experience and roles concat, key: 14
-    experience: [
-        'associate',
-        'junior',
-        'mid-level',
-        'senior',
-        'staff',
-    ],
+    experience: ['associate', 'junior', 'mid-level', 'senior', 'staff'],
     roles: {
         type: [
             'back-end',
@@ -96,21 +73,12 @@ possible.usa = {
             'manager',
             'technician',
         ],
-        candidate: [
-            'hiring_manager',
-            'recruiter',
-        ]
+        candidate: ['hiring_manager', 'recruiter'],
     },
-    pronouns: [
-        'she/her',
-        'she/they',
-        'he/him',
-        'he/they',
-        'they/them',
-    ],
+    pronouns: ['she/her', 'she/they', 'he/him', 'he/they', 'they/them'],
     image: [],
     zipcode: [],
-    blurb: []
+    blurb: [],
 }
 
-export { allSteps, aspectResponses, possible }
+export { allSteps, aspectResponses, possible, DELIMITER }

frontend/src/utils/mixins.js

@@ -1,3 +1,5 @@
+import { currentProfile } from '../services'
+
 const pidMixin = {
     props: {
         pid: {
@@ -8,26 +10,17 @@ const pidMixin = {
     },
 }
 
-const cardMixin = {
-    data: () => ({
-        cards: [],
-        matches: [],
-        loading: true,
-    }),
-    watch: {
-        /** Fetch the queue if pid changes */
-        pid() {
-            this.getCards()
+const profileMixin = {
+    computed: {
+        profile() {
+            return currentProfile
         },
-    },
-    async created() {
-        await this.getCards()
-    },
-    methods: {
-        _reformat(data, mapCb) {
-            return data.map(mapCb)
+        isLoading() {
+            return currentProfile.isLoading
+        },
+        isLoggedIn() {
+            return currentProfile.isLoggedIn
         },
     },
 }
-
-export { pidMixin, cardMixin }
+export { pidMixin, profileMixin }

frontend/src/utils/survey.js

@@ -1,45 +1,95 @@
-import { Survey } from '../entities'
-import { fetchQuestions } from '../services'
+import { Survey } from '../entities/index.js'
+import { fetchQuestions } from '../services/index.js'
+import { possible } from './lang.js'
+
+const promptToComponent = {
+    splash: 'Splash',
+    name: 'FormInput',
+    email: 'FormInput',
+    password: 'FormInput',
+    zipcode: 'FormInput',
+    // seeking: 'FormDropdown',
+    // urgency: 'FormDropdown',
+    // presence: 'FormDropdown',
+    // duration: 'FormDropdown',
+    // experience: 'FormTags',
+    // pronouns: 'FormDropdown',
+    // language: 'FormDropdown',
+    image: 'FormInput',
+    // distance: 'FormInput',
+    blurb: 'FormInput',
+    aspects: 'Aspects'
+}
+/**
+ * Make a step from match or step information
+ * @param {object} match
+ * @param {object} step
+ * @returns something like a response_key with possible responses
+ */
+const formatStep = (match, step) => {
+    const responsesByCategory = possible['usa']
+    const responseKey = {
+        response_key_id: match ? match.response_key_id : null,
+        response_key_category: match ? match.response_key_category : 'profile',
+        response_key_prompt: match ? match.response_key_prompt : step,
+        response_key_description: match ? match.response_key_description : null,
+    }
+    return {
+        ...responseKey,
+        responses: responsesByCategory[step] ? responsesByCategory[step] : [],
+    }
+}
+const associateWithComponent = responseKeyLike => {
+    let component = promptToComponent[responseKeyLike.response_key_prompt]
+    return { ...responseKeyLike, component }
+}
+
+const hasMatch = (step, inArray) => {
+    return inArray.find(q => q.response_key_prompt == step)
+}
 
 class SurveyFactory {
-    constructor(responses) {
-        this.responsesByCategory = responses
+    constructor() {
         this.questionsFromDb = []
     }
     _setSteps(langFile) {
-        const stepsToProcess = [...Object.values(langFile) ]
+        const stepsToProcess = [...Object.values(langFile)]
         const seenIds = []
         const stepsInCommon = stepsToProcess.map(step => {
             // Match question to step
-            const match = this.questionsFromDb.filter(q => q.response_key_prompt == step)[0]
-            if(match) { seenIds.push(match.response_key_id) }
-            return {
-                response_key_id: match ? match.response_key_id: null,
-                response_key_category: match ? match.response_key_category: 'profile',
-                response_key_prompt: match ? match.response_key_prompt: step,
-                response_key_description: match ? match.response_key_description: null,
-                responses: this.responsesByCategory[step] ? this.responsesByCategory[step] : [] 
+            const match = hasMatch(step, this.questionsFromDb)
+            if (match) {
+                seenIds.push(match.response_key_id)
             }
+            const responseKeyLike = formatStep(match, step)
+            const withComponent = associateWithComponent(responseKeyLike)
+            console.log('withComponent :>> ', withComponent)
+            return withComponent
         })
-        const unseen = this.questionsFromDb.filter(q => !seenIds.includes(q.response_key_id))
+        // temporary extra condition in filter 
+        let unseen = this.questionsFromDb.filter(
+            q => !seenIds.includes(q.response_key_id) && [1,2,3,4,5,6].includes(q.response_key_id),
+        )
         return [...stepsInCommon, ...unseen]
     }
     async getQuestions() {
         try {
             this.questionsFromDb = await fetchQuestions()
             return this.questionsFromDb
-        } catch(err) {
+        } catch (err) {
             console.error(err)
         }
     }
     async createSurvey(langFile, roleTree) {
-        if(!this.questionsFromDb.length) {
+        if (!this.questionsFromDb.length) {
             const res = await this.getQuestions()
-            console.warn(`Attempted to create a survey before getting questions: retrieved ${res.length} questions`)
+            console.warn(
+                `Attempted to create a survey before getting questions: retrieved ${res.length} questions`,
+            )
         }
         const steps = this._setSteps(langFile)
         return new Survey(steps, roleTree)
     }
 }
 
-export { SurveyFactory }
+export { SurveyFactory }

frontend/src/views/ChatView.vue

@@ -1,27 +1,42 @@
 <template lang="pug">
 main.view--chat
-    header.mb6(v-if='profile')
-        h3 chatting with: {{ target.profile_id }}
-        p subscriptions: {{ profile.chatter.subscriptions }}
+    header.mb6(v-if='profile && grouping')
+        h3 chatting with:
+        p {{ target.profile_id }} | {{ grouping.profile.user_name }} | {{ grouping.profile.user_email }}
 
-    article(v-if='profile.isLoggedIn && target')
-        ul#messages.w-flex.column
-            template(v-for='chatmessage in messages')
-                li(
-                    :class='[{ me: chatmessage.publisher == profile.id.value }, chatmessage.publisher]'
-                    v-if='chatmessage.message.description'
-                )
-                    .message-wrapper.pa4
-                        p.pb1
-                            span(
-                                v-if='chatmessage.publisher == profile.id.value'
-                            ) you
-                            span(v-else) {{ chatmessage.publisher }}
-                            span @{{ new Date(parseInt(chatmessage.timetoken) / 10000).toLocaleTimeString('en-US') }}
-                        p {{ chatmessage.message.description }}
+        h3 logged in as:
+        p {{ profile.id }} | {{ profile._profile.user_name }} | {{ profile._profile.user_email }}
+        //- p subscriptions: {{ profile.chatter.subscriptions }}
+        hr
 
-    p(v-else-if='profile.isLoggedIn && !target') No match found between profile {{ $route.params.pid }} and {{ profile.id }}...
-    w-spinner(bounce v-else)
+        .w-flex.column(v-if='!grouping._loading')
+            .w-flex.row
+                button(@click='reveal(7)') reveal my name
+                button(@click='reveal(8)') reveal my email
+            p you revealed: 
+                span(v-if="grouping.revealed[profile.id]") {{ grouping.revealed }}
+            p they revealed:
+                span(v-if="grouping.revealed[grouping.profile.profile_id]") {{ grouping.revealed[grouping.profile.profile_id] }}
+
+    article
+        template(v-if='isLoading')
+            w-spinner(bounce)
+
+        template(v-if='!isLoading && target')
+            ul#messages.w-flex.column
+                template(v-for='chatmessage in messages')
+                    li(
+                        :class='[{ me: chatmessage.publisher == profile.id.value }, chatmessage.publisher]'
+                        v-if='chatmessage.message && chatmessage.message.description'
+                    )
+                        ChatBubble(
+                            :message='chatmessage.message.description'
+                            :publisher-id='chatmessage.publisher'
+                            :time='chatmessage.timetoken'
+                        )
+
+        template(v-else-if='!isLoading && !target')
+            p No match found between profile {{ $route.params.pid }} and {{ profile.id }}...
 
     footer.w-flex.row
         w-input(@keyup.enter='sendMessage' outline v-model='toSend')
@@ -31,31 +46,44 @@ main.view--chat
     MainNav
 </template>
 
-<script>
+<script lang="js">
+import ChatBubble from '../components/ChatBubble.vue'
 import { currentProfile } from '../services'
+import { mixins } from '../utils'
 
 export default {
     name: 'ProfileView',
+    components: { ChatBubble },
+    mixins: [mixins.profileMixin],
     data: () => ({
         target: null,
         toSend: '',
         messages: [],
-        openDrawer: null,
+        grouping: null,
     }),
-    computed: {
-        profile: () => currentProfile,
-    },
     watch: {
-        profile() {
+        async profile() {
             this.loadTargetProfile()
+            currentProfile._loading.value = true
+            this.messages = await currentProfile.chatter.getHistory(this.grouping.grouping_name)
             currentProfile.chatter.setOnMessage(this._onMessage)
+            currentProfile._loading.value = false
         },
     },
-    created() {
+    async created() {
         this.loadTargetProfile()
+        currentProfile._loading.value = true
+        this.grouping = this.getGrouping()
+        this.messages = await currentProfile.chatter.getHistory(this.grouping.grouping_name)
+        console.log('this.messages :>> ', this.messages)
         currentProfile.chatter.setOnMessage(this._onMessage)
+        currentProfile._loading.value = false
     },
     methods: {
+        async reveal(tagId) {
+            const grouping = this.getGrouping()
+            await grouping.reveal(currentProfile.id.value, tagId)
+        },
         /**
          * Pubnub message callback fires when message event
          * is detected. We define is HERE because we need the

frontend/src/views/HomeView.vue

@@ -1,54 +1,41 @@
 <template lang="pug">
 main.view--home
-    
-    article(v-if='cards.length && !loading')
-        ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')
+    article.w-flex.column.align-center
+        template(v-if='isLoading')
+            w-spinner(bounce)
 
-    p(v-else-if='cards.length === 0') No profiles in match_queue.
-    w-spinner(v-else bounce)
-
-    footer
-        w-form
-            w-input.mb2(
-                inner-icon-left='mdi mdi-account'
-                label='Full Name'
-                label-position='inside'
-                outline
-            )
-            w-input.mb2(
-                inner-icon-left='mdi mdi-mail'
-                label='E-mail'
-                label-position='inside'
-                outline
-            )
-            w-input.mb2(
-                inner-icon-left='mdi mdi-lock'
-                label='Password'
-                label-position='inside'
-                outline
-                type='password'
-            )
+        template(v-else-if='!isLoading && cards.length > 0')
+            ProfileCardList(:cards='cards')
 
+        template(v-else-if='cards.length === 0')
+            p No profiles in match_queue.
     MainNav
 </template>
 
 <script>
 import 'wave-ui/dist/wave-ui.css'
 import ProfileCardList from '../components/ProfileCardList.vue'
-import TagList from '../components/TagList.vue'
 import AspectBar from '../components/AspectBar.vue'
 import SummaryBar from '../components/SummaryBar.vue'
 import PairingButton from '../components/PairingButton.vue'
 
 import { Card } from '../entities'
 
-import {
-    fetchQueueByProfileId,
-    fetchMembershipsByProfileId,
-    currentProfile,
-} from '../services'
+import { currentProfile } from '../services'
 import { mixins } from '../utils'
 
+const notificationOpts = {
+    message: null,
+    timeout: 6000,
+    bgColor: 'white',
+    color: 'success',
+    dismiss: false,
+    shadow: true,
+    round: true,
+    sm: true,
+    icon: 'wi-star',
+}
+
 /** Callback used to format incoming into card */
 const convertToCard = profile => {
     if (profile.type !== 'profile') {
@@ -64,67 +51,25 @@ const convertToCard = profile => {
     })
 }
 
-const converGroupingToCard = grouping => {
-    if (grouping.type !== 'grouping') {
-        console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
-    }
-    if (!grouping.profile.isValid()) {
-        console.warn(`Profile in ${grouping} is not a valid profile.`)
-    }
-    return new Card({
-        pid: grouping.profile.profile_id,
-        name: grouping.profile.user_name,
-        avatar: grouping.profile.profile_media[0],
-    })
-}
-
 export default {
     name: 'HomeView',
     components: {
         ProfileCardList,
         AspectBar,
-        TagList,
         SummaryBar,
         PairingButton,
     },
-    mixins: [mixins.pidMixin, mixins.cardMixin],
-    methods: {
-        /** Gets called from cardMixin */
-        async getCards() {
-            this.loading = true
-            try {
-                const queueList = await fetchQueueByProfileId(this.pid)
-                this.cards = this._reformat(queueList, convertToCard)
-                const matchList = await fetchMembershipsByProfileId(this.pid)
-                this.matches = this._reformat(matchList, converGroupingToCard)
-            } catch (err) {
-                console.error(err)
-            }
-            this.loading = false
+    mixins: [mixins.profileMixin],
+    computed: {
+        cards() {
+            return currentProfile.queue.map(qProfile => convertToCard(qProfile))
         },
+    },
+    methods: {
         // this can be placed in utils/notification.js
-
         notify(payload) {
-            this.$waveui.notify({
-                message: payload,
-                timeout: 6000,
-                bgColor: 'white',
-                color: 'success',
-                dismiss: false,
-                shadow: true,
-                round: true,
-                sm: true,
-                icon: 'wi-star',
-            })
-        },
-        //  a way to send a message to a user for development purposes and testing
-        async chat() {
-            const chatter = currentProfile.chatter
-            const res = await chatter.publish(chatter.subscriptions[0], {
-                title: 'New Message',
-                description: 'This is a new message',
-            })
-            this.notify(res)
+            notificationOpts.message = payload
+            this.$waveui.notify(notificationOpts)
         },
     },
 }

frontend/src/views/MessagesView.vue

@@ -1,36 +1,24 @@
 <template lang="pug">
 main.view--messages
-    article(v-if="!loading")
-        PairsList(:pairs="inboxes")
+    article
+        template(v-if='!loading')
+            w-spinner(bounce)
 
-    w-spinner(v-else bounce)
+        template(v-else)
+            PairsList(:pairs='inboxes')
     MainNav
 </template>
 
 <script>
 import PairsList from '../components/PairsList.vue'
-
-import { fetchMembershipsByProfileId } from '../services'
 import { mixins } from '../utils'
 
 export default {
     name: 'MessagesView',
     components: { PairsList },
-    mixins: [mixins.pidMixin, mixins.cardMixin],
+    mixins: [mixins.pidMixin, mixins.profileMixin],
     data: () => ({
         inboxes: ['x'],
     }),
-    methods: {
-        /** Gets called from cardMixin */
-        async getCards() {
-            this.loading = true
-            try {
-                this.inboxes = await fetchMembershipsByProfileId(this.pid)
-            } catch (err) {
-                console.error(err)
-            }
-            this.loading = false
-        },
-    },
 }
-</script>
+</script>

frontend/src/views/OnboardingView.vue

@@ -1,70 +1,157 @@
 <template lang="pug">
 main.view--onboarding
-    article
-        form(@submit.prevent="onSubmit").questionnaire
-            QuestionResponse(v-for="question in questions" :question="question" @updated="onUpdate")
-            w-button.ma1.grow(type="submit" bg-color="success")
-                w-icon.mr1 wi-check
-                | SUBMIT ANSWERS
-    MainNav
+    article(
+        style='display: flex; flex-direction: column; align-items: center'
+        v-if='survey'
+    )
+        .step(v-for='(step, i) in survey.steps')
+            component(
+                :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
+                :is='step.component'
+                :question='step'
+                @handle-submit='onSubmit'
+                @update-answers='updateAnswers'
+                v-if='step && currentStep == i'
+            )
 </template>
 
 <script>
 import { surveyFactory } from '@/utils'
-import { allSteps, possible } from '@/utils/lang'
-
-import QuestionResponse from '../components/QuestionResponse.vue'
-const SCORED = [1, 2, 3, 4, 5, 6]
-const _isScored = id => SCORED.includes(id)
-
-const _makeCategoryFriendly = responseCategory => {
-    const labels = responseCategory.split('_vs_')
-    labels.forEach((a, i) => {
-        if (a.indexOf('_') == -1) return
-        labels[i] = a.split('_').join(' ')
-    })
-    return labels
-}
-
-const _formatSteps = steps => {
-    return steps
-        .map(q => {
-            if (!_isScored(q.response_key_id)) return null
-            return {
-                id: q.response_key_id,
-                question: q.response_key_prompt,
-                labels: _makeCategoryFriendly(q.response_key_category),
-            }
-        })
-        .filter(step => step != null)
-}
+import { allSteps } from '@/utils/lang'
+import stepViews from '@/components/onboarding'
 
+// import savesurveybyprfileid - call it on submit
+// paginate to save every steps answers
 export default {
     name: 'OnboardingView',
-    components: { QuestionResponse },
-    data: () => {
-        return {
-            validSurvey: null,
-            questions: [],
-            answered: {},
-        }
+    components: {
+        ...stepViews,
     },
+    data: () => ({
+        answered: {},
+        aspectQuestions: [],
+        currentStep: 0,
+        survey: null,
+    }),
     async created() {
-        const survey = await surveyFactory.createSurvey(
-            allSteps['usa'],
-            possible['usa']['roles'],
-        )
-        this.questions = _formatSteps(survey.steps)
+        this.survey = await surveyFactory.createSurvey(allSteps['usa'])
     },
     methods: {
-        onUpdate(payload) {
-            this.answered[payload.id] = payload
-        },
         onSubmit() {
-            Object.values(this.answered).forEach(ans =>
-                console.log(ans.question, ans.answer),
-            )
+            console.log(JSON.stringify(this.answered))
+        },
+        goToStep(num) {
+            this.currentStep = num
+        },
+        updateAnswers(payload) {
+            // null payload is passed on splash page
+            if (payload) {
+                const k = payload.question.response_key_prompt
+                this.answered[k] = payload.answer
+                console.log(`${k}:`, this.answered[k])
+                console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
+                if (k === 'aspects') return
+            }
+            this.goToStep(this.currentStep + 1)
         },
     },
 }
 </script>
+
+<style lang="sass">
+.view--onboarding
+    width: 100%
+    max-width: 428px
+    background-color: #fff
+    color: #1F2024
+    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif
+    margin: 0 auto
+
+    article
+        height: 100vh
+
+    .w-button
+            display: flex
+            width: 315px
+            height: 60px
+            border-radius: 6
+            background-color: #D5D5D5
+            color: #1F2024
+            margin: 11px auto
+            font-weight: bold
+            font-size: 16px
+            text-transform: uppercase
+            &.next-btn
+                border-radius: 6px
+                background-color: #5BA626
+                color: #1F2024
+                height: 50px
+                width: 315px
+                font-size: 18px
+                padding: 7px
+
+    .w-card
+        background-color: #1F2024
+        justify-content: center
+        align-items: center
+        width: 100%
+
+
+        h3
+            text-transform: uppercase
+            text-align: center
+            font-size: 28px
+            font-weight: bold
+            color: white
+            margin-top: 88px
+
+        p
+            color: white
+            font-size: 18px
+            padding: 11px
+            text-align: center
+            margin: 22px auto
+            font-weight: bold
+
+        input
+            display: flex
+            width: 315px
+            height: 60px
+            padding: 11px
+            border-radius: 6
+            background-color: #D5D5D5
+            color: #1F2024
+            margin: 11px auto
+            font-weight: bold
+            font-size: 16px
+
+            .w-select
+                padding: 11px
+                color: #1F2024
+
+            .search-type
+                color: #1F2024
+                height: 50px
+
+        &.question
+            p
+                font-size: 18px
+                text-align: left
+                margin: 7px auto
+                font-weight: normal
+            section
+                p
+                    margin: 0
+                    font-weight: bold
+                    text-transform: capitalize
+    .w-radio__input
+
+        &.primary
+            background-color: #FFFFFF
+            border: #BCC5D3 1px solid
+
+    .w-card__content
+        .w-button
+            height: 50px
+            background-color: #5BA626
+</style>

frontend/src/views/PairsView.vue

@@ -1,17 +1,19 @@
 <template lang="pug">
 main.view--pairs
-    article(v-if='isLoggedIn')
-        w-tabs(:items='tabs' fill-bar)
-            template(#item-title='{ item }')
-                span.green {{ item.title }}
-            //- pending tab
-            template(#item-content.1='{ item }')
-                PairsList(:pairs='pending' tab-name='pending')
-            //- paired tab 
-            template(#item-content.2='{ item }')
-                PairsList(:pairs='paired' tab-name='paired')
+    article
+        template(v-if='isLoading')
+            w-spinner(bounce)
+        template(v-else)
+            w-tabs(:items='tabs' fill-bar slider-color='yellow')
+                template(#item-title='{ item }')
+                    span {{ item.title }}
+                //- pending tab
+                template(#item-content.1='{ item }')
+                    PairsList(:pairs='pending' tab-name='pending')
+                //- paired tab 
+                template(#item-content.2='{ item }')
+                    PairsList(:pairs='paired' tab-name='paired')
 
-    w-spinner(bounce v-else)
     MainNav
 </template>
 
@@ -42,13 +44,11 @@ const convertGroupingToCard = grouping => {
 export default {
     name: 'PairsView',
     components: { PairsList },
+    mixins: [mixins.profileMixin],
     data: () => ({
         tabs: [{ title: 'Pending' }, { title: 'Paired' }],
     }),
     computed: {
-        isLoggedIn() {
-            return currentProfile.isLoggedIn
-        },
         pending() {
             if (!this.isLoggedIn || !currentProfile.pendingGroupings) return []
             return this._reformat(
@@ -72,24 +72,31 @@ export default {
 }
 </script>
 
-<style>
-.select--matches {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 25px;
-}
-.select--matches > div {
-    width: 100%;
-    text-align: center;
-    font-size: 16px;
-    line-height: 40px;
-}
-.active {
-    border-bottom: 3px solid #f2cd5c;
-    color: #f2cd5c;
-}
-.idle {
-    color: #bcc5d3;
-}
+<style lang="sass">
+.view--pairs
+    max-width: 450px
+    width: 100%
+    margin: 0 auto
+    background-color: #1F2024
+    .w-tabs
+        &__bar-item
+            height: 50px
+            font-family: 'Century Gothic'
+            color: #FFFFFF
+            &.primary
+                color: #F2CD5C
+    .select--matches
+        display: flex
+        justify-content: space-between
+        margin: 0 25px
+        > div
+            width: 100%
+            text-align: center
+            font-size: 16px
+            line-height: 40px
+    .active
+        border-bottom: 3px solid #f2cd5c
+        color: #f2cd5c
+    .idle
+        color: #bcc5d3
 </style>
-s

frontend/tests/login.service.spec.js

@@ -0,0 +1,58 @@
+import test from 'ava'
+import { Login } from '../src/services/login.service.js'
+
+test('Make sure we can instantiate login service', async t => {
+    const currentProfile = new Login()
+
+    t.is(currentProfile.isLoggedIn, false)
+    t.is(currentProfile.isComplete, false)
+    t.is(currentProfile.hasResponses, 0)
+
+    currentProfile.id.value = 99
+    currentProfile._loading.value = false
+    t.is(currentProfile.isLoggedIn, true)
+})
+
+test('Make sure login.tags can be set', async t => {
+    const currentProfile = new Login()
+    const testTags = ['x', 'y', 'z']
+    currentProfile.setTags(testTags)
+    t.is(currentProfile.tags, testTags)
+})
+
+test('Make sure login.responses can be set', async t => {
+    const currentProfile = new Login()
+    const testResponses = ['100', '200', '300']
+    currentProfile.setResponses(testResponses)
+    t.is(currentProfile.responses, testResponses)
+})
+
+test('Make sure login.groupings work correctly', async t => {
+    const currentProfile = new Login()
+    const testGroupings = [
+        { name: 'a', is_paired: false },
+        { name: 'b', is_paired: false },
+        { name: 'c', is_paired: true },
+    ]
+    currentProfile.groupings = testGroupings
+    t.deepEqual(
+        currentProfile.pendingGroupings.map(g => g.name),
+        ['a', 'b'],
+    )
+    t.deepEqual(
+        currentProfile.pairedGroupings.map(g => g.name),
+        ['c'],
+    )
+})
+
+test('Make sure login.logout() works', async t => {
+    const currentProfile = new Login()
+    currentProfile.id.value = 99
+
+    currentProfile.toaster = { name: 'dummy_toaster', stop: () => {} }
+    currentProfile.chatter = { name: 'dummy_chatter', stop: () => {} }
+    t.is(currentProfile.chatter.name, 'dummy_chatter')
+
+    currentProfile.logout()
+    t.is(currentProfile.id.value, null)
+})