vue-wp/vue-theme/src/store/modules/artist.js

import api from '../../utils/api'
import { sortTypes } from '../../utils/helpers'

const state = {
    all: [],
    loaded: false,
    singleArtist: null,
    seenTitles: []
}

const getters = {
    allArtists: state => state.all,
    allArtistsBySlug: state =>
        Object.values(state.all).reduce((bySlug, artist) => {
            bySlug[artist.slug] = artist
            return bySlug
        }, {}),
    allArtistsLoaded: state => state.loaded,
}


const _arrangeByMaterial = artistsList => {
    const byMaterial = {
        clay: []
    }
    artistsList.forEach(artist => {
        artist.materials.forEach(mat => {
            if(!byMaterial[mat]) byMaterial[mat] = []
            byMaterial[mat].push(artist)
        })
    })
    const flatPacked = []
    Object.keys(byMaterial).forEach(material => {
        flatPacked.push({ slug: material, title: material, inbetween: true })
        byMaterial[material].forEach(artist => flatPacked.push(artist))
    })
    return flatPacked
}

const _arrangeByAlpha = artistsList => {
    const alphabet = [...'9abcdefghijklmnopqrstuvwxyz']
    const flatPacked = []
    
    const storeTitle = letter => {
        if(state.seenTitles.includes(letter)) return
        flatPacked.push({ slug: letter, title: letter, inbetween: true })
        state.seenTitles.push(letter)
    }

    artistsList.forEach(artist => {
        const lastWord = artist.slug.split('-').filter(c => c).pop()
        const firstCharaOflastWord = lastWord[0]
        const firstCharaOfSortWord = artist.sortname ? artist.sortname[0] : 'z'
        const charaIndex = alphabet.indexOf(firstCharaOflastWord) < alphabet.indexOf(firstCharaOfSortWord) ? alphabet.indexOf(firstCharaOflastWord) : alphabet.indexOf(firstCharaOfSortWord)

        storeTitle(alphabet[charaIndex])
        flatPacked.push(artist)
    })
    return flatPacked
}

const actions = {
    getAllArtists({ commit }, { sortType, params }) {
        commit('CLEAR_ARTISTS')
        commit('ARTISTS_LOADED', false)
        const storeFetch = (artists => {
            let repacked = artists
            if(sortType == sortTypes.material) {
                repacked = _arrangeByMaterial(artists)
            }
            commit('STORE_FETCHED_ARTISTS', { artists: repacked })
            commit('ARTISTS_LOADED', true)
        })
        return api.getByType({ type: 'artist', sort: sortType, params, cb: storeFetch })
    },
    getMoreArtists({ commit }, { sortType, params }) {
        commit('ARTISTS_LOADED', false)
        const storeFetch = (artists => {
            let repacked = artists
            if(sortType == sortTypes.alpha) {
                repacked = _arrangeByAlpha(artists)
            }
            commit('ADD_TO_FETCHED_ARTISTS', { artists: repacked })
            commit('ARTISTS_LOADED', true)
        })
        return api.getByType({ type: 'artist', sort: sortType, params, cb: storeFetch })
    },
    getSingleArtist({ commit }, id) {
        commit('CLEAR_SINGLE_ARTISTS')
        commit('ARTISTS_LOADED', false)

        api.getSingleType('artist', id, artist => {
            commit('STORE_FETCHED_SINGLE_ARTIST', artist)
            commit('ARTISTS_LOADED', true)
        })
    },
}

const mutations = {
    ADD_TO_FETCHED_ARTISTS(state, { artists }) {
        state.all = [...state.all, ...artists]
    },
    STORE_FETCHED_ARTISTS(state, { artists }) {
        state.all = artists
    },
    STORE_FETCHED_SINGLE_ARTIST(state, artist) {
        state.singleArtist = artist
    },
    CLEAR_ARTISTS(state) {
        state.all = []
    },
    CLEAR_ARTISTS_SEEN(state) {
        state.seenTitles = []
    },
    CLEAR_SINGLE_ARTISTS(state) {
        state.singleArtist = null
    },
    ARTISTS_LOADED(state, val) {
        state.loaded = val
    },
}

export default { state, getters, actions, mutations }