Use custom api url for external links

Author: alanhamlett

src/components/MainList.tsx

@@ -6,6 +6,7 @@ import { userLogout } from '../reducers/currentUser';
 import { ReduxSelector } from '../types/store';
 import { User } from '../types/user';
 import changeExtensionState from '../utils/changeExtensionStatus';
+import { getWebsiteUrl } from '../utils/settings';
 
 export interface MainListProps {
   loggingEnabled: boolean;
@@ -15,10 +16,10 @@ const openOptionsPage = async (): Promise<void> => {
   await browser.runtime.openOptionsPage();
 };
 
-export default function MainList({
+export default async function MainList({
   loggingEnabled,
   totalTimeLoggedToday,
-}: MainListProps): JSX.Element {
+}: MainListProps): Promise<JSX.Element> {
   const dispatch = useDispatch();
 
   const user: User | undefined = useSelector(
@@ -53,6 +54,8 @@ export default function MainList({
     </div>
   ) : null;
 
+  const url = await getWebsiteUrl();
+
   return (
     <div>
       {user ? (
@@ -119,7 +122,7 @@ export default function MainList({
           <a
             target="_blank"
             rel="noreferrer"
-            href="https://wakatime.com/login"
+            href={`${url}/login`}
             className="list-group-item text-body-secondary"
           >
             <i className="fa fa-fw fa-sign-in me-2" />

src/components/NavBar.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ReduxSelector } from '../types/store';
 import { User } from '../types/user';
+import { getWebsiteUrl } from '../utils/settings';
 
-export default function NavBar(): JSX.Element {
+export default async function NavBar(): Promise<Promise<JSX.Element>> {
   const user: User | undefined = useSelector(
     (selector: ReduxSelector) => selector.currentUser.user,
   );
@@ -20,13 +21,14 @@ export default function NavBar(): JSX.Element {
     }
   };
 
-  const customRules = () => {
+  const customRules = async () => {
     if (user) {
+      const url = await getWebsiteUrl();
       return (
         <li className="mb-2">
           <a
             target="_blank"
-            href="https://wakatime.com/settings/rules"
+            href={`${url}/settings/rules`}
             rel="noreferrer"
             className="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
           >
@@ -40,13 +42,14 @@ export default function NavBar(): JSX.Element {
     }
   };
 
-  const dashboard = () => {
+  const dashboard = async () => {
     if (user) {
+      const url = await getWebsiteUrl();
       return (
         <li className="mb-2">
           <a
             target="_blank"
-            href="https://wakatime.com/dashboard"
+            href={url}
             rel="noreferrer"
             className="text-body-secondary link-underline link-underline-opacity-0 d-flex w-100 align-items-center"
           >
@@ -84,8 +87,8 @@ export default function NavBar(): JSX.Element {
       <div className="collapse navbar-collapse mt-4" id="userInfoCollapse">
         {signedInAs()}
         <ul className="nav navbar-nav border-bottom pb-2">
-          {customRules()}
-          {dashboard()}
+          {await customRules()}
+          {await dashboard()}
           <li className="dropdown">
             <a
               href="#"

src/core/WakaTimeCore.ts

@@ -1,18 +1,18 @@
-import { openDB } from 'idb';
 import browser, { Tabs } from 'webextension-polyfill';
-/* eslint-disable no-fallthrough */
-/* eslint-disable default-case */
+import { openDB } from 'idb';
 import moment from 'moment';
 import { v4 as uuid4 } from 'uuid';
+import config, { ExtensionStatus } from '../config/config';
+import { EntityType, Heartbeat, HeartbeatsBulkResponse } from '../types/heartbeats';
+import getDomainFromUrl, { getDomain } from '../utils/getDomainFromUrl';
+import { IS_EDGE, IS_FIREFOX, getOperatingSystem } from '../utils/operatingSystem';
+import { Settings, getApiUrl, getSettings } from '../utils/settings';
+
 import { OptionalHeartbeat } from '../types/sites';
 import { changeExtensionStatus } from '../utils/changeExtensionStatus';
-import getDomainFromUrl, { getDomain } from '../utils/getDomainFromUrl';
-import { getOperatingSystem, IS_EDGE, IS_FIREFOX } from '../utils/operatingSystem';
-import { getSettings, Settings } from '../utils/settings';
-import { getApiUrl } from '../utils/user';
 
-import config, { ExtensionStatus } from '../config/config';
-import { EntityType, Heartbeat, HeartbeatsBulkResponse } from '../types/heartbeats';
+/* eslint-disable no-fallthrough */
+/* eslint-disable default-case */
 
 class WakaTimeCore {
   tabsWithDevtoolsOpen: Tabs.Tab[];
@@ -185,7 +185,7 @@ class WakaTimeCore {
       const request: RequestInit = {
         body: JSON.stringify(
           heartbeats.map((heartbeat) => {
-            return { ...heartbeat, userAgent };
+            return { ...heartbeat, plugin: userAgent };
           }),
         ),
         credentials: 'omit',

src/reducers/currentUser.ts

@@ -1,9 +1,10 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import axios, { AxiosResponse } from 'axios';
 import browser from 'webextension-polyfill';
-import config from '../config/config';
 import { CurrentUser, User, UserPayload } from '../types/user';
-import { getApiUrl } from '../utils/user';
+
+import config from '../config/config';
+import { getApiUrl } from '../utils/settings';
 
 interface setUserAction {
   payload: User | undefined;

src/utils/settings.ts

@@ -83,3 +83,21 @@ export const getSettings = async (): Promise<Settings> => {
 export const saveSettings = async (settings: Settings): Promise<void> => {
   return browser.storage.sync.set(settings);
 };
+
+export const getApiUrl = async () => {
+  const settings = await browser.storage.sync.get({
+    apiUrl: config.apiUrl,
+  });
+  let apiUrl = (settings.apiUrl as string) || config.apiUrl;
+  const suffixes = ['/', '.bulk', '/users/current/heartbeats', '/heartbeats', '/heartbeat'];
+  for (const suffix of suffixes) {
+    if (apiUrl.endsWith(suffix)) {
+      apiUrl = apiUrl.slice(0, -suffix.length);
+    }
+  }
+  return apiUrl;
+};
+
+export const getWebsiteUrl = async () => {
+  return (await getApiUrl()).replace('/api/v1', '').replace('://api.', '://');
+};

src/utils/user.ts

@@ -1,28 +1,15 @@
 import { AnyAction, Dispatch } from '@reduxjs/toolkit';
 import axios, { AxiosResponse } from 'axios';
-import browser from 'webextension-polyfill';
-
 import moment from 'moment';
-import config from '../config/config';
+import browser from 'webextension-polyfill';
 import { setApiKey, setLoggingEnabled, setTotalTimeLoggedToday } from '../reducers/configReducer';
-import { setUser } from '../reducers/currentUser';
 import { GrandTotal, Summaries } from '../types/summaries';
 import { ApiKeyPayload, AxiosUserResponse, User } from '../types/user';
-import changeExtensionState from './changeExtensionStatus';
 
-export const getApiUrl = async () => {
-  const settings = await browser.storage.sync.get({
-    apiUrl: config.apiUrl,
-  });
-  let apiUrl = (settings.apiUrl as string) || config.apiUrl;
-  const suffixes = ['/', '.bulk', '/users/current/heartbeats', '/heartbeats', '/heartbeat'];
-  for (const suffix of suffixes) {
-    if (apiUrl.endsWith(suffix)) {
-      apiUrl = apiUrl.slice(0, -suffix.length);
-    }
-  }
-  return apiUrl;
-};
+import config from '../config/config';
+import { setUser } from '../reducers/currentUser';
+import changeExtensionState from './changeExtensionStatus';
+import { getApiUrl } from './settings';
 
 /**
  * Checks if the user is logged in.