profiles from generated batch; generator updated to include user_media

backend/db/data-generator/classes.js

@@ -3,6 +3,7 @@ class User {
         this.user_id = id
         this.user_name = ''
         this.user_email = ''
+        this.user_media = ''
         this.is_admin = false
         this.is_poster = false
     }

backend/db/data-generator/config.js

@@ -2,8 +2,8 @@ const mockOutputPath = './db/generated/_batch'
 const magic = 1000
 
 // Insert here how many users you would like to generate:
-const total = 20
-const batchSize = 10
+const total = 100
+const batchSize = 20
 
 // Amount of responses for a complete survey
 const questions = 13

backend/db/data-generator/index.js

@@ -30,7 +30,7 @@ const write = async (batchNum, outputDataObject) => {
     await fs.writeFile(`${config.mockOutputPath}_${batchNum}.js`, '', () => {})
     fs.appendFile(
         `${config.mockOutputPath}_${batchNum}.js`,
-        config.header + 'module.exports = ' + JSON.stringify(outputDataObject),
+        config.header + 'export default ' + JSON.stringify(outputDataObject),
         err => {
             if (err) {
                 console.error(err)
@@ -67,6 +67,13 @@ const generateUsers = () => {
         }
         user.user_name = random.name() + ' ' + random.name()
         user.user_email = random.email()
+
+        var mediaArray = []
+        for (let i=0; i < 3; i++) {
+            
+        }
+
+        user.user_media = random.media()
     })
     console.log('COMPLETED: Generated Users...')
     return users

backend/db/data-generator/random.js

@@ -30,10 +30,25 @@ const randomName = (length = 4) => {
     }
     return str
 }
+const randomMedia = max => {
+    const stockimg = [
+        'https://i.imgur.com/a4wirDS.png',
+        'https://i.imgur.com/F6GxGXG.jpeg',
+        'https://i.imgur.com/ekrkdNt.jpeg',
+        'https://i.imgur.com/VtMTfDg.jpeg',
+        'https://i.imgur.com/9Fwouqm.jpeg',
+        'https://i.imgur.com/rOjRCgo.jpeg',
+        'https://i.imgur.com/FwSdQww.jpeg',
+        'https://i.imgur.com/JjZyzXL.jpeg',
+
+    ]
+    return randomValFrom(stockimg)
+}
 
 module.exports = {
     number: randomNumber,
     valFrom: randomValFrom,
     email: randomEmail,
     name: randomName,
+    media: randomMedia
 }

frontend/src/components/ProfileCardList.vue

@@ -3,23 +3,26 @@ section.profile_card_list.w-full
     .profile_card_list_container.w-full
         .swipe(
             :config='config'
-            :key='user.id'
-            @throwout='swipped(user)'
-            v-for='user in users'
+            :key='profile.profile_id'
+            @throwout='swipped(profile)'
+            v-for='profile in profiles'
         )
             .card.b-solid.rounded.p-0.bg-cover(
-                :style='{ "background-image": `url(${user.avatar})` }'
+                :style='{ "background-image": `url(${profile.user.user_media})` }'
+                
             )
                 .card__content
-                    h3.p-1.mv-0.b-solid.rounded {{ user.name }}
+                    h3.p-1.mv-0.b-solid.rounded {{ profile.user.user_name }}
 
 </template>
 
 <script>
+
+
 export default {
     name: 'ProfileCardList',
     props: {
-        users: {
+        profiles: {
             type: [Object, Array],
             default: () => [
                 {
@@ -31,8 +34,8 @@ export default {
             ],
         },
         uid: {
-            type: String,
-            default: '9999',
+            type: Number,
+            default: 1,
         },
     },
     data: () => ({
@@ -46,24 +49,24 @@ export default {
     }),
     computed: {
         currentCard() {
-            return this.users[this.users.length - 1]
+            return this.profiles[this.profiles.length - 1]
         },
     },
     created() {
-        this.getUser()
+        this.getProfile()
     },
     methods: {
         logOut() {},
         reject() {
             this.swipped(this.currentCard)
         },
-        swipped(user) {
-            const index = this.users.findIndex(u => u.uid == user.uid)
-            this.users.splice(index, 1)
-            user.id = Date.now() + (Math.random() * 100000).toFixed()
-            this.users.unshift({ ...user })
+        swipped(profile) {
+            const index = this.profiles.findIndex(u => u.uid == profile.uid)
+            this.profiles.splice(index, 1)
+            profile.id = Date.now() + (Math.random() * 100000).toFixed()
+            this.profiles.unshift({ ...profile })
         },
-        getUser() {
+        getProfile() {
             return
         },
         onRequest() {
@@ -89,11 +92,14 @@ export default {
     max-width: 85vw
     height: 50vh
     background-position: center
+    border-radius: 3vh
+    border: 1px solid #fff
     &_content
         width: 100%
         height: 100%
     h3
         position: absolute
         bottom: 0
+        color: #fff
 
 </style>

frontend/src/components/Sidebar.vue

@@ -1,4 +1,5 @@
 <template lang="pug">
+
 aside.sidebar.p-1
     h3 Messages
     input

frontend/src/views/home.vue

@@ -1,39 +1,75 @@
 <template lang="pug">
 article#home
-    profile-card-list(:uid='uid' :users='swipables')
+    h1(v-if="user") {{ user.user_name }}
+    profile-card-list(:uid='mypid' :profiles='swipables')
+    
+
 </template>
 
 <script>
 import profileCardList from '../components/ProfileCardList.vue'
+import batch20 from '../../../backend/db/generated/_batch_20.js'
 
 export default {
     name: 'HomeView',
     components: { profileCardList },
     data: () => ({
-        swipables: [],
-        uid: null,
+        swipables: [   
+            // { 
+            //     user_id: 1, 
+            //     user: {
+            //         user_id: 20,
+            //         user_name: 'wravu pdjak',
+            //         user_email: '3vypx3qyj@aol.com',
+            //         is_admin: false,
+            //         is_poster: 1,
+            //     }, 
+            //     profile_id: 1 
+            // },
+        ],
+        user: null,
+        mypid: null,
     }),
     created() {
-        // this.uid = auth.currentUser?.uid || "99999";
-        this.uid = '99999'
-        this.getUsers()
+        // this.mypid = auth.currentUser?.mypid || "99999";
+        this.mypid = 21
+        this.getBatch()
+        const myProfile = this.getProfilesfor(this.mypid)
+        this.user = this.getUserfromProfile(myProfile)
+        console.log('this.user', this.user)
     },
     methods: {
-        getUsers() {
-            const users = [
-                {
-                    name: 'bob',
-                    id: 1234,
-                    metadata: { age: '21', rawMetadata: 'Some Text Here!' },
-                },
-                {
-                    name: 'rob',
-                    id: 1235,
-                    metadata: { age: '21', rawMetadata: 'Some Text Here!' },
-                },
-            ]
-            this.swipables = users
+        getBatch() {
+            const profiles = batch20.profiles
+            // .map is more readable
+            this.swipables = profiles.map((profile) => {
+                profile.user = this.getUserfromProfile(profile)
+                return profile
+            })
+            // for loop is faster
+            // const myList = []
+            // for (let profile in profiles) {
+            //     profile.user = this.getUserfromProfile(profile)
+            //     myList.push(profile)
+            // }
+            // this.swipables = myList
+            // before you store in 31, save user info per profile
+        },
+        getProfilesfor(pid) {
+            const profilesfromBatch = batch20.profiles
+            const profiles = profilesfromBatch.filter((profile) => {
+                return profile.profile_id === pid
+            })
+            return profiles[0]
         },
+        getUserfromProfile(profile) {
+            const users = batch20.users
+            const usersProfile = users.filter((user) => {
+                return user.user_id === profile.user_id
+            })
+            return usersProfile[0]
+        }
+
     },
 }
 </script>