:recyce: chopping down components using a mixin | removing more cruft and inconsistencies

frontend/src/components/Messages.vue

 <template lang="pug">
-.sidebar__messages
-  h5.message__title {{ title }}
+.sidebar--messages
+  h5.message__title messages from matches
   router-link(
-      :to="'/chats/' + user.uid" 
-      v-for='user in users' 
-      :key='user.uid' 
-      :class="[uid == user.uid ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
-      )
+        :to="`/chats/${profile.profile_id}`" 
+        v-for='profile in matches' 
+        :key='profile.profile_id' 
+        :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
+    )
     .f-row.start
-      img(:src='user.avatar')
-      .message__right.f-col
-        h4.message__name {{ user.name }}
-        p.message__content
-          | {{ user.metadata.rawMetadata || &quot;Hello I&apos;m using tinder!&quot; }}
+        img(:src='profile.avatar')
+        .message__right.f-col
+            h4.message__name {{ profile.name }}
+            p.message__content {{ profile.metadata.rawMetadata || &quot;Hello I&apos;m using tinder!&quot; }}
 </template>
 
 <script>
 export default {
-    name: 'UserMessages',
+    name: 'ProfileMessages',
     props: {
-        title: { type: String, default: 'Messages' },
-        users: {
+        matches: {
             type: [Object, Array],
-            default: []
-        },
-    },
-    computed: {
-        uid() {
-            return this.$route.params.uid
+            default: () => []
         },
+        pid: {
+            required: true,
+            type: Number
+        }
     },
 }
 </script>
 <style lang="postcss">
 
 .sidebar
-    &__messages
+    &--messages
         padding: 20px 10px
         /* overflow-y: scroll */
         text-align: left

frontend/src/components/ProfileCardList.vue

 } from '../services'
 
 const router = useRouter()
-const emit = defineEmits(['reload-queue'])
+const emit = defineEmits(['reload'])
 // TODO: Please review this conversion from script to script setup
 // converted from the props section
 const props = defineProps({
         console.log('Make membership')
         postMembershipByProfileId({ profileId, targetId })
     }
-    emit('reload-queue')
+    emit('reload')
 }
 const view = pid => {
     router.push({
     const profileId = props.pid
     const targetId = props.profiles[0].pid
     updateQueueByProfileId(profileId, targetId, true)
-    emit('reload-queue')
+    emit('reload')
 }
 
 // from the data() section

frontend/src/components/SideBar.vue

 <template lang="pug">
-aside.sidebar.p-1.f-col.between
-    h3 Profile: {{ pid }}
-    button(@click="$emit('hide')") hide
-    messages(:title="title" :users="users")
-    .spacer.f-grow
+aside.sidebar.p-1.f-col
     .temp-control-box.f-row.start.center
-        input(v-model='switchToPID' style="width: 50px")
+        input(v-model="switchToPID")
         button(@click="$emit('updatePid', switchToPID)").t-up.p-0 switch profile
+    
+    Messages(:matches="matches" :pid="pid")
+    
+    .spacer.f-grow
 </template>
 
 <script>
-import messages from './Messages.vue'
+import Messages from './Messages.vue'
 
 export default {
-    components: { messages }, 
+    components: { Messages }, 
     props: {
         pid: {
             required: true,
         }
     },
     data: () => ({
-        title:'Messages from Matches',
         switchToPID: null,
-        users: [
+        matches: [
             {
                 name: 'Bob McRob',
-                uid: 111,
+                profile_id: 111,
                 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: { rawMetadata: 'howdy howdy howdy' },
             },
             {
                 name: 'Rob Bebob',
-                uid: 112,
+                profile_id: 112,
                 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: { rawMetadata: 'this is the last message' },
             },

frontend/src/entities/card/card.js

+/** @module entities/card */
+
+/** Class representing a card */
+class Card {
+    /**
+     * Create the a card object.
+     * @param {number} pid
+     * @param {string} name
+     * @param {string} avatar
+     * @return {Card} the card instance object
+     */
+    constructor({ pid, name, avatar }) {
+        this.pid = pid
+        this.name = name
+        this.avatar = avatar
+
+        return this
+    }
+}
+
+export { Card }

frontend/src/entities/card/index.js

+export * from './card'

frontend/src/entities/index.js

 export * from './response'
 export * from './profile'
 export * from './survey'
-export * from './grouping'
+export * from './grouping'
+export * from './card'

frontend/src/entities/profile/profile.schema.js

         }),
 
         /** fields that should match backend service*/
+        user_name: Joi.string(),
         user_id: Joi.number(),
         profile_id: Joi.number(),
+        profile_description: Joi.string(),
+        profile_media: Joi.array().items(Joi.string()),
+        profile_languages: Joi.array().items(Joi.string()),
+        profile_prefs: Joi.object(),
         responses: Joi.array().items(responseSchema), // response entity schema goes here
+        tags: Joi.array().items(),
         user_type: Joi.string(),
 
         /** tricky module system fields */

frontend/src/services/grouping.service.js

 import { db } from '../utils/db'
-import { Grouping } from '../entities'
+import { Grouping, Profile } from '../entities'
 
 /**
  * Get Memberships associated with a single Profile from the database and
     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)
         }
     }
     return validGroupingInstances
 }
 
+/**
+ * Create memberships to a grouping between profileId and targetId
+ * @param {number} profileId
+ * @param {number} targetId
+ * @param {string} groupingType
+ * @returns {object} the created membership
+ */
 const postMembershipByProfileId = async ({
     profileId,
     targetId,
         grouping_type: groupingType,
         grouping_name: `${utcDateInSeconds}_${profileId}_${targetId}`,
     }
-    console.log('Membership Created')
+    console.warn(`${groupingType} created between ${profileId} and ${targetId}`)
     const createdMembershipRecord = await db.post(
         `/membership/${profileId}/join`,
         membership,

frontend/src/services/login.service.js

 import { ref } from 'vue'
-import { fetchQueueByProfileId, fetchResponsesByProfileId } from '../services'
+import { fetchResponsesByProfileId } from '../services'
 import { surveyFactory } from '../utils'
 
+/**
+ * Logged in profile state manager
+ * Sort of a util and service hybrid
+ * @returns {array} profiles
+ */
 class Login {
     constructor() {
         this._loading = false

frontend/src/services/queue.service.js

 import { db } from '../utils/db'
 import { Profile } from '../entities'
 
-// TODO: queue services
+/**
+ * Get a match queue of profiles
+ * @param {number} profileId
+ * @returns {array} profiles
+ */
 const fetchQueueByProfileId = async profileId => {
     let queue
     
             `/profile/${profileId}/queue?include_profile=true`,
         )
         if(!queue?.length) {
-            throw 'could not retrieve match queue. Please take the survey and rescore.'
+            throw 'Could not retrieve match queue. Please take the survey and rescore.'
         }
     } catch (err) {
         console.error(err)
     }
 
     return queue ? queue.map(profileData => {
-        return new Profile({ email: null, ...profileData })
+        return new Profile({ email: 'fixme@gmail.com', ...profileData })
     }) : []
 }
 
+/**
+ * Remove or reinsert a profile in match queue
+ * @param {number} profileId profile viewing the queue
+ * @param {number} targetId
+ * @param {boolean} reinsert FALSE if profileId accepted targetId; TRUE to reinsert into match queue
+ * @returns {array} profiles
+ */
 const updateQueueByProfileId = async (profileId, targetId, reinsert) => {
-    // Arguments
-    // profileId - the id of the profile viewing the queue
-    // targetId - the id of the profile viewed by the profileId
-    // reinsert - if profileId accepted targetId, FALSE reinsert so no reinsert; if profileId passed targetId, TRUE reinsert so reinsert at end
-    //
     const updateQueue = await db.patch(
         `/profile/${profileId}/queue/${targetId}/delete?include_profile=true&reinsert=${reinsert}`,
-        // HELP: responseScheme says the structure should be array of either:
-        // 1) NUMBER
-        // or
-        // 2) {profile_id, user_id, user_name, user_media, responses, user_type}
-        // ~However~ how do we call (2) here? It seems too much to call another API just to fill out a payload, so I just went with (1)
-        [
-            targetId,
-        ],
+        [ targetId ],
     )
-    console.log('updateQueue', updateQueue)
-    return updateQueue
+    return updateQueue ? updateQueue.map(profileData => {
+        return new Profile({ email: 'fixme@gmail.com', ...profileData })
+    }) : []
 }
 
 export { fetchQueueByProfileId, updateQueueByProfileId }

frontend/src/utils/index.js

 import Joi from 'joi'
-import { fetchQuestions } from '../services'
 
 import { Connector } from './db'
 import { SurveyFactory } from './survey'

frontend/src/views/HomeView.vue

         h2 home - profile: {{ pid }}
 
     article(v-if="cards.length && !loading")
-        ProfileCardList(:profiles="cards" :pid="pid" @reload-queue="getQueue")
+        ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
 
     p(v-else) Loading...
 
 <script>
 import ProfileCardList from '../components/ProfileCardList.vue'
 
+import { Card } from '../entities'
 import { fetchQueueByProfileId } from '../services'
+import { pidMixin } from './mixins'
+
+/** Callback used to format incoming into card */
+const convertToCard = profile => {
+    if(profile.type !== 'profile') {
+        console.error(`Cannot convert ${profile} to Card. Invalid entity.`)
+    }
+    if(!profile.isValid()) {
+        console.warn(`Profile ${profile.profile_id} is not a valid profile.`)
+    }
+    return new Card({
+        pid: profile.profile_id,
+        name: profile.user_name,
+        avatar: profile.profile_media[0],
+    })
+}
 
 export default {
     name: 'HomeView',
     components: { ProfileCardList },
-    props: {
-        pid: {
-            type: Number,
-            required: true,
-        },
-    },
-    data: () => ({
-        cards: [],
-        loading: true,
-    }),
-    watch: {
-        /** Fetch the queue if pid changes */
-        async pid() { await this.getQueue() },
-    },
-    async mounted() {
-        await this.getQueue()
-    },
+    mixins: [ pidMixin ],
     methods: {
-        _reformatProfiles(profiles) {
-            return profiles.map(profile => {
-                return {
-                    pid: profile.profile_id,
-                    name: profile.user_name,
-                    avatar: profile.profile_media[0],
-                }
-            })
-        },
-        async getQueue() {
+        /** Gets called from pidMixins */
+        async getCards() {
             this.loading = true
             try {
                 const queueList = await fetchQueueByProfileId(this.pid)
-                this.cards = this._reformatProfiles(queueList)
-            } catch (err) {
-                console.error(err)
-            }
+                this.cards = this._reformat(queueList, convertToCard)
+            } catch (err) { console.error(err) }
             this.loading = false
         },
     },

frontend/src/views/MatchesView.vue

 
 <script>
 import ProfileCardList from '../components/ProfileCardList.vue'
+
+import { Card } from '../entities'
 import { fetchMembershipsByProfileId } from '../services'
+import { pidMixin } from './mixins'
+
+/** Callback used to format incoming into card */
+const convertToCard = 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: 'MatchView',
     components: { ProfileCardList },
-    props: {
-        pid: {
-            type: Number,
-            required: true,
-        },
-    },
-    data: () => ({
-        cards: [],
-        loading: true,
-    }),
-    watch: {
-        pid() { this.getMatches() },
-    },
-    async created() {
-        await this.getMatches()
-    },
+    mixins: [ pidMixin ],
     methods: {
-        _reformatMatches(matches) {
-            return matches.map(m => {
-                return {
-                    pid: m.profile.profile_id,
-                    name: m.profile.user_name,
-                    avatar: m.profile.profile_media[0],
-                }
-            })
-        },
-        async getMatches() {
+        /** Gets called from pidMixins */
+        async getCards() {
             this.loading = true
             try {
                 const matchList = await fetchMembershipsByProfileId(this.pid)
-                console.log('matchList :', matchList)
-                this.cards = this._reformatMatches(matchList)
-            } catch (err) {
-                console.error(err)
-            }
+                this.cards = this._reformat(matchList, convertToCard)
+            } catch (err) { console.error(err) }
             this.loading = false
         },
     },

frontend/src/views/mixins.js

+const pidMixin = {
+    props: {
+        pid: {
+            type: Number,
+            required: true,
+            validator: prop => typeof prop === 'number' || prop === null
+        },
+    },
+    data: () => ({
+        cards: [],
+        loading: true,
+    }),
+    watch: {
+        /** Fetch the queue if pid changes */
+        pid() { this.getCards() },
+    },
+    async created() {
+        await this.getCards()
+    },
+    methods: {
+        _reformat(data, mapCb) {
+            return data.map(mapCb)
+        }
+    }
+}
+
+export { pidMixin }