Refresh page after adding/editing team member (#1750)

* refresh list when add/edit/delete team member * create invitation presenter * use jbuilder for update team action * send deleted id for invitation * send updated invitation object * send full name in team update * worked on review comments * frontend changes for updated status logic: status= true means added team member * removed unnecessary code * common logic extracted in function --------- Co-authored-by: Shruti Apte <[email protected]> Co-authored-by: “Apoorv <“[email protected]”>
saeloun · Apr 10, 2024 · 6b91123 · 6b91123
1 parent 255a3aa
commit 6b91123
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 20 deletions.
diff --git a/app/javascript/src/components/Profile/Layout/MobileNav.tsx b/app/javascript/src/components/Profile/Layout/MobileNav.tsx
@@ -38,11 +38,12 @@ const getSettingsNavUrls = memberId => [
         text: "ALLOCATED DEVICES",
         icon: <MobileIcon size={16} />,
       },
-      {
-        url: "/settings/compensation",
-        text: "COMPENSATION",
-        icon: <PaymentsIcon size={16} />,
-      },
+      //Todo: Uncomment while API integration
+      // {
+      //   url: "/settings/compensation",
+      //   text: "COMPENSATION",
+      //   icon: <PaymentsIcon size={16} />,
+      // },
     ],
   },
 

diff --git a/app/javascript/src/components/Team/Details/Layout/MobileNav.tsx b/app/javascript/src/components/Team/Details/Layout/MobileNav.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 
+import { UserIcon, ProjectsIcon, MobileIcon } from "miruIcons";
 import { useParams } from "react-router-dom";
 
 import withLayout from "common/Mobile/HOC/withLayout";
@@ -13,6 +14,17 @@ const getTeamUrls = memberId => [
   {
     url: `/team/${memberId}/details`,
     text: "PERSONAL DETAILS",
+    icon: <UserIcon size={16} />,
+  },
+  {
+    url: `/team/${memberId}/employment`,
+    text: "EMPLOYMENT DETAILS",
+    icon: <ProjectsIcon size={16} />,
+  },
+  {
+    url: "/settings/devices",
+    text: "ALLOCATED DEVICES",
+    icon: <MobileIcon size={16} />,
   },
 ];
 

diff --git a/app/javascript/src/components/Team/Details/Layout/SideNav.tsx b/app/javascript/src/components/Team/Details/Layout/SideNav.tsx
@@ -25,10 +25,11 @@ const getTeamUrls = memberId => [
     url: `/team/${memberId}/employment`,
     text: "EMPLOYMENT DETAILS",
   },
-  {
-    url: `/team/${memberId}/compensation`,
-    text: "COMPENSATION",
-  },
+  //Todo: Uncomment while API integration
+  // {
+  //   url: `/team/${memberId}/compensation`,
+  //   text: "COMPENSATION",
+  // },
 ];
 
 const UserInformation = ({ memberId }) => {

diff --git a/app/javascript/src/components/Team/Details/Layout/TeamUrl.tsx b/app/javascript/src/components/Team/Details/Layout/TeamUrl.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { RightArrowIcon } from "miruIcons";
 import { NavLink } from "react-router-dom";
 
 const getActiveClassName = isActive => {
@@ -20,7 +21,15 @@ export const TeamUrl = ({ urlList }) => (
             className={({ isActive }) => getActiveClassName(isActive)}
             to={item.url}
           >
-            {item.text}
+            <div className="flex w-full items-center justify-between gap-4">
+              <div className="flex items-center gap-4">
+                {item.icon}
+                {item.text}
+              </div>
+              <div className="pr-4">
+                <RightArrowIcon size={16} />
+              </div>
+            </div>
           </NavLink>
         </li>
       ))}

diff --git a/app/javascript/src/components/Team/List/Table/MoreOptions.tsx b/app/javascript/src/components/Team/List/Table/MoreOptions.tsx
@@ -33,7 +33,7 @@ const MoreOptions = ({ item, setShowMoreOptions, showMoreOptions }: Iprops) => {
     <HoverMoreOptions position="bottom-10 right-0">
       <Tooltip content="Re-Invite">
         <Button
-          disabled={!item.status}
+          disabled={item.status}
           style="ternary"
           onClick={handleResendInvite}
         >

diff --git a/app/javascript/src/components/Team/List/Table/TableRow.tsx b/app/javascript/src/components/Team/List/Table/TableRow.tsx
@@ -46,7 +46,7 @@ const TableRow = ({ item }) => {
   };
 
   const handleRowClick = () => {
-    if (status) return;
+    if (!status) return;
 
     navigate(`/team/${id}`, { replace: true });
   };
@@ -65,7 +65,7 @@ const TableRow = ({ item }) => {
             <p className="mr-2 text-sm font-bold leading-5 text-miru-dark-purple-1000 lg:text-base">
               {name}
             </p>
-            {status && (
+            {!status && (
               <Badge
                 text="pending"
                 className={`${getStatusCssClass(

diff --git a/app/javascript/src/components/Team/List/index.tsx b/app/javascript/src/components/Team/List/index.tsx
@@ -96,6 +96,7 @@ const TeamList = () => {
         teamList,
         setModalState,
         modal,
+        setTeamList,
       }}
     >
       {!hideContainer && (

diff --git a/app/javascript/src/components/Team/modals/AddEditMember.tsx b/app/javascript/src/components/Team/modals/AddEditMember.tsx
@@ -51,10 +51,21 @@ interface Props {
 
 const EditClient = ({ user = {}, isEdit = false }: Props) => {
   const [apiError, setApiError] = useState<string>(""); // eslint-disable-line
-  const { setModalState, modal } = useList();
+  const { setModalState, modal, setTeamList, teamList } = useList();
   const wrapperRef = useRef();
   const { isDesktop } = useUserContext();
 
+  const updateTeamList = updatedUser => {
+    const updatedTeamList = teamList.map(member => {
+      if (member.id === updatedUser.id) {
+        return updatedUser;
+      }
+
+      return member;
+    });
+    setTeamList(updatedTeamList);
+  };
+
   const handleSubmit = async values => {
     const { id, firstName, lastName, email, role } = values;
     const payload = {
@@ -71,12 +82,23 @@ const EditClient = ({ user = {}, isEdit = false }: Props) => {
     try {
       if (isEdit) {
         if (user.isTeamMember) {
-          await teamApi.updateTeamMember(user.id, payload);
+          const res = await teamApi.updateTeamMember(user.id, payload);
+          updateTeamList(res.data.user);
         } else {
-          await teamApi.updateInvitedMember(user.id, payload);
+          const res = await teamApi.updateInvitedMember(user.id, payload);
+          updateTeamList(res.data.invitation);
         }
       } else {
-        await teamApi.inviteMember(payload);
+        const res = await teamApi.inviteMember(payload);
+        const invitation = res.data.invitation;
+        const updatedTeamList = teamList;
+        const IsMemberPresent = updatedTeamList.findIndex(
+          user => user.id === invitation.id
+        );
+        if (IsMemberPresent === -1) {
+          updatedTeamList.push(...[invitation]);
+        }
+        setTeamList(updatedTeamList);
       }
       setModalState("");
     } catch (err) {

diff --git a/app/javascript/src/components/Team/modals/DeleteMember.tsx b/app/javascript/src/components/Team/modals/DeleteMember.tsx
@@ -11,14 +11,21 @@ import { useList } from "context/TeamContext";
 const DeleteMember = ({ user }) => {
   const wrapperRef = useRef();
 
-  const { setModalState, modal } = useList();
+  const { setModalState, modal, setTeamList, teamList } = useList();
+
+  const updateTeamListAferDelete = id => {
+    const updatedTeamList = teamList.filter(member => member.id !== id);
+    setTeamList(updatedTeamList);
+  };
 
   const deleteTeamMember = async () => {
     try {
       if (user.isTeamMember) {
-        await teamApi.destroyTeamMember(user.id);
+        const res = await teamApi.destroyTeamMember(user.id);
+        updateTeamListAferDelete(res.data.user.id);
       } else {
-        await teamApi.deleteInvitedMember(user.id);
+        const res = await teamApi.deleteInvitedMember(user.id);
+        updateTeamListAferDelete(res.data.id);
       }
       setModalState(TeamModalType.NONE);
     } catch (error) {

diff --git a/app/javascript/src/context/TeamContext.tsx b/app/javascript/src/context/TeamContext.tsx
@@ -5,6 +5,7 @@ export const ListContext = createContext({
   teamList: [],
   setModalState: (modalName, user = {}) => {}, // eslint-disable-line
   modal: "",
+  setTeamList: (value: any[]) => {}, // eslint-disable-line
 });
 
 // Custom Hooks