:gear: redoing prettier config | running prettier | adding some sample wave-ui elements

backend/.prettierrc

@@ -1,6 +1,8 @@
-trailingComma: "all"
-tabWidth: 4
-semi: false
-singleQuote: true
-bracketSpacing: true
-arrowParens: "avoid"
+{
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "arrowParens": "avoid"
+}

backend/lib/index.js

@@ -41,7 +41,7 @@ exports.plugin = {
         await server.register(ProfilePlugin, {
             routes: { prefix: '/profile' },
         })
-        
+
         await server.register(NotificationPlugin, {
             routes: { prefix: '/notification' },
         })

backend/lib/plugins/survey.js

@@ -24,5 +24,5 @@ module.exports = {
 
         await server.route(ResponseQuestionsRoute)
     },
-    models: { ReponseKeyModel }
+    models: { ReponseKeyModel },
 }

backend/lib/routes/membership/join.js

@@ -15,18 +15,20 @@ const pluginConfig = {
 
 const validators = {
     params: params.profileId,
-    payload: groupingSchema.single.append({
-        target_id: Joi.number().required(),
-        role: Joi.string(),
-    }).label('grouping_membership_single')
+    payload: groupingSchema.single
+        .append({
+            target_id: Joi.number().required(),
+            role: Joi.string(),
+        })
+        .label('grouping_membership_single'),
 }
 
 const responseSchemas = {
     response: Joi.object({
         memberships: Joi.array().items(),
-        hasMatch: Joi.boolean()
+        hasMatch: Joi.boolean(),
     }).label('grouping_membership_list'),
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {
@@ -99,18 +101,22 @@ module.exports = {
         /** Validate based on validators object */
         validate: {
             ...validators,
-            failAction: 'log'
+            failAction: 'log',
         },
 
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('join_grouping_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res'),
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('join_grouping_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/notification/index.js

@@ -15,7 +15,7 @@ const pluginConfig = {
 }
 
 const validators = {
-    params: params.profileId
+    params: params.profileId,
 }
 
 module.exports = {
@@ -31,7 +31,12 @@ module.exports = {
             const input = new PassThrough({ objectMode: true })
             const eventType = 'stonk'
 
-            const msg = { profile_id, name: 'BDGRS', price: (500 + Math.floor(Math.random() * 100)).toString(), order: null }
+            const msg = {
+                profile_id,
+                name: 'BDGRS',
+                price: (500 + Math.floor(Math.random() * 100)).toString(),
+                order: null,
+            }
 
             // Write to the input stream
             setInterval(() => {
@@ -48,8 +53,7 @@ module.exports = {
         /** Validate based on validators object */
         validate: {
             ...validators,
-            failAction: 'log'
+            failAction: 'log',
         },
-
     },
 }

backend/lib/routes/profile/get.js

@@ -20,7 +20,7 @@ const responseSchemas = {
 }
 
 const validators = {
-    params: params.profileId
+    params: params.profileId,
 }
 
 module.exports = {
@@ -65,12 +65,16 @@ module.exports = {
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.profile,
-                }).label('profile_single_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res'),
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.profile,
+                    })
+                    .label('profile_single_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/profile/match.js

@@ -3,7 +3,7 @@
 const Joi = require('joi')
 const apiSchema = require('../../schemas/api')
 const errorSchema = require('../../schemas/errors')
-const surveyResponseSchema = require('../../schemas/responses') 
+const surveyResponseSchema = require('../../schemas/responses')
 
 const pluginConfig = {
     handlerType: 'match',
@@ -17,7 +17,7 @@ const validators = {}
 
 const responseSchemas = {
     response: surveyResponseSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {
@@ -66,12 +66,16 @@ module.exports = {
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('response_list_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res')
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('response_list_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/profile/respond.js

@@ -16,7 +16,7 @@ const pluginConfig = {
 
 const responseSchemas = {
     response: surveyResponseSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 const validators = {
@@ -91,12 +91,16 @@ module.exports = {
         /** Validate the server response */
         response: {
             status: {
-                201: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('response_list_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res')
+                201: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('response_list_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/profile/update.js

@@ -16,7 +16,7 @@ const pluginConfig = {
 
 const responseSchemas = {
     response: surveyResponseSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 const validators = {
@@ -86,12 +86,16 @@ module.exports = {
         /** Validate the server response */
         response: {
             status: {
-                200: apiSchema.single.append({
-                    data: responseSchemas.response,
-                }).label('response_list_res'),
-                409: apiSchema.single.append({
-                    data: responseSchemas.error,
-                }).label('error_single_res')
+                200: apiSchema.single
+                    .append({
+                        data: responseSchemas.response,
+                    })
+                    .label('response_list_res'),
+                409: apiSchema.single
+                    .append({
+                        data: responseSchemas.error,
+                    })
+                    .label('error_single_res'),
             },
         },
     },

backend/lib/routes/survey/questions.js

@@ -59,9 +59,11 @@ module.exports = {
 
         /** Validate the server response */
         response: {
-            schema: apiSchema.single.append({
-                data: responseSchemas.response
-            }).label('question_list_res'),
+            schema: apiSchema.single
+                .append({
+                    data: responseSchemas.response,
+                })
+                .label('question_list_res'),
             failAction: 'log',
         },
     },

backend/lib/routes/survey/responses.js

@@ -25,7 +25,7 @@ const validators = {
     // payload: true,
 }
 const responseSchemas = {
-    response: surveyResponseSchema.keys
+    response: surveyResponseSchema.keys,
 }
 
 module.exports = {
@@ -60,9 +60,11 @@ module.exports = {
 
         /** Validate the server response */
         response: {
-            schema: apiSchema.single.append({
-                data: responseSchemas.response
-            }).label('response_list_res'),
+            schema: apiSchema.single
+                .append({
+                    data: responseSchemas.response,
+                })
+                .label('response_list_res'),
             failAction: 'log',
         },
     },

backend/lib/routes/user/create-profile.js

@@ -36,7 +36,7 @@ const responseSchemas = {
         user_id: Joi.number(),
         user_name: Joi.string(),
     }).label('created_profile'),
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {

backend/lib/routes/user/list-profiles.js

@@ -28,7 +28,7 @@ const validators = {
 
 const responseSchemas = {
     profilesList: profileSchema.list,
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {

backend/lib/routes/user/login.js

@@ -18,7 +18,9 @@ const validators = {
         payload: Joi.object({
             user: userSchema.single,
             error: errorSchema.single,
-        }).append().label('login_payload'),
+        })
+            .append()
+            .label('login_payload'),
     },
     user: userSchema.single,
 }

backend/lib/routes/user/signup.js

@@ -14,8 +14,8 @@ const pluginConfig = {
 
 const validators = {
     post: {
-        payload: userSchema.userSignup
-    }
+        payload: userSchema.userSignup,
+    },
 }
 
 const responseSchemas = {
@@ -27,7 +27,7 @@ const responseSchemas = {
         is_admin: Joi.number(),
         is_verified: Joi.number(),
     }).label('created_user'),
-    error: errorSchema.single
+    error: errorSchema.single,
 }
 
 module.exports = {
@@ -55,7 +55,7 @@ module.exports = {
                         is_poster: userType,
                         is_admin: 0,
                         is_verified: 0,
-                    }
+                    },
                 })
                 return h
                     .response({

backend/lib/services/matchqueue.js

@@ -39,6 +39,7 @@ module.exports = class MatchQueueService extends Schmervice.Service {
         })
         return queueByProfileId
     }
+
     /**
      * Saves Scored Profile Ids to MatchQue IN ORDER
      * @param {number} profileId

backend/lib/services/notification.js

@@ -17,8 +17,12 @@ const stringifyEvent = function (event) {
     const endl = '\r\n'
     for (const i in event) {
         let val = event[i]
-        if (val instanceof Buffer) { val = val.toString() }
-        if (typeof val === 'object') { val = JSON.stringify(val) }
+        if (val instanceof Buffer) {
+            val = val.toString()
+        }
+        if (typeof val === 'object') {
+            val = JSON.stringify(val)
+        }
         str += i + ': ' + val + endl
     }
     str += endl
@@ -29,7 +33,7 @@ const stringifyEvent = function (event) {
  * Transform extension
  * ?: I don't really get what this is doing
  * @param {object} options
- * @param {object} objectMode 
+ * @param {object} objectMode
  */
 class Transformer extends Transform {
     constructor(options, objectMode) {
@@ -37,16 +41,20 @@ class Transformer extends Transform {
         options = options || {}
         this.counter = 1
         this.event = options.event || null
-        this.generateId = options.generateId ? options.generateId : () => {
-            return this.counter++
-        }
+        this.generateId = options.generateId
+            ? options.generateId
+            : () => {
+                  return this.counter++
+              }
     }
-    _transform (chunk, encoding, callback) {
+    _transform(chunk, encoding, callback) {
         const event = {
             id: this.generateId(chunk),
-            data: chunk
+            data: chunk,
+        }
+        if (this.event) {
+            event.event = this.event
         }
-        if (this.event) { event.event = this.event }
         this.push(stringifyEvent(event))
         callback()
     }
@@ -54,7 +62,7 @@ class Transformer extends Transform {
         this.push(stringifyEvent(ENDER))
         callback()
     }
-} 
+}
 
 /**
  * Take an event stream and write content to another stream
@@ -95,7 +103,8 @@ const onEvent = (event, h, streamOptions) => {
         //     event.pipe(stream)
         // }
         console.log('streamOptions :', streamOptions)
-        return h.response(active)
+        return h
+            .response(active)
             .header('content-type', 'text/event-stream')
             .header('content-encoding', 'identity')
     }
@@ -116,4 +125,4 @@ const onEvent = (event, h, streamOptions) => {
     // internals.writeEvent(event, active)
 }
 
-module.exports = { onEvent }
+module.exports = { onEvent }

backend/lib/services/profile/index.js

@@ -82,8 +82,12 @@ module.exports = class ProfileService extends Schmervice.Service {
             // CHECKTHIS: Added this because we added user.user_name to CompleteProfile
             // so without this, we get undefined user_name
             .withGraphFetched('user')
-        
-        return profiler.makeCompleteProfilesFromProfile(profilesEntries, type, this.tagLookup)
+
+        return profiler.makeCompleteProfilesFromProfile(
+            profilesEntries,
+            type,
+            this.tagLookup,
+        )
     }
 
     async getProfilesFor(profileIdArray, type, includeResponses = true) {
@@ -106,7 +110,7 @@ module.exports = class ProfileService extends Schmervice.Service {
             profilesEntries,
             type,
             includeResponses,
-            this.tagLookup
+            this.tagLookup,
         )
     }
 
@@ -128,13 +132,14 @@ module.exports = class ProfileService extends Schmervice.Service {
              * Using using the input and converting to index
              * of the generated possible prescore array in config
              * DUPLICATE:See saveResponseForProfile() line 343
-             */ 
+             */
             let convertedResponse = responseToSave
-            if(scoring._isScorableResponse(responseToSave.response_key_id)) {
+            if (scoring._isScorableResponse(responseToSave.response_key_id)) {
                 // Convert -3 to 0, 0 to 3, 3 to 6
                 const offset = (config.scoreVals.length - 1) / 2
                 const indexFromInput = parseInt(responseToSave.val) + offset
-                convertedResponse.val = config.scoreVals[indexFromInput].toString()
+                convertedResponse.val =
+                    config.scoreVals[indexFromInput].toString()
             }
 
             const responseInfo = {
@@ -194,7 +199,7 @@ module.exports = class ProfileService extends Schmervice.Service {
         )
         if (matchingResponses.length > 0) {
             const alreadyAnswered = matchingResponses.map(
-                matchingRes => matchingRes.response_key_id
+                matchingRes => matchingRes.response_key_id,
             )
             await Response.query()
                 .where({ profile_id: profileId })
@@ -206,9 +211,9 @@ module.exports = class ProfileService extends Schmervice.Service {
          * Convert indexes to actual score values
          * Using using the input and converting to index
          * of the generated possible prescore array in config
-         */ 
+         */
         let convertedResponse = responseToSave
-        if(scoring._isScorableResponse(responseToSave.response_key_id)) {
+        if (scoring._isScorableResponse(responseToSave.response_key_id)) {
             // Convert -3 to 0, 0 to 3, 3 to 6
             const offset = (config.scoreVals.length - 1) / 2
             const indexFromInput = parseInt(responseToSave.val) + offset
@@ -251,7 +256,7 @@ module.exports = class ProfileService extends Schmervice.Service {
             .findOne('profile_id', profileId)
             .withGraphFetched('responses')
             .withGraphFetched('user')
-        
+
         // Move unneeded responses
         const userZip = zipcoder.getZipCodeFromProfile(userProfile)
 
@@ -263,13 +268,15 @@ module.exports = class ProfileService extends Schmervice.Service {
 
         // TODO: Let Objection optimize this
         const isPosterOpposite = userProfile.user.is_poster == 1 ? 0 : 1
-        profileIdsOfOppositeType = profileIdsOfOppositeType.filter(profile => {
-            return profile.user.is_poster == isPosterOpposite
-        }).filter(profile => {
-            // Only include profiles that included zipcode response
-            return zipcoder.getZipCodeFromProfile(profile) ? true : false
-        })
-        
+        profileIdsOfOppositeType = profileIdsOfOppositeType
+            .filter(profile => {
+                return profile.user.is_poster == isPosterOpposite
+            })
+            .filter(profile => {
+                // Only include profiles that included zipcode response
+                return zipcoder.getZipCodeFromProfile(profile) ? true : false
+            })
+
         const profilePlusDistance = await Promise.all(
             profileIdsOfOppositeType.map(async profile => {
                 const targetZip = zipcoder.getZipCodeFromProfile(profile)
@@ -315,7 +322,9 @@ module.exports = class ProfileService extends Schmervice.Service {
             'zip_code_id',
             parseInt(zipCode),
         )
-        if (!zipInfo) { console.error('zip:', zipCode) }
+        if (!zipInfo) {
+            console.error('zip:', zipCode)
+        }
         return {
             latitude: parseFloat(zipInfo.latitude),
             longitude: parseFloat(zipInfo.longitude),

backend/lib/services/profile/profiler.js

@@ -33,26 +33,50 @@ class CompleteProfile {
             // [] of all "profile" responses
             this.responses = profile.responses
             // image, language, duration, presence, blurb, urgency, role, pronouns, distance
-            const prefs = ['zipcode', 'duration', 'presence', 'urgency', 'role', 'pronouns', 'distance']
+            const prefs = [
+                'zipcode',
+                'duration',
+                'presence',
+                'urgency',
+                'role',
+                'pronouns',
+                'distance',
+            ]
             const prefsKeys = config.prefKeys
             prefs.forEach((pref, i) => {
                 this.profile_prefs[pref] = this.responses.filter(
-                    r => r.response_key_id === prefsKeys[i]
+                    r => r.response_key_id === prefsKeys[i],
                 )[0]
             })
-            this.profile_description = this.responses.filter(r => r.response_key_id === config.blurbKey).map(r => r.val)[0]
-            this.profile_media = this.responses.filter(r => r.response_key_id === config.mediaKey).map(r => r.val)
-            this.profile_languages = this.responses.filter(r => r.response_key_id === config.langKey).map(r => r.val)
+            this.profile_description = this.responses
+                .filter(r => r.response_key_id === config.blurbKey)
+                .map(r => r.val)[0]
+            this.profile_media = this.responses
+                .filter(r => r.response_key_id === config.mediaKey)
+                .map(r => r.val)
+            this.profile_languages = this.responses
+                .filter(r => r.response_key_id === config.langKey)
+                .map(r => r.val)
         }
     }
 }
 
-const makeCompleteProfiles = (profileIdArray, profilesEntries, type, includeResponses, tagLookup) => {
+const makeCompleteProfiles = (
+    profileIdArray,
+    profilesEntries,
+    type,
+    includeResponses,
+    tagLookup,
+) => {
     const completeProfiles = []
     profileIdArray.forEach(pid => {
         profilesEntries.forEach(entry => {
             if (entry.profile_id == pid) {
-                const complete = new CompleteProfile(entry, type, includeResponses)
+                const complete = new CompleteProfile(
+                    entry,
+                    type,
+                    includeResponses,
+                )
                 tagger.setProfileTags(entry, complete, tagLookup)
                 completeProfiles.push(complete)
             }
@@ -60,7 +84,7 @@ const makeCompleteProfiles = (profileIdArray, profilesEntries, type, includeResp
     })
     return completeProfiles
 }
-const makeCompleteProfilesFromProfile = (profilesEntries, type, tagLookup)=> {
+const makeCompleteProfilesFromProfile = (profilesEntries, type, tagLookup) => {
     profilesEntries.forEach(profile => {
         tagger.setProfileTags(profile, profile, tagLookup)
     })
@@ -74,5 +98,5 @@ const makeCompleteProfilesFromProfile = (profilesEntries, type, tagLookup)=> {
 module.exports = {
     CompleteProfile,
     makeCompleteProfiles,
-    makeCompleteProfilesFromProfile
-}
+    makeCompleteProfilesFromProfile,
+}

backend/lib/services/profile/scorer.js

@@ -20,7 +20,7 @@ const makeScoreLookup = (aspects, labels) => {
 
 const _isScorableResponse = res_key_id => {
     let isScorable = false
-    if(config.resKeys.includes(res_key_id)) {
+    if (config.resKeys.includes(res_key_id)) {
         isScorable = true
     }
     return isScorable
@@ -32,11 +32,11 @@ const scoreResponses = (seeker, potentialMatch, prescoreLookup) => {
             error: `complete responses for profile: ${seeker.profile_id} unqeual to profile: ${potentialMatch.profile_id} | ${seeker.responses.length}:${potentialMatch.responses.length}`,
         }
 
-    const aRes = seeker.responses.filter(
-        res =>  _isScorableResponse(res.response_key_id)
+    const aRes = seeker.responses.filter(res =>
+        _isScorableResponse(res.response_key_id),
     )
-    const bRes = potentialMatch.responses.filter(
-        res =>  _isScorableResponse(res.response_key_id)
+    const bRes = potentialMatch.responses.filter(res =>
+        _isScorableResponse(res.response_key_id),
     )
 
     const composite = []
@@ -72,5 +72,5 @@ module.exports = {
     _isScorableResponse,
     scoreResponses,
     makeScoreLookup,
-    scoreAll
-}
+    scoreAll,
+}

backend/lib/services/profile/tagger.js

@@ -3,5 +3,5 @@ const setProfileTags = (inProfile, outProfile, tagLookup) => {
 }
 
 module.exports = {
-    setProfileTags
-}
+    setProfileTags,
+}

backend/lib/services/profile/zipcoder.js

@@ -6,7 +6,7 @@ const config = require('../../../db/data-generator/config.json')
 const getZipCodeFromProfile = profile => {
     // There should only be one zip code entry per profile
     let zipRes = profile.responses.find(
-        res => res.response_key_id == config.zipcodeKey
+        res => res.response_key_id == config.zipcodeKey,
     )
     return zipRes.val
 }
@@ -21,5 +21,5 @@ const filterByDistance = (profileList, max) => {
 
 module.exports = {
     getZipCodeFromProfile,
-    filterByDistance
-}
+    filterByDistance,
+}

backend/lib/services/user.js

@@ -58,9 +58,12 @@ module.exports = class UserService extends Schmervice.Service {
      */
     async signup({ password, userInfo }, txn) {
         const { User } = this.server.models()
-        const matchingEmails = await User.query().where('user_email', userInfo.user_email)
+        const matchingEmails = await User.query().where(
+            'user_email',
+            userInfo.user_email,
+        )
 
-        if(matchingEmails.length > 0) { 
+        if (matchingEmails.length > 0) {
             throw `User ${userInfo.user_email} already exists: Cannot create a user without a unique email`
         }
         const user = await User.query(txn).insert(userInfo)

backend/server/index.js

@@ -25,7 +25,7 @@ exports.deployment = async ({ start } = {}) => {
 if (require.main === module) {
     exports.deployment({ start: true })
 
-    process.on('unhandledRejection', (err) => {
+    process.on('unhandledRejection', err => {
         throw err
     })
-}
+}

frontend/.prettierrc.json → frontend/.prettierrc

@@ -10,4 +10,4 @@
     "pugFramework": "vue",
     "pugSingleFileComponentIndentation": false,
     "pugClassNotation": "literal"
-}
+}

frontend/src/App.vue

@@ -1,15 +1,17 @@
 <template lang="pug">
-SideBar(
-    v-if="showSidebar"
-    :pid="getPid"
-    @updatePid="setPid"
-    @hide="showSidebar = false"
-)
-RouterView(
-    :pid="getPid"
-    @updatePid="setPid"
-    @show-sidebar="showSidebar = !showSidebar"
-)
+w-app
+    w-button My Button
+    SideBar(
+        v-if="showSidebar"
+        :pid="getPid"
+        @updatePid="setPid"
+        @hide="showSidebar = false"
+    )
+    RouterView(
+        :pid="getPid"
+        @updatePid="setPid"
+        @show-sidebar="showSidebar = !showSidebar"
+    )
 </template>
 
 <script>
@@ -26,23 +28,25 @@ const DEV_PID = 45
 export default {
     components: { SideBar },
     data: () => ({
-        showSidebar: false
+        showSidebar: false,
     }),
     computed: {
-        getPid: () => currentProfile.id.value
+        getPid: () => currentProfile.id.value,
     },
     async created() {
         /** Get questions so we can compare against profile responses */
         await surveyFactory.getQuestions()
 
-        /** 
+        /**
          * Development mode turns router guards off so
-         * we hard set the profile id instead of 
+         * we hard set the profile id instead of
          * using the login form
-        */
-        if(DEV_MODE) { this.setPid(DEV_PID) }
+         */
+        if (DEV_MODE) {
+            this.setPid(DEV_PID)
+        }
 
-        if(currentProfile.isLoggedIn) {
+        if (currentProfile.isLoggedIn) {
             console.warn(`setting up Chatter and Toaster for ${this.getPid}...`)
             this.setupChatter()
             this.setupToaster()
@@ -74,42 +78,28 @@ export default {
 </script>
 
 <style lang="postcss">
+/* prettier-ignore */
 @import './sss/theme.sss'
 
 #app
-    display: flex
-    flex-direction: row
-    text-align: center
-    color: $primary
-    font-family: $sans
-    background-color: $dark
-    overflow-x: hidden
     height: 100%
-    > main
-        position: relative
+    flex-direction: row
+    .w-app
+        display: flex
+        text-align: center
+        color: $primary
+        font-family: $sans
+        background-color: $dark
+        overflow-x: hidden
         height: 100%
-        > header
-            h2
-                font-size: $ms-1
-        > article
+        > main
+            position: relative
             height: 100%
-            width: 100%
-            flex-direction: column
-    
-    button
-        padding: $ms-0
-        background-color: $primary
-        border: 1px transparent solid
-        border-radius: $ms-1
-        transition: $transition
-        &:hover
-            background-color: $secondary
-            border: 1px transparent solid
-            border-radius: $ms-1
-            cursor: pointer
-            color: $primary
-        &:disabled
-            cursor: default
-            color: $primary
-            background-color: $light
+            > header
+                h2
+                    font-size: $ms-1
+            > article
+                height: 100%
+                width: 100%
+                flex-direction: column
 </style>

frontend/src/components/MainNav.vue

@@ -13,6 +13,7 @@ export default {
 </script>
 
 <style lang="postcss">
+/* prettier-ignore */
 #main-header
   position: absolute
   bottom: 1vh

frontend/src/components/Messages.vue

@@ -19,18 +19,18 @@ import { mixins } from '../utils'
 
 export default {
     name: 'ProfileMessages',
-    mixins: [ mixins.pidMixin ],
+    mixins: [mixins.pidMixin],
     props: {
         matches: {
             type: [Object, Array],
-            default: () => []
+            default: () => [],
         },
     },
 }
 </script>
 
 <style lang="postcss">
-
+/* prettier-ignore */
 .sidebar
     &--messages
         padding: 20px 10px
@@ -68,5 +68,4 @@ export default {
     &__content
         padding-top: 10px
         line-height: 1em
-        
 </style>

frontend/src/components/ProfileCardList.vue

@@ -120,6 +120,7 @@ const loadedProfiles = [...props.profiles]
 </script>
 
 <style lang="postcss">
+/* prettier-ignore */
 .profile-card-list
     display: flex
     justify-content: center
@@ -145,6 +146,4 @@ const loadedProfiles = [...props.profiles]
             background-color: goldenrod
             nav > button
                 font-size: 2vw
-
-
 </style>

frontend/src/components/SideBar.vue

@@ -14,8 +14,8 @@ import Messages from './Messages.vue'
 import { mixins } from '../utils'
 
 export default {
-    components: { Messages }, 
-    mixins: [ mixins.pidMixin ],
+    components: { Messages },
+    mixins: [mixins.pidMixin],
     data: () => ({
         switchToPID: null,
         matches: [
@@ -36,11 +36,12 @@ export default {
     mounted() {
         // Set the form to display the default pid set in Home.vue
         this.switchToPID = this.pid
-    }
+    },
 }
 </script>
 
 <style lang="postcss">
+/* prettier-ignore */
 aside.sidebar
     background-color: yellow
     height: 100vh
@@ -53,5 +54,4 @@ aside.sidebar
     flex-direction: row
     input
         border: 0
-
-</style>
+</style>

frontend/src/main.js

@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import router from './router'
 import { checkLoginStatus } from './router/guards'
 
+import WaveUI from 'wave-ui'
+
 import App from './App.vue'
 import MainNav from './components/MainNav.vue'
 
@@ -12,21 +14,20 @@ const DEV = import.meta.env.VITE_DEV == 'true'
  */
 router.beforeEach((to, from, next) => {
     /**
-     * Skip any route guarding with `npm run dev`
-     */
-    if(DEV) { next() }
-
-    /**
-     * Use the loginService to deal with login details
+     * Skip any route guarding with `npm run dev` or
+     * use the loginService to deal with login details
      * Activate with `npm run nodev`
      */
-    else {
+    if (DEV) {
+        next()
+    } else {
         checkLoginStatus(to, next)
     }
 })
 
 const run = entry => {
     const siimee = createApp(App).use(router)
+    new WaveUI(siimee, {})
     siimee.component('MainNav', MainNav)
     siimee.mount(entry)
 }

frontend/src/views/HomeView.vue

@@ -2,7 +2,11 @@
 main.view--home.f-col.start.w-full
     header
         h2 home - profile: {{ pid }}
-
+        w-badge
+            template(#badge) 3
+            w-button(color="primary")
+                w-icon(class="mr1") mdi mdi-email
+                    Emails
     article(v-if="cards.length && !loading")
         ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
 
@@ -20,10 +24,10 @@ import { mixins } from '../utils'
 
 /** Callback used to format incoming into card */
 const convertToCard = profile => {
-    if(profile.type !== 'profile') {
+    if (profile.type !== 'profile') {
         console.error(`Cannot convert ${profile} to Card. Invalid entity.`)
     }
-    if(!profile.isValid()) {
+    if (!profile.isValid()) {
         console.warn(`Profile ${profile.profile_id} is not a valid profile.`)
     }
     return new Card({
@@ -36,7 +40,7 @@ const convertToCard = profile => {
 export default {
     name: 'HomeView',
     components: { ProfileCardList },
-    mixins: [ mixins.pidMixin, mixins.cardMixin ],
+    mixins: [mixins.pidMixin, mixins.cardMixin],
     methods: {
         /** Gets called from cardMixin */
         async getCards() {
@@ -44,7 +48,9 @@ export default {
             try {
                 const queueList = await fetchQueueByProfileId(this.pid)
                 this.cards = this._reformat(queueList, convertToCard)
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
             this.loading = false
         },
     },
@@ -52,6 +58,7 @@ export default {
 </script>
 
 <style lang="postcss">
+/* prettier-ignore */
 main
     position: relative
     height: 100%

frontend/src/views/LoginView.vue

@@ -18,24 +18,24 @@ import { currentProfile } from '../services'
 export default {
     data: () => ({
         form: {
-            profileId: null
+            profileId: null,
         },
     }),
     methods: {
         async onSubmit() {
-            if(!this.form.profileId) console.error('No profile in form')
-            
+            if (!this.form.profileId) console.error('No profile in form')
+
             /**
              * Default to the HomeView and alter as needed (side-effects!)
              */
             const toRoute = { name: 'HomeView' }
-            
+
             /**
              * Profile needs a complete survey and
              * alters the url if it's incomplete
              */
             const alreadyLoggedIn = await currentProfile.isLoggedIn
-            if(!alreadyLoggedIn) {
+            if (!alreadyLoggedIn) {
                 await currentProfile.login(this.form.profileId)
             }
 
@@ -46,5 +46,5 @@ export default {
 </script>
 
 <style lang="postcss">
-
+/* prettier-ignore */
 </style>

frontend/src/views/MatchesView.vue

@@ -20,10 +20,10 @@ import { mixins } from '../utils'
 
 /** Callback used to format incoming into card */
 const convertToCard = grouping => {
-    if(grouping.type !== 'grouping') {
+    if (grouping.type !== 'grouping') {
         console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
     }
-    if(!grouping.profile.isValid()) {
+    if (!grouping.profile.isValid()) {
         console.warn(`Profile in ${grouping} is not a valid profile.`)
     }
     return new Card({
@@ -36,7 +36,7 @@ const convertToCard = grouping => {
 export default {
     name: 'MatchView',
     components: { ProfileCardList },
-    mixins: [ mixins.pidMixin, mixins.cardMixin ],
+    mixins: [mixins.pidMixin, mixins.cardMixin],
     methods: {
         /** Gets called from cardMixin */
         async getCards() {
@@ -44,7 +44,9 @@ export default {
             try {
                 const matchList = await fetchMembershipsByProfileId(this.pid)
                 this.cards = this._reformat(matchList, convertToCard)
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
             this.loading = false
         },
     },
@@ -52,6 +54,7 @@ export default {
 </script>
 
 <style lang="postcss">
+/* prettier-ignore */
 .row
     display: flex
     flex-direction: row

frontend/src/views/ProfileView.vue

@@ -61,4 +61,6 @@ export default {
 }
 </script>
 
-<style lang="postcss"></style>
+<style lang="postcss">
+/* prettier-ignore */
+</style>

frontend/src/views/SurveyView.vue

@@ -61,7 +61,13 @@ main.view--survey.f-col.start.w-full
 import { surveyFactory, randomSurveyResponses } from '@/utils'
 import { allSteps, aspectResponses, possible } from '@/utils/lang'
 
-import { currentProfile, createProfileForUserId, fetchProfileByProfileId, scoreSurveyByProfileId, signupUser } from '@/services'
+import {
+    currentProfile,
+    createProfileForUserId,
+    fetchProfileByProfileId,
+    scoreSurveyByProfileId,
+    signupUser,
+} from '@/services'
 
 import { maxDistanceKey } from '../../../backend/db/data-generator/config.json'
 
@@ -86,7 +92,7 @@ export default {
                 honesty: 0,
                 respect: 0,
             },
-            aspectResponses: Object.values(aspectResponses.usa)
+            aspectResponses: Object.values(aspectResponses.usa),
         }
     },
     computed: {
@@ -116,7 +122,12 @@ export default {
             toGen.forEach(async () => {
                 const randRes = randomSurveyResponses(this.bypassCount)
                 randRes.forEach((tr, i) => {
-                    this.storeResponseLike(i, tr.idOrPrompt, tr.idOrPrompt, tr.val)
+                    this.storeResponseLike(
+                        i,
+                        tr.idOrPrompt,
+                        tr.idOrPrompt,
+                        tr.val,
+                    )
                 })
                 this.bypassCount++
                 await this.onSave()
@@ -128,14 +139,14 @@ export default {
             // Also update the form model state for now
             // We probably can refactor this out
             this.profile[prompt] = val
-            
+
             /**
              * If NO response id is present, that means the answer
              * is required and associated with a User and NOT a Profile
              **/
             this.responseLikes[`step-${step}`] = {
                 idOrPrompt: id ? id : prompt,
-                val: val.toString()
+                val: val.toString(),
             }
         },
         _formatIntoResponses(survey) {
@@ -147,7 +158,7 @@ export default {
         },
         /**
          * Survey responses have User information
-         * mixed in with scoring information so we 
+         * mixed in with scoring information so we
          * need to separate them
          * @param {array} responseLikes answered by the survey
          */
@@ -155,7 +166,10 @@ export default {
             let survey = []
             const user = {}
             responseLikes.forEach(resLike => {
-                if(resLike.idOrPrompt && Number.isFinite(parseInt(resLike.idOrPrompt))) {
+                if (
+                    resLike.idOrPrompt &&
+                    Number.isFinite(parseInt(resLike.idOrPrompt))
+                ) {
                     survey.push(resLike)
                 } else {
                     user[resLike.idOrPrompt] = resLike.val
@@ -166,24 +180,34 @@ export default {
         async _createUserProfileRel(user, survey) {
             /** A User is required before creating a profile */
             const createdUser = await signupUser(user)
-            if(!createdUser) return
+            if (!createdUser) return
 
-            const userProfileRel = await createProfileForUserId(createdUser.user_id, survey)
-            if(!userProfileRel) return 
+            const userProfileRel = await createProfileForUserId(
+                createdUser.user_id,
+                survey,
+            )
+            if (!userProfileRel) return
 
             return userProfileRel
         },
         async _getProfileWithScore(createdProfileId, maxDistance) {
             /** A Profile is associated with n:1 user and referenced by profile id */
-            const fetchedProfile = await fetchProfileByProfileId(createdProfileId)
-            if(!fetchedProfile) {
-                console.error(`Could not fetch Profile ${createdProfileId}. Please check that a User and Profile were created.`)
+            const fetchedProfile = await fetchProfileByProfileId(
+                createdProfileId,
+            )
+            if (!fetchedProfile) {
+                console.error(
+                    `Could not fetch Profile ${createdProfileId}. Please check that a User and Profile were created.`,
+                )
                 return
             }
 
             /** Use profile answers to compare against other profile answers */
-            const scored = await scoreSurveyByProfileId(createdProfileId, maxDistance)
-            if(!scored) {
+            const scored = await scoreSurveyByProfileId(
+                createdProfileId,
+                maxDistance,
+            )
+            if (!scored) {
                 console.error(`Could not score Profile ${createdProfileId}.`)
                 return
             }
@@ -191,34 +215,46 @@ export default {
         },
         async _setLoginForProfile(profile) {
             const currentId = currentProfile.login(profile.profile_id)
-            if(currentId && profile.responses.length) {
+            if (currentId && profile.responses.length) {
                 // Stores responses without fetching again
                 currentProfile.setResponses(profile.responses)
             }
-            if(!currentProfile.isComplete) {
-                console.error(`Profile ${currentProfile.id} is incomplete. Please make sure all survey questions have been answered.`)
+            if (!currentProfile.isComplete) {
+                console.error(
+                    `Profile ${currentProfile.id} is incomplete. Please make sure all survey questions have been answered.`,
+                )
                 return
             }
         },
         async onSave() {
-            const [ user, survey] = this._separateUserInfoFromResponses(Object.values(this.responseLikes))
-            const maxDistanceRes = survey.find(res => res.response_key_id == maxDistanceKey)
+            const [user, survey] = this._separateUserInfoFromResponses(
+                Object.values(this.responseLikes),
+            )
+            const maxDistanceRes = survey.find(
+                res => res.response_key_id == maxDistanceKey,
+            )
             /**
              * Creating a profile only returns the created
              * user id and profile id
              **/
-            const userProfileRel = await this._createUserProfileRel(user, survey)
+            const userProfileRel = await this._createUserProfileRel(
+                user,
+                survey,
+            )
             const createdProfileId = userProfileRel.profile_id
 
             /** A Profile is associated with n:1 user and referenced by profile id */
-            const fetchedProfile = await this._getProfileWithScore(createdProfileId, maxDistanceRes.val)
-            
-            /** 
+            const fetchedProfile = await this._getProfileWithScore(
+                createdProfileId,
+                maxDistanceRes.val,
+            )
+
+            /**
              * Login only after there is a user and
              * that user has a profile and all responses
-            */
+             */
             this._setLoginForProfile(fetchedProfile)
-            
+
             this.$router.push({ name: 'HomeView' })
         },
         back(prompt) {
@@ -230,6 +266,7 @@ export default {
 </script>
 
 <style lang="postcss">
+/* prettier-ignore */
 .slide-up
     &-leave, &-enter
         &-active

frontend/vite.config.js

@@ -9,4 +9,11 @@ export default defineConfig({
             '@': require('path').resolve(__dirname, 'src'),
         },
     },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                additionalData: '$use-layout-classes: false;@import "/src/../node_modules/wave-ui/src/wave-ui/scss/_variables.scss";',
+            },
+        },
+    },
 })