diff --git a/apps/web/app/(use-page-wrapper)/apps/(homepage)/page.tsx b/apps/web/app/(use-page-wrapper)/apps/(homepage)/page.tsx index 336e81deb2..a6293ffbd3 100644 --- a/apps/web/app/(use-page-wrapper)/apps/(homepage)/page.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/(homepage)/page.tsx @@ -1,10 +1,12 @@ -import { withAppDirSsr } from "app/WithAppDirSsr"; -import type { PageProps } from "app/_types"; import { _generateMetadata } from "app/_utils"; import { cookies, headers } from "next/headers"; -import { getServerSideProps } from "@lib/apps/getServerSideProps"; -import { buildLegacyCtx } from "@lib/buildLegacyCtx"; +import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry"; +import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; +import { UserRepository } from "@calcom/lib/server/repository/user"; +import type { AppCategories } from "@calcom/prisma/enums"; + +import { buildLegacyRequest } from "@lib/buildLegacyCtx"; import AppsPage from "~/apps/apps-view"; @@ -18,13 +20,43 @@ export const generateMetadata = async () => { ); }; -const getData = withAppDirSsr(getServerSideProps); +const ServerPage = async () => { + const req = buildLegacyRequest(await headers(), await cookies()); + const session = await getServerSession({ req }); + let appStore, userAdminTeamsIds: number[]; + if (session?.user?.id) { + const userAdminTeams = await UserRepository.getUserAdminTeams(session.user.id); + userAdminTeamsIds = userAdminTeams?.teams?.map(({ team }) => team.id) ?? []; + appStore = await getAppRegistryWithCredentials(session.user.id, userAdminTeamsIds); + } else { + appStore = await getAppRegistry(); + userAdminTeamsIds = []; + } -const ServerPage = async ({ params, searchParams }: PageProps) => { - const context = buildLegacyCtx(await headers(), await cookies(), await params, await searchParams); - const props = await getData(context); + const categoryQuery = appStore.map(({ categories }) => ({ + categories: categories || [], + })); + const categories = categoryQuery.reduce((c, app) => { + for (const category of app.categories) { + c[category] = c[category] ? c[category] + 1 : 1; + } + return c; + }, {} as Record); - return ; + const props = { + categories: Object.entries(categories) + .map(([name, count]): { name: AppCategories; count: number } => ({ + name: name as AppCategories, + count, + })) + .sort(function (a, b) { + return b.count - a.count; + }), + appStore, + userAdminTeams: userAdminTeamsIds, + }; + + return ; }; export default ServerPage; diff --git a/apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx b/apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx index 66066870fe..c611e7b093 100644 --- a/apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/(homepage)/skeleton.tsx @@ -13,7 +13,8 @@ export function AppHomePageSkeleton() { isPublic heading={t("app_store")} subtitle={t("app_store_description")} - headerClassName="sm:hidden lg:block hidden"> + headerClassName="sm:hidden lg:block hidden" + isAdmin={false}>
{/* Featured Categories section */} diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx index bdfd58219a..3ba1c1a35c 100644 --- a/apps/web/components/apps/layouts/AppsLayout.tsx +++ b/apps/web/components/apps/layouts/AppsLayout.tsx @@ -1,4 +1,3 @@ -import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; import type { ComponentProps } from "react"; import React from "react"; @@ -9,15 +8,14 @@ import { EmptyScreen } from "@calcom/ui/components/empty-screen"; type AppsLayoutProps = { children: React.ReactNode; + isAdmin: boolean; actions?: (className?: string) => JSX.Element; emptyStore?: boolean; } & Omit, "actions">; -export default function AppsLayout({ children, actions, emptyStore, ...rest }: AppsLayoutProps) { +export default function AppsLayout({ children, actions, emptyStore, isAdmin, ...rest }: AppsLayoutProps) { const { t } = useLocale(); - const session = useSession(); const router = useRouter(); - const isAdmin = session.data?.user.role === "ADMIN"; return ( diff --git a/apps/web/lib/apps/getServerSideProps.tsx b/apps/web/lib/apps/getServerSideProps.tsx deleted file mode 100644 index e2c60ffbff..0000000000 --- a/apps/web/lib/apps/getServerSideProps.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { GetServerSidePropsContext } from "next"; - -import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry"; -import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; -import { UserRepository } from "@calcom/lib/server/repository/user"; -import type { AppCategories } from "@calcom/prisma/enums"; - -export const getServerSideProps = async (context: GetServerSidePropsContext) => { - const { req } = context; - - const session = await getServerSession({ req }); - - let appStore, userAdminTeamsIds: number[]; - if (session?.user?.id) { - const userAdminTeams = await UserRepository.getUserAdminTeams(session.user.id); - userAdminTeamsIds = userAdminTeams?.teams?.map(({ team }) => team.id) ?? []; - appStore = await getAppRegistryWithCredentials(session.user.id, userAdminTeamsIds); - } else { - appStore = await getAppRegistry(); - userAdminTeamsIds = []; - } - - const categoryQuery = appStore.map(({ categories }) => ({ - categories: categories || [], - })); - const categories = categoryQuery.reduce((c, app) => { - for (const category of app.categories) { - c[category] = c[category] ? c[category] + 1 : 1; - } - return c; - }, {} as Record); - - return { - props: { - categories: Object.entries(categories) - .map(([name, count]): { name: AppCategories; count: number } => ({ - name: name as AppCategories, - count, - })) - .sort(function (a, b) { - return b.count - a.count; - }), - appStore, - userAdminTeams: userAdminTeamsIds, - }, - }; -}; diff --git a/apps/web/modules/apps/apps-view.tsx b/apps/web/modules/apps/apps-view.tsx index aa1293f2e9..f5356b2024 100644 --- a/apps/web/modules/apps/apps-view.tsx +++ b/apps/web/modules/apps/apps-view.tsx @@ -8,15 +8,14 @@ import { AppStoreCategories } from "@calcom/features/apps/components/Categories" import { PopularAppsSlider } from "@calcom/features/apps/components/PopularAppsSlider"; import { RecentAppsSlider } from "@calcom/features/apps/components/RecentAppsSlider"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import type { inferSSRProps } from "@calcom/types/inferSSRProps"; +import type { AppCategories } from "@calcom/prisma/enums"; +import type { AppFrontendPayload } from "@calcom/types/App"; import classNames from "@calcom/ui/classNames"; import { TextField } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import type { HorizontalTabItemProps } from "@calcom/ui/components/navigation"; import { HorizontalTabs } from "@calcom/ui/components/navigation"; -import { type getServerSideProps } from "@lib/apps/getServerSideProps"; - import AppsLayout from "@components/apps/layouts/AppsLayout"; const tabs: HorizontalTabItemProps[] = [ @@ -51,15 +50,24 @@ function AppsSearch({ ); } -export type PageProps = inferSSRProps; +export type PageProps = { + categories: { + name: AppCategories; + count: number; + }[]; + appStore: AppFrontendPayload[]; + userAdminTeams: number[]; + isAdmin: boolean; +}; -export default function Apps({ categories, appStore, userAdminTeams }: PageProps) { +export default function Apps({ isAdmin, categories, appStore, userAdminTeams }: PageProps) { const { t } = useLocale(); const [searchText, setSearchText] = useState(undefined); return ( (