From 87b3b81470dee08f357e32642720c0a7f5ed1c8e Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Tue, 1 Feb 2022 17:17:06 -0800
Subject: [PATCH] adding and removing from list of selected

---
 .../CreateConversation.tsx.tsx                | 30 ++++++++++++++++---
 .../UserDetails/SimpleUserDetailsRow.tsx      |  2 +-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx b/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx
index 00f82e0..24d3d7f 100644
--- a/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx
+++ b/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx
@@ -81,8 +81,22 @@ export default function CreateConversation() {
     };
   }, []);
 
-  const selectUser = (user) => {
-    setSelectedUsers((prevUsers) => [user, ...prevUsers]);
+  const selectUser = (addUser: User) => {
+    if (selectedUsers.some((currUser) => currUser.id == addUser.id)) {
+      toast("Already added member!");
+      return;
+    }
+    setSelectedUsers((prevUsers) => [addUser, ...prevUsers]);
+  };
+
+  const removeUser = (removeUser: User) => {
+    setSelectedUsers((prevUsers) =>
+      prevUsers.filter((pUser) => pUser.id != removeUser.id)
+    );
+  };
+
+  const clearSelected = () => {
+    setSelectedUsers([] as User[]);
   };
 
   return (
@@ -160,7 +174,12 @@ export default function CreateConversation() {
               Selected
             </span>
 
-            <button className="ml-auto text-slate-300 text-xs">clear</button>
+            <button
+              onClick={clearSelected}
+              className="ml-auto text-slate-300 text-xs"
+            >
+              clear
+            </button>
           </span>
 
           {/* list of selected people who are nirvana users */}
@@ -170,7 +189,10 @@ export default function CreateConversation() {
                 key={selectUser.id}
                 user={selectUser}
                 actionButton={
-                  <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
+                  <button
+                    onClick={() => removeUser(selectUser)}
+                    className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto"
+                  >
                     <FaRegTimesCircle className="ml-auto text-lg" />
                   </button>
                 }
diff --git a/packages/web/components/UserDetails/SimpleUserDetailsRow.tsx b/packages/web/components/UserDetails/SimpleUserDetailsRow.tsx
index ebf6e8e..78ceb94 100644
--- a/packages/web/components/UserDetails/SimpleUserDetailsRow.tsx
+++ b/packages/web/components/UserDetails/SimpleUserDetailsRow.tsx
@@ -7,7 +7,7 @@ export default function SelectedUserRow(props: {
   actionButton: ReactElement;
 }) {
   return (
-    <span className="flex flex-row items-center py-1 border-t">
+    <span className="flex flex-row items-center border-t hover:bg-slate-50 p-5">
       <UserAvatar
         userFirstName={props.user.firstName}
         avatarUrl={props.user.avatarUrl}