Merge pull request #3 from CodingCatDev/feature/update-to-latest-pack…

…ages

Feature/update to latest packages

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

.firebaserc

@@ -0,0 +1,14 @@
+{
+  "projects": {
+    "default": "ajonp-ajs-books"
+  },
+  "targets": {
+    "ajonp-ajs-books": {
+      "hosting": {
+        "ajsbooks-nextjs": [
+          "ajsbooks-nextjs"
+        ]
+      }
+    }
+  }
+}

.gitignore

@@ -1,7 +1,7 @@
 node_modules
 .next
 out
+hosting*
 dist
-functions
 .firebase
-.next
+functions

README.md

@@ -1,7 +1,10 @@
+> Please note many techniques in this repo are outdated, I will be releasing a Next.js 10 with Dynamic imports very soon!!
+
 # AJ on Purr-fect Solutions introduces Next.js using MaterialUI and Firebase
 
 This is a sample application showcasing the power of Next.js.
 This git repository serves as a the guide to walk through a series of lessons hosted on:
 
-- [AJonP Lesson](https://ajonp.com/courses/nextjs9/)
+- [AJonP Module #1](https://codingcat.dev/courses/nextjs9/)
+
 - [AJonP YouTube Tutorial](http://bit.ly/ajonp-youtube-sub)

components/BookCard.tsx

@@ -0,0 +1,119 @@
+import { CardActionArea } from '@material-ui/core';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Collapse from '@material-ui/core/Collapse';
+import IconButton from '@material-ui/core/IconButton';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import clsx from 'clsx';
+import NextLink from 'next/link';
+import React from 'react';
+
+import Book from '../models/BookModel';
+
+const useStyles = makeStyles(theme => ({
+  card: {
+    width: 400,
+    margin: 5,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  cardContent: {
+    display: 'flex',
+    flex: '1 0 auto',
+    flexDirection: 'column',
+    width: '375px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    '& h1': {
+      fontSize: '1.4rem',
+      textTransform: 'uppercase'
+    }
+  },
+  cardMedia: {
+    height: 0,
+    paddingTop: '65%',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'auto',
+    cursor: 'pointer'
+  },
+  cardDescription: {
+    width: 368,
+    height: 190,
+    overflow: 'auto',
+    whiteSpace: 'normal'
+  },
+  cardActions: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  expand: {
+    transform: 'rotate(0deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)'
+  }
+}));
+
+const BookCard = ({ book }: { book: Book }) => {
+  const classes = useStyles();
+  const [expanded, setExpanded] = React.useState(false);
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+  return (
+    <Card className={classes.card}>
+      {/* 
+      Show this as an example of how we would use SSR
+      <NextLink href={`/book?id=${book.id}`} as={`/book/${book.slug}`}> 
+      */}
+      <NextLink href={`/book?id=${book.id}`}>
+        <CardActionArea>
+          <CardMedia
+            className={classes.cardMedia}
+            image={book.cover || '/static/images/cards/book.png'}
+            title={book.title}
+          />
+          <CardContent className={classes.cardContent}>
+            <Typography component="h1">{book.title}</Typography>
+            <Typography component="p">
+              Author:
+              {` ${book.authorDisplayName}`}
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+      </NextLink>
+      <CardActions className={classes.cardActions}>
+        Summary:
+        <IconButton
+          className={clsx(classes.expand, {
+            [classes.expandOpen]: expanded
+          })}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="Show more"
+        >
+          <ExpandMoreIcon />
+        </IconButton>{' '}
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent className={classes.cardContent}>
+          <Typography paragraph className={classes.cardDescription}>
+            {book.description}
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default BookCard;

components/BookDetail.tsx

@@ -0,0 +1,60 @@
+import { Avatar, Card, CardContent, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import NextLink from 'next/link';
+import React from 'react';
+
+import Book from '../models/BookModel';
+import Chapter from '../models/ChapterModel';
+
+const useStyles = makeStyles(theme => ({
+  card: {
+    width: '100%',
+    maxWidth: 400,
+    margin: 5,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  list: {
+    width: '100%',
+    backgroundColor: theme.palette.background.paper
+  }
+}));
+
+const BookDetail = (prop: { book: Book }) => {
+  const classes = useStyles();
+  let listItems: any[] = [];
+  if (prop.book && prop.book.chapters) {
+    prop.book.chapters.map((chapter: Chapter) => {
+      listItems.push(
+        <NextLink
+          href={`/book?id=${prop.book.id}&chapterId=${chapter.id}`}
+          key={chapter.id}
+        >
+          <ListItem button>
+            <ListItemAvatar>
+              <Avatar alt={chapter.title} src={chapter.photo} />
+            </ListItemAvatar>
+            <ListItemText primary={`${chapter.number}. ${chapter.title}`} />
+          </ListItem>
+        </NextLink>
+      );
+    });
+  }
+  return (
+    <Card className={classes.card}>
+      <CardContent>
+        <Typography variant="h5" component="h1">
+          {prop.book.title}
+        </Typography>
+        <List className={classes.list} component="nav">
+          {listItems.map(item => {
+            return item;
+          })}
+        </List>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default BookDetail;

components/BookPage.tsx

@@ -0,0 +1,34 @@
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
+
+import PageModel from '../models/PageModel';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 400,
+    margin: 5,
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(3, 2)
+  }
+}));
+
+const BookPage = (prop: { page: PageModel }) => {
+  const classes = useStyles();
+  let page;
+  if (prop.page && prop.page.text) {
+    page = <Typography component="p">{prop.page.text}</Typography>;
+  } else {
+    page = <Typography component="p">Please select a Chapter</Typography>;
+  }
+  return (
+    <div>
+      <Paper className={classes.root}>{page}</Paper>
+    </div>
+  );
+};
+
+export default BookPage;

components/ChapterDetail.tsx

@@ -0,0 +1,61 @@
+import { Button, Card, CardContent } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import NextLink from 'next/link';
+import React from 'react';
+
+import BookModel from '../models/BookModel';
+import Chapter from '../models/ChapterModel';
+import PageModel from '../models/PageModel';
+
+const useStyles = makeStyles(() => ({
+  card: {
+    width: '100%',
+    maxWidth: 400,
+    margin: 5,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  button: {
+    margin: 2
+  }
+}));
+
+const ChapterDetail = (prop: { book: BookModel; chapter: Chapter }) => {
+  const classes = useStyles();
+  let listItems: any[] = [];
+  if (prop.chapter && prop.chapter.pages) {
+    prop.chapter.pages.map((page: PageModel) => {
+      listItems.push(
+        <NextLink
+          href={`/book?id=${prop.book.id}&chapterId=${prop.chapter.id}&pageId=${
+            page.id
+          }`}
+          key={page.id}
+        >
+          <Button
+            variant="contained"
+            color="secondary"
+            className={classes.button}
+          >
+            {page.number}
+          </Button>
+        </NextLink>
+      );
+    });
+  }
+  return (
+    <Card className={classes.card}>
+      <CardContent>
+        <Typography variant="h5" component="h1">
+          {prop.chapter.title} Pages:
+        </Typography>
+        {listItems.map(item => {
+          return item;
+        })}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ChapterDetail;