Updating Boilerplate

server/.babelrc

@@ -1,7 +1,13 @@
 {
-  "presets": ["env"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {"node": 14}
+      }
+    ]
+  ],
   "plugins": [
-    ["transform-object-rest-spread", {"useBuiltIns": true}],
     [
       "module-resolver",
       {

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionjs-app",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "An Orionjs app",
   "main": "index.js",
   "author": "nicolaslopezj",
@@ -10,21 +10,25 @@
     "reinstall": "rm -rf node_modules/ && yarn"
   },
   "dependencies": {
-    "@orion-js/app": "^0.11.0",
-    "@orion-js/auth": "^0.11.1",
-    "@orion-js/graphql": "^0.11.0",
-    "@orion-js/jobs": "^0.11.0",
-    "@orion-js/mailing": "^0.11.0",
-    "@orion-js/schema": "^0.11.0",
+    "@orion-js/app": "^2.0.1",
+    "@orion-js/auth": "^2.0.1",
+    "@orion-js/graphql": "^2.0.1",
+    "@orion-js/jobs": "^2.0.1",
+    "@orion-js/mailing": "^2.0.1",
+    "@orion-js/schema": "^2.0.1",
     "babel-plugin-module-resolver": "^3.2.0",
     "request": "^2.88.0",
     "request-promise": "^4.2.4",
     "source-map-support": "^0.5.16"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "eslint-config-orionsoft": "^1.3.12"
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.30.0",
+    "eslint-config-orionsoft": "^2.1.2",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-native": "^3.11.0"
   }
 }

web/.babelrc

@@ -1,10 +1,14 @@
 {
   "plugins": [
-    ["module-resolver", {
-      "root": ["./"],
-      "alias": {
-        "App": "./src/App"
+    "styled-jsx/babel",
+    [
+      "module-resolver",
+      {
+        "root": ["./"],
+        "alias": {
+          "App": "./src/App"
+        }
       }
-    }]
+    ]
   ]
 }

web/package.json

@@ -3,36 +3,40 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "babel-plugin-module-resolver": "^3.2.0",
-    "eslint-config-orionsoft": "^1.3.12",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint-config-orionsoft": "^2.2.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-native": "^3.11.0",
     "orionsoft-react-scripts": "^2.1.19",
-    "react-dev-utils": "^8.0.0"
+    "react-dev-utils": "^11.0.4"
   },
   "dependencies": {
-    "@orion-js/graphql-client": "^0.11.0",
-    "@orion-js/schema": "^0.11.0",
-    "apollo-hooks": "^2.2.1",
-    "autobind-decorator": "^2.1.0",
+    "@orion-js/graphql-client": "^2.0.1",
+    "@orion-js/schema": "^2.0.1",
+    "apollo-hooks": "^2.7.6",
+    "autobind-decorator": "^2.2.1",
     "babel-polyfill": "^6.26.0",
-    "graphql": "^14.2.1",
-    "graphql-tag": "^2.10.1",
-    "moment": "^2.22.2",
+    "graphql": "^15.3.0",
+    "graphql-tag": "^2.11.0",
+    "moment": "^2.29.1",
     "numeral": "^2.0.6",
-    "orionjs-react-autoform": "^1.2.1",
+    "orionjs-react-autoform": "~1.7.0",
     "orionsoft-parts": "^1.15.17",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
+    "react": "16.12.0",
     "react-addons-css-transition-group": "^15.6.2",
-    "react-apollo": "^2.5.4",
+    "react-apollo": "^3.1.5",
     "react-apollo-decorators": "^2.1.3",
-    "react-dom": "^16.8.6",
-    "react-hot-loader": "4.8.3",
+    "react-dom": "16.12.0",
+    "react-hot-loader": "4.13.0",
     "react-icons": "^2.2.7",
     "react-loadable": "^5.5.0",
-    "react-router-dom": "^5.0.0",
-    "react-select": "^2.4.2",
-    "react-transition-group": "^2.9.0",
-    "simple-react-form": "^2.2.1"
+    "react-router-dom": "^5.1.2",
+    "react-select": "^2.4.3",
+    "react-transition-group": "^4.4.1",
+    "simple-react-form": "^2.6.1",
+    "styled-jsx": "^3.4.4"
   },
   "scripts": {
     "start": "./node_modules/orionsoft-react-scripts/bin/react-scripts.js start",

web/src/App/Pages/App/Settings/Profile/index.js

@@ -37,6 +37,11 @@ export default class Profile extends React.Component {
 
   state = {}
 
+  constructor(props) {
+    super(props)
+    this.form = React.createRef()
+  }
+
   render() {
     if (!this.props.me) return
     return (
@@ -47,7 +52,7 @@ export default class Profile extends React.Component {
           description={<Translate tr="settings.profileDescription" />}>
           <AutoForm
             mutation="setUserProfile"
-            ref="form"
+            ref={this.form}
             doc={{userId: this.props.me._id, profile: this.props.me.profile}}
             onSuccess={() =>
               this.props.showMessage(<Translate tr="settings.yourProfileWasSaved" />)
@@ -56,7 +61,7 @@ export default class Profile extends React.Component {
             omit={['userId']}
           />
           <br />
-          <Button onClick={() => this.refs.form.submit()} primary>
+          <Button onClick={() => this.form.submit()} primary>
             <Translate tr="global.save" />
           </Button>
         </Section>

web/src/App/Pages/App/Settings/Security/Password/index.js

@@ -32,12 +32,7 @@ export default class ChangePassword extends React.Component {
     },
     confirm: {
       type: String,
-      custom(
-        confirm,
-        {
-          doc: {newPassword}
-        }
-      ) {
+      custom(confirm, {doc: {newPassword}}) {
         if (confirm !== newPassword) {
           return 'passwordsDontMatch'
         }
@@ -46,6 +41,11 @@ export default class ChangePassword extends React.Component {
     }
   }
 
+  constructor(props) {
+    super(props)
+    this.form = React.createRef()
+  }
+
   render() {
     return (
       <div className={styles.container}>
@@ -54,7 +54,7 @@ export default class ChangePassword extends React.Component {
           description={<Translate tr="settings.changePasswordDescription" />}>
           <AutoForm
             mutation="changePassword"
-            ref="form"
+            ref={this.form}
             onSuccess={() => this.props.showMessage('Your password was changed')}
             schema={this.schema}>
             <div className="label">
@@ -90,7 +90,7 @@ export default class ChangePassword extends React.Component {
             />
           </AutoForm>
           <br />
-          <Button icon={LockIcon} onClick={() => this.refs.form.submit()} primary>
+          <Button icon={LockIcon} onClick={() => this.form.submit()} primary>
             <Translate tr="settings.changePassword" />
           </Button>
         </Section>

web/src/App/Pages/Auth/Forgot/index.js

@@ -18,6 +18,12 @@ export default class ForgotPassword extends React.Component {
     userId: PropTypes.string
   }
 
+  constructor(props) {
+    super(props)
+    this.form = React.createRef()
+    this.submit = React.createRef()
+  }
+
   @autobind
   onSuccess() {
     this.props.showMessage(<Translate tr="auth.followInstructionsInEmail" />)
@@ -27,18 +33,18 @@ export default class ForgotPassword extends React.Component {
     if (this.props.userId) return <LoggedIn />
     return (
       <div>
-        <AutoForm mutation="forgotPassword" ref="form" onSuccess={this.onSuccess}>
+        <AutoForm mutation="forgotPassword" ref={this.form} onSuccess={this.onSuccess}>
           <div className="label">Email</div>
           <Field
             fieldName="email"
             type={Text}
             placeholder="Email"
             fieldType="email"
-            onEnter={() => this.refs.submit.click()}
+            onEnter={() => this.submit.click()}
           />
         </AutoForm>
         <br />
-        <Button ref="submit" onClick={() => this.refs.form.submit()} primary>
+        <Button ref={this.submit} onClick={() => this.form.submit()} primary>
           <Translate tr="auth.resetPassword" />
         </Button>
         <br />

web/src/App/Pages/Auth/Login/index.js

@@ -20,6 +20,13 @@ export default class Login extends React.Component {
     loading: PropTypes.bool
   }
 
+  constructor(props) {
+    super(props)
+    this.form = React.createRef()
+    this.submit = React.createRef()
+    this.password = React.createRef()
+  }
+
   @autobind
   async onSuccess(session) {
     await setSession(session)
@@ -30,25 +37,25 @@ export default class Login extends React.Component {
     if (!this.props.loading && this.props.userId) return <LoggedIn />
     return (
       <div>
-        <AutoForm mutation="loginWithPassword" ref="form" onSuccess={this.onSuccess}>
+        <AutoForm mutation="loginWithPassword" ref={this.form} onSuccess={this.onSuccess}>
           <div className="label">Email</div>
           <Field
             fieldName="email"
             type={Text}
             fieldType="email"
             placeholder="Email"
-            onEnter={() => this.refs.password.focus()}
+            onEnter={() => this.password.focus()}
           />
           <div className="label">
             <Translate tr="auth.password" />
           </div>
           <Field
-            ref="password"
+            ref={this.password}
             fieldName="password"
             type={Text}
             fieldType="password"
             placeholder={translate('auth.password')}
-            onEnter={() => this.refs.submit.click()}
+            onEnter={() => this.submit.click()}
           />
           <div className="description">
             <Link to="/forgot">
@@ -61,8 +68,8 @@ export default class Login extends React.Component {
           <Translate tr="auth.createAnAccount" />
         </Button>
         <Button
-          ref="submit"
-          onClick={() => this.refs.form.submit()}
+          ref={this.submit}
+          onClick={() => this.form.submit()}
           primary
           loading={this.props.loading}>
           <Translate tr="auth.login" />

web/src/App/Pages/Auth/Register/index.js

@@ -20,6 +20,15 @@ export default class Register extends React.Component {
     userId: PropTypes.string
   }
 
+  constructor(props) {
+    super(props)
+    this.form = React.createRef()
+    this.submit = React.createRef()
+    this.lastName = React.createRef()
+    this.email = React.createRef()
+    this.password = React.createRef()
+  }
+
   @autobind
   async onSuccess(session) {
     await setSession(session)
@@ -30,7 +39,7 @@ export default class Register extends React.Component {
     if (this.props.userId) return <LoggedIn />
     return (
       <div>
-        <AutoForm mutation="createUser" ref="form" onSuccess={this.onSuccess}>
+        <AutoForm mutation="createUser" ref={this.form} onSuccess={this.onSuccess}>
           <Field fieldName="profile" type={ObjectField} style={null}>
             <div className="row">
               <div className="col-xs-12 col-sm-6">
@@ -41,46 +50,46 @@ export default class Register extends React.Component {
                   fieldName="firstName"
                   type={Text}
                   placeholder={translate('auth.name')}
-                  onEnter={() => this.refs.lastName.focus()}
+                  onEnter={() => this.lastName.focus()}
                 />
               </div>
               <div className="col-xs-12 col-sm-6">
                 <div className="label">
                   <Translate tr="auth.lastName" />
                 </div>
                 <Field
-                  ref="lastName"
+                  ref={this.lastName}
                   fieldName="lastName"
                   type={Text}
                   placeholder={translate('auth.lastName')}
-                  onEnter={() => this.refs.email.focus()}
+                  onEnter={() => this.email.focus()}
                 />
               </div>
             </div>
           </Field>
           <div className="label">Email</div>
           <Field
-            ref="email"
+            ref={this.email}
             fieldName="email"
             type={Text}
             fieldType="email"
             placeholder="Email"
-            onEnter={() => this.refs.password.focus()}
+            onEnter={() => this.password.focus()}
           />
           <div className="label">
             <Translate tr="auth.password" />
           </div>
           <Field
-            ref="password"
+            ref={this.password}
             fieldName="password"
             type={Text}
             fieldType="password"
             placeholder={translate('auth.password')}
-            onEnter={() => this.refs.submit.click()}
+            onEnter={() => this.submit.click()}
           />
         </AutoForm>
         <br />
-        <Button ref="submit" onClick={() => this.refs.form.submit()} primary>
+        <Button ref={this.submit} onClick={() => this.form.submit()} primary>
           <Translate tr="auth.createAccount" />
         </Button>
         <br />