edit profile

src/components/header/AppHeaderDropdown.js

@@ -129,6 +129,12 @@ const AppHeaderDropdown = () => {
           </CBadge> */}
         </CDropdownItem>
         {/* <CDropdownDivider /> */}
+        <Link to='/profile/edit'>
+          <CDropdownItem>
+            <CIcon icon={cilUser} className="me-2" />
+            Edit Profile
+          </CDropdownItem>
+        </Link>
         <Link to='/change_password'>
           <CDropdownItem>
             <CIcon icon={cilPencil} className="me-2" />

src/routes.js

@@ -54,6 +54,7 @@ import EditFaqs from './views/FAQs/EditFaqs'
 //  DashBoard
 const Change_Password = React.lazy(() => import('./views/pages/register/Change_password'))
 const EditProfile = React.lazy(() => import('./views/Profile/EditProfile'))
+import Profile from './views/Profile/Profile'
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
 
 
@@ -61,8 +62,8 @@ const routes = [
 
   { path: '/', exact: true, name: 'Home' },
   { path: '/change_password', name: 'Change Password', component: Change_Password },
-  { path: '/edit', name: 'Change Password', component: EditProfile },
+  { path: '/profile/edit', name: 'Edit Profile', component: EditProfile },
-  // { path: '/profile', name: 'Change Password', component: Profile },
+  // { path: '/profile', name: 'Profile', component: Profile },
 
   //Category route
   { path: '/addCategory', name: 'AddCategeory', component: AddCategeory },

src/views/Profile/EditProfile.js

@@ -6,60 +6,118 @@ import axios from 'axios'
 import { useHistory } from 'react-router-dom'
 import { isAutheticated } from 'src/auth'
 const EditProfile = () => {
-    const [cities, setCities] = useState([])
+
-    const { token } = isAutheticated()
+    const [image, setImage] = useState("");
+    const [loading, setLoading] = useState(false)
+    const [imagesPreview, setImagesPreview] = useState();
+    const token = isAutheticated()
+
     const [ownerDetails, setOwnerDetails] = useState({
-        cafeName: '',
+        name: '',
         email: '',
-        location: '',
+        phone: ''
-        country: 'India',
+
-        city: ''
     })
     const history = useHistory()
     const [processing, setProcessing] = useState(false)
     const countries = Country.getAllCountries()
     useEffect(() => {
-        const countryCode = countries.find(item => item.name === ownerDetails.country)
+
-        setCities(() => City.getCitiesOfCountry(countryCode?.isoCode))
         getData()
 
-    }, [ownerDetails.country])
+    }, [])
 
     const getData = async () => {
-        let res = await axios.get('/owner', {
+        let res = await axios.get(`/api/v1/user/details`, {
             headers: {
-                'Authorization': `Bearer ${token}`
+                Authorization: `Bearer ${token}`,
-            }
+            },
         })
-        if (res) {
+        if (res.data.success) {
+
             setOwnerDetails({ ...res.data.user })
+            if (res.data.user.avatar) {
+                setImagesPreview(res.data.user.avatar.url)
+            }
         }
+
+
+
     }
-    console.log(ownerDetails);
     const handleChange = (event) => {
         const { name, value } = event.target;
         setOwnerDetails({ ...ownerDetails, [name]: value });
     };
+    const handleImage = (e) => {
+        const files = e.target.files[0];
 
+        // console.log(files)
+        setImage(files);
+        // only for file preview------------------------------------
+        const Reader = new FileReader();
+        Reader.readAsDataURL(files);
 
-    async function handleSubmit() {
+        Reader.onload = () => {
-
+            if (Reader.readyState === 2) {
-        let res = await axios.put(`/owner`, ownerDetails, {
+                setImagesPreview(Reader.result);
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${token}`,
             }
-        })
+        };
-        setProcessing(true)
-        console.log(res.data);
 
-        if (res) {
-            // localStorage.setItem("auth", JSON.stringify({
 
-            //     token: res.data.token,
+        // -----------------------------------------------------------------------------
-            // }));
+    };
-            history.push('/profile')
+    async function handleSubmit() {
+        if (ownerDetails.name.trim() === '' || ownerDetails.email.trim() === '' || ownerDetails.phone === '') {
+            swal({
+                title: 'Warning',
+                text: 'Fill all mandatory fields',
+                icon: 'error',
+                button: 'Close',
+                dangerMode: true,
+            })
+            return
         }
+        const formData = new FormData()
+        formData.append('name', ownerDetails.name)
+        formData.append('email', ownerDetails.email)
+        formData.append('phone', ownerDetails.phone)
+        formData.append('avatar', image)
+        setLoading(true)
+        try {
+            const res = await axios
+                .put(`/api/v1//user/update/profile`, formData, {
+                    headers: {
+                        'Access-Control-Allow-Origin': '*',
+                        Authorization: `Bearer ${token}`,
+                        'Content-Type': 'multipart/formdata',
+                    },
+                })
+            if (res.data.success === true) {
+
+                setLoading(false)
+                swal({
+                    title: 'Edited',
+                    text: 'Profile Edited Successfully!',
+                    icon: 'success',
+                    button: 'Return',
+                })
+                history.goBack()
+
+            }
+        } catch (error) {
+            const message = error?.response?.data?.message || 'Something went wrong!'
+            setLoading(false)
+            swal({
+                title: 'Warning',
+                text: message,
+                icon: 'error',
+                button: 'Retry',
+                dangerMode: true,
+            })
+        }
+    }
+    const handleCancle = () => {
+        history.goBack()
     }
 
     return (
@@ -70,49 +128,46 @@ const EditProfile = () => {
                     <CCol md={8} className='mt-5'>
                         <CCardGroup>
                             <CCard className="p-4">
-
+                                <h2 >Edit Profile</h2>
                                 <CCardBody>
-                                    <h1 >Edit Profile</h1>
+
                                     <CForm className="row g-3">
                                         <CCol xs={12}>
-                                            <CFormLabel htmlFor="inputAddress">Cafe Name</CFormLabel>
+                                            <CFormLabel htmlFor="inputAddress">Name *</CFormLabel>
-                                            <CFormInput id="inputAddress" placeholder="" name='cafeName' value={ownerDetails.cafeName} onChange={handleChange} />
+                                            <CFormInput id="inputAddress" placeholder="" name='name' value={ownerDetails.name} onChange={handleChange} />
                                         </CCol>
 
                                         <CCol md={6}>
-                                            <CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
+                                            <CFormLabel htmlFor="inputEmail4">Email *</CFormLabel>
                                             <CFormInput type="email" id="inputEmail4" name='email' value={ownerDetails.email} onChange={handleChange} />
                                         </CCol>
-                                        {/* <CCol md={6}>
-                                            <CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
-                                            <CFormInput type="password" id="inputPassword4" name='password' value={ownerDetails.password} onChange={handleChange} />
-                                        </CCol> */}
-
-
-                                        <CCol md={12}>
-                                            <CFormLabel htmlFor="inputCity">Location</CFormLabel>
-                                            <CFormInput id="inputCity" name='location' value={ownerDetails.location} onChange={handleChange} />
-                                        </CCol>
                                         <CCol md={6}>
-                                            <CFormLabel htmlFor="inputState">Country</CFormLabel>
+                                            <CFormLabel htmlFor="inputPassword4">Phone *</CFormLabel>
-                                            <CFormSelect id="inputState" name='country' onChange={handleChange}>
+                                            <CFormInput type="number" id="inputPassword4" minlength="8" name='phone' value={ownerDetails.phone} onChange={handleChange} />
-                                                <option>Select a country</option>
-                                                {countries.map(item => <option value={item.name}>{item.name}</option>)}
-
-                                            </CFormSelect>
-                                        </CCol>
-                                        <CCol md={6}>
-                                            <CFormLabel htmlFor="inputState">City</CFormLabel>
-                                            <CFormSelect id="inputState" name='city' onChange={handleChange}>
-                                                <option>Select a city</option>
-                                                {cities.map(item => <option value={item.name}>{item.name}</option>)}
-
-                                            </CFormSelect>
                                         </CCol>
 
+
+
+                                        <CFormInput
+                                            type="file"
+                                            placeholder="image"
+                                            accept="image/*"
+                                            required
+                                            onChange={handleImage}
+
+
+                                        />
+                                        <div id="createProductFormImage" className="w-50 d-flex">
+
+                                            {imagesPreview && <img className=" w-50 p-1 " src={imagesPreview} alt="Product Preview" />}
+
+                                        </div>
                                         <CCol xs={12}>
-                                            <CButton onClick={handleSubmit} color='dark'>Submit</CButton>
+                                            <CButton onClick={handleSubmit} color='primary'>{loading ? 'Loading...' : 'Submit'}</CButton>
+                                            <CButton className='ml-2' onClick={handleCancle} color='warning'>Cancel</CButton>
+
                                         </CCol>
+
                                     </CForm>
                                 </CCardBody>
                             </CCard>

src/views/Profile/Profile.js

@@ -1,7 +1,13 @@
 import React, { useEffect } from 'react'
 import {
     CButton,
+    CCard,
+    CCardBody,
     CCol,
+    CForm,
+    CFormInput,
+    CFormLabel,
+    CFormSelect,
     CRow,
     CTable,
     CTableBody,
@@ -48,32 +54,65 @@ const Profile = () => {
                         className="float-right" onClick={() => history.push('/edit')}>Edit Profile</CButton>
                 </CCol>
             </CRow>
-            <CTable color="white" striped>
+            <CCard className="p-4">
-                <CTableHead>
+                <CCardBody>
-                    <CTableRow>
+                    {/* <h1 >Edit Profile</h1> */}
-                        <CTableHeaderCell scope="col">Cafe Name</CTableHeaderCell>
+                    <CForm className="row g-3">
-                        <CTableDataCell scope="col">{user.cafeName}</CTableDataCell>
+                        <CCol xs={12}>
-                    </CTableRow>
+                            <CFormLabel htmlFor="inputAddress">Cafe Name</CFormLabel>
-                </CTableHead>
+                            <CFormInput id="inputAddress" placeholder="" name='cafeName' value={"jsw"} />
-                <CTableBody>
+                        </CCol>
-                    <CTableRow>
-                        <CTableHeaderCell scope="col">Email</CTableHeaderCell>
-                        <CTableDataCell scope="col">{user.email}</CTableDataCell>
-                    </CTableRow>
 
-                    <CTableRow>
+                        <CCol md={6}>
-                        <CTableHeaderCell scope="row">Address</CTableHeaderCell>
+                            <CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
-                        <CTableDataCell>{user.location},{user.city},{user.country}</CTableDataCell>
+                            <CFormInput type="email" id="inputEmail4" name='email' value={"habhs"} />
-                    </CTableRow>
+                        </CCol>
+                        {/* <CCol md={6}>
+                                            <CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
+                                            <CFormInput type="password" id="inputPassword4" name='password' value={ownerDetails.password} onChange={handleChange} />
+                                        </CCol> */}
 
-                    <CTableRow>
-                        <CTableHeaderCell scope="row">Item_Name</CTableHeaderCell>
-                        <CTableDataCell><img src={user.qr_code} alt="" /></CTableDataCell>
-                    </CTableRow>
 
-                </CTableBody>
+                        <CCol md={12}>
-            </CTable>
+                            <CFormLabel htmlFor="inputCity">Location</CFormLabel>
-        </div>
+                            <CFormInput id="inputCity" name='location' value={"ajnsj"} />
+                        </CCol>
+                        <CCol md={12}>
+                            <CFormLabel htmlFor="inputCity">image</CFormLabel>
+                            <CFormInput
+                                type="file"
+                                placeholder="image"
+                                accept="image/*"
+                                required
+                            // onChange={handleImage}
+
+
+                            />
+                        </CCol>
+                        {/* <CCol md={6}>
+                            <CFormLabel htmlFor="inputState">Country</CFormLabel>
+                            <CFormSelect id="inputState" name='country' >
+                                <option>Select a country</option>
+                                {countries.map(item => <option value={item.name}>{item.name}</option>)}
+
+                            </CFormSelect>
+                        </CCol> */}
+                        {/* <CCol md={6}>
+                            <CFormLabel htmlFor="inputState">City</CFormLabel>
+                            <CFormSelect id="inputState" name='city' >
+                                <option>Select a city</option>
+                                {cities.map(item => <option value={item.name}>{item.name}</option>)}
+
+                            </CFormSelect>
+                        </CCol> */}
+
+                        {/* <CCol xs={12}>
+                            <CButton onClick={handleSubmit} color='dark'>Submit</CButton>
+                        </CCol> */}
+                    </CForm>
+                </CCardBody>
+            </CCard>
+        </div >
     )
 }