<script>
import { defineComponent } from 'vue'
import VideoFeed from '@/components/VideoFeed.vue'
import Sidebar from '@/components/Sidebar.vue'
import axios from 'axios'
import { config } from '@/main.js'

export default defineComponent({
	name: 'ProfileVideosView',
	components: { Sidebar, VideoFeed },
	created () {
		const searchParams = new URLSearchParams(window.location.search);
		if(searchParams.get('video')) this.url = `${config.serverURL}/account/${this.$route.params.id}/videos?video=${searchParams.get('video')}`
		else this.url = `${config.serverURL}/account/${this.$route.params.id}/videos`

		// Fetch feed data //
		axios
			.get(this.url, {
				withCredentials: true,
			})
			.then((response) => {
				if (response.data.error) return;
				this.data = response.data
				console.log(this.data)
			})
			.catch((error) => {
				console.error('Error in getting feed!')
				console.error(error)
			})
	},
	data () {
		return {
			data: null
		}
	}
})
</script>

<template>
	<div class="main">
		<Sidebar />
		<VideoFeed v-if="this.data" :feed="this.data" />
		<p v-else>loading</p>
	</div>
</template>

<style scoped></style>
