Replace Table with responsive Card. Add refresh of token and retry on 401 errors

utils/graph-client/middleware.js

@@ -1,15 +1,11 @@
+const webAuth = require("../auth").default;
+
 module.exports = {
-  includeCredentials: (tokenFn) => {
-    return ({options}, next) => {
-      if (!options.headers) {
-        options.headers = {};  // Create the headers object if needed.
-      }
-      const token = tokenFn();
-      if (token) {
-        options.headers['Authorization'] = 'Bearer ' + tokenFn();
-      }
-      options.credentials = 'same-origin'; // eslint-disable-line
-      next();
+  includeCredentials: (uri, options) => {
+    const token = webAuth.idToken();
+    if (token) {
+      options.headers['Authorization'] = 'Bearer ' + token;
     }
-  },
+    return fetch(uri, options);
+  }
 };

utils/graph-client/mutations.js

@@ -6,22 +6,21 @@ import {
   ignoreMunicipalityMutation,
   ignoreStateMutation,
 } from './mutationStrings';
-import webAuth from '../auth';
 
 /* eslint-disable max-len */
 export const ignoreBand = variables => {
-  return createQuery(webAuth.idToken, ignoreBandMutation, variables)
+  return createQuery(ignoreBandMutation, variables)
 };
 export const ignoreDanceHall = variables => {
-  return createQuery(webAuth.idToken, ignoreDanceHallMutation, variables)
+  return createQuery(ignoreDanceHallMutation, variables)
 };
 export const ignoreCity = variables => {
-  return createQuery(webAuth.idToken, ignoreCityMutation, variables)
+  return createQuery(ignoreCityMutation, variables)
 };
 export const ignoreMunicipality = variables => {
-  return createQuery(webAuth.idToken, ignoreMunicipalityMutation, variables)
+  return createQuery(ignoreMunicipalityMutation, variables)
 };
 export const ignoreState = variables => {
-  return createQuery(webAuth.idToken, ignoreStateMutation, variables)
+  return createQuery(ignoreStateMutation, variables)
 };
 /* eslint-enable max-len */

utils/graph-client/queries.js

@@ -2,9 +2,7 @@ import { createQuery } from './utils';
 import {
   eventQuery,
 } from './queryStrings';
-import webAuth from '../auth';
-
 
 /* eslint-disable max-len */
-export const findEvents = () => createQuery(webAuth.idToken, eventQuery);
+export const findEvents = () => createQuery(eventQuery);
 /* eslint-enable max-len */

utils/graph-client/utils.js

@@ -1,13 +1,48 @@
-const { createApolloFetch } = require('apollo-fetch');
+import { execute, makePromise, ApolloLink } from 'apollo-link';
+import { HttpLink } from 'apollo-link-http';
+import gql from 'graphql-tag';
 const { includeCredentials } = require('./middleware');
+import { onError } from 'apollo-link-error';
+import { default as webAuth} from '../auth';
 
 const defaultGraphUri = '/graph/';
+const httpLink = new HttpLink({ uri: defaultGraphUri, fetch: includeCredentials, credentials: 'same-origin' });
+const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
+      if (graphQLErrors) {
+        console.log('GraphQL errors:', graphQLErrors);
+        // for (let err of graphQLErrors) {
+        //   switch (err.extensions.code) {
+        //     case 'UNAUTHENTICATED':
+        //       // error code is set to UNAUTHENTICATED
+        //       // when AuthenticationError thrown in resolver
+        //
+        //       // modify the operation context with a new token
+        //   }
+        // }
+      }
+      if (networkError) {
+        if (networkError.statusCode === 401) {
+          webAuth.checkSession((response) => {
+            const oldHeaders = operation.getContext().headers;
+            operation.setContext({
+              headers: {
+                ...oldHeaders,
+                authorization: webAuth.idToken(),
+              },
+            });
+            return forward(operation);
+          }, (err) => {
+            console.log(err);
+          });
+        }
+      }
+    }
+);
 
-export const createQuery = (tokenFn, query, variables) => { // eslint-disable-line
-  const apollo = createApolloFetch({ uri: defaultGraphUri });
-
-  apollo.use(includeCredentials(tokenFn));
-  // apollo.useAfter(trackErrors);
-
-  return apollo({ query, variables });
+export const createQuery = (query, variables) => { // eslint-disable-line
+  const operation = {
+    query: gql(query),
+    variables: variables
+  };
+  return makePromise(execute(ApolloLink.from([errorLink, httpLink]), operation));
 };