✨ add edit user data route

heytulsiprasad · Sep 21, 2020 · 2616f5b · 2616f5b
1 parent c85651d
commit 2616f5b
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 123 deletions.
diff --git a/src/components/InputBox.jsx b/src/components/InputBox.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 
 const InputContainer = styled.div`
-  /* border: 1px solid ${(props) => (props.error ? "#bdbdbd" : "red")}; */
   border-radius: 8px;
   padding: 10px;
   margin-top: 10px;

diff --git a/src/components/Profile/EditInfo.jsx b/src/components/Profile/EditInfo.jsx
@@ -1,8 +1,12 @@
 import React from "react";
 import styled from "styled-components";
-import Button from "./Button";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
 
+import Button from "./Button";
 import { InputFieldImage, InputField } from "./FormElements";
+import Loading from "../Loading";
+import { editUserProfile } from "../../redux/actions/authActions";
 
 const Container = styled.div`
   grid-row: 3 / 4;
@@ -47,11 +51,27 @@ class EditInfo extends React.Component {
         bio: "",
         phone: "",
         email: "",
-        password: "",
       },
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.isLoading !== this.props.isLoading) {
+      const { name, email, phone, bio } = prevProps.user;
+
+      this.setState((state) => ({
+        ...state,
+        profile: {
+          ...state.profile,
+          name,
+          email,
+          phone,
+          bio,
+        },
+      }));
+    }
+  }
+
   inputChangeHandler = (e) => {
     const { name, value } = e.target;
 
@@ -66,62 +86,84 @@ class EditInfo extends React.Component {
 
   submitHandler = (e) => {
     e.preventDefault();
+
+    const userdata = this.state.profile;
+
+    this.props.editUserProfile(userdata, this.props.history);
   };
 
   render() {
+    const { name, email, phone, bio } = this.state.profile;
+    const error = this.props.errors;
+
     return (
       <Container>
         <div className="title">
           <h1>Change Info</h1>
           <h2>Changes will be reflected to every services</h2>
         </div>
-        <FormContainer onSubmit={this.submitHandler}>
-          <InputFieldImage title="Change Photo" />
-          <InputField
-            title="Name"
-            name="name"
-            type="text"
-            placeholder="Enter your name..."
-            onChange={this.inputChangeHandler}
-          />
-          <InputField
-            title="Bio"
-            name="bio"
-            type="text"
-            placeholder="Enter your bio..."
-            onChange={this.inputChangeHandler}
-          />
-          <InputField
-            title="Phone"
-            name="phone"
-            type="tel"
-            pattern="((\+|00)?[0-9]{2}|0)[1-9]([0-9]){8}"
-            placeholder="Enter your phone..."
-            onChange={this.inputChangeHandler}
-          />
-          <InputField
-            title="Email"
-            name="email"
-            type="email"
-            placeholder="Enter your email..."
-            onChange={this.inputChangeHandler}
-            required
-          />
-          <InputField
-            title="Password"
-            name="password"
-            type="password"
-            placeholder="Enter your new password..."
-            onChange={this.inputChangeHandler}
-            required
-          />
-          <div style={{ marginTop: "23px" }}>
-            <Button variant="secondary">Save</Button>
-          </div>
-        </FormContainer>
+        {this.props.isLoading ? (
+          <Loading />
+        ) : (
+          <>
+            <FormContainer onSubmit={this.submitHandler}>
+              <InputFieldImage title="Change Photo" />
+              <InputField
+                title="Name"
+                name="name"
+                type="text"
+                value={name}
+                error={error.name}
+                placeholder="Enter your name..."
+                onChange={this.inputChangeHandler}
+              />
+              <InputField
+                title="Bio"
+                name="bio"
+                type="text"
+                value={bio}
+                placeholder="Enter your bio..."
+                error={error.bio}
+                onChange={this.inputChangeHandler}
+              />
+              <InputField
+                title="Phone"
+                name="phone"
+                type="tel"
+                pattern="((\+|00)?[0-9]{2}|0)[1-9]([0-9]){8}"
+                value={phone}
+                error={error.phone}
+                placeholder="Enter your phone..."
+                onChange={this.inputChangeHandler}
+              />
+              <InputField
+                title="Email"
+                name="email"
+                type="email"
+                placeholder="Enter your email..."
+                value={email}
+                error={error.error}
+                onChange={this.inputChangeHandler}
+                required
+              />
+              <div style={{ marginTop: "23px" }}>
+                <Button variant="secondary" clickHandler={this.submitHandler}>
+                  Save
+                </Button>
+              </div>
+            </FormContainer>
+          </>
+        )}
       </Container>
     );
   }
 }
 
-export default EditInfo;
+const mapStateToProps = (state) => ({
+  user: state.auth.user,
+  errors: state.errors,
+});
+
+export default connect(mapStateToProps, { editUserProfile })(
+  withRouter(EditInfo)
+);
diff --git a/src/components/Profile/FormElements.jsx b/src/components/Profile/FormElements.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import Person from "./../../assets/person.jpg";
+import Person from "../../assets/person.jpg";
 
 const FieldContainer = styled.div`
   padding-top: 1rem;
@@ -15,8 +15,9 @@ const FieldTitle = styled.h2`
 `;
 
 const FieldInput = styled.input`
+  border: 1px solid ${(props) => (props.error ? "red" : "#828282")};
   min-width: 60%;
-  border: 1px solid #828282;
+  /* border: 1px solid #828282; */
   border-radius: 12px;
   padding: 15px 20px;
   outline: none;
@@ -73,36 +74,31 @@ const ImageFieldContainer = styled.div`
   }
 `;
 
-export const InputField = ({ title, children, ...rest }) => {
-  return (
-    <FieldContainer>
-      {children || (
-        <FieldLabel>
-          <FieldTitle>{title}</FieldTitle>
-          <FieldInput {...rest} />
-        </FieldLabel>
-      )}
-    </FieldContainer>
-  );
-};
+const Error = styled.p`
+  font-size: 11px;
+  margin: 2px 10px;
+  color: red;
+`;
+
+export const InputField = ({ title, children, error, ...rest }) => (
+  <FieldContainer>
+    {children || (
+      <FieldLabel>
+        <FieldTitle>{title}</FieldTitle>
+        <FieldInput error={error} {...rest} />
+        {error && <Error>{error}</Error>}
+      </FieldLabel>
+    )}
+  </FieldContainer>
+);
 
-export const InputFieldImage = ({ title }) => {
-  return (
-    <InputField>
-      <ImageFieldContainer>
-        <img
-          className="upload-image"
-          src={Person}
-          alt="Person staring at wall"
-        />
-        <span className="material-icons input-icon">camera_alt</span>
-        <input
-          id="upload-photo"
-          type="file"
-          accept="image/png, image/jpeg"
-        ></input>
-        <label htmlFor="upload-photo">{title}</label>
-      </ImageFieldContainer>
-    </InputField>
-  );
-};
+export const InputFieldImage = ({ title }) => (
+  <InputField>
+    <ImageFieldContainer>
+      <img className="upload-image" src={Person} alt="Person staring at wall" />
+      <span className="material-icons input-icon">camera_alt</span>
+      <input id="upload-photo" type="file" accept="image/png, image/jpeg" />
+      <label htmlFor="upload-photo">{title}</label>
+    </ImageFieldContainer>
+  </InputField>
+);
diff --git a/src/components/Profile/Infobox.jsx b/src/components/Profile/Infobox.jsx
@@ -71,7 +71,6 @@ const Picture = styled.img`
 
 const Infobox = (props) => {
   const { user, isLoading } = props;
-  console.log(user, isLoading);
 
   const { name, email, bio, phone } = user;
 

diff --git a/src/containers/EditProfile.jsx b/src/containers/EditProfile.jsx
@@ -1,20 +1,46 @@
 import React from "react";
+import { connect } from "react-redux";
 
-import Layout from "./../components/Profile/Layout";
-import Navbar from "./../components/Profile/Navbar";
-import Back from "./../components/Profile/Back";
-import EditInfo from "./../components/Profile/EditInfo";
+import Layout from "../components/Profile/Layout";
+import Navbar from "../components/Profile/Navbar";
+import Back from "../components/Profile/Back";
+import EditInfo from "../components/Profile/EditInfo";
+import { logoutUser, fetchUserProfile } from "../redux/actions/authActions";
 
 class EditProfile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+    };
+  }
+
+  componentDidMount() {
+    const { fetchUserProfile } = this.props;
+    fetchUserProfile(() => {
+      this.setState({ isLoading: false });
+    });
+  }
+
   render() {
+    const { logoutUser, user } = this.props;
+    const { isLoading } = this.state;
+
     return (
       <Layout>
-        <Navbar />
+        <Navbar username={user.name} onLogout={logoutUser} />
         <Back />
-        <EditInfo />
+        <EditInfo isLoading={isLoading} />
       </Layout>
     );
   }
 }
 
-export default EditProfile;
+const mapStateToProps = (state) => ({
+  user: state.auth.user,
+});
+
+export default connect(mapStateToProps, {
+  logoutUser,
+  fetchUserProfile,
+})(EditProfile);
diff --git a/src/containers/SignupContainer.jsx b/src/containers/SignupContainer.jsx
@@ -31,6 +31,7 @@ class SignupContainer extends React.Component {
   static getDerivedStateFromProps(props, state) {
     // Add errors to local state
     if (props.errors) return { ...state, errors: props.errors };
+    return null;
   }
 
   inputValue = (name, val) => {