Skip to content

Commit 5262d96

Browse files
tima101tima101
committed
main app: MUI v4, fixed breaking changes
1 parent 591e521 commit 5262d96

28 files changed

+1802
-1820
lines changed

‎components/Header.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function Header({ user, hideHeader, next }) {
7272
</Grid>
7373
<Grid item sm={4} xs={9} style={{ textAlign: 'right' }}>
7474
{user ? (
75-
<div style={{ whiteSpace: ' nowrap' }}>
75+
<div style={{ whiteSpace: 'nowrap' }}>
7676
{!user.isAdmin ? (
7777
<MenuDrop
7878
options={optionsMenuCustomer}
@@ -122,6 +122,9 @@ Header.propTypes = {
122122
user: PropTypes.shape({
123123
displayName: PropTypes.string,
124124
email: PropTypes.string.isRequired,
125+
isAdmin: PropTypes.bool,
126+
avatarUrl: PropTypes.string,
127+
isGithubConnected: PropTypes.bool,
125128
}),
126129
hideHeader: PropTypes.bool,
127130
next: PropTypes.string,

‎components/HomeHeader.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function Header({ user }) {
8787
<a style={{ margin: '0px 20px 0px auto' }}>Log in</a>
8888
</Link>
8989
</div>
90-
)}
90+
)}
9191
</Grid>
9292
</Grid>
9393
</Toolbar>
@@ -99,6 +99,9 @@ Header.propTypes = {
9999
user: PropTypes.shape({
100100
displayName: PropTypes.string,
101101
email: PropTypes.string.isRequired,
102+
isAdmin: PropTypes.bool,
103+
avatarUrl: PropTypes.string,
104+
isGithubConnected: PropTypes.bool,
102105
}),
103106
};
104107

‎components/MenuDrop.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ class MenuDrop extends React.Component {
1212
};
1313

1414
state = {
15-
open: false,
1615
anchorEl: undefined,
16+
open: false,
1717
};
1818

1919
button = undefined;
2020

2121
handleClick = (event) => {
22-
this.setState({ open: true, anchorEl: event.currentTarget });
22+
this.setState({ anchorEl: event.currentTarget, open: true, });
2323
};
2424

2525
handleClose = () => {
@@ -28,9 +28,10 @@ class MenuDrop extends React.Component {
2828

2929
render() {
3030
const { options, src, alt } = this.props;
31+
const { anchorEl, open } = this.state;
3132

3233
return (
33-
<div style={{ verticalAlign: 'middle', display: 'inline-block '}}>
34+
<div style={{ verticalAlign: 'middle', display: 'inline-block' }}>
3435
<Avatar
3536
role="presentation"
3637
aria-owns="simple-menu"
@@ -43,12 +44,13 @@ class MenuDrop extends React.Component {
4344
/>
4445
<Menu
4546
id="simple-menu"
46-
anchorEl={this.state.anchorEl}
47-
open={this.state.open}
47+
anchorEl={anchorEl}
48+
open={open}
4849
onClose={this.handleClose}
50+
keepMounted
4951
>
5052
<p />
51-
{options.map(option => (
53+
{options.map((option) => (
5254
<div id="wrappingLink" key={option.text}>
5355
<Link prefetch={!option.noPrefetch} href={option.href} as={option.as || option.href}>
5456
<a style={{ padding: '0px 20px' }}>{option.text}</a>

‎components/Notifier.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ class Notifier extends React.Component {
2525
};
2626

2727
render() {
28+
const { open } = this.state;
2829
const message = (
2930
<span id="snackbar-message-id" dangerouslySetInnerHTML={{ __html: this.state.message }} />
3031
);
@@ -35,7 +36,7 @@ class Notifier extends React.Component {
3536
message={message}
3637
autoHideDuration={3000}
3738
onClose={this.handleSnackbarClose}
38-
open={this.state.open}
39+
open={open}
3940
ContentProps={{
4041
'aria-describedby': 'snackbar-message-id',
4142
}}

‎components/TOC.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ function getItemElm(i, chapter, bookSlug) {
1515
</a>
1616
</b>
1717
<br />
18-
{chapter.sections.map(s => <li key={s._id}>{s.text}</li>)}
18+
{chapter.sections.map((s) => (
19+
<li key={s._id}>{s.text}</li>
20+
))}
1921
<br />
2022
</div>
2123
);
@@ -29,7 +31,7 @@ export default function TOC({ toc, bookSlug }) {
2931
const left = [];
3032
const right = [];
3133

32-
const middle = Math.floor(toc.length / 2) + toc.length % 2 + 1;
34+
const middle = Math.floor(toc.length / 2) + (toc.length % 2) + 1;
3335
for (let i = 1; i < middle; i += 1) {
3436
left.push(getItemElm(i, toc[i - 1], bookSlug));
3537
}
@@ -69,8 +71,10 @@ export default function TOC({ toc, bookSlug }) {
6971
}
7072

7173
TOC.propTypes = {
72-
toc: PropTypes.arrayOf(PropTypes.shape({
73-
title: PropTypes.string.isRequired,
74-
})).isRequired,
74+
toc: PropTypes.arrayOf(
75+
PropTypes.shape({
76+
title: PropTypes.string.isRequired,
77+
}),
78+
).isRequired,
7579
bookSlug: PropTypes.string.isRequired,
7680
};

‎components/admin/EditBook.js

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ class EditBook extends React.Component {
4242

4343
onSubmit = (event) => {
4444
event.preventDefault();
45-
const { name, price, githubRepo } = this.state.book;
45+
const { onSave } = this.props;
46+
const { book } = this.state;
47+
const { name, price, githubRepo } = book;
4648

4749
if (!name) {
4850
notify('Name is required');
@@ -59,21 +61,22 @@ class EditBook extends React.Component {
5961
return;
6062
}
6163

62-
this.props.onSave(this.state.book);
64+
onSave(book);
6365
};
6466

6567
render() {
68+
const { book, repos } = this.state;
6669
return (
6770
<div style={{ padding: '10px 45px' }}>
6871
<br />
6972
<form onSubmit={this.onSubmit}>
7073
<TextField
7174
onChange={(event) => {
7275
this.setState({
73-
book: Object.assign({}, this.state.book, { price: Number(event.target.value) }),
76+
book: Object.assign({}, book, { price: Number(event.target.value) }),
7477
});
7578
}}
76-
value={this.state.book.price || ''}
79+
value={book.price || ''}
7780
type="number"
7881
label="Book's price"
7982
className="textFieldInput"
@@ -87,10 +90,10 @@ class EditBook extends React.Component {
8790
<TextField
8891
onChange={(event) => {
8992
this.setState({
90-
book: Object.assign({}, this.state.book, { name: event.target.value }),
93+
book: Object.assign({}, book, { name: event.target.value }),
9194
});
9295
}}
93-
value={this.state.book.name || ''}
96+
value={book.name || ''}
9497
type="text"
9598
label="Book's title"
9699
style={styleTextField}
@@ -101,18 +104,18 @@ class EditBook extends React.Component {
101104
<div>
102105
<span>Github repo: </span>
103106
<Select
104-
value={this.state.book.githubRepo || ''}
107+
value={book.githubRepo || ''}
105108
input={<Input />}
106109
onChange={(event) => {
107110
this.setState({
108-
book: Object.assign({}, this.state.book, { githubRepo: event.target.value }),
111+
book: Object.assign({}, book, { githubRepo: event.target.value }),
109112
});
110113
}}
111114
>
112115
<MenuItem value="">
113116
<em>-- choose github repo --</em>
114117
</MenuItem>
115-
{this.state.repos.map(r => (
118+
{repos.map((r) => (
116119
<MenuItem value={r.full_name} key={r.id}>
117120
{r.full_name}
118121
</MenuItem>
@@ -124,12 +127,12 @@ class EditBook extends React.Component {
124127
<TextField
125128
onChange={(event) => {
126129
this.setState({
127-
book: Object.assign({}, this.state.book, {
130+
book: Object.assign({}, book, {
128131
supportURL: event.target.value,
129132
}),
130133
});
131134
}}
132-
value={this.state.book.supportURL || ''}
135+
value={book.supportURL || ''}
133136
label="Support URL"
134137
className="textFieldInput"
135138
style={styleTextField}
@@ -140,12 +143,12 @@ class EditBook extends React.Component {
140143
<TextField
141144
onChange={(event) => {
142145
this.setState({
143-
book: Object.assign({}, this.state.book, {
146+
book: Object.assign({}, book, {
144147
textNearButton: event.target.value,
145148
}),
146149
});
147150
}}
148-
value={this.state.book.textNearButton || ''}
151+
value={book.textNearButton || ''}
149152
label="Text next to Buy Button"
150153
className="textFieldInput"
151154
style={styleTextField}

‎components/admin/GiveFreeBook.js

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import notify from '../../lib/notifier';
99

1010
class GiveFreeBook extends Component {
1111
static propTypes = {
12-
books: PropTypes.arrayOf(PropTypes.shape({
13-
_id: PropTypes.string.isRequired,
14-
})),
12+
books: PropTypes.arrayOf(
13+
PropTypes.shape({
14+
_id: PropTypes.string.isRequired,
15+
}),
16+
),
1517
};
1618

1719
static defaultProps = {
@@ -43,12 +45,12 @@ class GiveFreeBook extends Component {
4345
const { books } = this.props;
4446

4547
const purchasedBooks =
46-
(user.purchasedBookIds && books.filter(b => user.purchasedBookIds.includes(b._id))) || [];
48+
(user.purchasedBookIds && books.filter((b) => user.purchasedBookIds.includes(b._id))) || [];
4749

4850
const freeBooks =
49-
(user.freeBookIds && books.filter(b => user.freeBookIds.includes(b._id))) || [];
51+
(user.freeBookIds && books.filter((b) => user.freeBookIds.includes(b._id))) || [];
5052

51-
const userBookIds = purchasedBooks.map(b => b._id).concat(freeBooks.map(b => b._id));
53+
const userBookIds = purchasedBooks.map((b) => b._id).concat(freeBooks.map((b) => b._id));
5254

5355
return (
5456
<div>
@@ -65,12 +67,14 @@ class GiveFreeBook extends Component {
6567
}}
6668
>
6769
<option value="">- select book -</option>
68-
{books.filter(b => !userBookIds.includes(b._id)).map(book => (
69-
<option value={book._id} key={book._id}>
70-
{book.name}
71-
</option>
70+
{books
71+
.filter((b) => !userBookIds.includes(b._id))
72+
.map((book) => (
73+
<option value={book._id} key={book._id}>
74+
{book.name}
75+
</option>
7276
))}
73-
</select>{' '}
77+
</select>
7478
<br />
7579
<br />
7680
<Button
@@ -112,7 +116,7 @@ class GiveFreeBook extends Component {
112116
</form>
113117
<br />
114118
<br />
115-
<div>{users.map(user => this.renderUser(user))}</div>
119+
<div>{users.map((user) => this.renderUser(user))}</div>
116120
<br />
117121
<br />
118122
<br />

‎components/customer/Bookmark.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default class Bookmark extends React.PureComponent {
1212
chapter: PropTypes.shape({
1313
_id: PropTypes.string.isRequired,
1414
slug: PropTypes.string.isRequired,
15+
order: PropTypes.number.isRequired,
1516
}).isRequired,
1617
bookmark: PropTypes.shape({
1718
hash: PropTypes.string.isRequired,
@@ -40,7 +41,7 @@ export default class Bookmark extends React.PureComponent {
4041
addBookmark = async () => {
4142
this.setState({ anchorEl: null });
4243

43-
const { chapter, activeSection } = this.props;
44+
const { chapter, activeSection, changeBookmark } = this.props;
4445

4546
if (!activeSection) {
4647
notify('To bookmark a new section, scroll to that section.');
@@ -62,7 +63,7 @@ export default class Bookmark extends React.PureComponent {
6263
activeSection.text
6364
}".`,
6465
);
65-
this.props.changeBookmark(activeSection);
66+
changeBookmark(activeSection);
6667
} catch (err) {
6768
NProgress.done();
6869
notify(err);

‎components/customer/BuyButton.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
33
import StripeCheckout from 'react-stripe-checkout';
44
import NProgress from 'nprogress';
55
import Button from '@material-ui/core/Button';
6-
import Link from 'next/link';
76

87
import { buyBook } from '../../lib/api/customer';
98
import notify from '../../lib/notifier';
@@ -22,9 +21,13 @@ class BuyButton extends React.PureComponent {
2221
static propTypes = {
2322
book: PropTypes.shape({
2423
_id: PropTypes.string.isRequired,
24+
name: PropTypes.string.isRequired,
25+
textNearButton: PropTypes.string.isRequired,
26+
price: PropTypes.number.isRequired,
2527
}),
2628
user: PropTypes.shape({
2729
_id: PropTypes.string.isRequired,
30+
email: PropTypes.string.isRequired,
2831
}),
2932
showModal: PropTypes.bool,
3033
};

‎lib/context.js

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)