(null)
-
-const ConfigConsumer = ConfigContext.Consumer
-
-const Error = () => Error loading project configuration. Please try refreshing the page.
-
-const ConfigProvider = ({ children }) => (
- ErrorComponent={Error} skipSpinner fetchFn={fetchConfig}>
- {({ data: config }) => (
-
- {children}
-
- )}
-
-)
-
-export { ConfigProvider, ConfigConsumer }
diff --git a/dashboard/src/context/data.tsx b/dashboard/src/context/data.tsx
new file mode 100644
index 0000000000..31d024ce73
--- /dev/null
+++ b/dashboard/src/context/data.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2018 Garden Technologies, Inc.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { useState, EffectCallback } from "react"
+import React from "react"
+
+import { fetchConfig, fetchLogs, fetchStatus, fetchGraph } from "../api"
+import {
+ FetchConfigResponse,
+ FetchStatusResponse,
+ FetchGraphResponse,
+ FetchLogResponse,
+} from "../api/types"
+
+interface StoreSlice {
+ error: Error | null
+ loading: boolean
+}
+
+interface Config extends StoreSlice { data: FetchConfigResponse | null }
+interface Status extends StoreSlice { data: FetchStatusResponse | null }
+interface Graph extends StoreSlice { data: FetchGraphResponse | null }
+interface Logs extends StoreSlice { data: FetchLogResponse | null }
+
+// This is the global data store
+interface Store {
+ config: Config
+ status: Status
+ graph: Graph
+ logs: Logs,
+}
+
+interface Actions {
+ loadLogs: EffectCallback
+ loadConfig: EffectCallback
+ loadStatus: EffectCallback
+ loadGraph: EffectCallback
+}
+
+type KeyActionPair =
+ ["config", () => Promise] |
+ ["logs", () => Promise] |
+ ["status", () => Promise] |
+ ["graph", () => Promise]
+
+type Context = {
+ store: Store,
+ actions: Actions,
+}
+
+type SliceName = keyof Store
+const sliceNames: SliceName[] = ["config", "status", "graph", "logs"]
+
+// TODO Fix type cast
+const initialState: Store = sliceNames.reduce((acc, key) => {
+ const state = { data: null, loading: false, error: null }
+ acc[key] = state
+ return acc
+}, {}) as Store
+
+export const DataContext = React.createContext(null)
+
+// Updates slices of the store based on the slice key
+function updateSlice(prevState: Store, key: SliceName, sliceState: Object): Store {
+ const prevSliceState = prevState[key]
+ return {
+ ...prevState,
+ [key]: {
+ ...prevSliceState,
+ ...sliceState,
+ },
+ }
+}
+
+// Creates the actions needed for fetching data from the API and updates the store state as the actions are called.
+function useApi() {
+ const [store, setData] = useState(initialState)
+
+ const fetch = async ([key, fetchFn]: KeyActionPair) => {
+ setData(prevState => updateSlice(prevState, key, { loading: true }))
+
+ try {
+ const res = await fetchFn()
+ setData(prevState => updateSlice(prevState, key, { data: res, error: null }))
+ } catch (error) {
+ setData(prevState => updateSlice(prevState, key, { error }))
+ }
+
+ setData(prevState => updateSlice(prevState, key, { loading: false }))
+ }
+
+ const fetchOrReadFromStore = (keyActionPair: KeyActionPair, force: boolean) => {
+ const key = keyActionPair[0]
+ const { data, loading } = store[key]
+ if (!force && (data || loading)) {
+ return
+ }
+ fetch(keyActionPair).catch(error => setData(prevState => updateSlice(prevState, key, { error })))
+ }
+
+ const loadLogs = (force: boolean = false) => fetchOrReadFromStore(["logs", fetchLogs], force)
+ const loadConfig = (force: boolean = false) => fetchOrReadFromStore(["config", fetchConfig], force)
+ const loadGraph = (force: boolean = false) => fetchOrReadFromStore(["graph", fetchGraph], force)
+ const loadStatus = (force: boolean = false) => fetchOrReadFromStore(["status", fetchStatus], force)
+
+ return {
+ store,
+ actions: {
+ loadConfig,
+ loadLogs,
+ loadGraph,
+ loadStatus,
+ },
+ }
+}
+
+/**
+ * This component manages the "rest" API data state (not the websockets) for the entire application.
+ * We use the new React Hooks API to pass store data and actions down the component tree.
+ */
+export const DataProvider: React.SFC = ({ children }) => {
+ const storeAndActions = useApi()
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/dashboard/src/context/events.tsx b/dashboard/src/context/events.tsx
index f81ce11126..2bf57e9cfe 100644
--- a/dashboard/src/context/events.tsx
+++ b/dashboard/src/context/events.tsx
@@ -8,22 +8,60 @@
import React from "react"
+import { useEffect, useState } from "react"
+import getApiUrl from "../api/get-api-url"
import { WsMessage } from "../api/types"
-import WsContainer from "../containers/ws-container"
type Context = { message?: WsMessage }
-const EventContext = React.createContext(null)
-const EventConsumer = EventContext.Consumer
+export const EventContext = React.createContext(null)
-const EventProvider = ({ children }) => (
-
- {({ message }) => (
-
- {children}
-
- )}
-
-)
+interface WsOutput {
+ message: WsMessage | null
+}
+function useWs(): WsOutput {
+ const [data, setData] = useState(null)
+ useEffect(() => {
+ const url = getApiUrl()
+ const ws = new WebSocket(`ws://${url}/ws`)
-export { EventProvider, EventConsumer }
+ ws.onopen = event => {
+ console.log("ws open", event)
+ }
+ ws.onclose = event => {
+ // TODO
+ console.log("ws close", event)
+ }
+ ws.onmessage = msg => {
+ const message = JSON.parse(msg.data) as WsMessage
+
+ // TOOD
+ if (message.type === "error") {
+ console.error(message)
+ }
+
+ if (message.type === "event") {
+ console.log(message)
+ setData({ message })
+ }
+ }
+ return function cleanUp() {
+ console.log("ws cleanup")
+ ws.close()
+ }
+ }, [])
+
+ const wsMessage = data ? data.message : null
+
+ return { message: wsMessage }
+}
+
+export const EventProvider: React.SFC = ({ children }) => {
+ const { message } = useWs()
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/dashboard/src/context/status.tsx b/dashboard/src/context/status.tsx
deleted file mode 100644
index fd2b984993..0000000000
--- a/dashboard/src/context/status.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (C) 2018 Garden Technologies, Inc.
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-
-import React from "react"
-
-import { fetchStatus } from "../api"
-import { FetchStatusResponse } from "../api/types"
-import FetchContainer from "../containers/fetch-container"
-
-type Context = { status: FetchStatusResponse }
-const StatusContext = React.createContext(null)
-
-const StatusConsumer = StatusContext.Consumer
-
-const Error = () => Error retrieving status
-
-const StatusProvider = ({ children }) => (
- ErrorComponent={Error} skipSpinner fetchFn={fetchStatus}>
- {({ data: status }) => (
-
- {children}
-
- )}
-
-)
-
-export { StatusProvider, StatusConsumer }
diff --git a/dashboard/src/util/create-provider.tsx b/dashboard/src/util/create-provider.tsx
deleted file mode 100644
index bdda5fcf83..0000000000
--- a/dashboard/src/util/create-provider.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright (C) 2018 Garden Technologies, Inc.
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-
-import React from "react"
-import FetchContainer from "../containers/fetch-container"
-
-// TODO Add types to return components
-export function makeProvider(fetchFn, ErrorComponent: React.SFC | React.ComponentClass) {
-
- type Ctx = { data: T }
- const Ctx = React.createContext(null)
-
- const Provider = ({ children }) => (
- ErrorComponent={ErrorComponent} fetchFn={fetchFn}>
- {({ data }) => (
-
- {children}
-
- )}
-
- )
-
- return { Provider, Consumer: Ctx.Consumer }
-}