completed user listings functionality

real_estate/client/src/pages/Profile.jsx

@@ -1,3 +1,5 @@
+import { FaRegTrashAlt } from "react-icons/fa";
+import { BiEdit } from "react-icons/bi";
 import {useSelector} from'react-redux'
 import { useEffect, useRef, useState } from 'react'
 import {getDownloadURL, getStorage, ref, uploadBytesResumable} from 'firebase/storage'
@@ -14,6 +16,8 @@ export const Profile = () => {
   const [fileUploadError, setFileUploadError] = useState(false)
   const [formData, setFormData] = useState({})
   const [updateSuccess, setUpdateSuccess] = useState(false);
+  const [userListings, setUserListings] = useState([]);
+  const [userListingsError, setUserListingsError] = useState(false);
   const dispatch = useDispatch();
 
 
@@ -101,7 +105,24 @@ export const Profile = () => {
     } catch (error) {
       dispatch(deleteUserFailure(error.message))
     }
+  };
+  //show user listing functionality
+  const handleUserListings = async () => {
+    try {
+      setUserListingsError(false);
+      const res = await fetch(`/server/user/listings/${currentUser._id}`)
+      const data = await res.json();
+      if(data.success === false){
+        setUserListingsError(true);
+        return;
       }
+      setUserListings(data)
+
+    } catch (error) {
+      setUserListingsError(true);
+    }
+  };
+
 
 
   return (
@@ -129,6 +150,27 @@ export const Profile = () => {
       </div>
       <p className='text-red-700 mt-4'>{error ? error : ''}</p>
       <p className='text-green-900 mt-4'>{updateSuccess ? 'User profile is updated successfully' : ''}</p>
+          {/*===== Show user listing =====*/}
+      <button onClick={handleUserListings} className='text-blue-900 w-full'>View listings</button>
+      <p className='text-red-700 text-sm'>{userListingsError ? 'Error showing listing' : ''}</p>
+      {userListings && userListings.length > 0 && 
+      <div className="flex flex-col gap-4"> 
+      <h1 className="text-center mt-12 text-md uppercase text-blue-800 font-semibold">Your listings</h1>
+      {userListings.map((listing) => (
+        <div key={listing._id} className="flex justify-between items-center border rounded-md p-2 gap-2">
+          <Link to={`/listing/${listing._id}`}>
+            <img src={listing.imageUrls[0]} alt="" className='h-14 w-14 object-contain'/>
+          </Link>
+          <Link to={`/listing/${listing._id}`} className='text-blue-900 font-semibold  hover:underline truncate flex-1' >
+            <p>{listing.name}</p>
+          </Link>
+          <div className="flex gap-4">
+            <button className='text-red-700'><FaRegTrashAlt/></button>
+            <button className='text-green-700'><BiEdit/></button>
           </div>
-  )
+        </div>
+      ))}
+      </div>}
+    </div>
+  );
 }

real_estate/server/controllers/user.controller.js

@@ -1,6 +1,7 @@
 import bcryptjs from 'bcryptjs';
 import User from '../models/user.model.js';
 import { errorHandler } from '../utils/error.js';
+import Listing from '../models/listing.model.js';
 
 export const test = (req, res) => {
     res.json({
@@ -39,4 +40,17 @@ export const deleteUser = async (req, res, next) => {
     } catch (error) {
         next(error)
     }
+};
+
+export const getUserListing = async (req, res, next) => {
+    if (req.user.id === req.params.id) {
+    try{
+        const listings = await Listing.find({ userRef: req.params.id });
+        res.status(200).json(listings);
+    }catch (error) {
+        next(error);
     }
+    }else {
+        return next(errorHandler(401, 'You can only view your own listings!'));
+    }
+};

real_estate/server/routes/user.route.js

@@ -1,5 +1,5 @@
 import express from 'express'
-import { deleteUser, test, updateUser } from '../controllers/user.controller.js';
+import { deleteUser, test, updateUser, getUserListing } from '../controllers/user.controller.js';
 import { verifyToken } from '../utils/verifyUser.js';
 
 const router = express.Router();
@@ -7,5 +7,6 @@ const router = express.Router();
 router.get('/test', test)
 router.post('/update/:id', verifyToken, updateUser)
 router.delete('/delete/:id', verifyToken, deleteUser)
+router.get('/listings/:id', verifyToken, getUserListing)
 
 export default router