feat: add recent event replay

frontend/src/locale/en/translation.json

@@ -275,7 +275,8 @@
           "subscribed-multi": "<n>{{name}}</n> subscribed to you <m>({{months}} months)</m> <t>(Tier {{tier}})</t>",
           "subscrition-gift_one": "<n>{{name}}</n> gifted <c>{{count}}</c> subscription <t>(Tier {{tier}})</t>",
           "subscrition-gift_other": "<n>{{name}}</n> gifted <c>{{count}}</c> subscriptions <t>(Tier {{tier}})</t>"
-        }
+        },
+        "replay": "Replay event"
       }
     },
     "onboarding": {

frontend/src/locale/it/translation.json

@@ -156,7 +156,8 @@
           "subscribed-multi": "<n>{{name}}</n> si è abbonato <m>({{months}} mesi)</m> <t>(Livello {{tier}})</t>",
           "subscrition-gift_one": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamento <t>(Livello {{tier}})</t>",
           "subscrition-gift_other": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamenti <t>(Livello {{tier}})</t>"
-        }
+        },
+        "replay": "Ripeti evento"
       }
     },
     "debug": {

frontend/src/ui/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { CircleIcon, InfoCircledIcon } from '@radix-ui/react-icons';
+import { CircleIcon, InfoCircledIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { Trans, useTranslation } from 'react-i18next';
 import {
   EventSubNotification,
@@ -6,6 +6,7 @@ import {
   unwrapEvent,
 } from '~/lib/eventSub';
 import { useLiveKey } from '~/lib/react';
+import { useAppSelector } from '~/store';
 import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
 import WIPNotice from '../components/utils/WIPNotice';
 import BrowserLink from '../components/BrowserLink';
@@ -87,6 +88,17 @@ const TwitchEventContainer = styled('div', {
 const TwitchEventContent = styled('div', {
   flex: 1,
 });
+const TwitchEventActions = styled('div', {
+  display: 'flex',
+  margin: '0 10px',
+  '& a': {
+    color: '$gray10',
+    '&:hover': {
+      color: '$gray12',
+      cursor: 'pointer',
+    },
+  },
+});
 const TwitchEventTime = styled('time', {
   color: '$gray10',
   fontSize: '13px',
@@ -107,6 +119,17 @@ const supportedMessages: EventSubNotificationType[] = [
 
 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: {
+        ...data.subscription,
+        created_at: new Date().toISOString(),
+      },
+    });
+  };
 
   let content: JSX.Element | string;
   const message = unwrapEvent(data);
@@ -292,13 +315,23 @@ function TwitchEvent({ data }: { data: EventSubNotification }) {
       >
         {date.toLocaleTimeString()}
       </TwitchEventTime>
+      <TwitchEventActions>
+        <a
+          aria-label={t('pages.dashboard.twitch-events.replay')}
+          title={t('pages.dashboard.twitch-events.replay')}
+          onClick={() => {
+            replay();
+          }}
+        >
+          <UpdateIcon />
+        </a>
+      </TwitchEventActions>
     </TwitchEventContainer>
   );
 }
 
 function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
   const { t } = useTranslation();
-  // TODO Include a note specifying that it's not ALL events!!
   return (
     <>
       <SectionHeader>
@@ -360,7 +393,6 @@ function TwitchSection() {
   const twitchEvents = useLiveKey<EventSubNotification[]>(
     'twitch/eventsub-history',
   );
-  console.log(twitchEvents);
 
   return (
     <>

frontend/src/ui/pages/TwitchSettings.tsx

@@ -4,10 +4,9 @@ import { helix } from '@wailsapp/go/models';
 import { BrowserOpenURL } from '@wailsapp/runtime/runtime';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import eventsubTests from '~/data/eventsub-tests';
 import { useModule, useStatus } from '~/lib/react';
-import { RootState, useAppDispatch } from '~/store';
+import { useAppDispatch, useAppSelector } from '~/store';
 import apiReducer, { modules } from '~/store/api/reducer';
 import { checkTwitchKeys } from '~/lib/twitch';
 import BrowserLink from '../components/BrowserLink';
@@ -376,7 +375,7 @@ const TwitchName = styled('p', { fontWeight: 'bold' });
 function TwitchEventSubSettings() {
   const { t } = useTranslation();
   const [userStatus, setUserStatus] = useState<helix.User | SyncError>(null);
-  const kv = useSelector((state: RootState) => state.api.client);
+  const kv = useAppSelector((state) => state.api.client);
 
   const getUserInfo = async () => {
     try {