Issue 16: Add Rocket Employee Store

nuxt.config.js

@@ -79,7 +79,10 @@ export default {
   /*
   ** Nuxt.js modules
   */
-  modules: ['@nuxtjs/firebase'],
+  modules: ['@nuxtjs/firebase', '@nuxt/http'],
+  http: {
+    // proxyHeaders: false
+  },
   firebase: {
     config: {
       apiKey: process.env.FIREBASE_API_KEY,
@@ -132,5 +135,11 @@ export default {
     */
     extend (config, ctx) {
     }
+  }, 
+  publicRuntimeConfig: {
+    spacesId: process.env.CONTENTFUL_SPACES_ID,
+    contentfulAccessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
+    contentfulApiUrl: process.env.CONTENTFUL_FULL_URL,
+    slackBearerToken: process.env.SLACK_BEARER_TOKEN
   }
 }

package.json

@@ -12,11 +12,14 @@
   },
   "dependencies": {
     "@mux/mux-node": "^3.1.0",
+    "@nuxt/http": "^0.6.4",
     "@nuxtjs/firebase": "^7.3.0",
     "@nuxtjs/style-resources": "^1.0.0",
+    "@slack/web-api": "^6.3.0",
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
     "dotenv": "^8.2.0",
+    "express": "^4.17.1",
     "firebase": "^8.0.1",
     "gsap": "^3.3.4",
     "lodash": "^4.17.15",

src/pages/index.vue

@@ -1,22 +1,20 @@
 <template>
   <section>
-    <nav>
-      <h3>{{user && user.displayName}}</h3>
-      <button @click.stop.prevent="signInWithRedirect('google')">
-        Sign In With Google
-      </button>
-      <button @click.stop.prevent="signOut">
-        Sign Out
-      </button>
-    </nav>
-    <h2 class="title">Disney Movies</h2>
-    <ul class="movies">
-      <li v-for="movie in disneyMovies" :key="movie.title">
-        {{movie.title}}
+    <h2 class="title">Rocket Employees</h2>
+    <ul v-for="employee in employeeHeadshots" :key="employee.id">
+      <li >
+        Name: {{employee.name}}
       </li>
+      <li >
+        Position: {{employee.position}}
+      </li>
+      <img :src="`${employee.imageUrl}`" />
+      <!-- Employee ID commented out for privacy -->
+      <!-- <li >
+        ID: {{employee.id}}
+      </li> -->
     </ul>
     <file-uploader />
-
   </section>
 </template>
 
@@ -28,19 +26,23 @@ export default {
   components: { FileUploader },
   computed: {
     ...mapGetters({
-      byStudio: 'movies/byStudio'
+      missingFromSite: 'rocket/missingFromSite'
     }),
     ...mapState({
-      user: ({ auth }) => auth.user
-    }),
-    disneyMovies () {
-      return this.byStudio('Disney')
-    }
+      user: ({ auth }) => auth.user,
+      employeeHeadshots: ({ rocket }) => rocket.employeeHeadshots
+    })
+  },
+  mounted() {
+    this.getContentfulEmployees(), 
+    this.getSlackEmployees()
   },
   methods: {
     ...mapActions({
       signInWithRedirect: 'auth/signInWithRedirect',
-      signOut: 'auth/signOut'
+      signOut: 'auth/signOut',
+      getContentfulEmployees: 'rocket/getContentfulEmployees', 
+      getSlackEmployees: 'rocket/getSlackEmployees'
     })
   }
 }

src/store/rocket.js

@@ -0,0 +1,69 @@
+import _ from 'lodash'
+import { WebClient } from '@slack/web-api'
+
+const state = () => {
+    return {employeeHeadshots: null, 
+      employeesMissingFromSite: null
+    }
+  };
+
+  const mutations = {
+    setEmployeeHeadshots(state, employeeHeadshots) {
+        state.employeeHeadshots = employeeHeadshots;
+      },
+    setEmployeesMissingFromSite(state, payload) {
+        const uniqueEmployees = _.differenceBy(payload, state.employeeHeadshots, 'name')
+        state.employeesMissingFromSite = uniqueEmployees;
+      }
+  };
+
+  const actions = {
+    async getContentfulEmployees ({ commit }) {
+        try{
+            const employees = await this.$http.$get(this.$config.contentfulApiUrl)
+            const itemsFields = ['fields.name', 'fields.position', 'fields.profilePic.sys.id','sys.id']
+            const itemsFilteredEmployees = _.map(employees.items, e => _.pick(e, itemsFields))
+            const includesFields = ['fields.file.fileName', 'fields.file.url', 'sys.id']
+            const includesFilteredEmployees = _.map(employees.includes.Asset, e => _.pick(e, includesFields))
+            const mergedFilteredEmployees = _.values(_.merge(_.keyBy(includesFilteredEmployees,'sys.id'), _.keyBy(itemsFilteredEmployees,'fields.profilePic.sys.id' ) ))
+            const formattedFinalFilteredEmployees = _.map(mergedFilteredEmployees, item => {
+            return {
+                      id:item.sys.id, 
+                      name:item.fields.name, 
+                      position:item.fields.position, 
+                      imageId:item.fields.profilePic.sys.id,
+                      imageName:item.fields.file.fileName, 
+                      imageUrl:item.fields.file.url
+                    }
+            }
+            )
+            commit('setEmployeeHeadshots', formattedFinalFilteredEmployees)
+        } catch(error) {
+            console.error(error.message)
+        }      
+  }, 
+    async getSlackEmployees ({ commit }) {
+      try{
+          const web = new WebClient(this.$config.slackBearerToken)
+          const slackEmployees = await web.users.list({team_id:'T03TAQHEU'})
+          const formattedNotBotEmployees = _.reduce(slackEmployees.members, (list, user) => {
+            if(!user.is_bot) {
+              list.push({"name": user.profile.real_name})
+            }
+            return list
+          },[])
+          commit('setEmployeesMissingFromSite', formattedNotBotEmployees)
+      } catch (error) {
+          console.error(error.message)
+      }
+    }
+  }
+
+  const getters = {
+    missingFromSite (state) {
+      return state.employeesMissingFromSite
+    }
+  };
+
+  export default { state, mutations, actions, getters };
+