Refactor: Enhance CollaborationPopup and MultiEmailInvite components; integrate user access sharing and project user retrieval functionalities; update user data structure for consistency.

app/src/components/templates/CollaborationPopup.tsx

@@ -7,15 +7,22 @@ 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 { shareAccess } from "../../services/factoryBuilder/collab/shareAccess";
+import { getAvatarColor } from "../../modules/collaboration/functions/getAvatarColor";
 
 interface UserListTemplateProps {
   user: User;
 }
 
 const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
-  const [accessSelection, setAccessSelection] = useState<string>(user.access);
+  const [accessSelection, setAccessSelection] = useState<string>(user?.Access);
+  const { projectId } = useParams();
 
-  function accessUpdate({ option }: AccessOption) {
+  const accessUpdate = async ({ option }: AccessOption) => {
+    if (!projectId) return
+    const accessSelection = await shareAccess(projectId, user.userId, option)
     setAccessSelection(option);
   }
 
@@ -26,18 +33,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 +72,27 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
 }) => {
   const { activeUsers } = useActiveUsers();
   const { userName } = getUserData();
+  const [users, setUsers] = useState([])
+  const { projectId } = useParams();
+
+  function getData() {
+    if (!projectId) return;
+    getProjectSharedList(projectId).then((allUser) => {
+      const accesMail = allUser?.datas || []
+      console.log('accesMail: ', accesMail);
+      setUsers(accesMail)
+    }).catch((err) => {
+
+    })
+  }
+
   useEffect(() => {
-    // console.log("activeUsers: ", activeUsers);
+    getData();
+  }, [])
+
+  useEffect(() => {
+    // 
   }, [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
@@ -112,7 +111,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
           <div className="header">
             <div className="content">Share this file</div>
             <div className="content">
-              <div className="copy-link-button">copy link</div>
+              {/* <div className="copy-link-button">copy link</div> */}
               <div
                 className="close-button"
                 onClick={() => {
@@ -124,7 +123,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
             </div>
           </div>
           <div className="invite-input-container">
-            <MultiEmailInvite />
+            <MultiEmailInvite users={users} getData={getData} />
           </div>
           <div className="split"></div>
           <section>
@@ -142,7 +141,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
                 <div className="you-container">
                   <div className="your-name">
                     <div className="user-profile">{userName && userName[0].toUpperCase()}</div>
-                    {userName}
+                    {userName && userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase()}
                   </div>
                   <div className="indicater">you</div>
                 </div>