118 lines
3.9 KiB
TypeScript
118 lines
3.9 KiB
TypeScript
import { NotificationActions } from "../../../action/NotificationActions";
|
|
import { SlackReactionPreview } from "../preview/SlackReactionPreview";
|
|
import { SlackBotInfo, SlackReaction, SlackUser } from "../types";
|
|
import { getAvatarIcon, MutatePromise } from "@raycast/utils";
|
|
import { getSlackIconUrl, getSlackUserAvatarUrl } from "..";
|
|
import { Notification } from "../../../notification";
|
|
import { Icon, Image, List } from "@raycast/api";
|
|
import { Page } from "../../../types";
|
|
import { match, P } from "ts-pattern";
|
|
|
|
export type SlackReactionNotificationListItemProps = {
|
|
notification: Notification;
|
|
slack_reaction: SlackReaction;
|
|
mutate: MutatePromise<Page<Notification> | undefined>;
|
|
};
|
|
|
|
export function SlackReactionNotificationListItem({
|
|
notification,
|
|
slack_reaction,
|
|
mutate,
|
|
}: SlackReactionNotificationListItemProps) {
|
|
const subtitle = getSlackReactionNotificationSubtitle(slack_reaction);
|
|
|
|
const author = getSlackReactionAuthorAccessory(slack_reaction);
|
|
const team = getSlackReactionTeamAccessory(slack_reaction);
|
|
const updated_at = "2023-01-01"; // TODO
|
|
|
|
const accessories: List.Item.Accessory[] = [{ date: new Date(updated_at), tooltip: `Updated at ${updated_at}` }];
|
|
|
|
if (author) {
|
|
accessories.unshift(author);
|
|
}
|
|
if (team) {
|
|
accessories.unshift(team);
|
|
}
|
|
|
|
return (
|
|
<List.Item
|
|
key={notification.id}
|
|
title={notification.title}
|
|
icon={{ source: { light: "slack-logo-dark.svg", dark: "slack-logo-light.svg" } }}
|
|
subtitle={subtitle}
|
|
accessories={accessories}
|
|
actions={
|
|
<NotificationActions
|
|
notification={notification}
|
|
detailsTarget={<SlackReactionPreview notification={notification} slack_reaction={slack_reaction} />}
|
|
mutate={mutate}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function getSlackReactionNotificationSubtitle(slack_reaction: SlackReaction): string {
|
|
return match(slack_reaction.item)
|
|
.with(
|
|
{
|
|
type: P.union("Message", "File"),
|
|
content: P.select(),
|
|
},
|
|
(slack_reaction_item) => {
|
|
const channelName = slack_reaction_item.channel?.name;
|
|
return channelName ? `#${channelName}` : "";
|
|
},
|
|
)
|
|
.otherwise(() => "");
|
|
}
|
|
|
|
function getSlackReactionAuthorAccessory(slack_reaction: SlackReaction): List.Item.Accessory | null {
|
|
return match(slack_reaction.item)
|
|
.with(
|
|
{
|
|
type: "Message",
|
|
content: P.select(),
|
|
},
|
|
(slackMessageDetails) => {
|
|
return match(slackMessageDetails.sender)
|
|
.with({ type: "User", content: P.select() }, (slackUser: SlackUser) => {
|
|
const userAvatarUrl = getSlackUserAvatarUrl(slackUser);
|
|
const userName = slackUser.real_name || "Unknown";
|
|
return {
|
|
icon: userAvatarUrl ? { source: userAvatarUrl, mask: Image.Mask.Circle } : getAvatarIcon(userName),
|
|
tooltip: userName,
|
|
};
|
|
})
|
|
.with({ type: "Bot", content: P.select() }, (slackBot: SlackBotInfo) => {
|
|
const botAvatarUrl = getSlackIconUrl(slackBot.icons);
|
|
return {
|
|
icon: botAvatarUrl ? { source: botAvatarUrl, mask: Image.Mask.Circle } : getAvatarIcon(slackBot.name),
|
|
tooltip: slackBot.name,
|
|
};
|
|
})
|
|
.otherwise(() => ({ icon: Icon.Person, tooltip: "Unknown" }));
|
|
},
|
|
)
|
|
.otherwise(() => null);
|
|
}
|
|
|
|
function getSlackReactionTeamAccessory(slack_reaction: SlackReaction): List.Item.Accessory | null {
|
|
return match(slack_reaction.item)
|
|
.with(
|
|
{
|
|
type: P.union("Message", "File"),
|
|
content: P.select(),
|
|
},
|
|
(slack_reaction_item) => {
|
|
const teamName = slack_reaction_item.team.name;
|
|
const teamIconUrl = getSlackIconUrl(slack_reaction_item.team.icon);
|
|
if (!teamName || !teamIconUrl) {
|
|
return null;
|
|
}
|
|
return { icon: { source: teamIconUrl, mask: Image.Mask.Circle }, tooltip: teamName };
|
|
},
|
|
)
|
|
.otherwise(() => null);
|
|
}
|