Vuex, Firestore for data, Firebase Storage for image files

index.js

import * as db from '../../db'
import firebase from 'firebase'
import _ from 'lodash'

export const RECEIVE_ACTIVE_PROJECTS = 'RECEIVE_ACTIVE_PROJECTS'
export const RECEIVE_DELETED_PROJECTS = 'RECEIVE_DELETED_PROJECTS'
export const LOADING_PROJECTS = 'LOADING_PROJECTS'
export const SELECT_PROJECT = 'SELECT_PROJECT'

// initial state
const state = {
  loading: false,
  projects: {},
  deleted: {},
  selectedProject: undefined
}

// getters
const getters = {
  projects: state => _.values(state.projects),
  deleted: state => _.values(state.deleted),
  loading: state => state.loading,
  selectedProject: state => state.projects[state.selectedProject]
}

// actions
const actions = {
  findAll({ commit }) {
    commit(LOADING_PROJECTS, true)
    console.log('DATABASE HIT')
    db.projects.onSnapshot(function(snapshot) {
      let projects = {}
      snapshot.forEach(doc => {
        let project = doc.data()
        project.id = doc.id
        projects[project.id] = project
      })
      const activeProjects = _.pickBy(projects, function(project) {
        return !project.deleted
      })
      const deletedProjects = _.pickBy(projects, function(project) {
        return project.deleted
      })
      commit(RECEIVE_ACTIVE_PROJECTS, { activeProjects })
      commit(RECEIVE_DELETED_PROJECTS, { deletedProjects })
    })
    commit(LOADING_PROJECTS, false)
  },
  // checks state.projects for a project with matching fUrl. Grabs project.id and commits to SELECT_PROJECT
  // when a url is entered it will pull the friendly url (fUrl) and associate it to a project.
  findByFurl({ commit, dispatch, state }, fUrl) {
    commit(LOADING_PROJECTS, true)
    let foundProject = _.filter(state.projects, { fUrl: fUrl })
    let selectedProject = foundProject[0].id
    commit(SELECT_PROJECT, selectedProject)
    commit(LOADING_PROJECTS, false)
  },
  // adds the currently selected project to the state 
  selectProject({ commit }, selectedProject) {
    commit(SELECT_PROJECT, selectedProject)
  },

  insert({ commit, dispatch }, project) {
    var dataUpload = {
      name: project.name,
      location: project.location,
      fUrl: project.fUrl,
      description: project.description,
      featured: project.featured,
      imgUrl: '',
      imgName: ''
    }
    let id
    db.projects
      .add(dataUpload)
      .then(data => {
        id = data.id
        return id
      })
      .then(id => {
        const filename = project.image.name
        const ext = filename.slice(filename.lastIndexOf('.'))
        return firebase
          .storage()
          .ref('projects/' + id + ext)
          .put(project.image)
      })
      .then(fileData => {
        dataUpload.imgUrl = fileData.metadata.downloadURLs[0]
        dataUpload.imgName = fileData.metadata.name
        db.projects.doc(id).set(dataUpload)
      })
  },

  update({ commit, dispatch }, project) {
    var dataUpload = {
      id: project.id,
      name: project.name,
      fUrl: project.fUrl,
      location: project.location,
      description: project.description,
      featured: project.featured,
      imgUrl: project.imgUrl,
      imgName: project.imgName
    }
    if (project.imageChanged) {
      const filename = project.image.name
      const ext = filename.slice(filename.lastIndexOf('.'))
      firebase
        .storage()
        .ref('projects/' + project.imgName)
        .delete()
      return firebase
        .storage()
        .ref('projects/' + project.id + ext)
        .put(project.image)
        .then(fileData => {
          dataUpload.imgUrl = fileData.metadata.downloadURLs[0]
          dataUpload.imgName = fileData.metadata.name
          db.projects.doc(dataUpload.id).set(dataUpload)
        })
    } else {
      db.projects.doc(dataUpload.id).set(dataUpload)
    }
  },

  delete({ commit, dispatch, state }, project) {
    console.log(project)
    db.projects.doc(project.id).update({ deleted: true })
    return
  }
}

// mutations
const mutations = {
  [RECEIVE_ACTIVE_PROJECTS](state, { activeProjects }) {
    state.projects = activeProjects
  },

  [RECEIVE_DELETED_PROJECTS](state, { deletedProjects }) {
    state.deleted = deletedProjects
  },

  [SELECT_PROJECT](state, selectedProject) {
    state.selectedProject = selectedProject
  },

  [LOADING_PROJECTS](state, value) {
    state.loading = value
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}