Skip to content

Commit 7432d3d

Browse files
author
Alex Patterson
authored
Merge pull request #3 from CodingCatDev/feature/update-to-latest-packages
Feature/update to latest packages
2 parents 0b8887a + af4d80d commit 7432d3d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+12554
-3
lines changed

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["next/babel"]
3+
}

‎.firebaserc‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"projects": {
3+
"default": "ajonp-ajs-books"
4+
},
5+
"targets": {
6+
"ajonp-ajs-books": {
7+
"hosting": {
8+
"ajsbooks-nextjs": [
9+
"ajsbooks-nextjs"
10+
]
11+
}
12+
}
13+
}
14+
}

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
node_modules
22
.next
33
out
4+
hosting*
45
dist
5-
functions
66
.firebase
7-
.next
7+
functions

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
> Please note many techniques in this repo are outdated, I will be releasing a Next.js 10 with Dynamic imports very soon!!
2+
13
# AJ on Purr-fect Solutions introduces Next.js using MaterialUI and Firebase
24

35
This is a sample application showcasing the power of Next.js.
46
This git repository serves as a the guide to walk through a series of lessons hosted on:
57

6-
- [AJonP Lesson](https://ajonp.com/courses/nextjs9/)
8+
- [AJonP Module #1](https://codingcat.dev/courses/nextjs9/)
9+
710
- [AJonP YouTube Tutorial](http://bit.ly/ajonp-youtube-sub)

‎components/BookCard.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import { CardActionArea } from '@material-ui/core';
2+
import Card from '@material-ui/core/Card';
3+
import CardActions from '@material-ui/core/CardActions';
4+
import CardContent from '@material-ui/core/CardContent';
5+
import CardMedia from '@material-ui/core/CardMedia';
6+
import Collapse from '@material-ui/core/Collapse';
7+
import IconButton from '@material-ui/core/IconButton';
8+
import { makeStyles } from '@material-ui/core/styles';
9+
import Typography from '@material-ui/core/Typography';
10+
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
11+
import clsx from 'clsx';
12+
import NextLink from 'next/link';
13+
import React from 'react';
14+
15+
import Book from '../models/BookModel';
16+
17+
const useStyles = makeStyles(theme => ({
18+
card: {
19+
width: 400,
20+
margin: 5,
21+
display: 'flex',
22+
flexDirection: 'column'
23+
},
24+
cardContent: {
25+
display: 'flex',
26+
flex: '1 0 auto',
27+
flexDirection: 'column',
28+
width: '375px',
29+
whiteSpace: 'nowrap',
30+
overflow: 'hidden',
31+
textOverflow: 'ellipsis',
32+
'& h1': {
33+
fontSize: '1.4rem',
34+
textTransform: 'uppercase'
35+
}
36+
},
37+
cardMedia: {
38+
height: 0,
39+
paddingTop: '65%',
40+
backgroundRepeat: 'no-repeat',
41+
backgroundSize: 'auto',
42+
cursor: 'pointer'
43+
},
44+
cardDescription: {
45+
width: 368,
46+
height: 190,
47+
overflow: 'auto',
48+
whiteSpace: 'normal'
49+
},
50+
cardActions: {
51+
display: 'flex',
52+
alignItems: 'center',
53+
justifyContent: 'space-between'
54+
},
55+
expand: {
56+
transform: 'rotate(0deg)',
57+
marginLeft: 'auto',
58+
transition: theme.transitions.create('transform', {
59+
duration: theme.transitions.duration.shortest
60+
})
61+
},
62+
expandOpen: {
63+
transform: 'rotate(180deg)'
64+
}
65+
}));
66+
67+
const BookCard = ({ book }: { book: Book }) => {
68+
const classes = useStyles();
69+
const [expanded, setExpanded] = React.useState(false);
70+
const handleExpandClick = () => {
71+
setExpanded(!expanded);
72+
};
73+
return (
74+
<Card className={classes.card}>
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=${book.id}`}>
80+
<CardActionArea>
81+
<CardMedia
82+
className={classes.cardMedia}
83+
image={book.cover || '/static/images/cards/book.png'}
84+
title={book.title}
85+
/>
86+
<CardContent className={classes.cardContent}>
87+
<Typography component="h1">{book.title}</Typography>
88+
<Typography component="p">
89+
Author:
90+
{` ${book.authorDisplayName}`}
91+
</Typography>
92+
</CardContent>
93+
</CardActionArea>
94+
</NextLink>
95+
<CardActions className={classes.cardActions}>
96+
Summary:
97+
<IconButton
98+
className={clsx(classes.expand, {
99+
[classes.expandOpen]: expanded
100+
})}
101+
onClick={handleExpandClick}
102+
aria-expanded={expanded}
103+
aria-label="Show more"
104+
>
105+
<ExpandMoreIcon />
106+
</IconButton>{' '}
107+
</CardActions>
108+
<Collapse in={expanded} timeout="auto" unmountOnExit>
109+
<CardContent className={classes.cardContent}>
110+
<Typography paragraph className={classes.cardDescription}>
111+
{book.description}
112+
</Typography>
113+
</CardContent>
114+
</Collapse>
115+
</Card>
116+
);
117+
};
118+
119+
export default BookCard;

‎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(() => ({
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)