Merge branch 'master' of https://github.com/evansloan/collectionlog.net

evansloan · Sep 13, 2023 · 473a65f · 473a65f
2 parents 139db22 + e1ed15f
commit 473a65f
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 50 deletions.
diff --git a/src/api/twitch/twitch-api.ts b/src/api/twitch/twitch-api.ts
@@ -55,6 +55,10 @@ export default class TwitchAPI {
     }
 
     const url = 'streams';
+    const headers = {
+      Authorization: `Bearer ${this.accessToken}`,
+      'Client-Id': TwitchAPI.CLIENT_ID,
+    };
     const params = {
       game_id: TwitchAPI.GAME_ID,
       type: 'live',
@@ -63,10 +67,7 @@ export default class TwitchAPI {
 
     let res = await TwitchAPI.axiosInstance.get(url, {
       params,
-      headers: {
-        Authorization: `Bearer ${this.accessToken}`,
-        'Client-Id': TwitchAPI.CLIENT_ID,
-      },
+      headers,
     });
 
     const streams = res.data.data as any[];
@@ -75,10 +76,7 @@ export default class TwitchAPI {
       params.after = res.data.pagination.cursor;
       res = await TwitchAPI.axiosInstance.get(url, {
         params,
-        headers: {
-          Authorization: `Bearer ${this.accessToken}`,
-          'Client-Id': TwitchAPI.CLIENT_ID,
-        },
+        headers,
       });
 
       streams.push(...res.data.data);

diff --git a/src/components/elements/Button.tsx b/src/components/elements/Button.tsx
@@ -26,30 +26,32 @@ const Button = (props: ButtonProps) => {
     buttonClass = 'btn-cutout bg-grey hover:bg-dark-red border-accent hover:border-darker-red';
   }
 
-  let buttonDom = (
-    <button
-      {...props}
-      className={`p-2 ${buttonClass} border-2 text-white text-shadow ${props.className ?? ''}`}
-    >
-      <div className='flex justify-around items-center'>
-        {props.icon &&
-          <img src={props.icon} alt={props.iconAlt} className='w-[50px]'/>
-        }
-        {props.title}
-      </div>
-    </button>
+  let buttonContent = (
+    <div className='flex justify-around items-center'>
+      {props.icon &&
+        <img src={props.icon} alt={props.iconAlt} className='w-[40px]' />
+      }
+      {props.title}
+    </div>
   );
 
   // Wrap the button in an anchor if we should be redirecting outwards
   if (props.externalLink) {
-    buttonDom = (
-      <a href={props.externalLink}>
-        {buttonDom}
+    buttonContent = (
+      <a href={props.externalLink} className='no-underline text-white'>
+        {buttonContent}
       </a>
     );
   }
 
-  return buttonDom;
+  return (
+    <button
+      {...props}
+      className={`p-2 ${buttonClass} border-2 text-white text-shadow ${props.className ?? ''}`}
+    >
+      {buttonContent}
+    </button>
+  );
 };
 
 export default Button;
diff --git a/src/components/elements/__snapshots__/Button.test.tsx.snap b/src/components/elements/__snapshots__/Button.test.tsx.snap
@@ -1,39 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button component should render with external link "https://example.com" 1`] = `
-<a
-  href="https://example.com"
+<button
+  className="p-2 btn-standard border-black border-2 text-white text-shadow "
+  externalLink="https://example.com"
+  title="test"
 >
-  <button
-    className="p-2 btn-standard border-black border-2 text-white text-shadow "
-    externalLink="https://example.com"
-    title="test"
+  <a
+    className="no-underline text-white"
+    href="https://example.com"
   >
     <div
       className="flex justify-around items-center"
     >
       test
     </div>
-  </button>
-</a>
+  </a>
+</button>
 `;
 
 exports[`Button component should render with external link "https://runelite.net/" 1`] = `
-<a
-  href="https://runelite.net/"
+<button
+  className="p-2 btn-standard border-black border-2 text-white text-shadow "
+  externalLink="https://runelite.net/"
+  title="test"
 >
-  <button
-    className="p-2 btn-standard border-black border-2 text-white text-shadow "
-    externalLink="https://runelite.net/"
-    title="test"
+  <a
+    className="no-underline text-white"
+    href="https://runelite.net/"
   >
     <div
       className="flex justify-around items-center"
     >
       test
     </div>
-  </button>
-</a>
+  </a>
+</button>
 `;
 
 exports[`Button component should render with icon "discord" 1`] = `
@@ -48,7 +50,7 @@ exports[`Button component should render with icon "discord" 1`] = `
   >
     <img
       alt="discord"
-      className="w-[50px]"
+      className="w-[40px]"
       src="discord.png"
     />
     test
@@ -68,7 +70,7 @@ exports[`Button component should render with icon "github" 1`] = `
   >
     <img
       alt="github"
-      className="w-[50px]"
+      className="w-[40px]"
       src="github.png"
     />
     test

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -1,4 +1,5 @@
 import { gitHubUrl, pluginUrl } from '../../app/constants';
+import AnalyticsService from '../../services/analytics';
 
 const Footer = () => {
   return (
@@ -15,7 +16,7 @@ const Footer = () => {
       </p>
       <p>
         Have a problem or found a bug? Submit an issue on {' '}
-        <a href={gitHubUrl + '/issues/new/choose'}>GitHub</a>
+        <a href={gitHubUrl + '/issues/new/choose'} onClick={() => AnalyticsService.githubNavEvent('footer')}>GitHub</a>
       </p>
     </footer>
   );

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -195,7 +195,7 @@ const Header = () => {
           <Link to='/'>Home</Link>
           <Link to='/hiscores/1'>Hiscores</Link>
           <div className='flex'>
-            <a href={discordUrl}>Join the Log Hunters Discord server</a>
+            <a href={discordUrl} onClick={() => AnalyticsService.discordNavEvent('header')}>Join the Log Hunters Discord server</a>
             <img className='w-[25px] ml-2' src={discordIcon} />
           </div>
         </DropDown>

diff --git a/src/index.scss b/src/index.scss
@@ -84,12 +84,12 @@ button {
 input {
   text-shadow: $text-shadow;
 
-  /** 
+  /**
   * stupid way to get around chrome autofill background
   * color bug
   */
   &:-webkit-autofill,
-  &:-webkit-autofill:hover, 
+  &:-webkit-autofill:hover,
   &:-webkit-autofill:focus {
     box-shadow: 0 0 0 50px $bg-light inset;
     -webkit-box-shadow: 0 0 0 50px $bg-light inset;

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -15,6 +15,7 @@ import {
   Tabs,
 } from '../components/elements';
 import { PageContainer, PageHeader } from '../components/layout';
+import AnalyticsService from '../services/analytics';
 import { formatDate } from '../utils';
 
 const Home = () => {
@@ -86,7 +87,12 @@ const Home = () => {
                     :
                     streams.map((stream, i) => {
                       return (
-                        <a key={`${stream.title}-${i}`} className='w-1/4 text-center no-underline' href={`https://twitch.tv/${stream.user_login}`}>
+                        <a
+                          key={`${stream.title}-${i}`}
+                          className='w-1/4 text-center no-underline'
+                          href={`https://twitch.tv/${stream.user_login}`}
+                          onClick={() => AnalyticsService.twitchNavEvent(stream.user_name)}
+                        >
                           <img className='m-auto' src={stream.thumbnail_url.replace(/{width}/g, '150').replace(/{height}/g, '100')} />
                           <h4 className='px-2 text-orange font-bold overflow-hidden text-ellipsis whitespace-nowrap'>{stream.title}</h4>
                           <p>{stream.user_name}</p>
@@ -143,19 +149,21 @@ const Home = () => {
                 <Button
                   type='button'
                   icon={discordIcon}
-                  className='block w-1/4 m-auto bg-[#6A5ACD] hover:bg-[#6d67b6] text-lg'
+                  className='block w-1/3 m-auto bg-[#6A5ACD] hover:bg-[#6d67b6] text-lg'
                   title='Open in Discord'
                   externalLink={discordUrl}
+                  onClick={() => AnalyticsService.discordNavEvent('contribute')}
                 />
               </div>
               <div className='flex-1'>
                 <p>collectionlog.net is open source and open to contributions</p>
                 <Button
                   type='button'
                   icon={githubIcon}
-                  className='block w-1/4 m-auto bg-black hover:bg-gray-500 text-lg'
+                  className='block w-1/3 m-auto bg-black hover:bg-gray-500 text-lg'
                   title='View on GitHub'
                   externalLink={gitHubUrl}
+                  onClick={() => AnalyticsService.githubNavEvent('contribute')}
                 />
               </div>
             </div>

diff --git a/src/pages/Log.tsx b/src/pages/Log.tsx
@@ -64,7 +64,7 @@ const Log = () => {
       tab,
       page: paramsPage,
     });
-    updateUrl(`/${URL_PATH}/${params.username}/${openView.page}`);
+    updateUrl(`/${URL_PATH}/${params.username}/${paramsPage}`);
 
     AnalyticsService.clTabChangeEvent(openView);
   }, [collectionLog]);

diff --git a/src/services/analytics.ts b/src/services/analytics.ts
@@ -15,10 +15,14 @@ class AnalyticsService {
   private static readonly ACTION_TAB_CHANGE = 'tab_change';
   private static readonly ACTION_PAGE_CHANGE = 'page_change';
   private static readonly ACTION_USER_SEARCH = 'user_search';
+  private static readonly ACTION_DISCORD = 'discord';
+  private static readonly ACTION_GITHUB = 'github';
+  private static readonly ACTION_TWITCH = 'twitch';
   private static readonly CATEGORY_INTERACTION = 'interaction';
   private static readonly CATEGORY_SEARCH = 'search';
   private static readonly EVENT_COLLECTION_LOG = 'collection_log';
   private static readonly EVENT_HISCORES = 'hiscores';
+  private static readonly EVENT_EXTERNAL = 'external';
 
   private static isInitialized = false;
 
@@ -65,6 +69,7 @@ class AnalyticsService {
    *
    * @param action Event action
    * @param label Event label
+   * @param category Event category
    */
   private static collectionLogEvent(action: string, label: string, category: string = this.CATEGORY_INTERACTION) {
     this.sendEvent(this.EVENT_COLLECTION_LOG, {
@@ -97,6 +102,7 @@ class AnalyticsService {
    *
    * @param action Event action
    * @param label Event label
+   * @param category Event category
    */
   private static hiscoresEvent(action: string, label: EventLabel, category: string = this.CATEGORY_INTERACTION) {
     this.sendEvent(this.EVENT_HISCORES, {
@@ -106,6 +112,48 @@ class AnalyticsService {
     });
   }
 
+  /**
+   * Send discord naviagtion event to GA
+   *
+   * @param loc Location of link on collectionlog.net (header, contribute page)
+   */
+  public static discordNavEvent(loc: string) {
+    this.externalEvent(this.ACTION_DISCORD, loc);
+  }
+
+  /**
+   * Send twitch navigation event to GA
+   *
+   * @param username Twitch user navigated to
+   */
+  public static twitchNavEvent(username: string) {
+    this.externalEvent(this.ACTION_TWITCH, username);
+  }
+
+  /**
+   * Send github navigation event to GA
+   *
+   * @param loc Location of link on collectionlog.net (footer, contribute page)
+   */
+  public static githubNavEvent(loc: string) {
+    this.externalEvent(this.ACTION_GITHUB, loc);
+  }
+
+  /**
+   * Send external event to GA
+   *
+   * @param action Event action
+   * @param label Event label
+   * @param category Event category
+   */
+  private static externalEvent(action: string, label: EventLabel, category: string = this.CATEGORY_INTERACTION) {
+    this.sendEvent(this.EVENT_EXTERNAL, {
+      category,
+      action,
+      label,
+    });
+  }
+
   /**
    * Send event to GA
    *