misc: implemened more review comments

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -74,6 +74,7 @@ import {
   useRegisterUserAction,
   useSelectOrganization
 } from "@app/hooks/api";
+import { Workspace } from "@app/hooks/api/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
@@ -129,11 +130,14 @@ export const AppLayout = ({ children }: LayoutProps) => {
   const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!);
   const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
 
-  const workspaceList = useMemo(
+  const workspacesWithFaveProp = useMemo(
-    () => [
+    () =>
-      ...workspaces.filter((w) => projectFavorites?.includes(w.id)),
+      workspaces
-      ...workspaces.filter((w) => !projectFavorites?.includes(w.id))
+        .map((w): Workspace & { isFavorite: boolean } => ({
-    ],
+          ...w,
+          isFavorite: Boolean(projectFavorites?.includes(w.id))
+        }))
+        .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite)),
     [workspaces, projectFavorites]
   );
 
@@ -498,9 +502,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50 max-h-96 border-gray-700"
                       >
                         <div className="no-scrollbar::-webkit-scrollbar h-full no-scrollbar">
-                          {workspaceList
+                          {workspacesWithFaveProp
                             .filter((ws) => ws.orgId === currentOrg?.id)
-                            .map(({ id, name }) => (
+                            .map(({ id, name, isFavorite }) => (
                               <div
                                 className={twMerge(
                                   "mb-1 grid grid-cols-7 rounded-md hover:bg-mineshaft-500",
@@ -518,7 +522,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                                   </SelectItem>
                                 </div>
                                 <div className="col-span-1 flex items-center">
-                                  {projectFavorites?.includes(id) ? (
+                                  {isFavorite ? (
                                     <FontAwesomeIcon
                                       icon={faSolidStar}
                                       className="text-sm text-mineshaft-300 hover:text-mineshaft-400"

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

@@ -493,6 +493,7 @@ const OrganizationPage = withPermission(
       useGetUserProjectFavorites(currentOrg?.id!);
     const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
 
+    const isProjectViewLoading = isWorkspaceLoading || isProjectFavoritesLoading;
     const addUsersToProject = useAddUserToWsNonE2EE();
 
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -577,19 +578,23 @@ const OrganizationPage = withPermission(
       ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())
     );
 
-    const workspacesWithFaveProp = useMemo(
+    const { workspacesWithFaveProp, favoriteWorkspaces, nonFavoriteWorkspaces } = useMemo(() => {
-      () =>
+      const workspacesWithFav = filteredWorkspaces
-        filteredWorkspaces
+        .map((w): Workspace & { isFavorite: boolean } => ({
-          .map((w): Workspace & { isFavorite: boolean } => ({
+          ...w,
-            ...w,
+          isFavorite: Boolean(projectFavorites?.includes(w.id))
-            isFavorite: Boolean(projectFavorites?.includes(w.id))
+        }))
-          }))
+        .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite));
-          .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite)),
-      [filteredWorkspaces, projectFavorites]
-    );
 
-    const favoriteWorkspaces = workspacesWithFaveProp.filter((w) => w.isFavorite);
+      const favWorkspaces = workspacesWithFav.filter((w) => w.isFavorite);
-    const nonFavoriteWorkspaces = workspacesWithFaveProp.filter((w) => !w.isFavorite);
+      const nonFavWorkspaces = workspacesWithFav.filter((w) => !w.isFavorite);
+
+      return {
+        workspacesWithFaveProp: workspacesWithFav,
+        favoriteWorkspaces: favWorkspaces,
+        nonFavoriteWorkspaces: nonFavWorkspaces
+      };
+    }, [filteredWorkspaces, projectFavorites]);
 
     const addProjectToFavorites = async (projectId: string) => {
       try {
@@ -728,7 +733,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 || isProjectFavoritesLoading) &&
+          {isProjectViewLoading &&
             Array.apply(0, Array(3)).map((_x, i) => (
               <div
                 key={`workspace-cards-loading-${i + 1}`}
@@ -745,8 +750,7 @@ const OrganizationPage = withPermission(
                 </div>
               </div>
             ))}
-          {!isProjectFavoritesLoading &&
+          {!isProjectViewLoading &&
-            !isWorkspaceLoading &&
             nonFavoriteWorkspaces.map((workspace) => renderProjectGridItem(workspace, false))}
         </div>
       </>
@@ -754,7 +758,7 @@ const OrganizationPage = withPermission(
 
     const projectsListView = (
       <div className="mt-4 w-full rounded-md">
-        {(isWorkspaceLoading || isProjectFavoritesLoading) &&
+        {isProjectViewLoading &&
           Array.apply(0, Array(3)).map((_x, i) => (
             <div
               key={`workspace-cards-loading-${i + 1}`}
@@ -765,8 +769,7 @@ const OrganizationPage = withPermission(
               <Skeleton className="w-full bg-mineshaft-600" />
             </div>
           ))}
-        {!isProjectFavoritesLoading &&
+        {!isProjectViewLoading &&
-          !isWorkspaceLoading &&
           workspacesWithFaveProp.map((workspace, ind) =>
             renderProjectListItem(workspace, workspace.isFavorite, ind)
           )}