<template>
	<div>
		<nav-bar
			:user="user"
			@invalidate-user="onInvalidateUser"
		/>

		<b-container
			fluid
			class="mt-5 main-content"
		>
			<b-row>
				<div class="col-2">
					<sidebar/>
				</div>
				<div class="col-9 box">
					<router-view
						:quote="quote"
						@user-authenticated="onUserAuthenticated"
					/>
				</div>
				<div class="col mt-2"/>
			</b-row>
		</b-container>

		<footer-component/>
	</div>
</template>

<script>
import axios from 'axios';

import NavBar from '@/components/TheNavbar';
import Sidebar from '@/components/sidebar';
import FooterComponent from '@/components/footer';

export default {
	name: 'App',
	components: {
		Sidebar,
		NavBar,
		FooterComponent
	},
	data() {
		return {
			user: null,
			quote: null
		};
	},
	mounted() {
		if (window.user) {
			this.user = window.user;
			console.log(this.user);
		}
		if (window.quote) {
			this.quote = window.quote;
		}
	},
	methods: {
		onUserAuthenticated(userUri) {
			console.log('authenticated');
			axios
				.get(userUri)
				.then((response) => {
					this.user = response.data;
				});
			this.$router.push('/');
		},
		onInvalidateUser() {
			console.log('invalidated');
			this.user = null;
		}
	}
};
</script>
