Add donation button

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;
     }
 

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) {
+function CommandLink({icon, command, text}: CommandLinkProps) {
-    return <a href="javascript:void(0)" onClick={e => cmd.execute(props.command || props.text)}>{props.text}</a>
+    
+    const onClick = () => cmd.execute(command || text);
+
+    if(icon != null)
+        return <a href="javascript:void(0)" onClick={onClick}><FontAwesomeIcon icon={icon} className="icon" />{text}</a>;
+
+    return <a href="javascript:void(0)" onClick={onClick}>{text}</a>;
 }
 
 export default CommandLink;

src/shell/AppState.ts

@@ -8,6 +8,7 @@ export type PersistedAppData = {
     version: number;
     debugMode: boolean | null;
     pageVisistsCount: number;
+    donationClicked: boolean
 }
 
 export type CommandResultView = {
@@ -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
         }
     }
 };

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; }

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 <ul className="top-links">                
                 <li>
-                    <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faGithub} size="lg" />Project on GitHub</a>
+                    <CommandLink text="donate" icon={faDonate} />
                 </li>
                 <li>
-                    <a href="https://twitter.com/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faTwitter} size="lg" /><span className="link-text">Twitter</span></a>
+                    <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faGithub} size="lg" />github</a>
                 </li>
                 <li>
-                    <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><FontAwesomeIcon className="icon" icon={faEnvelope} size="lg" /><span className="link-text">Send Feedback</span></a>
+                    <a href="https://twitter.com/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faTwitter} size="lg" /><span className="link-text">twitter</span></a>
+                </li>
+                <li>
+                    <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><FontAwesomeIcon className="icon" icon={faEnvelope} size="lg" /><span className="link-text">idea or feedback</span></a>
                 </li>
     </ul>;
 }

src/shell/module.tsx

@@ -31,6 +31,18 @@ const shellModule = {
             appState.addCommandResult(c.input, <TextResultView text={`Debug Mode: ${appState.debugMode}`}/>);
         }); 
 
+        cmd.command("donate", (c:CommandInput) => {
+
+            if(appState.onDonationClicked()) {
+                sendAnalyticsEvent({eventCategory: "DonationButton", eventAction: "Clicked"})
+            }
+            else {
+                sendAnalyticsEvent({eventCategory: "DonationButton", eventAction: "ClickedAgain"})
+            }
+
+            appState.addCommandResult(c.input, <TextResultView text={`Thank you for your interest in donation. This feature is under constraction. I'll let you know when it will be done.`}/>);
+        });
+
         cmd.command("track", (c:CommandInput) => {
             sendAnalyticsEvent({
                 eventCategory: 'General',