updated a functionality profile

real_estate/client/src/App.jsx

@@ -3,8 +3,9 @@ import Home from './pages/Home'
 import Login from './pages/Login'
 import SignUp from './pages/SignUp'
 import Contact from './pages/Contact'
-import { Profile } from './pages/Profile'
+import {Profile} from './pages/Profile'
 import Navbar from './components/Navbar'
+import PrivateRoute from './components/PrivateRoute'
 
 
 const App = () => {
@@ -13,7 +14,9 @@ const App = () => {
     <Navbar/>
       <Routes>
         <Route path='/' element={<Home/>}/>
+        <Route element={<PrivateRoute/>}>
           <Route path='/profile' element={<Profile/>}/>
+        </Route>
         <Route path='/login' element={<Login/>}/>
         <Route path='/signup' element={<SignUp/>}/>
         <Route path='/contact' element={<Contact/>}/>

real_estate/client/src/components/Navbar.jsx

@@ -1,9 +1,10 @@
 //import { IoIosSearch } from "react-icons/io";
 import { IoIosLock } from "react-icons/io";
 import {Link} from 'react-router-dom';
-//import {useSelector} from 'react-redux'
+import {useSelector} from 'react-redux'
 
 const Navbar = () => {
+    const {currentUser} = useSelector((state) => state.user)
 
   return (
     <header className="bg-blue-950">
@@ -18,12 +19,19 @@ const Navbar = () => {
                 <input  type="text" placeholder="Search your dream property" className="bg-transparent px-4 py-2 focus:outline-none text-sm w-60 sm:w-64"/>
                 <IoIosSearch className="text-slate-600 text-lg"/>
             </form>*/}
-            <ul className="flex gap-4 text-white tracking-wide text-center px-6 uppercase text-sm sm:px-10">
+            <ul className="flex gap-4 sm:px-10">
-                <Link to="/"><li className="hidden md:inline">Home</li></Link>
+                <Link to="/"><li className="text-white tracking-wide text-center uppercase text-sm hidden md:inline">Home</li></Link>
-                <Link to="/"><li className="hidden md:inline">Buying</li></Link>
+                <Link to="/"><li className="text-white tracking-wide text-center uppercase text-sm hidden md:inline">Buying</li></Link>
-                <Link to="/"><li className="hidden md:inline">Selling</li></Link>
+                <Link to="/"><li className="text-white tracking-wide text-center uppercase text-sm hidden md:inline">Selling</li></Link>
-                <Link to="/contact"><li className="hidden md:inline">Contact</li></Link>
+                <Link to="/contact"><li className="text-white tracking-wide text-center uppercase text-sm hidden md:inline">Contact</li></Link>
-                <Link to="/login" className="flex items-center gap-1"><li>Login</li><IoIosLock className="hidden md:inline"/></Link>
+                <Link to="/profile" className="flex items-center gap-1">
+                {currentUser ? (
+                    <img className="rounded-full h-7 w-7 object-cover bg-blue-100" src={currentUser.avatar} alt="" />
+                ): (
+                    <li className="text-white tracking-wide text-center uppercase text-sm">Login <IoIosLock className="hidden md:inline"/></li>
+                )}
+                </Link>
+                   
             </ul>
         </div>
         

real_estate/client/src/firebase.js

@@ -15,3 +15,13 @@ const firebaseConfig = {
 
 // Initialize Firebase
 export const app = initializeApp(firebaseConfig);
+
+
+
+
+
+//firebase storage ==> change the rule to 
+//allow read;
+//allow write: if 
+//request.resource.size < 2 * 1024 *1024 &&
+//request.resource.contentType.matches('image/.*')

real_estate/client/src/pages/Profile.jsx

@@ -1,7 +1,68 @@
-
+import {useSelector} from'react-redux'
+import { useEffect, useRef, useState } from 'react'
+import {getDownloadURL, getStorage, ref, uploadBytesResumable} from 'firebase/storage'
+import { app } from '../firebase';
 
 export const Profile = () => {
+  const fileRef = useRef(null);
+  const {currentUser} = useSelector((state) => state.user);
+  const [file, setFile] = useState(undefined);
+  const [filePercentage, setFilePercentage] = useState(0);
+  const [fileUploadError, setFileUploadError] = useState(false)
+  const [formData, setFormData] = useState({})
+
+
+
+  useEffect (() => {
+    if(file){
+      handleFileUpload(file);
+    }
+  }, [file]);
+
+  const handleFileUpload = (file) =>{
+    const storage = getStorage(app);
+    const fileName = new Date().getTime()+ file.name;
+    const storageRef = ref(storage, fileName);
+    const uploadTask = uploadBytesResumable(storageRef, file);
+
+    uploadTask.on('state_changed', 
+      (snapshot) =>{
+        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        setFilePercentage(Math.round(progress));
+      },
+    
+    (error) => {
+      setFileUploadError(true);
+    },
+    () => {
+      getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => setFormData({...formData, avatar: downloadURL}));
+    }
+    )
+  };
+
+
   return (
-    <div>Profile</div>
+    <div className='max-w-lg p-3 mx-auto'>
+      <h1 className="text-2xl uppercase text-center text-blue-900 font-serif my-10 tracking-wide">Profile</h1>
+      <form className='flex flex-col gap-4'> 
+      <input onChange={(e) => setFile(e.target.files[0])} type="file" ref={fileRef} hidden accept='image/*'/>
+        <img onClick={() => fileRef.current.click()} src={formData.avatar || currentUser.avatar} alt="" className='rounded-full h-24 w-24 object-cover self-center mt-2 cursor-pointer bg-blue-100'/>
+        <p className='text-sm self-center'>
+          {
+            fileUploadError ? (<span className='text-red-700'>Error image upload (image must be less than 2 mb) </span>) :
+            filePercentage > 0 && filePercentage < 100 ? (<span className='text-blue-900'>{`Uploading ${filePercentage}%`}</span>) :
+            filePercentage === 100 ? (<span className='text-green-900'>Image successfully uploaded</span>) : ("")
+          }
+        </p>
+        <input type="text" placeholder='Username' id='username' className='border p-2 rounded-md text-sm'/>
+        <input type="email" placeholder='Email' id='email' className='border p-2 rounded-md text-sm'/>
+        <input type="password" placeholder='Password' id='password' className='border p-2 rounded-md text-sm'/>
+        <button className='bg-blue-950 text-white text-sm p-2 rounded-md uppercase hover:opacity-90 disabled:opacity-80'>Update</button>
+      </form>
+      <div className='flex justify-between mt-4'>
+        <span className='text-red-700 cursor-pointer'>Delete Account</span>
+        <span className='text-red-700 cursor-pointer'>Log Out</span>
+      </div>
+    </div>
   )
 }