✨ add profile picture from backend

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

Hide file tree

Showing 8 changed files with 27 additions and 34 deletions.
diff --git a/src/components/Profile/Dropdown.jsx b/src/components/Profile/Dropdown.jsx
@@ -63,7 +63,7 @@ const Overlay = styled.div`
   }
 `;
 
-const Dropdown = ({ onLogout, history, username }) => {
+const Dropdown = ({ onLogout, history, username, image }) => {
   const dropdownRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const toggleDropdown = () => setIsOpen(!isOpen);
@@ -93,11 +93,7 @@ const Dropdown = ({ onLogout, history, username }) => {
   return (
     <Container ref={dropdownRef} onClick={toggleDropdown}>
       <Topbar>
-        <img
-          className="person-profile"
-          src={Person}
-          alt="person-looking-straight"
-        />
+        <img className="person-profile" src={image} alt="Person Profile" />
         <h1 className="person-title">{username || "—"}</h1>
         <span className="material-icons drop-icon">
           {isOpen ? "arrow_drop_up" : "arrow_drop_down"}

diff --git a/src/components/Profile/EditInfo.jsx b/src/components/Profile/EditInfo.jsx
@@ -57,7 +57,7 @@ class EditInfo extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (prevProps.isLoading !== this.props.isLoading) {
-      const { name, email, phone, bio } = prevProps.user;
+      const { name, email, phone, bio, image } = prevProps.user;
 
       this.setState((state) => ({
         ...state,
@@ -66,6 +66,7 @@ class EditInfo extends React.Component {
           name,
           email,
           phone,
+          image,
           bio,
         },
       }));
@@ -93,7 +94,7 @@ class EditInfo extends React.Component {
   };
 
   render() {
-    const { name, email, phone, bio } = this.state.profile;
+    const { name, email, phone, bio, image } = this.state.profile;
     const error = this.props.errors;
 
     return (
@@ -107,12 +108,12 @@ class EditInfo extends React.Component {
         ) : (
           <>
             <FormContainer onSubmit={this.submitHandler}>
-              <InputFieldImage title="Change Photo" />
+              <InputFieldImage title="Change Photo" image={image} />
               <InputField
                 title="Name"
                 name="name"
                 type="text"
-                value={name}
+                value={name || ""}
                 error={error.name}
                 placeholder="Enter your name..."
                 onChange={this.inputChangeHandler}
@@ -121,7 +122,7 @@ class EditInfo extends React.Component {
                 title="Bio"
                 name="bio"
                 type="text"
-                value={bio}
+                value={bio || ""}
                 placeholder="Enter your bio..."
                 error={error.bio}
                 onChange={this.inputChangeHandler}
@@ -131,7 +132,7 @@ class EditInfo extends React.Component {
                 name="phone"
                 type="tel"
                 pattern="((\+|00)?[0-9]{2}|0)[1-9]([0-9]){8}"
-                value={phone}
+                value={phone || ""}
                 error={error.phone}
                 placeholder="Enter your phone..."
                 onChange={this.inputChangeHandler}
@@ -141,7 +142,7 @@ class EditInfo extends React.Component {
                 name="email"
                 type="email"
                 placeholder="Enter your email..."
-                value={email}
+                value={email || ""}
                 error={error.error}
                 onChange={this.inputChangeHandler}
                 required

diff --git a/src/components/Profile/FormElements.jsx b/src/components/Profile/FormElements.jsx
@@ -1,8 +1,6 @@
 import React from "react";
 import styled from "styled-components";
 
-import Person from "../../assets/person.jpg";
-
 const FieldContainer = styled.div`
   padding-top: 1rem;
 `;
@@ -82,23 +80,21 @@ const Error = styled.p`
 
 export const InputField = ({ title, children, error, ...rest }) => (
   <FieldContainer>
-    {children || (
-      <FieldLabel>
-        <FieldTitle>{title}</FieldTitle>
-        <FieldInput error={error} {...rest} />
-        {error && <Error>{error}</Error>}
-      </FieldLabel>
-    )}
+    <FieldLabel>
+      <FieldTitle>{title}</FieldTitle>
+      <FieldInput error={error} {...rest} />
+      {error && <Error>{error}</Error>}
+    </FieldLabel>
   </FieldContainer>
 );
 
-export const InputFieldImage = ({ title }) => (
-  <InputField>
+export const InputFieldImage = ({ title, image }) => (
+  <FieldContainer>
     <ImageFieldContainer>
-      <img className="upload-image" src={Person} alt="Person staring at wall" />
+      <img className="upload-image" src={image} alt="Person Profile" />
       <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>
+  </FieldContainer>
 );
diff --git a/src/components/Profile/Infobox.jsx b/src/components/Profile/Infobox.jsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 import { withRouter } from "react-router-dom";
 
 import Button from "./Button";
-import Person from "../../assets/person.jpg";
 import Loading from "../Loading";
 
 const Parent = styled.div`
@@ -72,7 +71,7 @@ const Picture = styled.img`
 const Infobox = (props) => {
   const { user, isLoading } = props;
 
-  const { name, email, bio, phone } = user;
+  const { name, email, bio, phone, image } = user;
 
   return (
     <Parent>
@@ -94,7 +93,7 @@ const Infobox = (props) => {
               </Button>
             </div>
           </Child>
-          <Infodata title="photo" value={Person} />
+          <Infodata title="photo" value={image} />
           <Infodata title="name" value={name || "—"} />
           <Infodata title="bio" value={bio || "—"} />
           <Infodata title="phone" value={phone || "—"} />

diff --git a/src/components/Profile/Navbar.jsx b/src/components/Profile/Navbar.jsx
@@ -34,13 +34,13 @@ const Logo = styled(Link)`
   }
 `;
 
-const Navbar = ({ onLogout, username }) => (
+const Navbar = ({ onLogout, username, image }) => (
   <NavbarContainer>
     <Logo to="/">
       <img src={Icon} alt="product-logo" />
       <h1>Talk.to</h1>
     </Logo>
-    <Dropdown username={username} onLogout={onLogout} />
+    <Dropdown username={username} image={image} onLogout={onLogout} />
   </NavbarContainer>
 );
 

diff --git a/src/containers/Dashboard.jsx b/src/containers/Dashboard.jsx
@@ -30,7 +30,7 @@ class Dashboard extends React.Component {
 
     return (
       <Layout>
-        <Navbar username={user.name} onLogout={logoutUser} />
+        <Navbar username={user.name} onLogout={logoutUser} image={user.image} />
         <Titlebar />
         <Infobox user={user} isLoading={isLoading} />
       </Layout>

diff --git a/src/containers/EditProfile.jsx b/src/containers/EditProfile.jsx
@@ -28,7 +28,7 @@ class EditProfile extends React.Component {
 
     return (
       <Layout>
-        <Navbar username={user.name} onLogout={logoutUser} />
+        <Navbar username={user.name} image={user.image} onLogout={logoutUser} />
         <Back />
         <EditInfo isLoading={isLoading} />
       </Layout>

diff --git a/src/redux/actions/authActions.js b/src/redux/actions/authActions.js
@@ -57,14 +57,15 @@ export const fetchUserProfile = (callback) => (dispatch) => {
     .get("/profile", { withCredentials: true })
     .then((res) => {
       const {
-        name, bio, phone, local, google, facebook, email,
+        name, bio, phone, local, google, facebook, email, image,
       } = res.data;
 
       const user = {
         name,
         email,
         bio,
         phone,
+        image,
         local: local[0],
         google: google[0],
         facebook: facebook[0],