converted script to script setup in ProfileCardList

frontend/src/components/ProfileCardList.vue

@@ -13,70 +13,90 @@ section.profile_card_list.w-full
                 .card__content
                     h3.p-1.mv-0.b-solid.rounded {{ profile.name }}
 
+        //- TODO: Make functional (using match queue endpoints)
+        //- queue.service.js
+        //- Call function that calls service that talks to endpoint
+        //- Will need GET http://localhost:3001/api/profile/1/queue  <- will look like array with profile ids [2, 3, 4, 6]
+        //- Need profile id (logged in profile) and target id (id on card)
+
         nav.swipe_icons.w-full.f-row.between
-            h2 A
-            h2 H
-            h2 P
+            //- Accept
+            button.p-1(@click='accept') A
+            //- Hold
+            button.p-1(@click='hold') H
+            //- Pass
+            button.p-1(@click='pass') P
 </template>
 
-<script>
-export default {
-    name: 'ProfileCardList',
-    props: {
-        profiles: {
-            type: [Object, Array],
-            default: () => [
-                {
-                    uid: '1',
-                    name: 'Fullname',
-                    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!' },
-                },
-            ],
-        },
-        uid: {
-            type: Number,
-            default: 9999,
-        },
-    },
-    data: () => ({
-        config: {
-            // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
-            minThrowOutDistance: 250,
-            maxThrowOutDistance: 300,
-        },
-        favorites: [],
-        requests: [],
-    }),
-    computed: {
-        currentCard() {
-            return this.profiles[this.profiles.length - 1]
-        },
-    },
-    created() {
-        this.getUser()
+<script setup>
+import { computed } from 'vue'
+
+// TODO: Please review this conversion from script to script setup
+// converted from the props section
+const props = defineProps({
+    profiles: {
+        type: [Object, Array],
+        default: () => [
+            {
+                uid: '1',
+                name: 'Fullname',
+                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!' },
+            },
+        ],
     },
-    methods: {
-        logOut() {},
-        reject() {
-            this.swipped(this.currentCard)
-        },
-        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() {
-            return
-        },
-        onRequest() {
-            const data = { ...this.currentCard }
-            return
-        },
+    uid: {
+        type: Number,
+        default: 9999,
     },
+})
+// from the computed section
+const currentCard = computed(() => this.profiles[this.profiles.length - 1]);
+// from the method section
+const logOut = () => {};
+const reject = () => {
+    this.swipped(this.currentCard)
+}
+const 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 })
+}
+const getUser = () => {
+}
+const onRequest = () => {
+    const data = { ...this.currentCard }
+}
+const accept = () => {
+    console.log('accepted')
+}
+const hold = () => {
+    console.log('held')
 }
+const pass = () => {
+    console.log('passed')
+
+}
+
+// from the data() section
+const config = {
+    // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
+    minThrowOutDistance: 250,
+    maxThrowOutDistance: 300,
+}
+const favorites = []
+const requests = []
+
+    // // I dont know how to convert these to the script setup method
+// created() {
+//     this.getUser(),
+// },
+// End conversion from script to script setup
+
+
 </script>
+
 <style lang="postcss">
 .profile_card_list_container
     display: flex