☝️ (lit-html) Update hero quote & recent quotes

rootasjey · Jan 12, 2021 · 7b6067a · 7b6067a
1 parent b5f4e45
commit 7b6067a
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 14 deletions.
diff --git a/lit-html/index.html b/lit-html/index.html
@@ -3,9 +3,11 @@
 
 <head>
   <meta charset="utf-8">
+  <title>fig.style</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <meta name="Description" content="5 seconds of emotion.">
   <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <base href="/">
 
   <style>
@@ -16,8 +18,6 @@
       background-color: #ededed;
     }
   </style>
-
-  <title>fig.style</title>
 </head>
 
 <body style="overflow-y: auto;">

diff --git a/lit-html/src/app.ts b/lit-html/src/app.ts
@@ -1,7 +1,17 @@
-import { LitElement, html, css, property, customElement } from 'lit-element';
+import { 
+  LitElement, 
+  html, 
+  css, 
+  property, 
+  customElement,
+ } from 'lit-element';
 
 import '@kor-ui/kor/components/app-bar';
 import '@kor-ui/kor/components/page';
+import '@kor-ui/kor/components/card';
+import '@kor-ui/kor/components/text';
+import '@kor-ui/kor/components/button';
+import '@kor-ui/kor/components/spinner';
 
 import './hero-quote';
 import './recent-quotes';

diff --git a/lit-html/src/hero-quote.ts b/lit-html/src/hero-quote.ts
@@ -1,7 +1,11 @@
-import '@kor-ui/kor/components/card';
-import '@kor-ui/kor/components/text';
-
-import { LitElement, html, customElement, PropertyValues, property, css } from 'lit-element';
+import { 
+  LitElement, 
+  html, 
+  customElement, 
+  PropertyValues, 
+  property, 
+  css,
+ } from 'lit-element';
 
 import firebase from 'firebase/app';
 
@@ -21,10 +25,16 @@ export class HeroQuote extends LitElement {
       text-align: left;
     }
     
-    :host kor-text {
+    // :host kor-text {
+    //   overflow: hidden;
+    // }
+    :host kor-card {
+      padding: 30px;
+    }
+    
+    .quote-name {
       font-size: 1.7em;
       line-height: 1.2em;
-      overflow: hidden;
     }
   `;
 
@@ -81,9 +91,12 @@ export class HeroQuote extends LitElement {
   render() {
     return html`
       <kor-card>
-        <kor-text size="header-1">
+        <kor-text class="quote-name" size="body-1">
           ${this.quotidian.quote.name}
         </kor-text>
+        <kor-text class="author-name" size="body-2">
+          ― ${this.quotidian.quote.author.name}
+        </kor-text>
       </kor-card>
     `;
   }

diff --git a/lit-html/src/recent-quotes.ts b/lit-html/src/recent-quotes.ts
@@ -1,18 +1,35 @@
-import '@kor-ui/kor/components/card';
-import '@kor-ui/kor/components/text';
+import { 
+  LitElement, 
+  html, 
+  customElement, 
+  property, 
+  css,
+ } from 'lit-element';
 
-import { LitElement, html, customElement, property, css } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { styleMap } from 'lit-html/directives/style-map';
 
 import firebase from 'firebase/app';
 
 import { Quote } from './types/Quote';
 
+interface QuoteDocument 
+  extends firebase.firestore.QueryDocumentSnapshot<firebase.firestore.DocumentData> {
+}
 @customElement('recent-quotes')
 export class RecentQuotes extends LitElement {
 
   @property({ type: Boolean }) isLoading = false;
+  @property({ type: Boolean }) isLoadingMore = false;
   @property({ type: Boolean }) hasErrors = false;
+  @property({ type: Boolean }) hasNext = true;
   @property({ type: [Quote] }) quotes: Array<Quote> = [];
+  @property({ type: Object }) lastFetchedDoc: QuoteDocument | undefined;
+  @property({ type: Function }) bindedOnReachBottomPage: () => void | undefined;
+  @property({ type: Number }) limit = 10;
+  @property({ type: Boolean }) isPageScrolled = false;
+  @property({ type: Object }) fabClasses = { fab: true, visible: false };
+  @property({ type: Object }) fabStyles = { position: 'fixed' };
 
   static styles = css`
   :host {
@@ -24,8 +41,49 @@ export class RecentQuotes extends LitElement {
     margin-bottom: 20px;
     text-align: left;
   }
+
+  .fab {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    visibility: hidden;
+  }
+  .fab.visible {
+    visibility: visible;
+  }
   `;
 
+  constructor() {
+    super();
+    this.bindedOnReachBottomPage = this.onReachBottomPage.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.bindedOnReachBottomPage) { return; }
+    document.body.addEventListener('scroll', this.bindedOnReachBottomPage);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.body.removeEventListener('scroll', this.bindedOnReachBottomPage);
+  }
+
+  onReachBottomPage() {
+    const viewportH = document.body.scrollHeight - document.body.clientHeight;
+
+    // console.log(document.body.scrollTop);
+    // if (document.body.scrollTop > 100 && !this.isPageScrolled) {
+    //   this.isPageScrolled = true;
+    // } else if (document.body.scrollTop <= 100 && this.isPageScrolled) {
+    //   this.isPageScrolled = false;
+    // }
+
+    if (document.body.scrollTop >= viewportH) {
+      this.fetchMoreRecent();
+    }
+  }
+
   firstUpdated() {
     this.fetchRecent();
   }
@@ -38,7 +96,7 @@ export class RecentQuotes extends LitElement {
       .collection('quotes')
       .orderBy('createdAt', 'desc')
       .where('lang', '==', 'en')
-      .limit(10)
+      .limit(this.limit)
       .get()
       .then((querySnapshot) => {
         querySnapshot.forEach((doc) => {
@@ -51,6 +109,46 @@ export class RecentQuotes extends LitElement {
         });
 
         this.isLoading = false;
+        this.hasNext = querySnapshot.size >= this.limit;
+        this.lastFetchedDoc = querySnapshot.docs[querySnapshot.size - 1];
+      });
+  }
+
+  async fetchMoreRecent() {
+    if (!this.hasNext || !this.lastFetchedDoc || this.isLoadingMore) {
+      return;
+    }
+
+    this.isLoadingMore = true;
+    const firestore = firebase.firestore();
+
+    firestore
+      .collection('quotes')
+      .orderBy('createdAt', 'desc')
+      .where('lang', '==', 'en')
+      .limit(this.limit)
+      .startAfter(this.lastFetchedDoc)
+      .get()
+      .then((querySnapshot) => {
+        if (querySnapshot.empty) {
+
+          this.hasNext = false;
+          this.isLoadingMore = false;
+          return;
+        }
+
+        querySnapshot.forEach((doc) => {
+          const data = doc.data();
+
+          if (data) {
+            const quote = Quote.fromJSON({...data, ...{id: doc.id}});
+            this.quotes.push(quote);
+          }
+        });
+
+        this.isLoadingMore = false;
+        this.hasNext = querySnapshot.size >= this.limit;
+        this.lastFetchedDoc = querySnapshot.docs[querySnapshot.size - 1];
       });
   }
 
@@ -68,6 +166,20 @@ export class RecentQuotes extends LitElement {
           </kor-card>
         `;
       })}
+
+      ${this.isLoadingMore ?
+        html`<kor-spinner label="Loading more quotes..."></kor-spinner>` :
+        html`
+        <kor-button
+          label="Load more..."
+          @click=${this.fetchMoreRecent}>
+        </kor-button>
+        `
+      }
+
+<kor-button style=${styleMap(this.fabStyles)} label="scroll to top"></kor-button>
+      <!-- <div class=${classMap(this.fabClasses)}>
+      </div> -->
     `;
   }
 }