Skip to content

Commit 38313ea

Browse files
tima101tima101
committed
next v12, @mui v5 + more (part of #163)
1 parent 6e34460 commit 38313ea

Some content is hidden

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

42 files changed

+2581
-5062
lines changed

‎book/11-end/api/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"passport-google-oauth": "^2.0.0",
4242
"passwordless": "^1.1.3",
4343
"passwordless-tokenstore": "^0.0.10",
44-
"socket.io": "^3.0.3",
44+
"socket.io": "^4.2.0",
4545
"stripe": "^8.129.0",
4646
"typescript": "^4.1.3",
4747
"winston": "^3.3.3"
@@ -57,10 +57,10 @@
5757
"@types/node": "^12.12.2",
5858
"@types/node-fetch": "^1.6.9",
5959
"@types/passport": "^0.4.5",
60-
"@types/socket.io": "^1.4.33",
60+
"@types/socket.io": "^3.0.2",
6161
"@typescript-eslint/eslint-plugin": "^4.2.0",
6262
"@typescript-eslint/parser": "^4.2.0",
63-
"eslint": "^6.8.0",
63+
"eslint": "^7.25.0",
6464
"eslint-config-prettier": "^7.1.0",
6565
"eslint-plugin-prettier": "^3.3.1",
6666
"jest": "^26.4.2",

‎book/11-end/api/server/sockets.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ function setupSockets({
2727
credentials: true,
2828
},
2929
cookie: {
30+
name: 'saas-socket-cookie',
3031
httpOnly: true,
3132
maxAge: 14 * 24 * 60 * 60 * 1000, // expires in 14 days
3233
domain: dev ? 'localhost' : '.async-await.com',
@@ -40,7 +41,7 @@ function setupSockets({
4041

4142
io.use(wrap(sessionMiddleware));
4243

43-
io.on('connection', (socket) => {
44+
io.on('connection', (socket: any) => {
4445
if (
4546
!socket.request.session ||
4647
((!socket.request.session.passport || !socket.request.session.passport.user) &&

‎book/11-end/api/yarn.lock

+346-278
Large diffs are not rendered by default.

‎book/11-end/app/.babelrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
"class-properties": { "loose": true }
77
}
88
]
9-
]
9+
],
10+
"plugins": [["@babel/plugin-proposal-private-property-in-object", { "loose": true }], ["@babel/plugin-proposal-private-methods", { "loose": true }]]
1011
}

‎book/11-end/app/components/common/Confirmer.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import Button from '@material-ui/core/Button';
2-
import Dialog from '@material-ui/core/Dialog';
3-
import DialogActions from '@material-ui/core/DialogActions';
4-
import DialogContent from '@material-ui/core/DialogContent';
5-
import DialogContentText from '@material-ui/core/DialogContentText';
6-
import DialogTitle from '@material-ui/core/DialogTitle';
1+
import Button from '@mui/material/Button';
2+
import Dialog from '@mui/material/Dialog';
3+
import DialogActions from '@mui/material/DialogActions';
4+
import DialogContent from '@mui/material/DialogContent';
5+
import DialogContentText from '@mui/material/DialogContentText';
6+
import DialogTitle from '@mui/material/DialogTitle';
77
import React from 'react';
88

99
export let openConfirmDialogExternal;

‎book/11-end/app/components/common/LoginButton.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Button from '@material-ui/core/Button';
2-
import TextField from '@material-ui/core/TextField';
1+
import Button from '@mui/material/Button';
2+
import TextField from '@mui/material/TextField';
33
import React from 'react';
44

55
import { emailLoginLinkApiMethod } from '../../lib/api/public';
@@ -21,7 +21,9 @@ class LoginButton extends React.PureComponent<Props, State> {
2121
public render() {
2222
const { invitationToken } = this.props;
2323

24-
let url = `${dev ? process.env.URL_API : process.env.PRODUCTION_URL_API}/auth/google`;
24+
let url = `${
25+
dev ? process.env.NEXT_PUBLIC_URL_API : process.env.NEXT_PUBLIC_PRODUCTION_URL_API
26+
}/auth/google`;
2527
const qs = makeQueryString({ invitationToken });
2628

2729
if (qs) {

‎book/11-end/app/components/common/MemberChooser.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

3-
import Autocomplete from '@material-ui/lab/Autocomplete';
4-
import TextField from '@material-ui/core/TextField';
3+
import Autocomplete from '@mui/material/Autocomplete';
4+
import TextField from '@mui/material/TextField';
55

66
import { User } from '../../lib/store/user';
77

@@ -47,7 +47,7 @@ class MemberChooser extends React.Component<Props, State> {
4747
id="tags-standard"
4848
options={suggestions}
4949
getOptionLabel={(option) => option.label}
50-
getOptionSelected={(option, value) => option.id === value.id}
50+
isOptionEqualToValue={(option, value) => option.id === value.id}
5151
value={this.state.selectedItems}
5252
renderInput={(params) => (
5353
<TextField

‎book/11-end/app/components/common/MenuWithLinks.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Menu from '@material-ui/core/Menu';
2-
import MenuItem from '@material-ui/core/MenuItem';
1+
import Menu from '@mui/material/Menu';
2+
import MenuItem from '@mui/material/MenuItem';
33
import Link from 'next/link';
44
import { NextRouter, withRouter } from 'next/router';
55
import React from 'react';

‎book/11-end/app/components/common/MenuWithMenuItems.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Menu from '@material-ui/core/Menu';
2-
import MenuItem from '@material-ui/core/MenuItem';
3-
import MoreVertIcon from '@material-ui/icons/MoreVert';
1+
import Menu from '@mui/material/Menu';
2+
import MenuItem from '@mui/material/MenuItem';
3+
import MoreVertIcon from '@mui/icons-material/MoreVert';
44
import React from 'react';
55

66
type Props = {

‎book/11-end/app/components/common/Notifier.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Snackbar from '@material-ui/core/Snackbar';
1+
import Snackbar from '@mui/material/Snackbar';
22
import React from 'react';
33

44
export let openSnackbarExternal;

‎book/11-end/app/components/discussions/CreateDiscussionForm.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import Button from '@material-ui/core/Button';
2-
import Dialog from '@material-ui/core/Dialog';
3-
import DialogContent from '@material-ui/core/DialogContent';
4-
import DialogTitle from '@material-ui/core/DialogTitle';
5-
import FormControl from '@material-ui/core/FormControl';
6-
import FormHelperText from '@material-ui/core/FormHelperText';
7-
import InputLabel from '@material-ui/core/InputLabel';
8-
import Select from '@material-ui/core/Select';
9-
import MenuItem from '@material-ui/core/MenuItem';
10-
import TextField from '@material-ui/core/TextField';
1+
import Button from '@mui/material/Button';
2+
import Dialog from '@mui/material/Dialog';
3+
import DialogContent from '@mui/material/DialogContent';
4+
import DialogTitle from '@mui/material/DialogTitle';
5+
import FormControl from '@mui/material/FormControl';
6+
import FormHelperText from '@mui/material/FormHelperText';
7+
import InputLabel from '@mui/material/InputLabel';
8+
import Select from '@mui/material/Select';
9+
import MenuItem from '@mui/material/MenuItem';
10+
import TextField from '@mui/material/TextField';
1111
import { observer } from 'mobx-react';
1212
import Head from 'next/head';
1313
import Router from 'next/router';
@@ -94,10 +94,10 @@ class CreateDiscussionForm extends React.Component<Props, State> {
9494
<p />
9595
<br />
9696
<FormControl>
97-
<InputLabel>Notification type</InputLabel>
9897
<Select
9998
value={this.state.notificationType}
100-
onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
99+
onChange={(event) => {
100+
event.stopPropagation();
101101
this.setState({ notificationType: event.target.value });
102102
}}
103103
required
@@ -238,9 +238,9 @@ class CreateDiscussionForm extends React.Component<Props, State> {
238238

239239
await discussion.sendDataToLambda({
240240
discussionName: discussion.name,
241-
discussionLink: `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
242-
discussion.team.slug
243-
}/discussions/${discussion.slug}`,
241+
discussionLink: `${
242+
dev ? process.env.NEXT_PUBLIC_URL_APP : process.env.NEXT_PUBLIC_PRODUCTION_URL_APP
243+
}/teams/${discussion.team.slug}/discussions/${discussion.slug}`,
244244
postContent: post.content,
245245
authorName: post.user.displayName,
246246
userIds: userIdsForLambda,

‎book/11-end/app/components/discussions/DiscussionActionMenu.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,9 @@ class DiscussionActionMenu extends React.Component<Props, State> {
105105

106106
const selectedDiscussion = currentTeam.discussions.find((d) => d._id === id);
107107

108-
const discussionUrl = `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
109-
currentTeam.slug
110-
}/discussions/${selectedDiscussion.slug}`;
108+
const discussionUrl = `${
109+
dev ? process.env.NEXT_PUBLIC_URL_APP : process.env.NEXT_PUBLIC_PRODUCTION_URL_APP
110+
}/teams/${currentTeam.slug}/discussions/${selectedDiscussion.slug}`;
111111

112112
try {
113113
if (window.navigator) {

‎book/11-end/app/components/discussions/DiscussionList.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Tooltip from '@material-ui/core/Tooltip';
2-
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
1+
import Tooltip from '@mui/material/Tooltip';
2+
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
33
import { observer } from 'mobx-react';
44
import React from 'react';
55

‎book/11-end/app/components/discussions/DiscussionListItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Paper from '@material-ui/core/Paper';
1+
import Paper from '@mui/material/Paper';
22
import { observer } from 'mobx-react';
33
import Link from 'next/link';
44
import React from 'react';

‎book/11-end/app/components/discussions/EditDiscussionForm.tsx

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import Button from '@material-ui/core/Button';
2-
import Dialog from '@material-ui/core/Dialog';
3-
import DialogActions from '@material-ui/core/DialogActions';
4-
import DialogContent from '@material-ui/core/DialogContent';
5-
import DialogContentText from '@material-ui/core/DialogContentText';
6-
import DialogTitle from '@material-ui/core/DialogTitle';
7-
import FormControl from '@material-ui/core/FormControl';
8-
import FormHelperText from '@material-ui/core/FormHelperText';
9-
import InputLabel from '@material-ui/core/InputLabel';
10-
import Select from '@material-ui/core/Select';
11-
import MenuItem from '@material-ui/core/MenuItem';
12-
import TextField from '@material-ui/core/TextField';
1+
import Button from '@mui/material/Button';
2+
import Dialog from '@mui/material/Dialog';
3+
import DialogActions from '@mui/material/DialogActions';
4+
import DialogContent from '@mui/material/DialogContent';
5+
import DialogContentText from '@mui/material/DialogContentText';
6+
import DialogTitle from '@mui/material/DialogTitle';
7+
import FormControl from '@mui/material/FormControl';
8+
import FormHelperText from '@mui/material/FormHelperText';
9+
import InputLabel from '@mui/material/InputLabel';
10+
import Select from '@mui/material/Select';
11+
import MenuItem from '@mui/material/MenuItem';
12+
import TextField from '@mui/material/TextField';
1313
import { observer } from 'mobx-react';
1414
import NProgress from 'nprogress';
1515
import React from 'react';
@@ -99,10 +99,10 @@ class EditDiscussionForm extends React.Component<Props, State> {
9999
<p />
100100
<br />
101101
<FormControl>
102-
<InputLabel>Notification type</InputLabel>
103102
<Select
104103
value={this.state.notificationType}
105-
onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
104+
onChange={(event) => {
105+
event.stopPropagation();
106106
this.setState({ notificationType: event.target.value });
107107
}}
108108
required

‎book/11-end/app/components/layout/index.tsx

+16-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Avatar from '@material-ui/core/Avatar';
2-
import Button from '@material-ui/core/Button';
3-
import Grid from '@material-ui/core/Grid';
4-
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
5-
import LensIcon from '@material-ui/icons/Lens';
1+
import Avatar from '@mui/material/Avatar';
2+
import Button from '@mui/material/Button';
3+
import Grid from '@mui/material/Grid';
4+
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
5+
import LensIcon from '@mui/icons-material/Lens';
66

77
import Link from 'next/link';
88
import React from 'react';
@@ -48,7 +48,7 @@ function LayoutWrapper({
4848
<Grid
4949
container
5050
direction="row"
51-
justify="flex-start"
51+
justifyContent="flex-start"
5252
alignItems="stretch"
5353
style={isMobile ? styleGridIsMobile : styleGrid}
5454
>
@@ -116,8 +116,16 @@ function LayoutWrapper({
116116
},
117117
{
118118
text: 'Log out',
119-
href: `${dev ? process.env.URL_API : process.env.PRODUCTION_URL_API}/logout`,
120-
as: `${dev ? process.env.URL_API : process.env.PRODUCTION_URL_API}/logout`,
119+
href: `${
120+
dev
121+
? process.env.NEXT_PUBLIC_URL_API
122+
: process.env.NEXT_PUBLIC_PRODUCTION_URL_API
123+
}/logout`,
124+
as: `${
125+
dev
126+
? process.env.NEXT_PUBLIC_URL_API
127+
: process.env.NEXT_PUBLIC_PRODUCTION_URL_API
128+
}/logout`,
121129
externalServer: true,
122130
},
123131
]}

‎book/11-end/app/components/posts/PostDetail.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Avatar from '@material-ui/core/Avatar';
2-
import Paper from '@material-ui/core/Paper';
3-
import Tooltip from '@material-ui/core/Tooltip';
1+
import Avatar from '@mui/material/Avatar';
2+
import Paper from '@mui/material/Paper';
3+
import Tooltip from '@mui/material/Tooltip';
44
import { observer } from 'mobx-react';
55
import moment from 'moment';
66
import React from 'react';

‎book/11-end/app/components/posts/PostEditor.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Avatar from '@material-ui/core/Avatar';
2-
import Button from '@material-ui/core/Button';
3-
import InsertPhotoIcon from '@material-ui/icons/InsertPhoto';
1+
import Avatar from '@mui/material/Avatar';
2+
import Button from '@mui/material/Button';
3+
import InsertPhotoIcon from '@mui/icons-material/InsertPhoto';
44
import he from 'he';
55
import marked from 'marked';
66
import { observer } from 'mobx-react';
@@ -240,7 +240,7 @@ class PostEditor extends React.Component<Props, State> {
240240

241241
NProgress.start();
242242

243-
const bucket = process.env.BUCKET_FOR_POSTS;
243+
const bucket = process.env.NEXT_PUBLIC_BUCKET_FOR_POSTS;
244244
const prefix = `${currentTeam.slug}`;
245245
const fileName = file.name;
246246
const fileType = file.type;

‎book/11-end/app/components/posts/PostForm.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button from '@material-ui/core/Button';
1+
import Button from '@mui/material/Button';
22
import he from 'he';
33
import marked from 'marked';
44
import { observer } from 'mobx-react';
@@ -183,9 +183,9 @@ class PostForm extends React.Component<Props, State> {
183183

184184
await discussion.sendDataToLambda({
185185
discussionName: discussion.name,
186-
discussionLink: `${dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP}/teams/${
187-
discussion.team.slug
188-
}/discussions/${discussion.slug}`,
186+
discussionLink: `${
187+
dev ? process.env.NEXT_PUBLIC_URL_APP : process.env.NEXT_PUBLIC_PRODUCTION_URL_APP
188+
}/teams/${discussion.team.slug}/discussions/${discussion.slug}`,
189189
postContent: post.content,
190190
authorName: post.user.displayName,
191191
userIds: userIdsForLambda,

‎book/11-end/app/components/teams/InviteMember.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Button from '@material-ui/core/Button';
2-
import Dialog from '@material-ui/core/Dialog';
3-
import DialogContent from '@material-ui/core/DialogContent';
4-
import DialogTitle from '@material-ui/core/DialogTitle';
5-
import TextField from '@material-ui/core/TextField';
1+
import Button from '@mui/material/Button';
2+
import Dialog from '@mui/material/Dialog';
3+
import DialogContent from '@mui/material/DialogContent';
4+
import DialogTitle from '@mui/material/DialogTitle';
5+
import TextField from '@mui/material/TextField';
66
import { inject, observer } from 'mobx-react';
77
import NProgress from 'nprogress';
88
import React from 'react';

‎book/11-end/app/lib/api/sendRequestAndGetResponse.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,18 @@ export default async function sendRequestAndGetResponse(path, opts: any = {}) {
2525

2626
const qs = (opts.qs && `?${makeQueryString(opts.qs)}`) || '';
2727

28-
// console.log(`before: ${process.env.URL_API}${path}${qs}`);
28+
// console.log(`before: ${process.env.NEXT_PUBLIC_URL_API}${path}${qs}`);
2929

3030
const response = await fetch(
3131
opts.externalServer
3232
? `${path}${qs}`
33-
: `${dev ? process.env.URL_API : process.env.PRODUCTION_URL_API}${path}${qs}`,
33+
: `${
34+
dev ? process.env.NEXT_PUBLIC_URL_API : process.env.NEXT_PUBLIC_PRODUCTION_URL_API
35+
}${path}${qs}`,
3436
Object.assign({ method: 'POST', credentials: 'include' }, opts, { headers }),
3537
);
3638

37-
// console.log(`after: ${process.env.URL_API}${path}${qs}`);
39+
// console.log(`after: ${process.env.NEXT_PUBLIC_URL_API}${path}${qs}`);
3840

3941
// console.log(response.status);
4042
// console.log(response.statusText);

‎book/11-end/app/lib/api/team-member.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const deletePostApiMethod = (data) =>
9292
});
9393

9494
export const sendDataToLambdaApiMethod = (data) =>
95-
sendRequestAndGetResponse(`${process.env.API_GATEWAY_ENDPOINT}/`, {
95+
sendRequestAndGetResponse(`${process.env.NEXT_PUBLIC_API_GATEWAY_ENDPOINT}/`, {
9696
externalServer: true,
9797
body: JSON.stringify(data),
9898
});

‎book/11-end/app/lib/gtag.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
const { GA_MEASUREMENT_ID } = process.env;
1+
const { NEXT_PUBLIC_GA_MEASUREMENT_ID } = process.env;
22

33
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
44
export const pageview = (url) => {
5-
(window as any).gtag('config', GA_MEASUREMENT_ID, {
5+
(window as any).gtag('config', NEXT_PUBLIC_GA_MEASUREMENT_ID, {
66
page_location: url,
77
});
88
};

‎book/11-end/app/lib/isMobile.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
const mobileRE = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;
1+
const mobileRE =
2+
/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;
23

34
export function isMobile(opts) {
45
if (!opts) {

0 commit comments

Comments
 (0)