124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import type { ReactNode } from "react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { z } from "zod";
|
|
|
|
import type { CredentialOwner } from "@calcom/app-store/types";
|
|
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
|
|
import { Badge, ListItemText, Avatar } from "@calcom/ui";
|
|
import { AlertCircle } from "@calcom/ui/components/icon";
|
|
|
|
type ShouldHighlight =
|
|
| {
|
|
slug: string;
|
|
shouldHighlight: true;
|
|
}
|
|
| {
|
|
shouldHighlight?: never;
|
|
slug?: never;
|
|
};
|
|
|
|
type AppListCardProps = {
|
|
logo?: string;
|
|
title: string;
|
|
description: string;
|
|
actions?: ReactNode;
|
|
isDefault?: boolean;
|
|
isTemplate?: boolean;
|
|
invalidCredential?: boolean;
|
|
children?: ReactNode;
|
|
credentialOwner?: CredentialOwner;
|
|
} & ShouldHighlight;
|
|
|
|
const schema = z.object({ hl: z.string().optional() });
|
|
|
|
export default function AppListCard(props: AppListCardProps) {
|
|
const { t } = useLocale();
|
|
const {
|
|
logo,
|
|
title,
|
|
description,
|
|
actions,
|
|
isDefault,
|
|
slug,
|
|
shouldHighlight,
|
|
isTemplate,
|
|
invalidCredential,
|
|
children,
|
|
credentialOwner,
|
|
} = props;
|
|
const {
|
|
data: { hl },
|
|
} = useTypedQuery(schema);
|
|
const router = useRouter();
|
|
const [highlight, setHighlight] = useState(shouldHighlight && hl === slug);
|
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
const searchParams = useSearchParams();
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
if (shouldHighlight && highlight) {
|
|
const timer = setTimeout(() => {
|
|
setHighlight(false);
|
|
const _searchParams = new URLSearchParams(searchParams);
|
|
_searchParams.delete("hl");
|
|
router.replace(`${pathname}?${_searchParams.toString()}`);
|
|
}, 3000);
|
|
timeoutRef.current = timer;
|
|
}
|
|
return () => {
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
timeoutRef.current = null;
|
|
}
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
|
|
<div className="flex items-center gap-x-3 px-5 py-4">
|
|
{logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
|
|
<div className="flex grow flex-col gap-y-1 truncate">
|
|
<div className="flex items-center gap-x-2">
|
|
<h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
|
|
<div className="flex items-center gap-x-2">
|
|
{isDefault && <Badge variant="green">{t("default")}</Badge>}
|
|
{isTemplate && <Badge variant="red">Template</Badge>}
|
|
</div>
|
|
</div>
|
|
<ListItemText component="p">{description}</ListItemText>
|
|
{invalidCredential && (
|
|
<div className="flex gap-x-2 pt-2">
|
|
<AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
|
|
<ListItemText component="p" className="whitespace-pre-wrap text-red-500">
|
|
{t("invalid_credential")}
|
|
</ListItemText>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{credentialOwner && (
|
|
<div>
|
|
<Badge variant="gray">
|
|
<div className="flex items-center">
|
|
<Avatar
|
|
className="mr-2"
|
|
alt={credentialOwner.name || "Nameless"}
|
|
size="xs"
|
|
imageSrc={getPlaceholderAvatar(credentialOwner.avatar, credentialOwner?.name as string)}
|
|
/>
|
|
{credentialOwner.name}
|
|
</div>
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
|
|
{actions}
|
|
</div>
|
|
{children && <div className="w-full">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|