<template>
  <div v-loading="isLoading">
      <v-button
        icon="edit"
        @click="goToPostCreate"
    >
      {{ $t('page_unit.btn_create_post') }}
    </v-button>
    <PostList :unit-posts="unitPosts" />
  </div>
</template>

<script>
import VButton from '../../../../components/ui/v-button/VButton'
import {
  POST_CREATE_ROUTE_NAME
} from '../../../../shared/constants/app-routes-names'
import { fetchUnitPosts } from '../../services/unit-post-service'
import PostList from './components/post-list/PostList'

export default {
  name: 'UnitTabBlog',
  components: {PostList, VButton},
  props: {
    unitId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      unitPosts: [],
      isLoading: false
    }
  },
  created() {
    this.fetchPosts()
  },
  methods: {
    goToPostCreate() {
      const unitID = this.unitId
      this.$router.push({name: POST_CREATE_ROUTE_NAME, params: {unitID}})
    },
    fetchPosts() {
      const {unitID} = this.$route.params
      this.isLoading = true
      fetchUnitPosts(unitID)
        .then((res) => {
          this.unitPosts = res
        })
        .finally(() => {
          this.isLoading = false
        })
    }
  },
}
</script>

<style scoped>

</style>
