2022-09-05 21:22:28 +00:00
|
|
|
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
|
|
|
import { useRouter } from "next/router";
|
2023-02-16 22:39:57 +00:00
|
|
|
import type { UIEvent } from "react";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
2022-09-05 21:22:28 +00:00
|
|
|
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
2022-12-20 22:15:06 +00:00
|
|
|
import type { AppFrontendPayload as App } from "@calcom/types/App";
|
|
|
|
import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
|
2022-09-05 21:22:28 +00:00
|
|
|
|
2023-01-05 12:04:28 +00:00
|
|
|
import { EmptyScreen } from "../empty-screen";
|
2023-04-12 15:26:31 +00:00
|
|
|
import { ChevronLeft, ChevronRight, Search } from "../icon";
|
2023-01-04 11:00:01 +00:00
|
|
|
import { AppCard } from "./AppCard";
|
2022-09-05 21:22:28 +00:00
|
|
|
|
|
|
|
export function useShouldShowArrows() {
|
|
|
|
const ref = useRef<HTMLUListElement>(null);
|
|
|
|
const [showArrowScroll, setShowArrowScroll] = useState({
|
|
|
|
left: false,
|
|
|
|
right: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const appCategoryList = ref.current;
|
|
|
|
if (appCategoryList && appCategoryList.scrollWidth > appCategoryList.clientWidth) {
|
|
|
|
setShowArrowScroll({ left: false, right: true });
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const calculateScroll = (e: UIEvent<HTMLUListElement>) => {
|
|
|
|
setShowArrowScroll({
|
|
|
|
left: e.currentTarget.scrollLeft > 0,
|
|
|
|
right:
|
|
|
|
Math.floor(e.currentTarget.scrollWidth) - Math.floor(e.currentTarget.offsetWidth) !==
|
|
|
|
Math.floor(e.currentTarget.scrollLeft),
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
return { ref, calculateScroll, leftVisible: showArrowScroll.left, rightVisible: showArrowScroll.right };
|
|
|
|
}
|
|
|
|
|
2022-12-20 22:15:06 +00:00
|
|
|
type AllAppsPropsType = {
|
|
|
|
apps: (App & { credentials?: Credential[] })[];
|
|
|
|
searchText?: string;
|
|
|
|
categories: string[];
|
|
|
|
};
|
2022-09-05 21:22:28 +00:00
|
|
|
|
2022-10-20 17:59:24 +00:00
|
|
|
interface CategoryTabProps {
|
|
|
|
selectedCategory: string | null;
|
|
|
|
categories: string[];
|
2022-11-30 20:51:44 +00:00
|
|
|
searchText?: string;
|
2022-10-20 17:59:24 +00:00
|
|
|
}
|
|
|
|
|
2022-11-30 20:51:44 +00:00
|
|
|
function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabProps) {
|
2022-09-05 21:22:28 +00:00
|
|
|
const { t } = useLocale();
|
|
|
|
const router = useRouter();
|
2022-10-20 17:59:24 +00:00
|
|
|
const { ref, calculateScroll, leftVisible, rightVisible } = useShouldShowArrows();
|
|
|
|
const handleLeft = () => {
|
|
|
|
if (ref.current) {
|
|
|
|
ref.current.scrollLeft -= 100;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleRight = () => {
|
|
|
|
if (ref.current) {
|
|
|
|
ref.current.scrollLeft += 100;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
return (
|
|
|
|
<div className="relative mb-4 flex flex-col justify-between lg:flex-row lg:items-center">
|
2023-04-05 18:14:46 +00:00
|
|
|
<h2 className="text-emphasis hidden text-base font-semibold leading-none sm:block">
|
2022-11-30 20:51:44 +00:00
|
|
|
{searchText
|
|
|
|
? t("search")
|
|
|
|
: t("explore_apps", {
|
|
|
|
category:
|
|
|
|
(selectedCategory && selectedCategory[0].toUpperCase() + selectedCategory.slice(1)) ||
|
|
|
|
t("all_apps"),
|
|
|
|
})}
|
2022-10-20 17:59:24 +00:00
|
|
|
</h2>
|
|
|
|
{leftVisible && (
|
2023-02-02 19:49:20 +00:00
|
|
|
<button onClick={handleLeft} className="absolute bottom-0 flex md:left-1/2 md:-top-1">
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="bg-default flex h-12 w-5 items-center justify-end">
|
2023-04-12 15:26:31 +00:00
|
|
|
<ChevronLeft className="text-subtle h-4 w-4" />
|
2022-10-20 17:59:24 +00:00
|
|
|
</div>
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="to-default flex h-12 w-5 bg-gradient-to-l from-transparent" />
|
2022-10-20 17:59:24 +00:00
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
<ul
|
|
|
|
className="no-scrollbar mt-3 flex max-w-full space-x-1 overflow-x-auto lg:mt-0 lg:max-w-[50%]"
|
|
|
|
onScroll={(e) => calculateScroll(e)}
|
|
|
|
ref={ref}>
|
|
|
|
<li
|
|
|
|
onClick={() => {
|
|
|
|
router.replace(router.asPath.split("?")[0], undefined, { shallow: true });
|
|
|
|
}}
|
|
|
|
className={classNames(
|
2023-04-05 18:14:46 +00:00
|
|
|
selectedCategory === null ? "bg-emphasis text-default" : "bg-muted text-emphasis",
|
2023-04-20 22:33:49 +00:00
|
|
|
"hover:bg-emphasis min-w-max rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
|
2022-10-20 17:59:24 +00:00
|
|
|
)}>
|
|
|
|
{t("all_apps")}
|
|
|
|
</li>
|
|
|
|
{categories.map((cat, pos) => (
|
|
|
|
<li
|
|
|
|
key={pos}
|
|
|
|
onClick={() => {
|
|
|
|
if (selectedCategory === cat) {
|
|
|
|
router.replace(router.asPath.split("?")[0], undefined, { shallow: true });
|
|
|
|
} else {
|
|
|
|
router.replace(router.asPath.split("?")[0] + `?category=${cat}`, undefined, {
|
|
|
|
shallow: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
className={classNames(
|
2023-04-05 18:14:46 +00:00
|
|
|
selectedCategory === cat ? "bg-emphasis text-default" : "bg-muted text-emphasis",
|
|
|
|
"hover:bg-emphasis rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
|
2022-10-20 17:59:24 +00:00
|
|
|
)}>
|
|
|
|
{cat[0].toUpperCase() + cat.slice(1)}
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
{rightVisible && (
|
2023-02-02 19:49:20 +00:00
|
|
|
<button onClick={handleRight} className="absolute bottom-0 right-0 flex md:-top-1">
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="to-default flex h-12 w-5 bg-gradient-to-r from-transparent" />
|
|
|
|
<div className="bg-default flex h-12 w-5 items-center justify-end">
|
2023-04-12 15:26:31 +00:00
|
|
|
<ChevronRight className="text-subtle h-4 w-4" />
|
2022-10-20 17:59:24 +00:00
|
|
|
</div>
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-01-04 11:00:01 +00:00
|
|
|
export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
|
2022-10-20 17:59:24 +00:00
|
|
|
const router = useRouter();
|
2022-11-30 20:51:44 +00:00
|
|
|
const { t } = useLocale();
|
2022-09-05 21:22:28 +00:00
|
|
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
2022-11-30 20:51:44 +00:00
|
|
|
const [appsContainerRef, enableAnimation] = useAutoAnimate<HTMLDivElement>();
|
2022-10-20 17:59:24 +00:00
|
|
|
|
2022-11-30 20:51:44 +00:00
|
|
|
if (searchText) {
|
2022-12-16 19:02:29 +00:00
|
|
|
enableAnimation && enableAnimation(false);
|
2022-11-30 20:51:44 +00:00
|
|
|
}
|
|
|
|
|
2022-09-05 21:22:28 +00:00
|
|
|
useEffect(() => {
|
|
|
|
const queryCategory =
|
|
|
|
typeof router.query.category === "string" && categories.includes(router.query.category)
|
|
|
|
? router.query.category
|
|
|
|
: null;
|
|
|
|
setSelectedCategory(queryCategory);
|
|
|
|
}, [router.query.category]);
|
|
|
|
|
2022-11-30 20:51:44 +00:00
|
|
|
const filteredApps = apps
|
|
|
|
.filter((app) =>
|
|
|
|
selectedCategory !== null
|
|
|
|
? app.categories
|
|
|
|
? app.categories.includes(selectedCategory)
|
|
|
|
: app.category === selectedCategory
|
|
|
|
: true
|
|
|
|
)
|
2023-01-18 18:48:10 +00:00
|
|
|
.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;
|
|
|
|
});
|
2022-11-30 20:51:44 +00:00
|
|
|
|
2022-09-05 21:22:28 +00:00
|
|
|
return (
|
2023-01-14 19:11:28 +00:00
|
|
|
<div>
|
2022-11-30 20:51:44 +00:00
|
|
|
<CategoryTab selectedCategory={selectedCategory} searchText={searchText} categories={categories} />
|
2022-12-16 19:02:29 +00:00
|
|
|
{filteredApps.length ? (
|
|
|
|
<div
|
2023-04-20 22:33:49 +00:00
|
|
|
className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-1 [@media(max-width:500px)]:grid-cols-1"
|
2022-12-16 19:02:29 +00:00
|
|
|
ref={appsContainerRef}>
|
|
|
|
{filteredApps.map((app) => (
|
|
|
|
<AppCard key={app.name} app={app} searchText={searchText} credentials={app.credentials} />
|
|
|
|
))}{" "}
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<EmptyScreen
|
2023-04-12 15:26:31 +00:00
|
|
|
Icon={Search}
|
2022-12-16 19:02:29 +00:00
|
|
|
headline={t("no_results")}
|
|
|
|
description={searchText ? searchText?.toString() : ""}
|
|
|
|
/>
|
|
|
|
)}
|
2022-09-05 21:22:28 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|