chore: configure base url (#179)

* chore: set base api url

* chore: change config varibales names

* chore: rename env var

* chore: set base url to match wakatime cli usage

src/components/Options.tsx

@@ -9,6 +9,7 @@ interface State {
   alertText: string;
   alertType: SuccessOrFailType;
   apiKey: string;
+  apiUrl: string;
   blacklist: string;
   displayAlert: boolean;
   hostname: string;
@@ -25,6 +26,7 @@ export default function Options(): JSX.Element {
     alertText: config.alert.success.text,
     alertType: config.alert.success.type,
     apiKey: '',
+    apiUrl: config.apiUrl,
     blacklist: '',
     displayAlert: false,
     hostname: '',
@@ -42,6 +44,7 @@ export default function Options(): JSX.Element {
   const restoreSettings = async (): Promise<void> => {
     const items = await browser.storage.sync.get({
       apiKey: config.apiKey,
+      apiUrl: config.apiUrl,
       blacklist: '',
       hostname: config.hostname,
       loggingStyle: config.loggingStyle,
@@ -54,6 +57,7 @@ export default function Options(): JSX.Element {
     setState({
       ...state,
       apiKey: items.apiKey as string,
+      apiUrl: items.apiUrl as string,
       blacklist: items.blacklist as string,
       hostname: items.hostname as string,
       loggingStyle: items.loggingStyle as string,
@@ -82,6 +86,7 @@ export default function Options(): JSX.Element {
     setState({ ...state, loading: true });
 
     const apiKey = state.apiKey;
+    const apiUrl = state.apiUrl;
     const theme = state.theme;
     const hostname = state.hostname;
     const loggingType = state.loggingType;
@@ -95,6 +100,7 @@ export default function Options(): JSX.Element {
     // Sync options with google storage.
     await browser.storage.sync.set({
       apiKey,
+      apiUrl,
       blacklist,
       hostname,
       loggingStyle,
@@ -109,6 +115,7 @@ export default function Options(): JSX.Element {
     setState({
       ...state,
       apiKey,
+      apiUrl,
       blacklist,
       displayAlert: true,
       hostname,
@@ -273,6 +280,23 @@ export default function Options(): JSX.Element {
               </div>
             </div>
 
+            <div className="form-group">
+              <label htmlFor="theme" className="col-lg-2 control-label">
+                API Url
+              </label>
+
+              <div className="col-lg-10">
+                <input
+                  type="text"
+                  className="form-control"
+                  value={state.apiUrl}
+                  onChange={(e) => setState({ ...state, apiUrl: e.target.value })}
+                  placeholder="https://wakatime.com/api/v1"
+                />
+                <span className="help-block">https://wakatime.com/api/v1</span>
+              </div>
+            </div>
+
             <div className="form-group row">
               <div className="col-lg-10 col-lg-offset-2 space-between align-items-center">
                 <div

src/components/WakaTime.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { ApiKeyReducer, ReduxSelector } from '../types/store';
-import { fetchUserData } from '../utils/user';
-import apiKeyInvalid from '../utils/apiKey';
+import { useDispatch, useSelector } from 'react-redux';
 import config from '../config/config';
+import { ApiKeyReducer, ReduxSelector } from '../types/store';
+import apiKeyInvalid from '../utils/apiKey';
+import { fetchUserData } from '../utils/user';
 import Alert from './Alert';
-import NavBar from './NavBar';
 import MainList from './MainList';
+import NavBar from './NavBar';
 
 export default function WakaTime(): JSX.Element {
   const dispatch = useDispatch();
@@ -35,7 +35,7 @@ export default function WakaTime(): JSX.Element {
       {isApiKeyValid && extensionState === 'notSignedIn' && (
         <Alert
           type={config.alert.failure.type}
-          text={'Invalid api key'}
+          text={'Invalid API key or API url'}
           onClick={() => browser.runtime.openOptionsPage()}
           style={{ cursor: 'pointer' }}
         />