diff --git a/frontend/src/ui/pages/Dashboard.tsx b/frontend/src/ui/pages/Dashboard.tsx
index cc2848d..572f611 100644
--- a/frontend/src/ui/pages/Dashboard.tsx
+++ b/frontend/src/ui/pages/Dashboard.tsx
@@ -142,18 +142,20 @@ const supportedMessages: EventSubNotificationType[] = [
EventSubNotificationType.SubscriptionGifted,
];
+const eventSubKeyFunction = (ev: EventSubNotification) =>
+ `${ev.subscription.type}-${ev.subscription.created_at}-${JSON.stringify(
+ ev.event,
+ )}`;
+
function TwitchEvent({ data }: { data: EventSubNotification }) {
const { t } = useTranslation();
const client = useAppSelector((state) => state.api.client);
const replay = () => {
- void client.putJSON(`twitch/ev/eventsub-event/${data.subscription.type}`, {
- ...data,
- subscription: {
- ...data.subscription,
- created_at: new Date().toISOString(),
- },
- });
+ void client.putJSON(
+ `twitch/ev/eventsub-event/${data.subscription.type}`,
+ data,
+ );
};
let content: JSX.Element | string;
@@ -390,10 +392,7 @@ function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
Date.parse(a.subscription.created_at),
)
.map((ev) => (
-
+
))}
@@ -441,27 +440,29 @@ function TwitchSection() {
const kv = useAppSelector((state) => state.api.client);
const [twitchEvents, setTwitchEvents] = useState([]);
- const keyfn = (ev: EventSubNotification) =>
- ev.subscription.id + ev.subscription.created_at;
+ const keyfn = (ev: EventSubNotification) => JSON.stringify(ev);
- const setCleanTwitchEvents = (events: EventSubNotification[]) => {
- const eventKeys = events.map(keyfn);
+ const addTwitchEvents = (events: EventSubNotification[]) => {
+ setTwitchEvents((currentEvents) => {
+ const allEvents = currentEvents.concat(events);
+ const eventKeys = allEvents.map(keyfn);
- // Clean up duplicates before setting to state
- const uniqueEvents = events.filter(
- (ev, pos) => eventKeys.indexOf(keyfn(ev)) === pos,
- );
- setTwitchEvents(uniqueEvents);
+ // Clean up duplicates before setting to state
+ const updatedEvents = allEvents.filter(
+ (ev, pos) => eventKeys.indexOf(keyfn(ev)) === pos,
+ );
+
+ return updatedEvents;
+ });
};
const loadRecentEvents = async () => {
const keymap = await kv.getKeysByPrefix('twitch/eventsub-history/');
const events = Object.values(keymap)
.map((value) => JSON.parse(value) as EventSubNotification[])
- .flat()
- .sort((a, b) => Date.parse(b.date) - Date.parse(a.date));
+ .flat();
- setCleanTwitchEvents(events);
+ addTwitchEvents(events);
};
useEffect(() => {
@@ -469,7 +470,10 @@ function TwitchSection() {
const onKeyChange = (value: string) => {
const event = JSON.parse(value) as EventSubNotification;
- void setCleanTwitchEvents([event, ...twitchEvents]);
+ if (!supportedMessages.includes(event.subscription.type)) {
+ return;
+ }
+ void addTwitchEvents([event]);
};
void kv.subscribePrefix('twitch/ev/eventsub-event/', onKeyChange);