hackforla · sellnat77 · Dec 4, 2019 · Nov 20, 2019 · Nov 20, 2019 · Nov 27, 2019
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "babel-jest": "^24.9.0",
+    "bulma": "^0.8.0",
     "dataframe-js": "^1.4.3",
     "dotenv-webpack": "^1.7.0",
     "gh-pages": "^2.1.1",

diff --git a/src/App.js b/src/App.js
@@ -1,36 +1,14 @@
 import React from 'react';
-import Header from './containers/Header/Header.jsx'
-import MapContainer from './containers/Map/MapContainer.jsx'
-import FrequencyContainer from './containers/Graphs/FrequencyContainer.jsx'
-import TimeToCloseContainer from './containers/Graphs/TimeToCloseContainer.jsx'
-// import TreeMapVis from './components/TreeMapVis/TreeMapVis.js';
-// import CandleStick from './components/CandleStick/CandleStick.js';
-// import PinMap from './components/PinMap/PinMap.jsx';
-// import HeatMap from './components/HeatMap/HeatMap.js';
-// import LoadingSpinner from './components/LoadingSpinner/LoadingSpinner.js';
+import Header from './components/main/header/Header';
+import Body from './components/main/body/Body';
+import Footer from './components/main/footer/Footer';
+
+ const App = () => (
+  <div className="main">
+    <Header />
+    <Body />
+    <Footer />
+  </div>
+);
 
-
- class App extends React.Component{
-   constructor(props){
-     super(props);
-     this.state = {
-       loading:false
-     }
-   }
-
-   handleLoadingChanged = (loadingState) => {
-     this.setState({loading:loadingState});
-   }
-
-  render(){
-    return (
-      <div className="App" >
-        <Header/>
-        <MapContainer/>
-        <TimeToCloseContainer/>
-        <FrequencyContainer/>
-      </div>
-    );
-  }
-}
 export default App;
diff --git a/src/components/common/Tests/Legend.test.js → src/Tests/Legend.test.js b/src/components/common/Tests/Legend.test.js → src/Tests/Legend.test.js
diff --git a/src/logo.svg → src/assets/logo.svg b/src/logo.svg → src/assets/logo.svg
diff --git a/src/components/PinMap/PinMap.js b/src/components/PinMap/PinMap.js
diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx
@@ -5,7 +5,6 @@ import Choropleth from 'react-leaflet-choropleth';
 
 import constants from '../common/CONSTANTS.js';
 import { getDataResources } from '../../Util/DataService.js';
-import DatePicker from '../common/dataPicker.jsx';
 
 import neighborhoodOverlay from '../../data/la-county-neighborhoods-v6.json';
 import municipalOverlay from '../../data/la-county-municipal-regions-current.json';
@@ -209,7 +208,11 @@ class PinMap extends Component {
 
   render() {
     return (
-      <div className="pinmap">{this.renderMap()}</div>
+      <div className="column">
+        <div className="pinmap">
+          {this.renderMap()}
+        </div>
+      </div>
     )
   }
 }

diff --git a/src/components/common/Dropdown.jsx b/src/components/common/Dropdown.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+const Dropdown = () => (
+  <div className="dropdown is-active">
+    <div className="dropdown-trigger">
+      <button className="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span>Dropdown button</span>
+        <span className="icon is-small">
+          <i className="fas fa-angle-down" aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
+    <div className="dropdown-menu" id="dropdown-menu" role="menu">
+      <div className="dropdown-content">
+        <a href="#" className="dropdown-item">
+          Dropdown item
+        </a>
+        <a className="dropdown-item">
+          Other dropdown item
+        </a>
+        <a href="#" className="dropdown-item is-active">
+          Active dropdown item
+        </a>
+        <a href="#" className="dropdown-item">
+          Other dropdown item
+        </a>
+        <hr className="dropdown-divider" />
+        <a href="#" className="dropdown-item">
+          With a divider
+        </a>
+      </div>
+    </div>
+  </div>
+);
+
+export default Dropdown;
diff --git a/src/components/common/Styles/Legend.scss b/src/components/common/Styles/Legend.scss
diff --git a/src/components/common/Styles/NCFilter.scss b/src/components/common/Styles/NCFilter.scss
diff --git a/src/components/main/body/Body.jsx b/src/components/main/body/Body.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import PinMap from '../../PinMap/PinMap.jsx';
+
+const Body = () => (
+  <div className="container is-fluid">
+    <div className="columns">
+      <PinMap />
+    </div>
+  </div>
+);
+
+export default Body;
diff --git a/src/components/main/footer/Footer.jsx b/src/components/main/footer/Footer.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Footer = () => (
+  <footer className="footer" style={{
+    position: 'fixed',
+    bottom: '0',
+    width: '100%',
+  }}>
+    <div className="content has-text-centered">
+      <p>
+        <strong>
+          311 Data
+        </strong>
+          by
+        <a href="https://www.hackforla.org/">
+          Hack4LA
+        </a>
+        .
+      </p>
+    </div>
+  </footer>
+);
+
+export default Footer;
diff --git a/src/components/main/header/Header.jsx b/src/components/main/header/Header.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import NCFilter from './NCFilter.jsx'
+import DataPicker from './dataPicker.jsx'
+import Legend from './Legend.jsx'
+import Dropdown from '../../common/Dropdown';
+
+const Header = () => (
+  <section className="hero">
+    <div className="hero-body">
+      <div className="container">
+        <h1 className="title">
+          311 Data
+        </h1>
+        <h2 className="subtitle">
+          Dashboard for NC
+        </h2>
+        <div className="columns">
+          <div className="column">
+            {/* <Dropdown /> */}
+          </div>
+          <div className="column">
+            <NCFilter />
+          </div>
+          <div className="column">
+            <DataPicker />
+          </div>
+        </div>
+        <Legend />
+      </div>
+    </div>
+  </section>
+);
+
+export default Header;
diff --git a/src/components/common/Legend.jsx → src/components/main/header/Legend.jsx b/src/components/common/Legend.jsx → src/components/main/header/Legend.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {DiscreteColorLegend} from 'react-vis';
-import {getColorMap} from '../../Util/DataService.js';
-// import './Styles/Legend.scss'
+import {getColorMap} from '../../../Util/DataService.js';
 
 
 export default () => {
@@ -11,7 +10,7 @@ export default () => {
     <div className="Legend">
       <DiscreteColorLegend
         items={colorData}
-        
+
         orientation="horizontal" />
     </div>
   )

diff --git a/src/components/common/NCFilter.jsx → src/components/main/header/NCFilter.jsx b/src/components/common/NCFilter.jsx → src/components/main/header/NCFilter.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import './Styles/NCFilter.scss'
-import constants from '../common/CONSTANTS.js';
+import constants from '../../common/CONSTANTS.js';
 
 export default ({
   isPrimary,

diff --git a/src/components/common/dataPicker.jsx → src/components/main/header/dataPicker.jsx b/src/components/common/dataPicker.jsx → src/components/main/header/dataPicker.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import constants from '../common/CONSTANTS.js';
+import constants from '../../common/CONSTANTS';
 
 export default ({
   showMarkerDropdown,

diff --git a/src/containers/Header/Header.jsx b/src/containers/Header/Header.jsx
diff --git a/src/containers/Header/Styles/Header.scss b/src/containers/Header/Styles/Header.scss
diff --git a/src/containers/Map/MapContainer.jsx b/src/containers/Map/MapContainer.jsx
diff --git a/src/containers/Map/Styles/MapContainer.scss b/src/containers/Map/Styles/MapContainer.scss
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 // import './index.css';
+import 'bulma';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/_global_style.scss → src/styles/_global_style.scss b/src/_global_style.scss → src/styles/_global_style.scss
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,20 +1,29 @@
 const Dotenv = require('dotenv-webpack');
 module.exports = {
   entry: './src/index.js',
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        use: ['babel-loader']
+        use: {
+          loader: 'babel-loader',
+        },
       },
       {
-        test: /\.(css|scss)$/,
+        test: /\.(css|scss|sass)$/,
         use: [
           'style-loader',
           'css-loader',
           'sass-loader'
-
         ],
       },
       {
@@ -28,14 +37,6 @@ module.exports = {
   plugins: [
     new Dotenv()
   ],
-  resolve: {
-    extensions: ['*', '.js', '.jsx']
-  },
-  output: {
-    path: __dirname + '/dist',
-    publicPath: '/',
-    filename: 'bundle.js'
-  },
   devServer: {
     open: true,
     contentBase: './public',