update for next 9

Author: Alex Patterson

.babelrc

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

.gitignore

@@ -2,4 +2,6 @@ node_modules
 .next
 out
 hosting*
-dist/
+dist
+.firebase
+.next

components/BookCard.tsx

@@ -64,7 +64,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const BookCard = (prop: { book: Book }) => {
+const BookCard = ({ book }: { book: Book }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = React.useState(false);
   const handleExpandClick = () => {
@@ -76,18 +76,18 @@ const BookCard = (prop: { book: Book }) => {
       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=${prop.book.id}`}>
+      <NextLink href={`/book?id=${book.id}`}>
         <CardActionArea>
           <CardMedia
             className={classes.cardMedia}
-            image={prop.book.cover || '/static/images/cards/book.png'}
-            title={prop.book.title}
+            image={book.cover || '/static/images/cards/book.png'}
+            title={book.title}
           />
           <CardContent className={classes.cardContent}>
-            <Typography component="h1">{prop.book.title}</Typography>
+            <Typography component="h1">{book.title}</Typography>
             <Typography component="p">
               Author:
-              {` ${prop.book.authorDisplayName}`}
+              {` ${book.authorDisplayName}`}
             </Typography>
           </CardContent>
         </CardActionArea>
@@ -108,7 +108,7 @@ const BookCard = (prop: { book: Book }) => {
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent className={classes.cardContent}>
           <Typography paragraph className={classes.cardDescription}>
-            {prop.book.description}
+            {book.description}
           </Typography>
         </CardContent>
       </Collapse>

components/ChapterDetail.tsx

@@ -8,7 +8,7 @@ import BookModel from '../models/BookModel';
 import Chapter from '../models/ChapterModel';
 import PageModel from '../models/PageModel';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(() => ({
   card: {
     width: '100%',
     maxWidth: 400,

components/MenuAppBar.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles(() =>
 
 function MenuAppBar() {
   const classes = useStyles();
-  const [auth, setAuth] = React.useState(false);
+  const [auth] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 

components/MenuAppDrawer.tsx

@@ -35,7 +35,7 @@ function MenuAppDrawer() {
     right: false
   });
 
-  const toggleDrawer = (side, open) => event => {
+  const toggleDrawer = (side: string, open: boolean) => (event: any) => {
     if (
       event.type === 'keydown' &&
       (event.key === 'Tab' || event.key === 'Shift')
@@ -46,7 +46,7 @@ function MenuAppDrawer() {
     setState({ ...state, [side]: open });
   };
 
-  const fullList = side => (
+  const fullList = (side: string) => (
     <div
       className={classes.fullList}
       role="presentation"

firebase.json

@@ -15,14 +15,6 @@
         {
           "source": "/book{,/**}",
           "function": "book"
-        },
-        {
-          "source": "/books",
-          "function": "books"
-        },
-        {
-          "source": "**/**",
-          "function": "index"
         }
       ]
     }