Updated Map View

resources/js/Components/FlightsGoneBy/ProfileHeader.vue

@@ -3,24 +3,16 @@ import { usePage } from "@inertiajs/vue3";
 import { computed, ref } from "vue";
 import type { Flight, User, SharedProps } from "@/Types/types";
 import { Link } from "@inertiajs/vue3";
+import FollowButton from "@/Components/FlightsGoneBy/FollowButton.vue";
 
 const props = defineProps<{
     user: User
     flightCount?: number
     achievementCount?: number
-    isFollowing?: boolean
+    followStatus?: string
     show: "flights" | "achievements"
 }>()
 
-const auth = usePage<SharedProps>().props.auth
-const isOwnProfile = computed(() => auth.user?.id == props.user.id)
-const isLoggedIn = computed(() => !!auth.user)
-
-const following = ref(props.isFollowing ?? false)
-const processing = ref(false)
-const snackbar = ref(false)
-const snackbarMessage = ref('')
-
 const counts = computed(() => {
     return {
         flights: props.flightCount ?? 0,
@@ -28,21 +20,7 @@ const counts = computed(() => {
     } as Record<"flights" | "achievements", number>
 })
 
-const follow = async () => {
-    processing.value = true
-    const response = await fetch(route('profile.follow', { user: props.user.name }), {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '',
-        },
-    })
-    const data = await response.json()
-    following.value = data.following
-    snackbarMessage.value = data.following ? `You are now following ${props.user.name}` : `You unfollowed ${props.user.name}`
-    snackbar.value = true
-    processing.value = false
-}
+
 </script>
 
 <template>
@@ -56,14 +34,7 @@ const follow = async () => {
                             {{ user.name }}
                         </Link>
                     </h1>
-                    <button
-                        v-if="isLoggedIn && !isOwnProfile"
-                        class="follow-btn"
-                        :disabled="processing"
-                        @click="follow"
-                    >
-                        {{ following ? 'Following' : '+ Follow' }}
-                    </button>
+                    <FollowButton v-if="followStatus !== undefined" :user="user" :followStatus="followStatus" />
                 </div>
             </div>
         </div>
@@ -73,13 +44,6 @@ const follow = async () => {
             <span class="count-label">{{show.toUpperCase()}}</span>
         </div>
     </div>
-
-    <v-snackbar v-model="snackbar" :timeout="5000" color="#ffc107" location="bottom center">
-        {{ snackbarMessage }}
-        <template #actions>
-            <v-btn variant="text" @click="snackbar = false">Close</v-btn>
-        </template>
-    </v-snackbar>
 </template>
 
 <style scoped>
@@ -126,30 +90,6 @@ const follow = async () => {
         padding: 1em
 }
 
-.follow-btn {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.75rem;
-    letter-spacing: 0.12em;
-    color: #ffc107;
-    background: none;
-    border: 1px solid rgba(255, 193, 7, 0.35);
-    border-radius: 4px;
-    padding: 0.3em 0.85em;
-    cursor: pointer;
-    transition: background 0.15s ease;
-    white-space: nowrap;
-    align-self: center;
-}
-
-.follow-btn:hover:not(:disabled) {
-    background: rgba(255, 193, 7, 0.1);
-}
-
-.follow-btn:disabled {
-    opacity: 0.5;
-    cursor: default;
-}
-
 .board-count {
     text-align: right;
     line-height: 1;