misc: addressed pr comments

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -5,7 +5,7 @@
 /* eslint-disable no-var */
 /* eslint-disable func-names */
 
-import { useCallback, useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Image from "next/image";
@@ -128,8 +128,16 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!);
   const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
-  const nonFavoriteWorkspaces = workspaces.filter((w) => !projectFavorites?.includes(w.id));
+
-  const favoriteWorkspaces = workspaces.filter((w) => projectFavorites?.includes(w.id));
+  const nonFavoriteWorkspaces = useMemo(
+    () => workspaces.filter((w) => !projectFavorites?.includes(w.id)),
+    [workspaces, projectFavorites]
+  );
+
+  const favoriteWorkspaces = useMemo(
+    () => workspaces.filter((w) => projectFavorites?.includes(w.id)),
+    [workspaces, projectFavorites]
+  );
 
   const { user } = useUser();
   const { subscription } = useSubscription();
@@ -280,29 +288,37 @@ export const AppLayout = ({ children }: LayoutProps) => {
     }
   };
 
-  const addProjectToFavorites = useCallback(
+  const addProjectToFavorites = async (projectId: string) => {
-    (projectId: string) => {
+    try {
       if (currentOrg?.id) {
-        updateUserProjectFavorites({
+        await updateUserProjectFavorites({
           orgId: currentOrg?.id,
           projectFavorites: [...(projectFavorites || []), projectId]
         });
       }
-    },
+    } catch (err) {
-    [currentOrg, projectFavorites]
+      createNotification({
-  );
+        text: "Failed to add project to favorites.",
+        type: "error"
+      });
+    }
+  };
 
-  const removeProjectFromFavorites = useCallback(
+  const removeProjectFromFavorites = async (projectId: string) => {
-    (projectId: string) => {
+    try {
       if (currentOrg?.id) {
-        updateUserProjectFavorites({
+        await updateUserProjectFavorites({
           orgId: currentOrg?.id,
           projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)]
         });
       }
-    },
+    } catch (err) {
-    [currentOrg, projectFavorites]
+      createNotification({
-  );
+        text: "Failed to remove project from favorites.",
+        type: "error"
+      });
+    }
+  };
 
   return (
     <>

frontend/src/pages/org/[id]/overview/index.tsx

@@ -1,6 +1,6 @@
 // REFACTOR(akhilmhdh): This file needs to be split into multiple components too complex
 
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
@@ -489,7 +489,8 @@ const OrganizationPage = withPermission(
     const { currentOrg } = useOrganization();
     const routerOrgId = String(router.query.id);
     const orgWorkspaces = workspaces?.filter((workspace) => workspace.orgId === routerOrgId) || [];
-    const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!);
+    const { data: projectFavorites, isLoading: isProjectFavoritesLoading } =
+      useGetUserProjectFavorites(currentOrg?.id!);
     const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
 
     const addUsersToProject = useAddUserToWsNonE2EE();
@@ -575,34 +576,59 @@ const OrganizationPage = withPermission(
     const filteredWorkspaces = orgWorkspaces.filter((ws) =>
       ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())
     );
-    const favoriteWorkspaces = filteredWorkspaces.filter((ws) => projectFavorites?.includes(ws.id));
+
-    const nonFavoriteWorkspaces = filteredWorkspaces.filter((ws) =>
+    const workspacesWithFaveProp = useMemo(
-      favoriteWorkspaces.every((entry) => entry.id !== ws.id)
+      () =>
+        filteredWorkspaces
+          .map((w): Workspace & { isFavorite: boolean } => ({
+            ...w,
+            isFavorite: Boolean(projectFavorites?.includes(w.id))
+          }))
+          .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite)),
+      [filteredWorkspaces, projectFavorites]
     );
 
-    const addProjectToFavorites = useCallback(
+    const favoriteWorkspaces = useMemo(
-      (projectId: string) => {
+      () => workspacesWithFaveProp.filter((w) => w.isFavorite),
+      [workspacesWithFaveProp]
+    );
+
+    const nonFavoriteWorkspaces = useMemo(
+      () => workspacesWithFaveProp.filter((w) => !w.isFavorite),
+      [workspacesWithFaveProp]
+    );
+
+    const addProjectToFavorites = async (projectId: string) => {
+      try {
         if (currentOrg?.id) {
-          updateUserProjectFavorites({
+          await updateUserProjectFavorites({
             orgId: currentOrg?.id,
             projectFavorites: [...(projectFavorites || []), projectId]
           });
         }
-      },
+      } catch (err) {
-      [currentOrg, projectFavorites]
+        createNotification({
-    );
+          text: "Failed to add project to favorites.",
+          type: "error"
+        });
+      }
+    };
 
-    const removeProjectFromFavorites = useCallback(
+    const removeProjectFromFavorites = async (projectId: string) => {
-      (projectId: string) => {
+      try {
         if (currentOrg?.id) {
-          updateUserProjectFavorites({
+          await updateUserProjectFavorites({
             orgId: currentOrg?.id,
             projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)]
           });
         }
-      },
+      } catch (err) {
-      [currentOrg, projectFavorites]
+        createNotification({
-    );
+          text: "Failed to remove project from favorites.",
+          type: "error"
+        });
+      }
+    };
 
     const renderProjectGridItem = (workspace: Workspace, isFavorite: boolean) => (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
@@ -709,7 +735,7 @@ const OrganizationPage = withPermission(
           </>
         )}
         <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-          {isWorkspaceLoading &&
+          {(isWorkspaceLoading || isProjectFavoritesLoading) &&
             Array.apply(0, Array(3)).map((_x, i) => (
               <div
                 key={`workspace-cards-loading-${i + 1}`}
@@ -726,14 +752,16 @@ const OrganizationPage = withPermission(
                 </div>
               </div>
             ))}
-          {nonFavoriteWorkspaces.map((workspace) => renderProjectGridItem(workspace, false))}
+          {!isProjectFavoritesLoading &&
+            !isWorkspaceLoading &&
+            nonFavoriteWorkspaces.map((workspace) => renderProjectGridItem(workspace, false))}
         </div>
       </>
     );
 
     const projectsListView = (
       <div className="mt-4 w-full rounded-md">
-        {isWorkspaceLoading &&
+        {(isWorkspaceLoading || isProjectFavoritesLoading) &&
           Array.apply(0, Array(3)).map((_x, i) => (
             <div
               key={`workspace-cards-loading-${i + 1}`}
@@ -744,13 +772,11 @@ const OrganizationPage = withPermission(
               <Skeleton className="w-full bg-mineshaft-600" />
             </div>
           ))}
-        {[...favoriteWorkspaces, ...nonFavoriteWorkspaces].map((workspace, ind) =>
+        {!isProjectFavoritesLoading &&
-          renderProjectListItem(
+          !isWorkspaceLoading &&
-            workspace,
+          workspacesWithFaveProp.map((workspace, ind) =>
-            favoriteWorkspaces.some((w) => w.id === workspace.id),
+            renderProjectListItem(workspace, workspace.isFavorite, ind)
-            ind
+          )}
-          )
-        )}
       </div>
     );