diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 70f3656d26..acf899a7ee 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/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(
- () => [
- ...workspaces.filter((w) => projectFavorites?.includes(w.id)),
- ...workspaces.filter((w) => !projectFavorites?.includes(w.id))
- ],
+ const workspacesWithFaveProp = useMemo(
+ () =>
+ workspaces
+ .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"
>
- {workspaceList
+ {workspacesWithFaveProp
.filter((ws) => ws.orgId === currentOrg?.id)
- .map(({ id, name }) => (
+ .map(({ id, name, isFavorite }) => (
{
- {projectFavorites?.includes(id) ? (
+ {isFavorite ? (
- 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 { workspacesWithFaveProp, favoriteWorkspaces, nonFavoriteWorkspaces } = useMemo(() => {
+ const workspacesWithFav = filteredWorkspaces
+ .map((w): Workspace & { isFavorite: boolean } => ({
+ ...w,
+ isFavorite: Boolean(projectFavorites?.includes(w.id))
+ }))
+ .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite));
+
+ const favWorkspaces = workspacesWithFav.filter((w) => w.isFavorite);
+ const nonFavWorkspaces = workspacesWithFav.filter((w) => !w.isFavorite);
- const favoriteWorkspaces = workspacesWithFaveProp.filter((w) => w.isFavorite);
- const nonFavoriteWorkspaces = workspacesWithFaveProp.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(
>
)}
- {(isWorkspaceLoading || isProjectFavoritesLoading) &&
+ {isProjectViewLoading &&
Array.apply(0, Array(3)).map((_x, i) => (
))}
- {!isProjectFavoritesLoading &&
- !isWorkspaceLoading &&
+ {!isProjectViewLoading &&
nonFavoriteWorkspaces.map((workspace) => renderProjectGridItem(workspace, false))}
>
@@ -754,7 +758,7 @@ const OrganizationPage = withPermission(
const projectsListView = (
- {(isWorkspaceLoading || isProjectFavoritesLoading) &&
+ {isProjectViewLoading &&
Array.apply(0, Array(3)).map((_x, i) => (
))}
- {!isProjectFavoritesLoading &&
- !isWorkspaceLoading &&
+ {!isProjectViewLoading &&
workspacesWithFaveProp.map((workspace, ind) =>
renderProjectListItem(workspace, workspace.isFavorite, ind)
)}