From 56191fb2d512fbbcf87b31c6e8b0493a47dd6033 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 2 May 2024 16:19:01 +0200 Subject: [PATCH 1/7] Update Digmathon --- .vscode/settings.json | 2 +- .../Digmathon/CongratulationsView/index.tsx | 3 +- .../Digmathon/Digmathon.stories.tsx | 20 ---- .../Digmathon/ProgressView/index.tsx | 95 ++++++++++++++-- .../Digmathon/ProgressView/styles.ts | 29 +++-- .../Digmathon/ProgressView/types.ts | 8 +- .../Digmathon/getProgressEmailLink.ts | 33 ++++++ .../RecentActivity/Digmathon/index.tsx | 9 +- .../RecentActivity/Digmathon/mockData.ts | 62 ++++++++--- .../RecentActivity/Digmathon/types.ts | 4 +- .../RecentActivity/RecentActivity.stories.tsx | 3 +- src/components/RecentActivity/actions.ts | 3 +- src/components/RecentActivity/tracking.ts | 8 +- src/components/RecentActivity/types.ts | 17 ++- .../useDigmathonProgressData.ts | 101 ++++++++++++------ src/components/common/App/typographies.ts | 6 ++ 16 files changed, 297 insertions(+), 106 deletions(-) create mode 100644 src/components/RecentActivity/Digmathon/getProgressEmailLink.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index a2da032a6..e80de0519 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,5 @@ }, "editor.defaultFormatter": "esbenp.prettier-vscode", "stylelint.validate": ["typescript"], - "cSpell.words": ["digma", "digmathon", "digmo", "undismiss"] + "cSpell.words": ["digma", "digmathon", "digmo", "leaderboard", "undismiss"] } diff --git a/src/components/RecentActivity/Digmathon/CongratulationsView/index.tsx b/src/components/RecentActivity/Digmathon/CongratulationsView/index.tsx index 0205d3332..c108ee543 100644 --- a/src/components/RecentActivity/Digmathon/CongratulationsView/index.tsx +++ b/src/components/RecentActivity/Digmathon/CongratulationsView/index.tsx @@ -1,4 +1,5 @@ import { useContext, useEffect } from "react"; +import { isString } from "../../../../typeGuards/isString"; import { sendTrackingEvent } from "../../../../utils/actions/sendTrackingEvent"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { ConfigContext } from "../../../common/App/ConfigContext"; @@ -19,7 +20,7 @@ const getEmailURL = ( const subject = `Digmathon Challenge Completed! [${userId}]`; const foundInsights = data - .filter((x) => x.isFound) + .filter((x) => isString(x.foundAt)) .map((x) => x.data?.title || x.type) .join(", "); const body = [ diff --git a/src/components/RecentActivity/Digmathon/Digmathon.stories.tsx b/src/components/RecentActivity/Digmathon/Digmathon.stories.tsx index a4c596a04..11edc6f91 100644 --- a/src/components/RecentActivity/Digmathon/Digmathon.stories.tsx +++ b/src/components/RecentActivity/Digmathon/Digmathon.stories.tsx @@ -1,7 +1,5 @@ import { Meta, StoryObj } from "@storybook/react"; import { Digmathon } from "."; -import { actions } from "../actions"; -import { mockedDigmathonProgressData } from "./mockData"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { @@ -23,15 +21,6 @@ export const Default: Story = { getData: () => { return undefined; } - }, - play: () => { - window.setTimeout(() => { - window.postMessage({ - type: "digma", - action: actions.SET_DIGMATHON_PROGRESS_DATA, - payload: mockedDigmathonProgressData - }); - }, 0); } }; @@ -40,14 +29,5 @@ export const Congratulations: Story = { getData: () => { return undefined; } - }, - play: () => { - window.setTimeout(() => { - window.postMessage({ - type: "digma", - action: actions.SET_DIGMATHON_PROGRESS_DATA, - payload: mockedDigmathonProgressData - }); - }, 0); } }; diff --git a/src/components/RecentActivity/Digmathon/ProgressView/index.tsx b/src/components/RecentActivity/Digmathon/ProgressView/index.tsx index 6be8d3704..7c194e1d7 100644 --- a/src/components/RecentActivity/Digmathon/ProgressView/index.tsx +++ b/src/components/RecentActivity/Digmathon/ProgressView/index.tsx @@ -1,20 +1,75 @@ -import { useEffect } from "react"; +import { useContext, useEffect } from "react"; +import { isString } from "../../../../typeGuards/isString"; +import { openURLInDefaultBrowser } from "../../../../utils/actions/openURLInDefaultBrowser"; import { sendTrackingEvent } from "../../../../utils/actions/sendTrackingEvent"; +import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; +import { ConfigContext } from "../../../common/App/ConfigContext"; +import { ChevronIcon } from "../../../common/icons/16px/ChevronIcon"; +import { DigmaLogoIcon } from "../../../common/icons/DigmaLogoIcon"; +import { Direction } from "../../../common/icons/types"; +import { Button } from "../../../common/v3/Button"; +import { actions } from "../../actions"; import { trackingEvents } from "../../tracking"; import { DigmathonInsightCard } from "../DigmathonInsightCard"; +import { getProgressEmailLink } from "../getProgressEmailLink"; import * as s from "./styles"; import { ProgressViewProps } from "./types"; -export const ProgressView = ({ data, foundIssuesCount }: ProgressViewProps) => { +const DIGMATHON_URL = "https://www.digma.ai/digmathon"; + +export const ProgressView = ({ data }: ProgressViewProps) => { + const config = useContext(ConfigContext); useEffect(() => { sendTrackingEvent(trackingEvents.DIGMATHON_PROGRESS_VIEWED); }, []); + const handleFindOutMoreButtonClick = () => { + sendUserActionTrackingEvent( + trackingEvents.DIGMATHON_FIND_OUT_MORE_BUTTON_CLICKED + ); + openURLInDefaultBrowser(DIGMATHON_URL); + }; + + const handleUpdateProgressButtonClick = () => { + sendUserActionTrackingEvent( + trackingEvents.DIGMATHON_UPDATE_PROGRESS_BUTTON_CLICKED + ); + const anchorElement = document.createElement("a"); + anchorElement.href = getProgressEmailLink(data.insights, config); + anchorElement.click(); + anchorElement.remove(); + + window.sendMessageToDigma({ + action: actions.UPDATE_DIGMATHON_PROGRESS_DATA + }); + }; + + const handleDigmathonLeaderboard = () => { + sendUserActionTrackingEvent( + trackingEvents.DIGMATHON_LEADERBOARD_BUTTON_CLICKED + ); + openURLInDefaultBrowser(DIGMATHON_URL); + }; + + const foundIssuesCount = data.insights.filter((x) => + isString(x.foundAt) + ).length; + + const isNewProgressDataAvailable = + (data.insights.length > 0 && data.lastUpdatedByUserAt === null) || + data.insights.some( + (x) => + isString(x.foundAt) && + isString(data.lastUpdatedByUserAt) && + new Date(x.foundAt).valueOf() >= + new Date(data.lastUpdatedByUserAt).valueOf() + ); + if (foundIssuesCount === 0) { return ( - + Start Digmathon @@ -22,6 +77,10 @@ export const ProgressView = ({ data, foundIssuesCount }: ProgressViewProps) => { issues. Check back here to see your progress! +