Merge pull request #337 from labzero/develop

Merge to master

Author: JeffreyATW

package.json

@@ -161,7 +161,7 @@
     "sass-loader": "^13.2.0",
     "sequelize-mock": "^0.7.0",
     "sinon": "^15.1.0",
-    "stylelint": "^15.6.2",
+    "stylelint": "^15.10.1",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-order": "^6.0.3",
     "supertest": "^6.3.3",

src/routes/main/invitation/new/New.tsx

@@ -1,4 +1,4 @@
-import React, { Component, RefObject, createRef } from "react";
+import React, { ChangeEvent, Component, RefObject, createRef } from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
@@ -11,7 +11,11 @@ interface NewProps {
   email?: string;
 }
 
-class New extends Component<NewProps> {
+interface NewState {
+  email?: string;
+}
+
+class New extends Component<NewProps, NewState> {
   emailField: RefObject<HTMLInputElement>;
 
   static defaultProps = {
@@ -21,14 +25,21 @@ class New extends Component<NewProps> {
   constructor(props: NewProps) {
     super(props);
     this.emailField = createRef();
+
+    this.state = {
+      email: props.email,
+    };
   }
 
   componentDidMount() {
     this.emailField.current?.focus();
   }
 
+  handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    this.setState({ email: event.currentTarget.value });
+
   render() {
-    const { email } = this.props;
+    const { email } = this.state;
 
     return (
       <div className={s.root}>
@@ -44,11 +55,12 @@ class New extends Component<NewProps> {
                 <Form.Group className="mb-3" controlId="invitationNew-email">
                   <Form.Label>Email</Form.Label>
                   <Form.Control
-                    defaultValue={email}
                     ref={this.emailField}
                     name="email"
+                    onChange={this.handleChange}
                     required
                     type="email"
+                    value={email}
                   />
                 </Form.Group>
               </Col>

src/routes/main/password/new/New.tsx

@@ -1,4 +1,4 @@
-import React, { Component, RefObject, createRef } from "react";
+import React, { ChangeEvent, Component, RefObject, createRef } from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
@@ -11,7 +11,11 @@ interface NewProps {
   email?: string;
 }
 
-class New extends Component<NewProps> {
+interface NewState {
+  email?: string;
+}
+
+class New extends Component<NewProps, NewState> {
   emailField: RefObject<HTMLInputElement>;
 
   static defaultProps = {
@@ -21,14 +25,21 @@ class New extends Component<NewProps> {
   constructor(props: NewProps) {
     super(props);
     this.emailField = createRef();
+
+    this.state = {
+      email: props.email,
+    };
   }
 
   componentDidMount() {
     this.emailField.current?.focus();
   }
 
+  handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    this.setState({ email: event.currentTarget.value });
+
   render() {
-    const { email } = this.props;
+    const { email } = this.state;
 
     return (
       <div className={s.root}>
@@ -44,11 +55,12 @@ class New extends Component<NewProps> {
                 <Form.Group className="mb-3" controlId="passwordNew-email">
                   <Form.Label>Email</Form.Label>
                   <Form.Control
-                    defaultValue={email}
                     ref={this.emailField}
                     name="email"
+                    onChange={this.handleChange}
                     required
                     type="email"
+                    value={email}
                   />
                 </Form.Group>
               </Col>

src/routes/main/users/new/New.tsx

@@ -1,4 +1,4 @@
-import React, { Component, RefObject, createRef } from "react";
+import React, { ChangeEvent, Component, RefObject, createRef } from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
@@ -11,7 +11,11 @@ interface NewProps {
   email?: string;
 }
 
-class New extends Component<NewProps> {
+interface NewState {
+  email?: string;
+}
+
+class New extends Component<NewProps, NewState> {
   emailField: RefObject<HTMLInputElement>;
 
   static defaultProps = {
@@ -21,14 +25,21 @@ class New extends Component<NewProps> {
   constructor(props: NewProps) {
     super(props);
     this.emailField = createRef();
+
+    this.state = {
+      email: props.email,
+    };
   }
 
   componentDidMount() {
     this.emailField.current?.focus();
   }
 
+  handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    this.setState({ email: event.currentTarget.value });
+
   render() {
-    const { email } = this.props;
+    const { email } = this.state;
 
     return (
       <div className={s.root}>
@@ -44,11 +55,12 @@ class New extends Component<NewProps> {
                 <Form.Group className="mb-3" controlId="usersNew-email">
                   <Form.Label>Email</Form.Label>
                   <Form.Control
-                    defaultValue={email}
                     ref={this.emailField}
                     name="email"
+                    onChange={this.handleChange}
                     required
                     type="email"
+                    value={email}
                   />
                 </Form.Group>
               </Col>