Merge pull request #3478 from influxdata/fun/convert-roots-to-ts

Convert App and localStorage to TS

ui/src/App.js

@@ -1,23 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import SideNav from 'src/side_nav'
-import Notifications from 'shared/components/Notifications'
-import Overlay from 'shared/components/OverlayTechnology'
-
-const App = ({children}) => (
-  <div className="chronograf-root">
-    <Overlay />
-    <Notifications />
-    <SideNav />
-    {children}
-  </div>
-)
-
-const {node} = PropTypes
-
-App.propTypes = {
-  children: node.isRequired,
-}
-
-export default App

ui/src/App.tsx

@@ -0,0 +1,20 @@
+import React, {SFC, ReactChildren} from 'react'
+
+import SideNav from 'src/side_nav'
+import Notifications from 'src/shared/components/Notifications'
+import Overlay from 'src/shared/components/OverlayTechnology'
+
+interface Props {
+  children: ReactChildren
+}
+
+const App: SFC<Props> = ({children}) => (
+  <div className="chronograf-root">
+    <Overlay />
+    <Notifications />
+    <SideNav />
+    {children}
+  </div>
+)
+
+export default App

ui/src/localStorage.ts

@@ -5,18 +5,20 @@ import {
   notifyLoadLocalSettingsFailed,
 } from 'src/shared/copy/notifications'
 
-export const loadLocalStorage = errorsQueue => {
+import {LocalStorage} from 'src/types/localStorage'
+
+declare var VERSION: string
+
+export const loadLocalStorage = (errorsQueue: any[]): LocalStorage | {} => {
   try {
     const serializedState = localStorage.getItem('state')
 
     const state = JSON.parse(serializedState) || {}
 
-    // eslint-disable-next-line no-undef
     if (state.VERSION && state.VERSION !== VERSION) {
-      // eslint-disable-next-line no-undef
       const version = VERSION ? ` (${VERSION})` : ''
 
-      console.log(notifyNewVersion(version).message) // eslint-disable-line no-console
+      console.log(notifyNewVersion(version).message) // tslint:disable-line no-console
       errorsQueue.push(notifyNewVersion(version))
 
       if (!state.dashTimeV1) {
@@ -41,7 +43,7 @@ export const loadLocalStorage = errorsQueue => {
 
     return state
   } catch (error) {
-    console.error(notifyLoadLocalSettingsFailed(error).message) // eslint-disable-line no-console
+    console.error(notifyLoadLocalSettingsFailed(error).message)
     errorsQueue.push(notifyLoadLocalSettingsFailed(error))
 
     return {}
@@ -54,23 +56,23 @@ export const saveToLocalStorage = ({
   timeRange,
   dataExplorer,
   dashTimeV1: {ranges},
-}) => {
+}: LocalStorage): void => {
   try {
-    const appPersisted = Object.assign({}, {app: {persisted}})
+    const appPersisted = {app: {persisted}}
     const dashTimeV1 = {ranges: normalizer(ranges)}
 
     window.localStorage.setItem(
       'state',
       JSON.stringify({
         ...appPersisted,
-        dataExplorerQueryConfigs,
+        VERSION,
         timeRange,
-        dataExplorer,
-        VERSION, // eslint-disable-line no-undef
         dashTimeV1,
+        dataExplorer,
+        dataExplorerQueryConfigs,
       })
     )
   } catch (err) {
-    console.error('Unable to save data explorer: ', JSON.parse(err)) // eslint-disable-line no-console
+    console.error('Unable to save data explorer: ', JSON.parse(err))
   }
 }

ui/src/types/localStorage.ts

@@ -0,0 +1,45 @@
+import {QueryConfig, TimeRange} from 'src/types'
+
+export interface LocalStorage {
+  VERSION: VERSION
+  app: App
+  dashTimeV1: DashTimeV1
+  dataExplorer: DataExplorer
+  dataExplorerQueryConfigs: DataExplorerQueryConfigs
+  timeRange: TimeRange
+}
+
+export type VERSION = string
+export type timeRange = TimeRange
+
+export interface App {
+  persisted: Persisted
+}
+
+export interface DashTimeV1 {
+  ranges: DashboardTimeRange[]
+}
+
+export interface DataExplorer {
+  queryIDs: string[]
+}
+
+export interface DataExplorerQueryConfigs {
+  [id: string]: QueryConfig
+}
+
+interface DashboardTimeRange {
+  dashboardID: number
+  defaultGroupBy: string
+  format: string
+  inputValue: string
+  lower: string
+  menuOption: string
+  seconds: number
+  upper: string | null
+}
+
+interface Persisted {
+  autoRefresh: number
+  showTemplateControlBar: boolean
+}