Implement collaboration features with user access management and email invitation functionality

app/src/components/templates/CollaborationPopup.tsx

@@ -7,15 +7,27 @@ import { access } from "fs";
 import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
 import { useActiveUsers } from "../../store/builder/store";
 import { getUserData } from "../../functions/getUserData";
+import { getProjectSharedList } from "../../services/factoryBuilder/collab/getProjectSharedList";
+import { useParams } from "react-router-dom";
+import { projection } from "@turf/turf";
+import { shareAccess } from "../../services/factoryBuilder/collab/shareAccess";
+import { getAvatarColor } from "../../modules/collaboration/functions/getAvatarColor";
 
 interface UserListTemplateProps {
   user: User;
 }
-
+interface UserData {
+  _id: string;
+  Email: string;
+  userName: string
+}
 const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
-  const [accessSelection, setAccessSelection] = useState<string>(user.access);
-
-  function accessUpdate({ option }: AccessOption) {
+  const [accessSelection, setAccessSelection] = useState<string>(user?.Access);
+  const { projectId } = useParams()
+  const accessUpdate = async ({ option }: AccessOption) => {
+    if (!projectId) return
+    const accessSelection = await shareAccess(projectId, user.userId, option)
+    console.log('accessSelection: ', accessSelection);
     setAccessSelection(option);
   }
 
@@ -26,18 +38,22 @@ const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
           {user.profileImage ? (
             <img
               src={user.profileImage || "https://via.placeholder.com/150"}
-              alt={`${user.name}'s profile`}
+              alt={`${user.
+                userName}'s profile`}
             />
           ) : (
             <div
               className="no-profile-container"
-              style={{ background: user.color }}
+              style={{ background: getAvatarColor(1, user.userId) }}
             >
-              {user.name[0]}
+              {user.
+                userName.charAt(0).toUpperCase()}
             </div>
           )}
         </div>
-        <div className="user-name">{user.name}</div>
+        <div className="user-name"> {user.
+          userName.charAt(0).toUpperCase() + user.
+            userName.slice(1).toLowerCase()}</div>
       </div>
       <div className="user-access">
         <RegularDropDown
@@ -61,39 +77,27 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
 }) => {
   const { activeUsers } = useActiveUsers();
   const { userName } = getUserData();
+  const [users, setUsers] = useState([])
+  const { projectId } = useParams();
+  const [searchedEmail, setSearchedEmail] = useState<UserData[]>([]);
+  const [emails, setEmails] = useState<any>([]);
+
+  function getData() {
+    if (!projectId) return;
+    getProjectSharedList(projectId).then((allUser) => {
+      const accesMail = allUser?.datas || []
+      setUsers(accesMail)
+    }).catch((err) => {
+      console.log(err);
+    })
+  }
+
+  useEffect(() => {
+    getData();
+  }, [])
   useEffect(() => {
     // console.log("activeUsers: ", activeUsers);
   }, [activeUsers]);
-  const users = [
-    {
-      name: "Alice Johnson",
-      email: "alice.johnson@example.com",
-      profileImage: "",
-      color: "#FF6600",
-      access: "Admin",
-    },
-    {
-      name: "Bob Smith",
-      email: "bob.smith@example.com",
-      profileImage: "",
-      color: "#488EF6",
-      access: "Viewer",
-    },
-    {
-      name: "Charlie Brown",
-      email: "charlie.brown@example.com",
-      profileImage: "",
-      color: "#48AC2A",
-      access: "Viewer",
-    },
-    {
-      name: "Diana Prince",
-      email: "diana.prince@example.com",
-      profileImage: "",
-      color: "#D44242",
-      access: "Viewer",
-    },
-  ];
   return (
     <RenderOverlay>
       <div
@@ -124,7 +128,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
             </div>
           </div>
           <div className="invite-input-container">
-            <MultiEmailInvite />
+            <MultiEmailInvite setSearchedEmail={setSearchedEmail} searchedEmail={searchedEmail} users={users} getData={getData} />
           </div>
           <div className="split"></div>
           <section>