[WEB-1134] fix: module link create and delete mutation (#4373)

* fix: module link create and delete mutation

* chore: module link mutation store updates

* chore: code refactor

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

web/components/core/sidebar/links-list.tsx

@@ -7,22 +7,28 @@ import { Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
 // hooks
-import { useMember } from "@/hooks/store";
+import { useMember, useModule } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
 
 type Props = {
-  links: ILinkDetails[];
+  moduleId: string;
+
   handleDeleteLink: (linkId: string) => void;
   handleEditLink: (link: ILinkDetails) => void;
   userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const LinksList: React.FC<Props> = observer(
+export const LinksList: React.FC<Props> = observer((props) => {
-  ({ links, handleDeleteLink, handleEditLink, userAuth, disabled }) => {
+  const { moduleId, handleDeleteLink, handleEditLink, userAuth, disabled } = props;
+  // hooks
   const { getUserDetails } = useMember();
   const { isMobile } = usePlatformOS();
+  const { getModuleById } = useModule();
+  // derived values
+  const currentModule = getModuleById(moduleId);
+  const moduleLinks = currentModule?.link_module || undefined;
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
 
   const copyToClipboard = (text: string) => {
@@ -34,9 +40,10 @@ export const LinksList: React.FC<Props> = observer(
     });
   };
 
+  if (!moduleLinks) return <></>;
   return (
     <>
-        {links.map((link) => {
+      {moduleLinks.map((link) => {
         const createdByDetails = getUserDetails(link.created_by);
         return (
           <div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
@@ -97,9 +104,7 @@ export const LinksList: React.FC<Props> = observer(
                 {createdByDetails && (
                   <>
                     by{" "}
-                      {createdByDetails?.is_bot
+                    {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}
-                        ? createdByDetails?.first_name + " Bot"
-                        : createdByDetails?.display_name}
                   </>
                 )}
               </p>
@@ -109,5 +114,4 @@ export const LinksList: React.FC<Props> = observer(
       })}
     </>
   );
-  }
+});
-);

web/components/modules/sidebar.tsx

@@ -673,8 +673,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                               </div>
                             )}
 
+                            {moduleId && (
                               <LinksList
-                              links={moduleDetails.link_module}
+                                moduleId={moduleId}
                                 handleEditLink={handleEditLink}
                                 handleDeleteLink={handleDeleteLink}
                                 userAuth={{
@@ -685,6 +686,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 }}
                                 disabled={isArchived}
                               />
+                            )}
                           </>
                         ) : (
                           <div className="flex items-center justify-between gap-2">

web/store/module.store.ts

@@ -1,3 +1,4 @@
+import concat from "lodash/concat";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
 import update from "lodash/update";
@@ -372,13 +373,22 @@ export class ModulesStore implements IModuleStore {
    * @param data
    * @returns ILinkDetails
    */
-  createModuleLink = async (workspaceSlug: string, projectId: string, moduleId: string, data: Partial<ILinkDetails>) =>
+  createModuleLink = async (
-    await this.moduleService.createModuleLink(workspaceSlug, projectId, moduleId, data).then((response) => {
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<ILinkDetails>
+  ) => {
+    try {
+      const moduleLink = await this.moduleService.createModuleLink(workspaceSlug, projectId, moduleId, data);
       runInAction(() => {
-        set(this.moduleMap, [moduleId, "link_module"], [response]);
+        update(this.moduleMap, [moduleId, "link_module"], (moduleLinks = []) => concat(moduleLinks, moduleLink));
-      });
-      return response;
       });
+      return moduleLink;
+    } catch (error) {
+      throw error;
+    }
+  };
 
   /**
    * @description updates module link details
@@ -422,14 +432,19 @@ export class ModulesStore implements IModuleStore {
    * @param moduleId
    * @param linkId
    */
-  deleteModuleLink = async (workspaceSlug: string, projectId: string, moduleId: string, linkId: string) =>
+  deleteModuleLink = async (workspaceSlug: string, projectId: string, moduleId: string, linkId: string) => {
-    await this.moduleService.deleteModuleLink(workspaceSlug, projectId, moduleId, linkId).then(() => {
+    try {
-      const moduleDetails = this.getModuleById(moduleId);
+      const moduleLink = await this.moduleService.deleteModuleLink(workspaceSlug, projectId, moduleId, linkId);
-      const linkModules = moduleDetails?.link_module?.filter((link) => link.id !== linkId);
       runInAction(() => {
-        set(this.moduleMap, [moduleId, "link_module"], linkModules);
+        update(this.moduleMap, [moduleId, "link_module"], (moduleLinks = []) =>
-      });
+          moduleLinks.filter((link: ILinkDetails) => link.id !== linkId)
+        );
       });
+      return moduleLink;
+    } catch (error) {
+      throw error;
+    }
+  };
 
   /**
    * @description adds a module to favorites