first version of graphql state routing working

4_lit_refactor/3_6_app/src/components/author-highlight.js

@@ -13,7 +13,37 @@ import {
 } from "@andreas-galster/inkling/dist/ink-layout-helpers-lit";
 import { inkReset, uCSS } from "@andreas-galster/inkling";
 
-export class AuthorHighlight extends LitElement {
+import { apolloClient } from '../utils/apollo_client';
+import { ApolloQuery } from '@apollo-elements/lit-apollo';
+// import {getAuthor} from '../graphql-store/getAuthor';
+import getAuthor from '../graphql-store/getAuthor.graphql';
+import getRouteDetails from '../graphql-store/getRouteDetails.graphql';
+import { nothing } from "lit-html";
+
+
+// export class AuthorHighlight extends LitElement {
+// export class GraphQLTest extends LitElement {
+export class AuthorHighlight extends ApolloQuery {
+  @property({ type: Object }) person = {};
+  client = apolloClient;
+  query = getAuthor;
+
+  constructor() {
+    super();
+    // this.variables = {
+    //   humanId: "tony-robbins"
+    // }
+    this.createVariables();
+  }
+
+  async createVariables() {
+    let variable = await this.client.query({ query: getRouteDetails});
+
+    this.variables = {
+      humanId: variable.data.getRouteDetails.routeParam
+    }
+  }
+
   static styles = css`
     :host {
       cursor: pointer;
@@ -65,9 +95,6 @@ export class AuthorHighlight extends LitElement {
 
   `;
 
-  @property({ type: Object }) person = {};
-  // ${this.person.author.pictures.cardPic}
-
   getSocialText(val) {
     switch(val) {
       case 'facebook':
@@ -81,24 +108,40 @@ export class AuthorHighlight extends LitElement {
     }
   }
 
-
   render() {
-    return html`
-      ${inkReset}
+    const { data, error, loading } = this;
+    // const { person = {} } = data || {}
+    const person = data.getAuthor || {};
+
+    console.log(person);
+
+    console.log(this.variables);
+    if(!this.variables) {
+      return nothing;
+    }
+
+    return (
+        loading ? html`
+          <what-spin></what-spin>`
+      : error ? html`
+          <h1>😢 Such Sad, Very Error! 😰</h1>
+          <div>${error ? error.message : 'Unknown Error'}</div>`
+      : html`
+          ${inkReset}
 
         <mwc-card>
-            <img src=${this.person.author.pictures.profilePic}>
+            <img src=${person.pictures.profilePic}>
 
             <h1>Categories</h1>
-            ${this.person.author.categories.map(
+            ${person.categories.map(
               c =>
                 html`
                   <mwc-chip>${c}</mwc-chip>
                 `
             )}
 
             <h1>Followers</h1>
-            ${this.person.author.socialMedia.map(
+            ${person.socialMedia.map(
               c =>
                 html`
                   <a href=${c.link}>
@@ -107,9 +150,41 @@ export class AuthorHighlight extends LitElement {
                   </a>
                 `
             )}
-        </mwc-card>
-    `;
+        </mwc-card>          
+      `
+    );
+
   }
+
+
+  // render() {
+  //   return html`
+  //     ${inkReset}
+
+  //       <mwc-card>
+  //           <img src=${this.person.author.pictures.profilePic}>
+
+  //           <h1>Categories</h1>
+  //           ${this.person.author.categories.map(
+  //             c =>
+  //               html`
+  //                 <mwc-chip>${c}</mwc-chip>
+  //               `
+  //           )}
+
+  //           <h1>Followers</h1>
+  //           ${this.person.author.socialMedia.map(
+  //             c =>
+  //               html`
+  //                 <a href=${c.link}>
+  //                   <img src='../assets/${c.networkName}-icon.svg'>
+  //                   <p>${new Intl.NumberFormat('en-US').format(c.count)} ${this.getSocialText(c.networkName)}</p>
+  //                 </a>
+  //               `
+  //           )}
+  //       </mwc-card>
+  //   `;
+  // }
 }
 
 customElements.define("author-highlight", AuthorHighlight);

4_lit_refactor/3_6_app/src/components/header-author.js

@@ -3,8 +3,6 @@ import { Button } from "@material/mwc-button";
 import { inkReset } from "@andreas-galster/inkling";
 import { HeaderBase } from "./header-base";
 
-console.log('nothing', nothing);
-
 export class HeaderAuthor extends HeaderBase {
   static get styles() { 
     return [

4_lit_refactor/3_6_app/src/components/page-view-element.js

@@ -1,12 +1,46 @@
 import { LitElement, property } from "lit-element";
 import { ApolloQuery } from '@apollo-elements/lit-apollo';
 import { apolloClient } from '../utils/apollo_client';
+import gql from 'graphql-tag';
+// import {getRouteDetails} from '../graphql-store/getRouteDetails';
+import getRouteDetails from '../graphql-store/getRouteDetails.graphql';
+
 
 export class PageViewElement extends ApolloQuery {
 // export class PageViewElement extends LitElement {
+    constructor() {
+        super();
+        this.query = getRouteDetails;
+    }
+
+
+
     @property({ type: Boolean }) active;
     client = apolloClient;
 
+    // render() {
+    //     const { data, error, loading } = this;
+    //     const { item = {} } = data || {}
+
+    //     console.log(` here is some ${data}`);
+
+    //     return '';
+    // }
+
+
+
+	// render() {
+	// 	const { data, error, loading } = this;
+    //     const { item = {} } = data || {}
+    //     console.log(data);
+    //     console.log(` here is some ${data}`);
+    //     console.log('yohohohoho');
+
+	// 	return html`
+	// 	`;
+	// }
+
+
     // // Only render this page if it's actually visible.
     // shouldUpdate(changedProps) {
     // //   _shouldRender(props, changedProps, old) {

4_lit_refactor/3_6_app/src/graphql-store/getAuthor.graphql

@@ -0,0 +1,51 @@
+query getAuthor($humanId: String) {
+    getAuthor(humanId: $humanId) {
+        _id
+        humanId
+        firstName
+        lastName
+        pictures {
+            headerPic
+            profilePic
+            cardPic
+        }
+        socialMedia {
+            networkName
+            count
+            link
+        }
+        categories
+        typeOfPerson 
+        quotes {
+            _id
+            authorId
+            quote
+        }
+        books {
+            _id
+            humanId
+            authorId
+            title
+            teaser
+            image
+            introduction
+            reviewText
+            reviewVideo
+            keyTakeaways
+            audioBook
+        }    
+    }
+
+}
+
+
+
+
+# query getAuthor {
+#     getAuthor(humanId: "darren-hardy") {
+#         _id
+#         humanId
+#         firstName
+#         lastName
+#     }
+# }

4_lit_refactor/3_6_app/src/graphql-store/getAuthor.js

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+
+// Compute graphql documents statically for performance
+export const getAuthor = gql`
+  query($humanId: String) {
+    getAuthor(humanId: $humanId) {
+      _id
+      humanId
+      firstName
+      lastName
+    }
+  }
+`;

4_lit_refactor/3_6_app/src/graphql-store/getRouteDetails.graphql

@@ -0,0 +1,6 @@
+query getRouteDetails {
+    getRouteDetails @client {
+        routePath 
+        routeParam
+    }
+}

4_lit_refactor/3_6_app/src/graphql-store/getRouteDetails.js

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag';
+
+export const getRouteDetails = gql`
+  query {
+    getRouteDetails @client {
+      routePath 
+      routeParam
+    }
+  }
+`;

4_lit_refactor/3_6_app/src/utils/apollo_client.js

@@ -6,7 +6,8 @@ import { setContext } from 'apollo-link-context';
 import { RetryLink } from 'apollo-link-retry';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import { persistCache, CachePersistor } from 'apollo-cache-persist';
-
+import gql from 'graphql-tag';
+import {getRouteDetails} from '../graphql-store/getRouteDetails';
 
 // First we set the URL for the API endpoint
 // Defaults to localhost on dev, and URL on production
@@ -66,7 +67,71 @@ const defaultOptions = {
 const apolloClient = new ApolloClient({
   cache: cache,
   link: httpLinkWithAuthToken,
-  defaultOptions: defaultOptions
+  defaultOptions: defaultOptions,
+  typeDefs: gql`
+    type Route {
+      routePath: String
+      routeParam: String
+    }
+
+    extend type Query {
+      getRouteDetails: Route
+    }
+
+    extend type Mutation {
+      updateRouteDetails(routePath: String, routeParam: String): Route
+    }
+  `,  
+  resolvers: {
+    Query: {
+      // getRouteDetails: (root, args, context, info) => ({routePath: 'bla', routeParam: 'blubb'})
+      getRouteDetails(_, __, {cache}) {
+        const { routeDetails } = cache.readQuery({ query: getRouteDetails });
+        console.log('running resolver');
+        console.log(routeDetails);
+      //   // return a read from the cache
+      }          
+      // Or make a remote API call
+    },
+    Mutation: {
+      updateRouteDetails(_, {routePath, routeParam}, {cache}) {
+        console.log('running update route resolver');
+
+        console.log(cache);
+        console.log(routePath);
+        console.log(routeParam);
+
+        cache.writeData({ 
+          data: { 
+            getRouteDetails: {
+              __typename: 'Route',
+              routePath, 
+              routeParam
+            } 
+          } 
+        })
+      }
+    }
+
+    // Route: {
+    //   isInCart: (route, _args, { cache }) => {
+    //     const { cartItems } = cache.readQuery({ ,
+    //       query: GET_CART_ITEMS 
+    //     });
+    //     return cartItems.includes(route.id);
+    //   },
+    // },  
+  }
+});
+
+cache.writeData({
+  data: {
+    getRouteDetails: {
+      __typename: 'Route',
+      routePath: '',
+      routeParam: ''
+    },
+  },
 });
 
 // persistCache({