<template>
 <div class="row">
   <div class="col-sm-12 col-md-4">
     <Files v-if="hasData" :project="project"/>
     <Clips v-if="hasData" :project="project"/>
   </div>
   <div class="col-sm-12 col-md-8">
     <Preview v-if="hasData" :project="project"/>
   </div>
 </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import Files from "../components/Files";
import Clips from "../components/Clips";
import Preview from "../components/Preview";

export default {
  name: "Editor.vue",
  data() {
    return {
      hasData: false,
    }
  },
  methods: {
    ...mapActions(['getProject']),
    ...mapMutations(['addError', 'setProject'])
  },
  computed: {
    id() {
      return this.$route.params.id
    },
    ...mapState(['project'])
  },
  components: {
    Files, Clips, Preview
  },
  async mounted() {
    try {
      let results = await this.getProject(this.$route.params.id)
      this.setProject(results.data)
      this.hasData = true
    } catch(err) {
      // Handle 404
      this.addError(err.response.data)
      await this.$router.push(`/`)
    }
  },
  unmounted() {
    this.setProject(null)
  }
}
</script>

<style scoped>

</style>