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

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

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


<script>
import axios from 'axios';

import NavBar from '@/components/navbar'
import Sidebar from "@/components/Sidebar";
import FooterComponent from '@/components/footer'


export default {
    name: 'Main',
    components: {
        Sidebar,
        NavBar,
        FooterComponent
    },
    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;
        }
    },
    data() {
        return {
            user: null,
            quote: null
        }
    },
    mounted() {
        if (window.user) {
            this.user = window.user
        }
        if (window.quote) {
            this.quote = window.quote
        }
    }
}
</script>