Upgrade deps (#159)

* incomplete work on upgrading depdendencies * Refactor everything to work with the new versions * Fix a few things and add team options * Fix travis issues * Fix travis again?
clarkmalmgren · Aug 28, 2022 · ed2e481 · ed2e481
1 parent 4592c34
commit ed2e481
Show file tree

Hide file tree

Showing 65 changed files with 6,882 additions and 10,152 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v12.16.1
+v16.14.2
diff --git a/.travis.yml b/.travis.yml
@@ -1,25 +1,11 @@
 language: node_js
 
 node_js:
-  - 'node'
-
-sudo: required
-
-services:
-  - docker
+  - 16
 
 script:
-  - yarn test --coverage
-  - yarn build
+  - yarn run test --coverage
+  - yarn exec react-scripts build
 
 after_success:
   - ./node_modules/coveralls/bin/coveralls.js < coverage/lcov.info
-
-deploy:
-  provider: firebase
-  skip_cleanup: true
-  on:
-    repo: clarkmalmgren/bolingbrook-church
-    tags: true
-  token:
-    secure: Wx5KZPo2pzzBKYqST1vW8ynchz8+yK2PBqLayGOG7DmbsEpgE8nktcUSmqen6gYI+5+WQ414vhLfz30rlG4FmlfgghZ0OIsgV/yqpiaP0H/R3surQzDv6wlNW0vGSrrwzeuOChX10w3yw9j5DZpEmqQ2SnOdXzj/FsCSeNgCUaWvntzHm+4GOAKB3X+93NjIjP5+1dQ6tUcXCUDHrXtmHlax/HM7HpnvF46St6dPblmj2mYHAeYtpW9ZymLgQang8XzhFGrEyWLLSxM9XT3vfRLO5poQ25Oxl6wUjGt1xIsaRw1Z3ZBiZVAZnYN7udcq1chhoeUxZZqfAV0+/KhDIAjIs3PVHwvggIfhy3dFIsXGJoYUKIcv1qcfZAt7kSfV+I6w5DrXqOkhTuNPyNG2yYwG9FJRu08tlDAwMj5Gbk3qq80eNKj40SOD2vb38ouYdtnI9lMCinLfTNcYbSTJRgHomFM0tBPs6vQxPrEEo00JOuUu3S0ITCff6oq5XAolcgV6lT/5551U/w0nYYS5POZb7Auu6RrfMHOTOu++bXbix0n6vYplOMucH2OtAPJavmN2FqUf8HHMgltW3RdZjUlj25WlqmNoCvwr8cqXJli3cCClnhxxZ6kr4cx92pB9yHsT4vUwpaTiWhbbjRjI1ay1Xm5j42JLKJJc7Q83u/M=
diff --git a/package.json b/package.json
@@ -1,32 +1,32 @@
 {
   "name": "bolingbrook-church",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@material-ui/styles": "^4.11.3",
-    "@types/classnames": "^2.2.7",
-    "@types/jest": "25.2.1",
-    "@types/node": "13.11.0",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-redux": "^7.1.16",
-    "@types/react-router-dom": "^5.1.7",
-    "babel-loader": "8.1.0",
-    "classnames": "^2.2.6",
-    "contentful": "^7.8.0",
-    "firebase": "^8.4.1",
-    "moment": "^2.24.0",
-    "moment-timezone": "^0.5.23",
-    "node-sass": "^5.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-redux": "^7.2.3",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.2",
-    "redux-loop": "^5.1.1",
-    "typescript": "^4.1.2"
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.86",
+    "@mui/material": "^5.8.4",
+    "@mui/styles": "^5.8.4",
+    "@types/node": "17.0.35",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-redux": "^7.1.24",
+    "@types/react-router-dom": "^5.3.3",
+    "classnames": "^2.3.1",
+    "contentful": "^9.1.29",
+    "firebase": "^9.8.1",
+    "moment": "^2.29.3",
+    "moment-timezone": "^0.5.34",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.0",
+    "redux-loop": "^6.2.0",
+    "sass": "^1.52.3",
+    "typescript": "^4.7.2"
   },
   "scripts": {
     "start": "yarn run start:beta",
@@ -37,9 +37,7 @@
     "build:prod": "sh -ac '. .env.production; react-scripts build'",
     "deploy:beta": "yarn run build:beta; firebase use bolingbrook-church-beta; firebase deploy --only hosting",
     "deploy:prod": "yarn run build:prod; firebase use bolingbrook-church; firebase deploy --only hosting",
-    "test": "react-scripts test",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -51,13 +49,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.9",
-    "coveralls": "^3.0.3",
-    "storybook-addon-material-ui": "^0.9.0-alpha.24"
+    "@types/jest": "^28.1.2",
+    "coveralls": "^3.1.1",
+    "jest": "^28.1.1"
   }
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@material-ui/styles'
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
 import { FunctionComponent } from 'react'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
@@ -16,17 +16,19 @@ interface AppProps {
 const App: FunctionComponent<AppProps> =
   (props) => {
     return (
-      <ThemeProvider theme={theme}>
-        <Provider store={props.store}>
-          <BrowserRouter>
-            <NavWatcher />
-            <Header />
-            <Banner />
-            <BCSwitch />
-            <Footer />
-          </BrowserRouter>
-        </Provider>
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Provider store={props.store}>
+            <BrowserRouter>
+              <NavWatcher />
+              <Header />
+              <Banner />
+              <BCSwitch />
+              <Footer />
+            </BrowserRouter>
+          </Provider>
+        </ThemeProvider>
+      </StyledEngineProvider>
     )
 
   }

diff --git a/src/admin/edit-sermon.tsx b/src/admin/edit-sermon.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { FunctionComponent } from 'react'
 import moment from 'moment'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
-import { match, Redirect } from 'react-router-dom'
+import { Navigate, useParams } from 'react-router-dom'
 import { SecurePage } from './secure-page'
 import { Form, TextField, List, Submit } from '../forms'
 import { sermonSelectors } from '../store/index'
@@ -11,13 +11,11 @@ import { PartialSermon } from '../models/sermon'
 import { save } from '../services/sermon'
 import { ErrorDialog } from '../components/error'
 
-interface MatchParams { id: string }
-
 interface EditSermonProps {
   disableDate: boolean
   onLoad: () => void
   refresh: () => void
-  match: match<MatchParams>
+  id?: string
   initialData?: PartialSermon
 }
 
@@ -50,7 +48,7 @@ export class BaseEditSermon extends React.PureComponent<EditSermonProps, EditSer
 
   render() {
     return this.state.submitted ?
-      (<Redirect to="/admin/sermons" />) :
+      (<Navigate to="/admin/sermons" />) :
       (
         <SecurePage>
           <Form onSubmit={this.submit} initialData={this.props.initialData}>
@@ -76,7 +74,7 @@ export class BaseEditSermon extends React.PureComponent<EditSermonProps, EditSer
 }
 
 const mapStateToProps = (state: any, ownProps: EditSermonProps) => {
-  const data = sermonSelectors.date(state)(ownProps.match.params.id)
+  const data = sermonSelectors.date(state)(ownProps.id || '')
   return ({ initialData: data })
 }
 
@@ -88,6 +86,12 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
 
 export const EditSermon = connect(mapStateToProps, mapDispatchToProps)(BaseEditSermon)
 
+export const EditSermonFromPath: FunctionComponent<{}> =
+  () => {
+    const { id }  = useParams()
+    return (<EditSermon id={id} disableDate onLoad={() => {}} refresh={() => {}} />)
+  }
+
 const mapStateToPropsForNew = (state: any) => (
   {
     initialData: {
@@ -106,4 +110,4 @@ const mapStateToPropsForNew = (state: any) => (
     disableDate: false
   })
 
-export const NewSermon = connect(mapStateToPropsForNew, mapDispatchToProps)(BaseEditSermon)
+export const NewSermon = connect(mapStateToPropsForNew, mapDispatchToProps)(BaseEditSermon)
diff --git a/src/admin/edit-sermons.tsx b/src/admin/edit-sermons.tsx
@@ -1,8 +1,8 @@
-import { Fab, Icon } from '@material-ui/core'
-import { createStyles, makeStyles } from '@material-ui/styles'
+import { Fab, Icon } from '@mui/material'
+import { createStyles, makeStyles } from '@mui/styles'
 import React from 'react'
 import { Link, LinkProps } from 'react-router-dom'
-import SermonList from '../components/sermon-list'
+import { SermonList } from '../components/sermon-list'
 import { ContentfulHero } from '../contentful/hero'
 import { SecurePage } from './secure-page'
 

diff --git a/src/admin/login.tsx b/src/admin/login.tsx
@@ -1,16 +1,17 @@
-import * as React from 'react'
+import { FunctionComponent } from 'react'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
-import { createStyles, withStyles, WithStyles } from '@material-ui/styles'
-import { Card, Typography, CardContent, CardActions, CardMedia } from '@material-ui/core'
+import { createStyles, makeStyles } from '@mui/styles'
+import { Card, Typography, CardContent, CardActions, CardMedia } from '@mui/material'
 import { GoogleToken } from '../store/auth/token'
 import { save } from '../store/auth/actions'
 import { authSelectors } from '../store/index'
-import { Redirect } from 'react-router'
+import { Navigate, useLocation } from 'react-router-dom'
 import { TruthyOption } from '../utils/option'
 import { GoogleLogin } from '../components/google-login'
 
-const styles = createStyles({
+
+const useStyles = makeStyles(() => createStyles({
   card: {
     margin: '12px auto',
     maxWidth: '300px',
@@ -24,29 +25,28 @@ const styles = createStyles({
     margin: '0 auto 10px',
     backgroundColor: 'white'
   }
-})
+}))
 
-interface LoginProps extends WithStyles<typeof styles> {
+type LoginProps = {
   loggedIn: boolean
   onSuccess: (token: GoogleToken) => void
 }
 
-class Login extends React.PureComponent<LoginProps, {}> {
+const Login: FunctionComponent<LoginProps> =
+  ({loggedIn, onSuccess}) => {
+    const classes = useStyles()
+    const hash = useLocation().hash
 
-  readonly redirectTo: string =
-    TruthyOption(window.location.hash).map(_ => _.substr(1)).getOrElse("/admin")
+    const redirectTo: string = TruthyOption(hash).map(_ => _.substring(1)).getOrElse("/admin")
 
-  onFailure = (e: Error) => console.error(e)
+    const onFailure = (e: Error) => console.error(e)
 
-  render() {
-    if (this.props.loggedIn) {
-      return (
-        <Redirect to={this.redirectTo} />
-      )
+    if (loggedIn) {
+      return ( <Navigate to={redirectTo} /> )
     } else {
       return (
-        <Card className={this.props.classes.card}>
-          <CardMedia className={this.props.classes.image} image="https://www.blakleysflooring.com/wp-content/uploads/2016/03/Placeholder-768x768.png" />
+        <Card className={classes.card}>
+          <CardMedia className={classes.image} image="https://www.blakleysflooring.com/wp-content/uploads/2016/03/Placeholder-768x768.png" />
           <CardContent>
             <Typography variant="h2">Login</Typography>
             <Typography>
@@ -55,17 +55,16 @@ class Login extends React.PureComponent<LoginProps, {}> {
             </Typography>
           </CardContent>
           <CardActions >
-            <GoogleLogin className={this.props.classes.login} onSuccess={(token) => this.props.onSuccess(token)} onFailure={this.onFailure} />
+            <GoogleLogin className={classes.login} onSuccess={(token) => onSuccess(token)} onFailure={onFailure} />
           </CardActions>
         </Card>
       )
     }
   }
-}
 
 const mapStateToProps = (state: any) => ({ loggedIn: authSelectors.loggedIn(state)() })
 
 const mapDispatchToProps = (dispatch: Dispatch) =>
   ({ onSuccess: (token: GoogleToken) => dispatch(save(token)) })
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Login))
+export default connect(mapStateToProps, mapDispatchToProps)(Login)
diff --git a/src/admin/secure-page.tsx b/src/admin/secure-page.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
 import { authSelectors } from '../store/index'
-import { Redirect } from 'react-router';
+import { Navigate } from 'react-router-dom'
 
 interface SecurePageProps {
   loggedIn: boolean
@@ -12,7 +12,7 @@ interface SecurePageProps {
 const BaseSecurePage: React.FunctionComponent<SecurePageProps> =
   (props) => props.loggedIn ?
     (<div className={props.className}>{props.children}</div>) :
-    (<Redirect to={`/admin/login#${window.location.pathname}`} />)
+    (<Navigate to={`/admin/login#${window.location.pathname}`} />)
 
 const mapStateToProps = (state: any) =>
   ({ loggedIn: authSelectors.loggedIn(state)() })