added books lambda

Author: Alex Patterson

firebase.json

@@ -12,6 +12,10 @@
       "target": "ajsbooks-nextjs",
       "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
       "rewrites": [
+        {
+          "source": "/books",
+          "function": "books"
+        },
         {
           "source": "/book{,/**}",
           "function": "book"

functions/src/api/index.ts

@@ -2,7 +2,7 @@ import * as cors from 'cors';
 import * as express from 'express';
 import * as admin from 'firebase-admin';
 import * as functions from 'firebase-functions';
-
+import BookModel from '../../../models/BookModel';
 // Initialize Firebase Admin
 admin.initializeApp();
 
@@ -32,6 +32,22 @@ app.get('/book', async (req, res) => {
     return;
   }
 });
+app.get('/books', async (req, res) => {
+  try {
+    const booksSnapshot = await admin
+      .firestore()
+      .collection('books')
+      .get();
+    const books: BookModel[] = [];
+    booksSnapshot.forEach(doc => {
+      books.push(doc.data());
+    });
+    res.json(books);
+  } catch (e) {
+    console.log(e);
+    return;
+  }
+});
 app.get('/chapter', async (req, res) => {
   const id = req.query.id;
   const chapterId = req.query.chapterId;

functions/src/index.ts

@@ -6,12 +6,12 @@ const onRequest = functions.https.onRequest;
 
 // These relative paths will exist after compiling everything
 // const index = require('./_next/serverless/pages/index'); //Removed as Next 9 only pushes static
-// const books = require('./_next/serverless/pages/books'); //Removed as Next 9 only pushes static
+const books = require('./_next/serverless/pages/books');
 const book = require('./_next/serverless/pages/book');
 
 // These named exports will map to Firebase Function names
 // exports.index = onRequest((req, res) => index.render(req, res)); //Removed as Next 9 only pushes static
-// exports.books = onRequest((req, res) => books.render(req, res)); //Removed as Next 9 only pushes static
+exports.books = onRequest((req, res) => books.render(req, res)); 
 exports.book = onRequest((req, res) => book.render(req, res));
 
 // API

pages/books.tsx

@@ -3,18 +3,40 @@ import Grid from '@material-ui/core/Grid';
 import React, { Component } from 'react';
 import { collectionData } from 'rxfire/firestore';
 import { Subject } from 'rxjs';
+import fetch from 'isomorphic-unfetch';
 import { takeUntil } from 'rxjs/operators';
 
 import BookCard from '../components/BookCard';
 import loadFirebase from '../lib/firebase';
-import Book from '../models/BookModel';
+import BookModel from '../models/BookModel';
 
-export default class books extends Component {
-  state: { books: Book[]; stopSubs: Subject<boolean> } = {
+export default class books extends Component<
+  {
+    books: BookModel[];
+  },
+  any
+> {
+  state: {
+    books: BookModel[];
+    stopSubs: Subject<boolean>;
+    firebase?: any;
+  } = {
     books: [],
     stopSubs: new Subject<boolean>()
   };
+  static async getInitialProps() {
+    const res = await fetch(`${process.env.API_ENDPOINT}books`);
+    const books = await res.json();
+    return { books: books };
+  }
   async componentDidMount() {
+    /* Coming from SSR Initial Props */
+    await this.setState(() => {
+      return {
+        books: this.props.books
+      };
+    });
+    /* After client loads */
     const firebase = await loadFirebase();
     const booksRef = firebase.firestore().collection('books');
     collectionData(booksRef, 'bookId')
@@ -35,7 +57,7 @@ export default class books extends Component {
     return (
       <Grid container direction="row" justify="center">
         {loading}
-        {this.state.books.map((book: Book) => {
+        {this.state.books.map((book: BookModel) => {
           return <BookCard book={book} key={book.id} />;
         })}
       </Grid>