<template>
  <LayoutNavbarPrivate>
    <section>
      <h2 class="center">History</h2>
      <div class="center">
        <b-spinner v-if="working"></b-spinner>
      </div>
      <JugglRecordsList :records="finishedRecords" v-if="!working" />
    </section>
  </LayoutNavbarPrivate>
</template>

<script>
import LayoutNavbarPrivate from "@/components/layout/LayoutNavbarPrivate";
import JugglRecordsList from "@/components/juggl/JugglRecordsList";
import store from "@/store";

export default {
  name: "Home",
  data: () => {
    return {
      working: true
    };
  },
  components: {
    LayoutNavbarPrivate,
    JugglRecordsList
  },
  computed: {
    finishedRecords: () => {
      return store.getters.finishedRecords;
    }
  },
  created: function() {
    store.dispatch("loadProjects");
    store
      .dispatch("loadRecords", { limit: 0, finished: true })
      .then(() => {
        this.working = false;
      })
      .catch(() => {
        this.working = false;
      });
  },
  beforeDestroy: function() {
    store.dispatch("removeLocalRecords");
  }
};
</script>

<style lang="sass">
.center
  text-align: center

section
  margin-bottom: 4rem
</style>
