edit and delete your user listing

backend/lib/controllers/user-listings/controller.ts

@@ -32,8 +32,9 @@ router.post("/create", async (req, res) => {
 });
 
 router.put("/:userListingId", async (req, res) => {
+    const updatedUserListingId = req.params.userListingId;
     const updatedUserListing = req.body;
-    const userListing = await UserListingService().updateUserListing(updatedUserListing);
+    const userListing = await UserListingService().updateUserListing(updatedUserListingId, updatedUserListing);
     if (userListing) {
         res.status(200).json(userListing);
     } else {

backend/lib/services/UserListing/interface.ts

@@ -12,6 +12,6 @@ export interface IUserListingService {
     getUserListingById(userListingId: string): Promise<UserListingDisplayData | null>
     getAllUserListings(): Promise<UserListingDisplayData[]>
     createUserListing(newUserListing: Omit<UserListing, "id">): Promise<UserListing>
-    updateUserListing(updatedUserListing: UserListing): Promise<UserListing>
+    updateUserListing(updatedUserListingId: string, updatedUserListing: Omit<UserListing, "id" | "createdAt" | "updatedAt">): Promise<UserListing>
     deleteUserListing(userListingId: string): Promise<UserListing>
 }

backend/lib/services/UserListing/service.ts

@@ -51,14 +51,13 @@ export const UserListingService = (): IUserListingService => ({
         })
         return userListing
     },
-    updateUserListing: async (updatedUserListing) => {
-        const { id, ...updateData } = updatedUserListing
+    updateUserListing: async (updatedUserListingId, updatedUserListing) => {
 
         const userListing = await prisma.userListing.update({
             where: {
-                id
+                id: updatedUserListingId
             },
-            data: updateData
+            data: updatedUserListing
         })
         return userListing
 

frontend/src/components/compound/Banner/ProfileBanner.tsx

@@ -1,19 +1,33 @@
 import React, { useState } from "react";
 import UserListingModal from "../Modal/UserListingModal"; // Adjust the import path
+import { UserListingDisplayData } from "../../../lib/services/User-Listing/types";
+import DeleteListingModal from "../Modal/DeleteListingModal";
 
 interface ProfileBannerProps {
-  onListingAdded: () => void;
+  handleListingsChanged: () => void;
+  userListings: Array<UserListingDisplayData>;
 }
 
-const ProfileBanner = ({ onListingAdded }: ProfileBannerProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false); // State to manage modal visibility
+const ProfileBanner = ({ handleListingsChanged, userListings }: ProfileBannerProps) => {
+  const [isAddEditModalOpen, setAddEditModalOpen] = useState(false);
+  const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
 
-  const openModal = () => {
-    setIsModalOpen(true); // Function to open the modal
+  const listingExists: boolean = userListings.length > 0;
+
+  const openAddEditModal = () => {
+    setAddEditModalOpen(true); // Function to open the modal
+  };
+
+  const closeAddEditModal = () => {
+    setAddEditModalOpen(false); // Function to close the modal
+  };
+
+  const handleDeleteClick = () => {
+    setDeleteModalOpen(true);
   };
 
-  const closeModal = () => {
-    setIsModalOpen(false); // Function to close the modal
+  const closeDeleteModal = () => {
+    setDeleteModalOpen(false);
   };
 
   return (
@@ -24,16 +38,37 @@ const ProfileBanner = ({ onListingAdded }: ProfileBannerProps) => {
       <div className="text-sm lg:text-base ">
         Create a profile to be discovered by communities and organizers
       </div>
-      <button
-        className="bg-[#5279E0] text-xs text-white p-3 rounded-3xl w-fit px-4"
-        onClick={openModal}
-      >
-        Add me
-      </button>
-      {isModalOpen && (
+
+      <div className="flex flex-row gap-2">
+
+        <button
+          className="bg-[#5279E0] text-xs text-white p-3 rounded-3xl w-fit px-4"
+          onClick={openAddEditModal}
+        >
+          {listingExists ? "Edit profile" : "Add profile"}
+        </button>
+        {listingExists && (
+          <button
+            className="bg-red-400 text-xs text-white p-3 rounded-3xl w-fit px-4"
+            onClick={handleDeleteClick}
+          >
+            Delete profile
+          </button>
+        )}
+      </div>
+      {isAddEditModalOpen && (
         <UserListingModal
-          onClose={closeModal}
-          onSubmitSuccess={onListingAdded}
+          onClose={closeAddEditModal}
+          onSubmitSuccess={handleListingsChanged}
+          listingExists={listingExists}
+        />
+      )}
+      {isDeleteModalOpen && (
+        <DeleteListingModal
+          onClose={closeDeleteModal}
+          onSubmitSuccess={handleListingsChanged}
+          listingCategory="UserListing"
+          listingId={userListings[0].id}
         />
       )}
     </div>

frontend/src/components/compound/Modal/DeleteListingModal.tsx

@@ -21,11 +21,11 @@ const DeleteListingModal: React.FC<DeleteListingModalProps> = ({
     const userListingService = UserListingService();
     const spaceListingService = SpaceListingService();
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
         if (listingCategory === "SpaceListing") {
-            spaceListingService.delete(listingId);
+            await spaceListingService.delete(listingId);
         } else if (listingCategory === "UserListing") {
-            userListingService.delete(listingId);
+            await userListingService.delete(listingId);
         }
         onSubmitSuccess();
         onClose();

frontend/src/components/compound/Modal/UserListingModal.tsx

@@ -8,13 +8,17 @@ import { UserService } from "../../../lib/services/Users/service";
 interface UserListingModalProps {
     onClose: () => void;
     onSubmitSuccess: () => void;
+    listingExists: boolean;
 }
 
 const UserListingModal: React.FC<UserListingModalProps> = ({
     onClose,
     onSubmitSuccess,
+    listingExists,
 }) => {
 
+    const userService = UserService();
+    const [editListingId, setEditListingId] = useState<string | null>(null);
     const [formData, setFormData] = useState<UserListingInput>({
         user_id: "",
         leaselength: "",
@@ -26,18 +30,34 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
         email: "",
     });
 
-    // const userService = useUserService()
-    const userService = UserService();
 
     useEffect(() => {
-        const fetchUser = async () => {
+        const fetchUserAndListing = async () => {
             const userResponse = await userService.getCurrentUser();
             const user = userResponse.data;
             if (!user) return;
-            setFormData((prevData) => ({ ...prevData, user_id: user.id || "" }));
+
+            const userListingService = UserListingService();
+            const listingsResponse = await userListingService.getAll();
+            const editListingId = listingsResponse.data.find(listing => listing.user_id === user.id);
+            if (editListingId && listingExists) {
+                setFormData({
+                    user_id: editListingId.user_id,
+                    leaselength: editListingId.leaselength,
+                    moveInTime: editListingId.moveInTime,
+                    housematesCount: editListingId.housematesCount,
+                    description: editListingId.description,
+                    website: editListingId.website || "",
+                    phone: editListingId.phone || "",
+                    email: editListingId.email || "",
+                });
+                setEditListingId(editListingId.id);
+            } else {
+                setFormData(prevData => ({ ...prevData, user_id: user.id || "" }));
+            }
             console.log(user, "here");
         };
-        fetchUser();
+        fetchUserAndListing();
     }, []);
 
     const handleChange = (
@@ -51,8 +71,14 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
         e.preventDefault();
         const userListingService = UserListingService();
         try {
-            await userListingService.create(formData);
-            console.log("Submitted:", { formData });
+            if (editListingId && listingExists) {
+                await userListingService.update(editListingId, formData);
+                console.log("Updated:", { formData });
+            }
+            else {
+                await userListingService.create(formData);
+                console.log("Submitted:", { formData });
+            }
             onSubmitSuccess();
             onClose();
         } catch (error) {

frontend/src/components/pages/PeopleListingSection.tsx

@@ -4,9 +4,12 @@ import { UserListingDisplayData } from "../../lib/services/User-Listing/types";
 import UserListingService from "../../lib/services/User-Listing/service";
 import { LeaseLength, RoommateCount, MovingTimeline } from "./types";
 import ProfileBanner from "../compound/Banner/ProfileBanner";
+import { User } from "../../lib/services/Users/types";
+import { UserService } from "../../lib/services/Users/service";
 
 export default function PeopleListingSection() {
   const [userlistings, setuserListings] = useState<Array<UserListingDisplayData>>([]);
+
   const currentDate = new Date();
 
   console.log("people section");
@@ -24,9 +27,11 @@ export default function PeopleListingSection() {
     fetchListings();
   }, [fetchListings]);
 
-  const handleListingAdded = () => {
+  const handleListingsChanged = useCallback(() => {
+    console.log("listings bananaed");
     fetchListings();
-  };
+  }, [fetchListings]);
+
 
   const default_values: [string, string, string] = [
     "Any lease",
@@ -133,7 +138,7 @@ export default function PeopleListingSection() {
   };
   return (
     <>
-      <ProfileBanner onListingAdded={handleListingAdded} />
+      <ProfileBanner handleListingsChanged={handleListingsChanged} userListings={userlistings} />
       <div className="flex flex-row gap-2 grow">
         <div className="flex flex-col gap-2 grow">
           <label