Skip to content

Commit 19b2a4b

Browse files
author
Alex Patterson
committed
working example with book, chapter, page SSR
1 parent 8cf21c3 commit 19b2a4b

21 files changed

+1047
-1642
lines changed

‎components/BookCard.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import clsx from 'clsx';
1212
import NextLink from 'next/link';
1313
import React from 'react';
1414

15-
import Book from '../models/Book';
15+
import Book from '../models/BookModel';
1616

1717
const useStyles = makeStyles(theme => ({
1818
card: {
@@ -64,27 +64,30 @@ const useStyles = makeStyles(theme => ({
6464
}
6565
}));
6666

67-
const BookCard = (prop: any) => {
68-
const book: Book = prop.book; //Allow for multiple prop values but this one specific to our type
67+
const BookCard = (prop: { book: Book }) => {
6968
const classes = useStyles();
7069
const [expanded, setExpanded] = React.useState(false);
7170
const handleExpandClick = () => {
7271
setExpanded(!expanded);
7372
};
7473
return (
7574
<Card className={classes.card}>
76-
<NextLink href={`/book?id=${book.id}`} as={`/book/${book.slug}`}>
75+
{/*
76+
Show this as an example of how we would use SSR
77+
<NextLink href={`/book?id=${book.id}`} as={`/book/${book.slug}`}>
78+
*/}
79+
<NextLink href={`/book?id=${prop.book.id}`}>
7780
<CardActionArea>
7881
<CardMedia
7982
className={classes.cardMedia}
80-
image={book.cover || '/static/images/cards/book.png'}
81-
title={book.title}
83+
image={prop.book.cover || '/static/images/cards/book.png'}
84+
title={prop.book.title}
8285
/>
8386
<CardContent className={classes.cardContent}>
84-
<Typography component="h1">{book.title}</Typography>
87+
<Typography component="h1">{prop.book.title}</Typography>
8588
<Typography component="p">
8689
Author:
87-
{` ${book.authorDisplayName}`}
90+
{` ${prop.book.authorDisplayName}`}
8891
</Typography>
8992
</CardContent>
9093
</CardActionArea>
@@ -105,7 +108,7 @@ const BookCard = (prop: any) => {
105108
<Collapse in={expanded} timeout="auto" unmountOnExit>
106109
<CardContent className={classes.cardContent}>
107110
<Typography paragraph className={classes.cardDescription}>
108-
{book.description}
111+
{prop.book.description}
109112
</Typography>
110113
</CardContent>
111114
</Collapse>

‎components/BookDetail.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Avatar, Card, CardContent, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import NextLink from 'next/link';
5+
import React from 'react';
6+
7+
import Book from '../models/BookModel';
8+
import Chapter from '../models/ChapterModel';
9+
10+
const useStyles = makeStyles(theme => ({
11+
card: {
12+
width: '100%',
13+
maxWidth: 400,
14+
margin: 5,
15+
display: 'flex',
16+
flexDirection: 'column'
17+
},
18+
list: {
19+
width: '100%',
20+
backgroundColor: theme.palette.background.paper
21+
}
22+
}));
23+
24+
const BookDetail = (prop: { book: Book }) => {
25+
const classes = useStyles();
26+
let listItems: any[] = [];
27+
if (prop.book && prop.book.chapters) {
28+
prop.book.chapters.map((chapter: Chapter) => {
29+
listItems.push(
30+
<NextLink
31+
href={`/book?id=${prop.book.id}&chapterId=${chapter.id}`}
32+
key={chapter.id}
33+
>
34+
<ListItem button>
35+
<ListItemAvatar>
36+
<Avatar alt={chapter.title} src={chapter.photo} />
37+
</ListItemAvatar>
38+
<ListItemText primary={`${chapter.number}. ${chapter.title}`} />
39+
</ListItem>
40+
</NextLink>
41+
);
42+
});
43+
}
44+
return (
45+
<Card className={classes.card}>
46+
<CardContent>
47+
<Typography variant="h5" component="h1">
48+
{prop.book.title}
49+
</Typography>
50+
<List className={classes.list} component="nav">
51+
{listItems.map(item => {
52+
return item;
53+
})}
54+
</List>
55+
</CardContent>
56+
</Card>
57+
);
58+
};
59+
60+
export default BookDetail;

‎components/BookPage.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Paper from '@material-ui/core/Paper';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import React from 'react';
5+
6+
import PageModel from '../models/PageModel';
7+
8+
const useStyles = makeStyles(theme => ({
9+
root: {
10+
width: '100%',
11+
maxWidth: 400,
12+
margin: 5,
13+
display: 'flex',
14+
flexDirection: 'column',
15+
padding: theme.spacing(3, 2)
16+
}
17+
}));
18+
19+
const BookPage = (prop: { page: PageModel }) => {
20+
const classes = useStyles();
21+
let page;
22+
if (prop.page && prop.page.text) {
23+
page = <Typography component="p">{prop.page.text}</Typography>;
24+
} else {
25+
page = <Typography component="p">Please select a Chapter</Typography>;
26+
}
27+
return (
28+
<div>
29+
<Paper className={classes.root}>{page}</Paper>
30+
</div>
31+
);
32+
};
33+
34+
export default BookPage;

‎components/ChapterDetail.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Button, Card, CardContent } from '@material-ui/core';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import NextLink from 'next/link';
5+
import React from 'react';
6+
7+
import BookModel from '../models/BookModel';
8+
import Chapter from '../models/ChapterModel';
9+
import PageModel from '../models/PageModel';
10+
11+
const useStyles = makeStyles(theme => ({
12+
card: {
13+
width: '100%',
14+
maxWidth: 400,
15+
margin: 5,
16+
display: 'flex',
17+
flexDirection: 'column'
18+
},
19+
button: {
20+
margin: 2
21+
}
22+
}));
23+
24+
const ChapterDetail = (prop: { book: BookModel; chapter: Chapter }) => {
25+
const classes = useStyles();
26+
let listItems: any[] = [];
27+
if (prop.chapter && prop.chapter.pages) {
28+
prop.chapter.pages.map((page: PageModel) => {
29+
listItems.push(
30+
<NextLink
31+
href={`/book?id=${prop.book.id}&chapterId=${prop.chapter.id}&pageId=${
32+
page.id
33+
}`}
34+
key={page.id}
35+
>
36+
<Button
37+
variant="contained"
38+
color="secondary"
39+
className={classes.button}
40+
>
41+
{page.number}
42+
</Button>
43+
</NextLink>
44+
);
45+
});
46+
}
47+
return (
48+
<Card className={classes.card}>
49+
<CardContent>
50+
<Typography variant="h5" component="h1">
51+
{prop.chapter.title} Pages:
52+
</Typography>
53+
{listItems.map(item => {
54+
return item;
55+
})}
56+
</CardContent>
57+
</Card>
58+
);
59+
};
60+
61+
export default ChapterDetail;

0 commit comments

Comments
 (0)