feat(layers): fetch layer definitions (#79)

data/layers.json

@@ -0,0 +1,21 @@
+[
+  {
+    "id": "layer1",
+    "name": "Layer 1",
+    "description": "This is the first layer",
+    "metadataUrl": "https://..."
+  },
+  {
+    "id": "layer1a",
+    "name": "Layer 1a",
+    "description": "This is the first sublayer",
+    "metadataUrl": "https://...",
+    "parentId": "layer1"
+  },
+  {
+    "id": "layer2",
+    "name": "Layer 2",
+    "description": "This is the second layer",
+    "metadataUrl": "https://..."
+  }
+]

package.json

@@ -26,12 +26,14 @@
     "react-dom": "^16.9.0",
     "react-redux": "^7.1.1",
     "redux": "^4.0.4",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.2",
+    "@types/redux-thunk": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^2.3.0",
     "@typescript-eslint/parser": "^2.3.0",
     "css-loader": "^3.2.0",

src/scripts/actions/fetch-layers.ts

@@ -0,0 +1,45 @@
+import {Dispatch} from 'redux';
+import config from '../config/main';
+
+export const FETCH_LAYERS_SUCCESS = 'FETCH_LAYERS_SUCCESS';
+export const FETCH_LAYERS_ERROR = 'FETCH_LAYERS_ERROR';
+
+export interface Layer {
+  id: string;
+  name: string;
+  description: string;
+  metadataUrl: string;
+}
+
+export interface FetchLayersSuccessAction {
+  type: typeof FETCH_LAYERS_SUCCESS;
+  layers: Layer[];
+}
+
+export interface FetchLayersErrorAction {
+  type: typeof FETCH_LAYERS_ERROR;
+  message: string;
+}
+
+function fetchLayersSuccessAction(layers: Layer[]) {
+  return {
+    type: FETCH_LAYERS_SUCCESS,
+    layers
+  };
+}
+
+function fetchLayersErrorAction(message: string) {
+  return {
+    type: FETCH_LAYERS_ERROR,
+    message
+  };
+}
+
+const fetchLayers = () => (dispatch: Dispatch) => {
+  return fetch(config.api.layers)
+    .then(res => res.json())
+    .then(layers => dispatch(fetchLayersSuccessAction(layers)))
+    .catch(error => dispatch(fetchLayersErrorAction(error.message)));
+};
+
+export default fetchLayers;

src/scripts/components/app/app.tsx

@@ -1,18 +1,19 @@
 import React, {FunctionComponent} from 'react';
 import {createStore, applyMiddleware} from 'redux';
 import {Provider} from 'react-redux';
+import thunk from 'redux-thunk';
 import logger from 'redux-logger';
 import rootReducer from '../../reducers/index';
-import Test from '../test/test';
+import LayerSelector from '../layer-selector/layer-selector';
 
 import styles from './app.styl';
 
-const store = createStore(rootReducer, applyMiddleware(logger));
+const store = createStore(rootReducer, applyMiddleware(thunk, logger));
 
 const App: FunctionComponent<{}> = () => (
   <Provider store={store}>
     <h1 className={styles.app}>Hello</h1>
-    <Test />
+    <LayerSelector />
   </Provider>
 );
 

src/scripts/components/layer-list/layer-list.tsx

@@ -0,0 +1,22 @@
+import React, {FunctionComponent} from 'react';
+import {Layer} from '../../actions/fetch-layers';
+
+interface Props {
+  layers: Layer[];
+  selected: string;
+  onSelect: (id: string) => void;
+}
+
+const LayerList: FunctionComponent<Props> = ({layers, selected, onSelect}) => {
+  return (
+    <ul>
+      {layers.map(layer => (
+        <li key={layer.id} onClick={() => onSelect(layer.id)}>
+          {layer.name}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default LayerList;

src/scripts/components/layer-selector/layer-selector.tsx

@@ -0,0 +1,36 @@
+import React, {FunctionComponent, useEffect, useState} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import {layersSelector} from '../../reducers/layers';
+import fetchLayers from '../../actions/fetch-layers';
+import LayerList from '../layer-list/layer-list';
+import {Dispatch} from 'redux';
+
+const LayerSelector: FunctionComponent<{}> = () => {
+  const layers = useSelector(layersSelector);
+  const dispatch = useDispatch();
+  const [activeTab, setActiveTab] = useState(0);
+
+  useEffect(() => {
+    dispatch(fetchLayers());
+  }, []);
+
+  return (
+    <div>
+      {activeTab === 0 ? (
+        <LayerList
+          layers={layers}
+          onSelect={id => console.log('clicked', id)}
+          selected={'layer1'}
+        />
+      ) : (
+        <LayerList
+          layers={layers}
+          onSelect={id => console.log('clicked', id)}
+          selected={'layer1'}
+        />
+      )}
+    </div>
+  );
+};
+
+export default LayerSelector;

src/scripts/config/main.ts

@@ -0,0 +1,5 @@
+export default {
+  api: {
+    layers: 'https://storage.googleapis.com/esa-cfs-storage/layers.json'
+  }
+};

src/scripts/reducers/index.ts

@@ -1,11 +1,11 @@
 import layersReducer, {LayersState} from './layers';
-import {AddLayersAction} from '../actions/layers';
+import {FetchLayersSuccessAction} from '../actions/fetch-layers';
 
 export interface State {
   layers: LayersState;
 }
 
-export type Action = AddLayersAction;
+export type Action = FetchLayersSuccessAction;
 
 const initialState: State = {
   layers: []

src/scripts/reducers/layers.ts

@@ -1,16 +1,16 @@
-import {ADD_LAYERS} from '../actions/layers';
+import {FETCH_LAYERS_SUCCESS, Layer} from '../actions/fetch-layers';
 import {Action, State} from './index';
 
-export type LayersState = number[];
+export type LayersState = Layer[];
 const initialState: LayersState = [];
 
 function layersReducer(
   layersState: LayersState = initialState,
   action: Action
 ): LayersState {
   switch (action.type) {
-    case ADD_LAYERS:
-      return layersState.concat(action.layers);
+    case FETCH_LAYERS_SUCCESS:
+      return action.layers;
     default:
       return layersState;
   }