feat(cesium): add first cesium globe (#80)

* feat(cesium): add first cesium steps

* feat(cesium): use pre-build cesium

* feat(cesium): copy assets

* feat(cesium): load in component

.editorconfig

@@ -0,0 +1,3 @@
+indent_style = space
+indent_size = 2
+insert_final_newline = true

package.json

@@ -22,6 +22,7 @@
   "homepage": "https://github.com/ubilabs/esa-climate-from-space#readme",
   "dependencies": {
     "@types/redux-logger": "^3.0.7",
+    "cesium": "^1.61.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-redux": "^7.1.1",
@@ -30,16 +31,19 @@
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
+    "@types/cesium": "^1.59.0",
     "@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",
+    "copy-webpack-plugin": "^5.0.4",
     "css-loader": "^3.2.0",
     "eslint": "^6.4.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-react": "^7.14.3",
+    "file-loader": "^4.2.0",
     "git-state": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.0",

src/scripts/components/app/app.styl

@@ -1,2 +1,6 @@
-.app 
-    border: 1px solid green
+:global(html), :global(body), :global(#app)
+  margin: 0
+  height: 100%
+
+.app
+  height: 100%

src/scripts/components/app/app.tsx

@@ -5,15 +5,18 @@ import thunk from 'redux-thunk';
 import logger from 'redux-logger';
 import rootReducer from '../../reducers/index';
 import LayerSelector from '../layer-selector/layer-selector';
+import Globe from '../globe/globe';
 
 import styles from './app.styl';
 
 const store = createStore(rootReducer, applyMiddleware(thunk, logger));
 
 const App: FunctionComponent<{}> = () => (
   <Provider store={store}>
-    <h1 className={styles.app}>Hello</h1>
-    <LayerSelector />
+    <div className={styles.app}>
+      <Globe />
+      <LayerSelector />
+    </div>
   </Provider>
 );
 

src/scripts/components/globe/globe.styl

@@ -0,0 +1,2 @@
+.globe
+  height: 100%

src/scripts/components/globe/globe.tsx

@@ -0,0 +1,43 @@
+import React, {FunctionComponent, useRef, useEffect, useState} from 'react';
+
+import 'cesium/Source/Widgets/widgets.css';
+import 'cesium/Build/Cesium/Cesium';
+
+import styles from './globe.styl';
+
+// set global base url
+const Cesium = window.Cesium;
+Cesium.buildModuleUrl.setBaseUrl('./cesium/');
+
+const viewerOptions = {
+  homeButton: false,
+  fullscreenButton: false,
+  sceneModePicker: false,
+  infoBox: false,
+  geocoder: false,
+  navigationHelpButton: false,
+  animation: false,
+  timeline: false,
+  baseLayerPicker: false
+};
+
+const Globe: FunctionComponent<{}> = () => {
+  const ref = useRef();
+  const [viewer, setViewer] = useState(null);
+
+  useEffect(() => {
+    if (!ref || !ref.current) {
+      return;
+    }
+
+    const viewer = new Cesium.Viewer(ref.current, viewerOptions);
+    return () => {
+      viewer.destroy();
+      setViewer(null);
+    };
+  }, [ref]);
+
+  return <div className={styles.globe} ref={ref} />;
+};
+
+export default Globe;