DIsplaying homepage with dev counts per tech #30

* auth token fix * single GQL query * homepage with devsPerLanguageQuery
stackmuncher · Feb 15, 2022 · 69aeeab · 69aeeab
1 parent 5f2f0a5
commit 69aeeab
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 24 deletions.
diff --git a/stm_vue_ui/src/graphql/queries.ts b/stm_vue_ui/src/graphql/queries.ts
@@ -0,0 +1,19 @@
+import gql from 'graphql-tag'
+
+export const devsPerLanguageQuery = gql`query 
+{ 
+  devsPerLanguage 
+  { 
+    aggregations 
+    {
+      agg 
+      {
+        buckets 
+        {
+          key, 
+          docCount
+        }
+      }
+    }
+  }
+}`
diff --git a/stm_vue_ui/src/main.ts b/stm_vue_ui/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 import router from './router'
-import VueAuth0Plugin from 'vue-auth0-plugin'
+import VueAuth0Plugin, { AuthenticationProperties as auth0 } from 'vue-auth0-plugin'
 import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
 import { setContext } from '@apollo/client/link/context'
 import { createApolloProvider } from '@vue/apollo-option'
@@ -11,14 +11,14 @@ const httpLink = createHttpLink({
   uri: 'https://jv4ztf9od8.execute-api.us-east-1.amazonaws.com'
 })
 
-const authLink = setContext((_, { headers }) => {
-  // get the authentication token from local storage if it exists
-  const token = 'jwt-token' // localStorage.getItem('jwt')
-  // return the headers to the context so httpLink can read them
+// middleware required to inject a JWT into every GQL request
+// see https://github.com/jnt0r/vue-auth0-plugin, https://github.com/apollographql/apollo-client/issues/2441, https://www.apollographql.com/docs/react/networking/authentication/
+const authLink = setContext(async (_, { headers }) => {
+  const token = await auth0.getIdTokenClaims()
   return {
     headers: {
       ...headers,
-      authorization: token ? `Bearer ${token}` : ''
+      authorization: token ? `Bearer ${token.__raw}` : ''
     }
   }
 })

diff --git a/stm_vue_ui/src/views/Home.vue b/stm_vue_ui/src/views/Home.vue
@@ -28,11 +28,8 @@
             <span>{{ auth.loading ? 'Loading' : 'Not loading' }}</span>
             <span>User: {{ auth.user?.name || 'NO_USER' }}</span>
             <span>Email: {{ auth.user?.email || 'NO_EMAIL' }}</span>
-            <span>JWT: {{ jwt || 'NO_TOKEN' }}</span>
           </div>
 
-          <p>Response: {{ test }}</p>
-
           <div class="d-flex mt-4">
             <input
               id="kw"
@@ -56,17 +53,24 @@
             Find software developers by their technology stack, e.g. <code>typescript vuejs apollo</code> or <code>c# sql cosmos</code>
           </p> <h6 class="mt-5 mb-3">
             Developers per language
-          </h6> <ul class="list-inline">
-            <li class="list-inline-item bg-light text-dark p-1 rounded mb-3 border me-4">
+          </h6> <ul
+            v-if="devsPerLanguage"
+            class="list-inline"
+          >
+            <li
+              v-for="bucket in devsPerLanguage.aggregations.agg.buckets"
+              :key="bucket.key"
+              class="list-inline-item bg-light text-dark p-1 rounded mb-3 border me-4"
+            >
               <a
-                title="c# developers"
+                :title="`${bucket.key} developers`"
                 style="text-decoration: underline #6c757d;"
                 class="text-dark"
-                href="/?c%23"
-              > C# <span
+                href="/?{{ bucket.key }}"
+              > {{ bucket.key }} <span
                 class="badge bg-white text-dark ms-2"
                 style="font-weight: 300;"
-              >335,638</span></a>
+              >{{ bucket.docCount }}</span></a>
             </li>
           </ul> <h6 class="mt-5">
             About StackMuncher
@@ -85,7 +89,7 @@
 <script>
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
-import gql from 'graphql-tag'
+import { devsPerLanguageQuery } from '@/graphql/queries.ts'
 
 export default {
   name: 'Home',
@@ -95,19 +99,15 @@ export default {
   inject: ['auth'],
   data () {
     return {
-    // Initialize your apollo data
-      test: 'init'
+      devsPerLanguage: null,
+      loading: 0
     }
   },
   computed: {
-    jwt () {
-      const j = this.auth.getIdTokenClaims()
-      console.log(j)
-      return 'j.__raw'
-    }
+
   },
   apollo: {
-    test: gql`query { test }`
+    devsPerLanguage: devsPerLanguageQuery
   }
 
 }