Update to single API key

Author: rzats

src/components/dialogs/ImportAPIDialog.svelte

@@ -68,14 +68,6 @@
 <Dialog title="Load from Epidata API" on:close>
   <form class="uk-form-stacked" {id} on:submit={onSubmit}>
     <div>
-      <div class="uk-form-controls uk-form-controls-text">
-        <div class="uk-form-controls uk-form-controls-text api">
-          <label
-            ><input class="uk-checkbox" type="checkbox" bind:checked={$storeApiKeys} />
-            Save API keys & auth tokens</label
-          >
-        </div>
-      </div>
       <div class="uk-form-label">Data Source</div>
       <div class="uk-form-controls uk-form-controls-text">
         <label
@@ -181,16 +173,26 @@
     {/if}
   </form>
 
-  <button slot="footer" class="uk-button uk-button-primary" type="submit" form={id} disabled={loading}>
-    Fetch Data
-    {#if loading}
-      <div uk-spinner />
-    {/if}
-  </button>
+  <div slot="footer">
+    <div class="uk-form-controls uk-form-controls-text container">
+      <button class="uk-button uk-button-primary" type="submit" form={id} disabled={loading}>
+        Fetch Data
+        {#if loading}
+          <div uk-spinner />
+        {/if}
+      </button>
+      <label
+        ><input class="uk-checkbox" type="checkbox" bind:checked={$storeApiKeys} />
+        Save API keys & auth tokens</label
+      >
+    </div>
+  </div>
 </Dialog>
 
 <style>
-  .api {
-    float: right;
+  .container {
+    display: flex;
+    align-items: center;
+    column-gap: 2em;
   }
 </style>

src/components/dialogs/apiKeySelections.ts

@@ -1,32 +1,23 @@
-export default class ApiKeySelections {
-  cdc = '';
-  fluView = '';
-  ght = '';
-  quidel = '';
-  sensors = '';
-  twitter = '';
-}
-
 export function getStoreApiKeys() {
   try {
     if (localStorage.getItem('store-api')) {
       return JSON.parse(localStorage.getItem('store-api')!) as boolean;
     }
-    return true;
+    return false;
   } catch {
     localStorage.removeItem('store-api');
-    return true;
+    return false;
   }
 }
 
-export function getApiKeySelections() {
+export function getApiKey() {
   try {
     if (localStorage.getItem('api')) {
-      return JSON.parse(localStorage.getItem('api')!) as ApiKeySelections;
+      return JSON.parse(localStorage.getItem('api')!) as string;
     }
-    return new ApiKeySelections();
+    return '';
   } catch {
     localStorage.removeItem('api');
-    return new ApiKeySelections();
+    return '';
   }
 }

src/components/dialogs/dataSources/CDC.svelte

@@ -3,12 +3,12 @@
   import { cdcLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
-  import { apiKeySelections } from '../../../store';
+  import { apiKey } from '../../../store';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = $apiKeySelections.cdc;
+  let auth = $apiKey;
 
   export function importDataSet() {
     return importCDC({ locations, auth });
@@ -19,7 +19,7 @@
   id="{id}-auth"
   name="auth"
   label="Authorizaton Token"
-  bind:value={$apiKeySelections.cdc}
+  bind:value={$apiKey}
   placeholder="authorization token"
 />
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />

src/components/dialogs/dataSources/FluView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { importFluView } from '../../../api/EpiData';
   import { fluViewRegions } from '../../../data/data';
-  import { apiKeySelections } from '../../../store';
+  import { apiKey } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import SelectIssue from '../inputs/SelectIssue.svelte';
   import TextField from '../inputs/TextField.svelte';
@@ -11,7 +11,7 @@
 
   let regions = fluViewRegions[0].value;
   let issue = DEFAULT_ISSUE;
-  let auth = $apiKeySelections.fluView;
+  let auth = $apiKey;
 
   export function importDataSet() {
     return importFluView({ regions, ...issue, auth });
@@ -24,7 +24,7 @@
   id="{id}-auth"
   name="auth"
   label="Auth Key"
-  bind:value={$apiKeySelections.fluView}
+  bind:value={$apiKey}
   required={false}
   placeholder="authorization token"
 />

src/components/dialogs/dataSources/GHT.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { importGHT } from '../../../api/EpiData';
   import { ghtLocations as regions } from '../../../data/data';
-  import { apiKeySelections } from '../../../store';
+  import { apiKey } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = $apiKeySelections.ght;
+  let auth = $apiKey;
   let query = '';
 
   export function importDataSet() {
@@ -20,7 +20,7 @@
   id="{id}-auth"
   name="auth"
   label="Authorizaton Token"
-  bind:value={$apiKeySelections.ght}
+  bind:value={$apiKey}
   placeholder="authorization token"
 />
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />

src/components/dialogs/dataSources/Quidel.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { importQuidel } from '../../../api/EpiData';
   import { quidelLocations as regions } from '../../../data/data';
-  import { apiKeySelections } from '../../../store';
+  import { apiKey } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = $apiKeySelections.quidel;
+  let auth = $apiKey;
 
   export function importDataSet() {
     return importQuidel({ auth, locations });
@@ -19,7 +19,7 @@
   id="{id}-auth"
   name="auth"
   label="Authorizaton Token"
-  bind:value={$apiKeySelections.quidel}
+  bind:value={$apiKey}
   placeholder="authorization token"
 />
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />

src/components/dialogs/dataSources/Sensors.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { importSensors } from '../../../api/EpiData';
   import { sensorLocations as regions, sensorNames } from '../../../data/data';
-  import { apiKeySelections } from '../../../store';
+  import { apiKey } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = $apiKeySelections.sensors;
+  let auth = $apiKey;
   let names = sensorNames[0].value;
 
   export function importDataSet() {
@@ -20,7 +20,7 @@
   id="{id}-auth"
   name="auth"
   label="Authorizaton Token"
-  bind:value={$apiKeySelections.sensors}
+  bind:value={$apiKey}
   placeholder="authorization token"
 />
 <SelectField id="{id}-s" label="Name" bind:value={names} options={sensorNames} name="sensor" />

src/components/dialogs/dataSources/Twitter.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { importTwitter } from '../../../api/EpiData';
   import { twitterLocations as regions } from '../../../data/data';
-  import { apiKeySelections } from '../../../store';
+  import { apiKey } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = $apiKeySelections.twitter;
+  let auth = $apiKey;
   let resolution: 'daily' | 'weekly' = 'daily';
 
   export function importDataSet() {
@@ -20,7 +20,7 @@
   id="{id}-auth"
   name="auth"
   label="Authorizaton Token"
-  bind:value={$apiKeySelections.twitter}
+  bind:value={$apiKey}
   placeholder="authorization token"
 />
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />

src/store.ts

@@ -2,7 +2,7 @@ import { get, writable } from 'svelte/store';
 import { NavMode } from './components/chartUtils';
 import DataSet, { DataGroup } from './data/DataSet';
 import deriveLinkDefaults, { getDirectLinkImpl } from './deriveLinkDefaults';
-import { getApiKeySelections, getStoreApiKeys } from './components/dialogs/apiKeySelections';
+import { getApiKey, getApiKeySelections, getStoreApiKeys } from './components/dialogs/apiKeySelections';
 
 declare const __VERSION__: string;
 
@@ -26,9 +26,9 @@ storeApiKeys.subscribe((val) => {
   }
   localStorage.setItem('store-api', val.toString());
 });
-export const apiKeySelections = writable(getApiKeySelections());
-apiKeySelections.subscribe((val) => {
-  localStorage.setItem('api', JSON.stringify(val));
+export const apiKey = writable(getApiKey());
+apiKey.subscribe((val) => {
+  localStorage.setItem('api', val.toString());
 });
 
 export function addDataSet(dataset: DataSet | DataGroup): void {