From 86639f59b7bc2cbf4a257ed75570b27bfb218e97 Mon Sep 17 00:00:00 2001 From: Borys_Levytskyi Date: Mon, 18 Jan 2021 13:14:53 +0200 Subject: [PATCH] Add donation button --- public/analytics.js | 4 ++-- src/core/components/CommandLink.tsx | 13 +++++++++++-- src/shell/AppState.ts | 16 ++++++++++++++-- src/shell/components/TopLinks.css | 2 +- src/shell/components/TopLinks.tsx | 12 ++++++++---- src/shell/module.tsx | 12 ++++++++++++ 6 files changed, 48 insertions(+), 11 deletions(-) diff --git a/public/analytics.js b/public/analytics.js index dc2b349..ad02d78 100644 --- a/public/analytics.js +++ b/public/analytics.js @@ -9,12 +9,12 @@ if(disableAnalytics) { localStorage.setItem(key, "false"); - console.log('Analytics tracking disabled.'); + console.log('Analytics tracking disabled by local storage.'); return; } if(window.location.host !== 'bitwisecmd.com' && !SEND_ANALYTICS_FOR_NON_PROD) { - console.log("Analytics not tracked. Non-prod host") + console.log("Analytics not tracked. Non-prod host. SEND_ANALYTICS_FOR_NON_PROD="+SEND_ANALYTICS_FOR_NON_PROD); return; } diff --git a/src/core/components/CommandLink.tsx b/src/core/components/CommandLink.tsx index 1f76e20..c736d6c 100644 --- a/src/core/components/CommandLink.tsx +++ b/src/core/components/CommandLink.tsx @@ -1,13 +1,22 @@ +import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; import cmd from '../../shell/cmd'; type CommandLinkProps = { command?:string; text:string; + icon?: IconDefinition } -function CommandLink(props: CommandLinkProps) { - return cmd.execute(props.command || props.text)}>{props.text} +function CommandLink({icon, command, text}: CommandLinkProps) { + + const onClick = () => cmd.execute(command || text); + + if(icon != null) + return {text}; + + return {text}; } export default CommandLink; \ No newline at end of file diff --git a/src/shell/AppState.ts b/src/shell/AppState.ts index 4dc061a..5bf75e9 100644 --- a/src/shell/AppState.ts +++ b/src/shell/AppState.ts @@ -8,6 +8,7 @@ export type PersistedAppData = { version: number; debugMode: boolean | null; pageVisistsCount: number; + donationClicked: boolean } export type CommandResultView = { @@ -19,7 +20,7 @@ export type CommandResultView = { export type AppStateChangeHandler = (state: AppState) => void; export default class AppState { - + version: number = APP_VERSION; emphasizeBytes: boolean; debugMode: boolean = false; @@ -30,6 +31,7 @@ export default class AppState { wasOldVersion: boolean; env: string; pageVisitsCount: number; + donationClicked: boolean; constructor(persistData : PersistedAppData, env: string) { this.commandResults = []; @@ -42,6 +44,7 @@ export default class AppState { this.wasOldVersion = persistData.version != null && this.version > this.persistedVersion; this.debugMode = env !== 'prod' || persistData.debugMode === true; this.pageVisitsCount = persistData.pageVisistsCount || 0; + this.donationClicked = persistData.donationClicked; } addCommandResult(input : string, view : JSX.Element) { @@ -84,13 +87,22 @@ export default class AppState { this.triggerChanged(); } + onDonationClicked() : boolean{ + if(this.donationClicked === true) return false; + + this.donationClicked = true; + this.triggerChanged(); + return true; + } + getPersistData() : PersistedAppData { return { emphasizeBytes: this.emphasizeBytes, uiTheme: this.uiTheme, version: this.version, debugMode: this.debugMode, - pageVisistsCount: this.pageVisitsCount + pageVisistsCount: this.pageVisitsCount, + donationClicked: this.donationClicked } } }; diff --git a/src/shell/components/TopLinks.css b/src/shell/components/TopLinks.css index f08c633..727dbab 100644 --- a/src/shell/components/TopLinks.css +++ b/src/shell/components/TopLinks.css @@ -1,5 +1,5 @@ .top-links { position: absolute; right: 2em; top: 1em; list-style-type: none; margin: 0 } .top-links li { float: left; } -.top-links a { display: inline-block; padding: 10px 15px} +.top-links a { display: inline-block; padding: 5px 10px} .top-links .icon { margin-right: 5px; vertical-align: middle; } \ No newline at end of file diff --git a/src/shell/components/TopLinks.tsx b/src/shell/components/TopLinks.tsx index 93084f3..644d38c 100644 --- a/src/shell/components/TopLinks.tsx +++ b/src/shell/components/TopLinks.tsx @@ -1,19 +1,23 @@ import React from 'react'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import { faEnvelope } from "@fortawesome/free-solid-svg-icons"; +import { faEnvelope, faDonate } from "@fortawesome/free-solid-svg-icons"; import { faTwitter, faGithub} from "@fortawesome/free-brands-svg-icons"; import './TopLinks.css'; +import CommandLink from '../../core/components/CommandLink'; function TopLinks() { return ; } diff --git a/src/shell/module.tsx b/src/shell/module.tsx index 6b57b79..e6df92a 100644 --- a/src/shell/module.tsx +++ b/src/shell/module.tsx @@ -31,6 +31,18 @@ const shellModule = { appState.addCommandResult(c.input, ); }); + cmd.command("donate", (c:CommandInput) => { + + if(appState.onDonationClicked()) { + sendAnalyticsEvent({eventCategory: "DonationButton", eventAction: "Clicked"}) + } + else { + sendAnalyticsEvent({eventCategory: "DonationButton", eventAction: "ClickedAgain"}) + } + + appState.addCommandResult(c.input, ); + }); + cmd.command("track", (c:CommandInput) => { sendAnalyticsEvent({ eventCategory: 'General',