latest state, layout mostly done, graphql added, time to stitch up

AndreasGalster · Feb 28, 2019 · e8beba0 · e8beba0
1 parent e36a121
commit e8beba0
Show file tree

Hide file tree

Showing 19 changed files with 760 additions and 106 deletions.
diff --git a/4_lit_refactor/3_6_app/index.html b/4_lit_refactor/3_6_app/index.html
@@ -5,8 +5,24 @@
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes'>
 
+    <base href="http://localhost:9000/">
     <script src='/app.js' async></script>
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet"> -->
+    <script>
+        WebFontConfig = {
+          google: { families: [ 'Source+Sans+Pro:300,400,600' ] }
+        };
+        (function() {
+          var wf = document.createElement('script');
+          wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+            '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
+          wf.type = 'text/javascript';
+          wf.async = 'true';
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(wf, s);
+        })(); 
+    </script>
+
 </head>
 <body>
     <app-shell></app-shell>

diff --git a/4_lit_refactor/3_6_app/package.json b/4_lit_refactor/3_6_app/package.json
@@ -18,17 +18,27 @@
     "copy-webpack-plugin": "^4.6.0",
     "file-loader": "^3.0.1",
     "nodemon": "^1.18.9",
+    "patch-package": "^6.0.4",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "@andreas-galster/inkling": "0.3.2",
+    "@andreas-galster/inkling": "0.3.4",
+    "@apollo-elements/lit-apollo": "^0.0.9",
     "@captaincodeman/redux-connect-element": "^1.0.0-beta.0",
     "@material/mwc-button": "^0.3.6",
     "@webcomponents/webcomponentsjs": "^2.2.4",
+    "apollo-cache-inmemory": "^1.5.0",
+    "apollo-cache-persist": "^0.1.1",
+    "apollo-client": "^2.5.0",
+    "apollo-link-context": "^1.0.14",
+    "apollo-link-http": "^1.5.11",
+    "apollo-link-retry": "^2.2.10",
     "express": "^4.16.4",
     "faker": "^4.1.0",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
     "lit-element": "^2.0.1",
     "pwa-helpers": "^0.9.1",
     "redux": "^4.0.1",

diff --git a/4_lit_refactor/3_6_app/src/_mocks.js b/4_lit_refactor/3_6_app/src/_mocks.js
@@ -12,6 +12,19 @@ export const quotesHeader = {
   }
 };
 
+export const booksHeader = {
+  id: faker.random.uuid(),
+  humanId: faker.random.uuid(),
+  firstName: faker.name.firstName(),
+  lastName: faker.name.lastName(),
+  typeOfPerson: [faker.lorem.word(), faker.lorem.word(), faker.lorem.word()],
+  quotes: [`${faker.lorem.sentence()} ${faker.lorem.sentence()}`],
+  pictures: {
+    headerPic: faker.random.image()
+  }
+};
+
+
 export const authorPreview = {
   id: faker.random.uuid(),
   authorId: faker.random.uuid(),

diff --git a/4_lit_refactor/3_6_app/src/components/author-highlight.js b/4_lit_refactor/3_6_app/src/components/author-highlight.js
@@ -40,6 +40,7 @@ export class AuthorHighlight extends LitElement {
       background: white;
       display: block;
       max-width: 333px;
+      min-width: 280px;
       box-sizing: border-box;
 
       ${uCSS(paddingAll.md)}

diff --git a/4_lit_refactor/3_6_app/src/components/author-preview.js b/4_lit_refactor/3_6_app/src/components/author-preview.js
@@ -113,7 +113,7 @@ updateStyles(prop, style) {
         <div></div>
 
         <a
-            href="authors/${this.person.author.humanId}"
+            href="/authors/${this.person.author.humanId}"
           >
 
               <flex-align direction='column'>

diff --git a/4_lit_refactor/3_6_app/src/components/book-preview.js b/4_lit_refactor/3_6_app/src/components/book-preview.js
@@ -23,7 +23,6 @@ export class BookPreview extends LitElement {
       cursor: pointer;
       display: block;
       flex: auto;
-      margin: 10px;
       color: white;
       position: relative;
       overflow: hidden;
@@ -92,7 +91,7 @@ export class BookPreview extends LitElement {
         <div>
 
         <a
-            href="books/${this.book.humanId}"
+            href="/books/${this.book.humanId}"
           >
 
           <flex-align direction='column'>

diff --git a/4_lit_refactor/3_6_app/src/components/graphql-test.js b/4_lit_refactor/3_6_app/src/components/graphql-test.js
@@ -0,0 +1,51 @@
+import { LitElement, property, html, css } from "lit-element";
+import { apolloClient } from '../utils/apollo_client';
+import { ApolloQuery } from '@apollo-elements/lit-apollo';
+import gql from 'graphql-tag';
+
+
+// Compute graphql documents statically for performance
+const query = gql`
+  query($humanId: String) {
+    getAuthor(humanId: $humanId) {
+      _id
+      humanId
+      firstName
+      lastName
+    }
+  }
+`;
+
+// export class GraphQLTest extends LitElement {
+export class GraphQLTest extends ApolloQuery {
+  @property({ type: Object }) person = {};
+
+  constructor() {
+    super();
+    this.client = apolloClient;
+    this.query = query;
+    console.log('bla');
+
+    this.variables = {
+      humanId: "tony-robbins"
+    }
+  }
+
+  render() {
+    const { data, error, loading } = this;
+    const { helloWorld = {} } = data || {}
+    return (
+        loading ? html`
+          <what-spin></what-spin>`
+      : error ? html`
+          <h1>😢 Such Sad, Very Error! 😰</h1>
+          <div>${error ? error.message : 'Unknown Error'}</div>`
+      : html`
+          <div>it loaded</div>
+      `
+    );
+
+  }
+}
+
+customElements.define("graphql-test", GraphQLTest);
diff --git a/4_lit_refactor/3_6_app/src/components/header-base.js b/4_lit_refactor/3_6_app/src/components/header-base.js
@@ -1,12 +1,16 @@
 import { LitElement, property, html, css } from "lit-element";
-import { Button } from "@material/mwc-button";
+import { ApolloQuery } from '@apollo-elements/lit-apollo';
+import { apolloClient } from '../utils/apollo_client';
+
 import { inkReset } from "@andreas-galster/inkling";
 import "../components/max-width.js";
 
 
-export class HeaderBase extends LitElement {
+// export class HeaderBase extends LitElement {
+export class HeaderBase extends ApolloQuery {
   @property({ type: Object }) item = {};
   @property({ type: String }) picture;
+  client = apolloClient;
 
   // static styles = [
     static get styles() { 
@@ -16,6 +20,8 @@ export class HeaderBase extends LitElement {
             display: block;
             color: white;
             overflow: auto;
+            position: sticky;
+            top: 64px;
           }
 
           h1 {
@@ -24,7 +30,7 @@ export class HeaderBase extends LitElement {
 
           max-width {
             position: relative;
-            padding-top: 35%;            
+            padding-top: 27%;            
           }
         `
     ]};
@@ -52,6 +58,9 @@ export class HeaderBase extends LitElement {
 	}
 
   render() {
+    const { data, error, loading } = this;
+    const { item = {} } = data || {}
+
     return html`
       ${inkReset}
 

diff --git a/4_lit_refactor/3_6_app/src/components/header-books.js b/4_lit_refactor/3_6_app/src/components/header-books.js
@@ -61,12 +61,12 @@ export class HeaderBooks extends HeaderBase {
 
           header {
             position: absolute;
-            top: 80px;                
+            top: 60px;                
           }
 
           footer {
             position: absolute;
-            bottom: 40px;            
+            bottom: 30px;            
           }
         </style>
 

diff --git a/4_lit_refactor/3_6_app/src/components/header-quotes.js b/4_lit_refactor/3_6_app/src/components/header-quotes.js
@@ -1,13 +1,31 @@
 import { LitElement, property, html, css } from "lit-element";
-import { Button } from "@material/mwc-button";
-import { inkReset } from "@andreas-galster/inkling";
 import { HeaderBase } from "./header-base";
-
+import gql from 'graphql-tag';
 import "../components/flex-grow.js";
 import "../components/flex-align.js";
 
+const query = gql`
+  query {
+    getQuote {
+      quote
+      author {
+        humanId
+        firstName
+        lastName
+        typeOfPerson
+      }
+    }
+  }
+`;
+
+
 
 export class HeaderQuotes extends HeaderBase {
+  constructor() {
+    super();
+    this.query = query;
+  }
+
     // static styles = [ 
     static get styles() { 
       return [
@@ -20,7 +38,7 @@ export class HeaderQuotes extends HeaderBase {
 
       footer {
         position: absolute;
-        bottom: 40px;  
+        bottom: 35px;  
         right: 0;
         left: 0;              
       }
@@ -81,15 +99,10 @@ export class HeaderQuotes extends HeaderBase {
     // `];
 
   updated(changedProps) {
-    console.log(changedProps);
-    console.log(this.item.pictures.headerPic);
-    console.log(changedProps.get('item'));
-
     if(this.item) {
       this.picture = this.item.pictures.headerPic; 
     }
 
-    console.log(this.picture);
   }
 
   header() {
@@ -116,7 +129,7 @@ export class HeaderQuotes extends HeaderBase {
             <h2>${this.item.firstName} ${this.item.lastName}</h2>
             <h3>${this.item.typeOfPerson.join(", ")}</h3>
           </flex-grow>
-          <mwc-button outlined>SEE PROFILE</mwc-button>
+          <a href='/authors/${this.item.humanId}'><mwc-button outlined>SEE PROFILE</mwc-button></a>
         </flex-align>    
     `;
 	}

diff --git a/4_lit_refactor/3_6_app/src/components/page-view-element.js b/4_lit_refactor/3_6_app/src/components/page-view-element.js
@@ -1,7 +1,11 @@
 import { LitElement, property } from "lit-element";
+import { ApolloQuery } from '@apollo-elements/lit-apollo';
+import { apolloClient } from '../utils/apollo_client';
 
-export class PageViewElement extends LitElement {
+export class PageViewElement extends ApolloQuery {
+// export class PageViewElement extends LitElement {
     @property({ type: Boolean }) active;
+    client = apolloClient;
 
     // // Only render this page if it's actually visible.
     // shouldUpdate(changedProps) {

diff --git a/4_lit_refactor/3_6_app/src/components/quote-preview.js b/4_lit_refactor/3_6_app/src/components/quote-preview.js
@@ -23,7 +23,6 @@ export class QuotePreview extends LitElement {
       display: block;
       overflow: hidden;
       flex-grow: 1;
-      margin: 10px;
       color: white;
       ${uCSS(radiusAll.lg)}
 
@@ -90,7 +89,7 @@ export class QuotePreview extends LitElement {
         <div class="content_wrapper"></div>
 
         <a
-            href="authors/${this.quote.author.humanId}"
+            href="/authors/${this.quote.author.humanId}"
           >
             <flex-align direction='column'>
               <flex-grow grow='1'></flex-grow>