<commit_before><template>
    <main class="section column is-three-quarters">
        <div class="grid">
            <div v-for="board in boards" :key="board.name" class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        {{ board.name }}
                    </p>
                    <a href="#" class="card-header-icon" aria-label="more options">
                        <span class="icon">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </span>
                    </a>
                </header>
                <div class="card-content">
                    <div class="content">
                        {{ board.description }}
                    </div>
                </div>
                <footer class="card-footer">
                    <router-link to="" class="card-footer-item">
                        <span class="icon">
                            <i class="fa fa-thumb-tack" aria-hidden="true"></i>
                        </span>
                        <span>Pin</span>
                    </router-link>
                    <router-link :to="`~${board.slug}`" class="card-footer-item">
                        <span class="icon">
                            <i class="fa fa-sign-in" aria-hidden="true"></i>
                        </span>
                        <span>Visit</span>
                    </router-link>
                </footer>
            </div>
        </div>
    </main>
</template>

<script>
import { mapGetters } from 'vuex'

export default Vue.component('forum', {
    data() {
        return {
            collapsed: true
        }
    },
    computed: mapGetters({
        boards: 'forum/GET_BOARDS',
        error: 'GET_ERROR'
    }),
    async created() {
        await this.$store.dispatch('forum/loadBoards')
        await this.$store.dispatch('forum/loadStats')
    }
})
</script>


<style lang="sass">
.grid
    display: flex
    flex-flow: row wrap
    width: 100%
    
.grid .card
    display: flex
    flex: 1 1 15em
    flex-direction: column
    margin: 1em
    max-width: 50%
    
.grid .card-content
    flex: 1 1 auto

@supports(display: grid)
    .grid
        display: grid
        grid-template-columns: repeat(auto-fit, minmax(15em, 1fr))
        grid-gap: 1em

    .grid .card
        margin: 0
        max-width: none
</style><commit_msg>check for error before dispatching further actions.<commit_after><template>
    <main class="section column is-three-quarters">
        <div class="grid">
            <div v-for="board in boards" :key="board.name" class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        {{ board.name }}
                    </p>
                    <a href="#" class="card-header-icon" aria-label="more options">
                        <span class="icon">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </span>
                    </a>
                </header>
                <div class="card-content">
                    <div class="content">
                        {{ board.description }}
                    </div>
                </div>
                <footer class="card-footer">
                    <router-link to="" class="card-footer-item">
                        <span class="icon">
                            <i class="fa fa-thumb-tack" aria-hidden="true"></i>
                        </span>
                        <span>Pin</span>
                    </router-link>
                    <router-link :to="`~${board.slug}`" class="card-footer-item">
                        <span class="icon">
                            <i class="fa fa-sign-in" aria-hidden="true"></i>
                        </span>
                        <span>Visit</span>
                    </router-link>
                </footer>
            </div>
        </div>
    </main>
</template>

<script>
import { mapGetters } from 'vuex'

export default Vue.component('forum', {
    data() {
        return {
            collapsed: true
        }
    },
    computed: mapGetters({
        boards: 'forum/GET_BOARDS',
        error: 'GET_ERROR'
    }),
    async created() {
        await this.$store.dispatch('forum/loadBoards')

        if (!this.error) {
            await this.$store.dispatch('forum/loadStats')
        }
    }
})
</script>


<style lang="sass">
.grid
    display: flex
    flex-flow: row wrap
    width: 100%
    
.grid .card
    display: flex
    flex: 1 1 15em
    flex-direction: column
    margin: 1em
    max-width: 50%
    
.grid .card-content
    flex: 1 1 auto

@supports(display: grid)
    .grid
        display: grid
        grid-template-columns: repeat(auto-fit, minmax(15em, 1fr))
        grid-gap: 1em

    .grid .card
        margin: 0
        max-width: none
</style>
{'fraction_non_alphanumeric': 0.1388325901905148, 'fraction_numerical': 0.006890960680989056, 'mean_word_length': 1.2330316742081449, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6594082', 'n_tokens_mistral': 1426, 'n_tokens_neox': 1336, 'n_words': 295}