dashboard completed successfully

omen1650ti · Dec 4, 2022 · ed6c9fe · ed6c9fe
1 parent b71e838
commit ed6c9fe
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 43 deletions.
diff --git a/src/components/Editprofileform/Editprofileform.js b/src/components/Editprofileform/Editprofileform.js
@@ -1,47 +1,61 @@
-import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';
-import axiosInstance from '../../utils/axios'
+import React, { Component } from 'react'
+import { Form } from 'react-bootstrap';
+import axiosInstance from '../../utils/axios';
 import baseUrl from '../../utils/Urls';
-import {useState} from 'react'
-
-function Editprofileform() {
-
-  const[actualname,setActualname]=useState('')
-  const[phno,setPhno]=useState('')
-  const[userimg,setUserimg]=useState()
+import Button from 'react-bootstrap/Button';
 
-
+export class Editprofileform extends Component {
+
+  state = {
+    actual_name: '',
+    phno: '',
+    user_image: null,
+    user_foreign: localStorage.getItem('userid')
+  };
 
-    const handleSubmit=(e)=>{
+  handleChange = (e) => {
+    this.setState({
+      [e.target.id]: e.target.value
+    })
+  };
 
-     const uploaddata=new FormData()     
-    //  uploaddata.append('actual_name',actualname)
-     uploaddata.append('userimg',userimg)  
+  handleImageChange = (e) => {
+    this.setState({
+      user_image: e.target.files[0]
+    })
+  };
 
-        axiosInstance.post(`${baseUrl}/user-detail/`,{
-          actual_name:actualname,
-          phno:phno,
-          user_image:uploaddata.userimg,
-          user_foreign:localStorage.getItem('userid')
-        }).then((response)=>{
-            console.log(response)
+  handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(this.state);
+    let form_data = new FormData();
+    form_data.append('user_image', this.state.user_image, this.state.user_image.name);
+    form_data.append('actual_name', this.state.actual_name);
+    form_data.append('phno', this.state.phno);
+    form_data.append('user_foreign', this.state.user_foreign);
+    let url = `${baseUrl}/user-detail/`;
+    axiosInstance.post(url, form_data, {
+      headers: {
+        'content-type': 'multipart/form-data'
+      }
+    })
+        .then(res => {
+          console.log(res.data);
         })
-
-        e.preventDefault();
-
-}
-
-
-  return (
-    <Form onSubmit={handleSubmit}>
+        .catch(err => console.log(err))
+  };
+  render() {
+    return (
+      <Form onSubmit={this.handleSubmit}>
     <Form.Group>
        <h5>Name</h5>
         <Form.Control
             type="text"
             placeholder="Name *"
-            name="name"
-            value={actualname}
-           onChange = { (e) => setActualname(e.target.value)}
+            name="actual_name"
+            id="actual_name"
+            value={this.state.actual_name}
+            onChange = { this.handleChange }
 
         />
     </Form.Group><br/>
@@ -50,9 +64,10 @@ function Editprofileform() {
         <Form.Control
             type="file"
             placeholder="pic"
-            name="name"
+            name="image"
+            id="user_image"
             accept='.jpg, .jpeg, .png'
-           onChange = { (e) => setUserimg(e.target.files[0])}
+            onChange = { this.handleImageChange }
 
         />
     </Form.Group><br/>
@@ -62,20 +77,21 @@ function Editprofileform() {
         <Form.Control
             type="text"
             placeholder="phone number"
-            name="name"
-            value={phno}
-           onChange = { (e) => setPhno(e.target.value)}
+            name="phno"
+            value={this.state.phno}
+            id="phno"
+            onChange = { this.handleChange }
 
         />
     </Form.Group><br/>
 
 
-    <Button onClick={handleSubmit} variant="success" type="submit" block>
+    <Button onClick={this.handleSubmit} variant="success" type="submit" block>
         Save Changes
     </Button>
 </Form>
-
-  );
+    )
+  }
 }
 
-export default Editprofileform;
+export default Editprofileform
diff --git a/src/pages/Dashboard/Dashboard.js b/src/pages/Dashboard/Dashboard.js
@@ -21,6 +21,7 @@ const Dashboard = () => {
   const[userimg,setUserimg]=useState()
   const[frame,setFrame]=useState('places')
   const [show, setShow] = useState(false);
+  const[userImage,setUserImage]=useState()
   const handleClose = () => setShow(false);
   const[userDetailId,setUserDetailId]=useState(0)
   const parachuteEffect={
@@ -48,6 +49,7 @@ const Dashboard = () => {
       response.data.forEach((item)=>{
         if(item.user_foreign===currUserid)
          { 
+          setUserImage(item.user_image)
          setUserDetailId(item.id)
           setActualname(item.actual_name)
           setPhno(item.phno)
@@ -64,7 +66,7 @@ const Dashboard = () => {
           {/* profile main starts here */}
         <div className="profile__main">
 
-        <img className='profile__pic' src="https://avatars.githubusercontent.com/u/43471295?v=4" alt="your_image" />
+        <img className='profile__pic' src={userImage} alt="your_image" />
         <div className="profile__details">
           <div className="each_detail_profile"><div className='profile_name'>Name: </div><span className='profile_name_content'>{actualname}</span> </div>
           <div className="each_detail_profile"><div className='profile_name'>Phone no: </div><p className='profile_name_content'>{phno}</p></div>