From f663774fee644769a018a5b43e48e4cc49e23989 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 19 Jan 2023 00:18:10 +0530
Subject: [PATCH] feat: add most popular section in apps (#6539)

* feat: add most popular section in apps

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: remove margin

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: merge conflict

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 apps/web/pages/apps/index.tsx                              | 4 ++--
 apps/web/public/static/locales/en/common.json              | 1 +
 packages/app-store/_appRegistry.ts                         | 5 +++++
 packages/ui/components/apps/AllApps.tsx                    | 7 ++++++-
 .../apps/{TrendingAppsSlider.tsx => PopularAppsSlider.tsx} | 4 ++--
 packages/ui/components/apps/Slider.tsx                     | 4 ++--
 packages/ui/components/apps/index.ts                       | 2 +-
 packages/ui/index.tsx                                      | 2 +-
 8 files changed, 20 insertions(+), 9 deletions(-)
 rename packages/ui/components/apps/{TrendingAppsSlider.tsx => PopularAppsSlider.tsx} (82%)

diff --git a/apps/web/pages/apps/index.tsx b/apps/web/pages/apps/index.tsx
index 6725a20427..ec6e7bed2c 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -14,7 +14,7 @@ import {
   HorizontalTabs,
   Icon,
   TextField,
-  TrendingAppsSlider,
+  PopularAppsSlider,
 } from "@calcom/ui";
 
 import AppsLayout from "@components/apps/layouts/AppsLayout";
@@ -77,7 +77,7 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
         {!searchText && (
           <>
             <AppStoreCategories categories={categories} />
-            <TrendingAppsSlider items={appStore} />
+            <PopularAppsSlider items={appStore} />
           </>
         )}
         <AllApps
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 13b0cce05a..8715a03685 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -789,6 +789,7 @@
   "number_apps_one": "{{count}} App",
   "number_apps_other": "{{count}} Apps",
   "trending_apps": "Trending Apps",
+  "most_popular":"Most Popular",
   "explore_apps": "{{category}} apps",
   "installed_apps": "Installed Apps",
   "free_to_use_apps": "Free",
diff --git a/packages/app-store/_appRegistry.ts b/packages/app-store/_appRegistry.ts
index 60c424d882..b6e464a59e 100644
--- a/packages/app-store/_appRegistry.ts
+++ b/packages/app-store/_appRegistry.ts
@@ -62,6 +62,11 @@ export async function getAppRegistryWithCredentials(userId: number) {
         select: safeCredentialSelect,
       },
     },
+    orderBy: {
+      credentials: {
+        _count: "desc",
+      },
+    },
   });
   const apps = [] as (App & {
     credentials: Credential[];
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index aa9af0eb9a..3973dddb38 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -155,7 +155,12 @@ export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
           : app.category === selectedCategory
         : true
     )
-    .filter((app) => (searchText ? app.name.toLowerCase().includes(searchText.toLowerCase()) : true));
+    .filter((app) => (searchText ? app.name.toLowerCase().includes(searchText.toLowerCase()) : true))
+    .sort(function (a, b) {
+      if (a.name < b.name) return -1;
+      else if (a.name > b.name) return 1;
+      return 0;
+    });
 
   return (
     <div>
diff --git a/packages/ui/components/apps/TrendingAppsSlider.tsx b/packages/ui/components/apps/PopularAppsSlider.tsx
similarity index 82%
rename from packages/ui/components/apps/TrendingAppsSlider.tsx
rename to packages/ui/components/apps/PopularAppsSlider.tsx
index 7e0ff29a7e..3c95ff2e70 100644
--- a/packages/ui/components/apps/TrendingAppsSlider.tsx
+++ b/packages/ui/components/apps/PopularAppsSlider.tsx
@@ -4,12 +4,12 @@ import { AppFrontendPayload as App } from "@calcom/types/App";
 import { AppCard } from "./AppCard";
 import { Slider } from "./Slider";
 
-export const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
+export const PopularAppsSlider = <T extends App>({ items }: { items: T[] }) => {
   const { t } = useLocale();
 
   return (
     <Slider<T>
-      title={t("trending_apps")}
+      title={t("most_popular")}
       items={items.filter((app) => !!app.trending)}
       itemKey={(app) => app.name}
       options={{
diff --git a/packages/ui/components/apps/Slider.tsx b/packages/ui/components/apps/Slider.tsx
index 9209bc3bff..5754d657d0 100644
--- a/packages/ui/components/apps/Slider.tsx
+++ b/packages/ui/components/apps/Slider.tsx
@@ -56,11 +56,11 @@ export const Slider = <T extends string | unknown>({
         `}
       </style>
       <div className="glide" ref={glide}>
-        <div className="flex cursor-default pb-3">
+        <div className="flex cursor-default items-center pb-3">
           {isLocaleReady ? (
             title && (
               <div>
-                <h2 className="mt-0 mb-2 text-base font-semibold leading-none text-gray-900">{title}</h2>
+                <h2 className="mt-0 text-base font-semibold leading-none text-gray-900">{title}</h2>
               </div>
             )
           ) : (
diff --git a/packages/ui/components/apps/index.ts b/packages/ui/components/apps/index.ts
index c715a7657d..359e1503fe 100644
--- a/packages/ui/components/apps/index.ts
+++ b/packages/ui/components/apps/index.ts
@@ -3,5 +3,5 @@ export { AppCard } from "./AppCard";
 export { Slider } from "./Slider";
 export { SkeletonLoader as AppSkeletonLoader } from "./SkeletonLoader";
 export { SkeletonLoader } from "./SkeletonLoader";
-export { TrendingAppsSlider } from "./TrendingAppsSlider";
+export { PopularAppsSlider } from "./PopularAppsSlider";
 export { AppStoreCategories } from "./Categories";
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 215249e6de..217cf7bad1 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -64,7 +64,7 @@ export {
   AppSkeletonLoader,
   SkeletonLoader,
   Slider,
-  TrendingAppsSlider,
+  PopularAppsSlider,
   useShouldShowArrows,
   AppStoreCategories,
 } from "./components/apps";