From d4d406b54c323edf3d89321754d9054bc4557998 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 20 Nov 2024 20:04:57 -0500
Subject: [PATCH] feat(ui): add actions for video modal clicks

---
 .../components/VideosModal/VideoCard.tsx      | 11 ++++++--
 .../components/VideosModal/VideosModal.tsx    | 25 +++++++++++++++++--
 .../VideosModal/VideosModalButton.tsx         | 14 +++++++++--
 .../web/src/features/system/store/actions.ts  |  4 +++
 4 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/system/store/actions.ts

diff --git a/invokeai/frontend/web/src/features/system/components/VideosModal/VideoCard.tsx b/invokeai/frontend/web/src/features/system/components/VideosModal/VideoCard.tsx
index 8e4275ea8b7..32b5699e181 100644
--- a/invokeai/frontend/web/src/features/system/components/VideosModal/VideoCard.tsx
+++ b/invokeai/frontend/web/src/features/system/components/VideosModal/VideoCard.tsx
@@ -1,6 +1,8 @@
 import { ExternalLink, Flex, Spacer, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import type { VideoData } from 'features/system/components/VideosModal/data';
-import { memo } from 'react';
+import { videoModalLinkClicked } from 'features/system/store/actions';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const formatTime = ({ minutes, seconds }: { minutes: number; seconds: number }) => {
@@ -9,7 +11,12 @@ const formatTime = ({ minutes, seconds }: { minutes: number; seconds: number })
 
 export const VideoCard = memo(({ video }: { video: VideoData }) => {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const { tKey, link, length } = video;
+  const handleLinkClick = useCallback(() => {
+    dispatch(videoModalLinkClicked(t(`supportVideos.videos.${tKey}.title`)));
+  }, [dispatch, t, tKey]);
+
   return (
     <Flex flexDir="column" gap={1}>
       <Flex alignItems="center" gap={2}>
@@ -18,7 +25,7 @@ export const VideoCard = memo(({ video }: { video: VideoData }) => {
         </Text>
         <Spacer />
         <Text variant="subtext">{formatTime(length)}</Text>
-        <ExternalLink fontSize="sm" href={link} label={t('supportVideos.watch')} />
+        <ExternalLink fontSize="sm" href={link} label={t('supportVideos.watch')} onClick={handleLinkClick} />
       </Flex>
       <Text fontSize="md" variant="subtext">
         {t(`supportVideos.videos.${tKey}.description`)}
diff --git a/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx b/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx
index 5f7c9e025cb..05419be5f1a 100644
--- a/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx
@@ -10,6 +10,7 @@ import {
   ModalOverlay,
   Text,
 } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { buildUseDisclosure } from 'common/hooks/useBoolean';
 import {
@@ -18,25 +19,45 @@ import {
   studioSessionsPlaylistLink,
 } from 'features/system/components/VideosModal/data';
 import { VideoCardList } from 'features/system/components/VideosModal/VideoCardList';
+import { videoModalLinkClicked } from 'features/system/store/actions';
 import { discordLink } from 'features/system/store/constants';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 export const [useVideosModal] = buildUseDisclosure(false);
 
 const StudioSessionsPlaylistLink = () => {
+  const dispatch = useAppDispatch();
+  const handleLinkClick = useCallback(() => {
+    dispatch(videoModalLinkClicked('Studio session playlist'));
+  }, [dispatch]);
+
   return (
     <ExternalLink
       fontWeight="semibold"
       href={studioSessionsPlaylistLink}
       display="inline-flex"
       label="Studio Sessions playlist"
+      onClick={handleLinkClick}
     />
   );
 };
 
 const DiscordLink = () => {
-  return <ExternalLink fontWeight="semibold" href={discordLink} display="inline-flex" label="Discord" />;
+  const dispatch = useAppDispatch();
+  const handleLinkClick = useCallback(() => {
+    dispatch(videoModalLinkClicked('Discord'));
+  }, [dispatch]);
+
+  return (
+    <ExternalLink
+      fontWeight="semibold"
+      href={discordLink}
+      display="inline-flex"
+      label="Discord"
+      onClick={handleLinkClick}
+    />
+  );
 };
 
 const components = {
diff --git a/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModalButton.tsx b/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModalButton.tsx
index 7436b8ec7f7..3b5169a14ae 100644
--- a/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModalButton.tsx
+++ b/invokeai/frontend/web/src/features/system/components/VideosModal/VideosModalButton.tsx
@@ -1,19 +1,29 @@
 import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { useVideosModal } from 'features/system/components/VideosModal/VideosModal';
-import { memo } from 'react';
+import { videoModalOpened } from 'features/system/store/actions';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiYoutubeLogoFill } from 'react-icons/pi';
 
 export const VideosModalButton = memo(() => {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
   const videosModal = useVideosModal();
+
+  const onClickOpen = useCallback(() => {
+    dispatch(videoModalOpened());
+    videosModal.open();
+  }, [videosModal, dispatch]);
+
   return (
     <IconButton
       aria-label={t('supportVideos.supportVideos')}
       variant="link"
       icon={<PiYoutubeLogoFill fontSize={20} />}
       boxSize={8}
-      onClick={videosModal.open}
+      onClick={onClickOpen}
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/system/store/actions.ts b/invokeai/frontend/web/src/features/system/store/actions.ts
new file mode 100644
index 00000000000..4be0a516256
--- /dev/null
+++ b/invokeai/frontend/web/src/features/system/store/actions.ts
@@ -0,0 +1,4 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const videoModalLinkClicked = createAction<string>('system/videoModalLinkClicked');
+export const videoModalOpened = createAction('system/videoModalOpened');