Merge pull request #74 from hackforla/Scaffolding

Scaffolding for base project

src/App.js

@@ -1,50 +1,37 @@
 import React from 'react';
 import './App.css';
-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 './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';
 
 
  class App extends React.Component{
    constructor(props){
      super(props);
      this.state = {
-       selectedId: "TreeMapVis",
        loading:false
      }
    }
 
-   handleMockSelected = (e) => {
-    this.setState({selectedId: e.target.value});
-   }
-
    handleLoadingChanged = (loadingState) => {
      this.setState({loading:loadingState});
    }
 
   render(){
-    const prototypeMap = {
-      TreeMapVis: <TreeMapVis loadingChanged={this.handleLoadingChanged}/>,
-      CandleStick: <CandleStick/>,
-      PinMap: <PinMap loadingChanged={this.handleLoadingChanged} />,
-      HeatMap:<HeatMap/>
-    }
-
     return (
       <div className="App" >
-        {Object.keys(prototypeMap).map( proto =>
-          <div key={proto}>
-            <input type="radio" name="prototypes" value={proto} onClick={this.handleMockSelected}/>{proto}<br/>
-          </div>
-        )}
-        { prototypeMap[this.state.selectedId] }
-        { this.state.loading &&
-          <LoadingSpinner/>}
+        <Header/>
+        <MapContainer/>
+        <TimeToCloseContainer/>
+        <FrequencyContainer/>
       </div>
     );
   }
 }
-
 export default App;

src/components/Frequency/Frequency.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './Styles/Frequency.scss'
+
+export default ({}) => {
+  return (
+    <div className='Frequency'>
+      <img className='FrequencyImg' src={process.env.PUBLIC_URL + '/frequency.svg'} alt='frequency'/>
+    </div>
+  )
+}

src/components/Frequency/Styles/Frequency.scss

@@ -0,0 +1,10 @@
+.Frequency{
+  width: 100vw;
+  height: 20vh;
+}
+
+.FrequencyImg{
+    width: 100%;
+    height: 100%;
+    object-fit: scale-down;
+}

src/components/PinMap/PinMap.jsx

@@ -193,7 +193,7 @@ class PinMap extends Component {
             center={position}
             zoom={zoom}
             bounds={bounds}
-            style={{ height: '70vh' }}>
+            style={{ height: '60vh' }}>
             <TileLayer
               url={mapUrl}
               attribution="MapBox"
@@ -202,14 +202,7 @@ class PinMap extends Component {
             {this.renderMarkers()}
           </Map>
         </div>
-        <DatePicker
-          showMarkerDropdown
-          showRequestsDropdown
-          serviceRequests={constants.REQUESTS}
-          showMarkers={showMarkers}
-          toggleShowMarkers={this.toggleShowMarkers}
-          onChange={this.onDatePickerChange}
-        />
+
       </>
     )
   }

src/components/TimeToClose/Styles/TimeToClose.scss

@@ -0,0 +1,10 @@
+.TimeToClose{
+  width: auto;
+  height: 60vh;
+}
+
+.TimeToCloseImg{
+  width: 80%;
+  height: 80%;
+  object-fit: scale-down;
+}

src/components/TimeToClose/TimeToClose.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './Styles/TimeToClose.scss'
+
+export default ({}) => {
+  return (
+    <div className='TimeToClose'>
+      <img className='TimeToCloseImg' src={process.env.PUBLIC_URL + '/timetoclose.svg'} alt="timetoclose"/>
+    </div>
+  )
+}

src/components/common/CONSTANTS.js

@@ -33,4 +33,109 @@ export default {
     'Report Water Waste',
     'Other',
   ],
+  COUNCILS: [
+    'ARLETA NC',
+    'ARROYO SECO NC',
+    'ATWATER VILLAGE NC',
+    'BEL AIR-BEVERLY CREST NC',
+    'BOYLE HEIGHTS NC',
+    'BRENTWOOD CC',
+    'CANOGA PARK NC',
+    'CENTRAL ALAMEDA NC',
+    'CENTRAL HOLLYWOOD NC',
+    'CENTRAL SAN PEDRO NC',
+    'CHATSWORTH NC',
+    'COASTAL SAN PEDRO NC',
+    'COMMUNITY AND NEIGHBORS FOR NINTH DISTRICT UNITY (CANNDU)',
+    'DEL REY NC',
+    'DOWNTOWN LOS ANGELES',
+    'EAGLE ROCK NC',
+    'EAST HOLLYWOOD NC',
+    'ECHO PARK NC',
+    'ELYSIAN VALLEY RIVERSIDE NC',
+    'EMPOWERMENT CONGRESS CENTRAL AREA NDC',
+    'EMPOWERMENT CONGRESS NORTH AREA NDC',
+    'EMPOWERMENT CONGRESS SOUTHEAST AREA NDC',
+    'EMPOWERMENT CONGRESS SOUTHWEST AREA NDC',
+    'EMPOWERMENT CONGRESS WEST AREA NDC',
+    'ENCINO NC',
+    'FOOTHILL TRAILS DISTRICT NC',
+    'GLASSELL PARK NC',
+    'GRANADA HILLS NORTH NC',
+    'GRANADA HILLS SOUTH NC',
+    'GREATER CYPRESS PARK NC',
+    'GREATER ECHO PARK ELYSIAN NC',
+    'GREATER TOLUCA LAKE NC',
+    'GREATER VALLEY GLEN COUNCIL',
+    'GREATER WILSHIRE NC',
+    'HARBOR CITY NC',
+    'HARBOR GATEWAY NORTH NC',
+    'HARBOR GATEWAY SOUTH NC',
+    'HERMON NC',
+    'HISTORIC CULTURAL NC',
+    'HISTORIC CULTURAL NORTH NC',
+    'HISTORIC HIGHLAND PARK NC',
+    'HOLLYWOOD HILLS WEST NC',
+    'HOLLYWOOD STUDIO DISTRICT NC',
+    'HOLLYWOOD UNITED NC',
+    'LA-32 NC',
+    'LAKE BALBOA NC',
+    'LINCOLN HEIGHTS NC',
+    'LOS FELIZ NC',
+    'MACARTHUR PARK NC',
+    'MAR VISTA CC',
+    'MID CITY NC',
+    'MID CITY WEST CC',
+    'MID-TOWN NORTH HOLLYWOOD NC',
+    'MISSION HILLS NC',
+    'NC VALLEY VILLAGE',
+    'NC WESTCHESTER/PLAYA',
+    'NOHO NC',
+    'NOHO WEST NC',
+    'NORTH HILLS EAST',
+    'NORTH HILLS WEST NC',
+    'NORTH HOLLYWOOD NORTHEAST NC',
+    'NORTH WESTWOOD NC',
+    'NORTHRIDGE EAST',
+    'NORTHRIDGE SOUTH NC',
+    'NORTHRIDGE WEST',
+    'NORTHWEST SAN PEDRO NC',
+    'OLYMPIC PARK NC',
+    'P.I.C.O. NC',
+    'PACIFIC PALISADES NC',
+    'PACOIMA NC',
+    'PALMS NC',
+    'PANORAMA CITY NC',
+    'PARK MESA HEIGHTS CC',
+    'PICO UNION NC',
+    'PORTER RANCH NC',
+    'RAMPART VILLAGE NC',
+    'RESEDA NC',
+    'SHERMAN OAKS NC',
+    'SILVER LAKE NC',
+    'SOUTH CENTRAL NC',
+    'SOUTH ROBERTSON NC',
+    'STUDIO CITY NC',
+    'SUN VALLEY AREA NC',
+    'SUNLAND-TUJUNGA NC',
+    'SYLMAR NC',
+    'TARZANA NC',
+    'UNITED NEIGHBORHOODS OF THE HISTORIC ARLINGTON HEIGHTS, WEST ADAMS, AND JEFFERSON PARK COMMUNITY',
+    'VAN NUYS NC',
+    'VENICE NC',
+    'VOICES OF 90037',
+    'WATTS NC',
+    'WEST ADAMS NC',
+    'WEST HILLS NC',
+    'WEST LOS ANGELES NC',
+    'WESTLAKE NORTH NC',
+    'WESTLAKE SOUTH NC',
+    'WESTSIDE NC',
+    'WESTWOOD NC',
+    'WILMINGTON NC',
+    'WILSHIRE CENTER - KOREATOWN NC',
+    'WINNETKA NC',
+    'WOODLAND HILLS-WARNER CENTER NC',
+    'ZAPATA KING NC'
+  ],
 };

src/components/TreeMapVis/Legend.js → src/components/common/Legend.jsx

@@ -4,16 +4,15 @@ import {getColorMap} from '../../Util/DataService.js';
 import './Styles/Legend.scss'
 
 
-const Legend = () => {
+export default () => {
   const colorData = getColorMap(true);
 
   return (
     <div className="Legend">
       <DiscreteColorLegend
         items={colorData}
+
         orientation="horizontal" />
     </div>
-  );
-};
-
-export default Legend;
+  )
+}

src/components/common/NCFilter.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import './Styles/NCFilter.scss'
+import constants from '../common/CONSTANTS.js';
+
+export default ({
+  isPrimary,
+  selectedNC,
+  onChange
+ }) => {
+
+  const style = isPrimary === true ? 'NCFilterPrimary' : 'NCFilterSecondary'
+  return (
+    <div className={style}>
+      <select className="NCFilterDropdown" onChange={onChange}>
+        {constants.COUNCILS.map((nc, idx) => (<option key={nc} value={nc}>{nc}</option>))}
+      </select>
+    </div>
+  )
+}

src/components/TreeMapVis/Styles/Legend.scss → src/components/common/Styles/Legend.scss

@@ -1,3 +1,6 @@
 .Legend{
+  width: 100%;
+
   float: left;
+
 }

src/components/common/Styles/NCFilter.scss

@@ -0,0 +1,15 @@
+.NCFilterPrimary{
+  width: 50vw;
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  float: left;
+}
+
+.NCFilterSecondary{
+  width: 50vw;
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  float: right;
+}

src/components/TreeMapVis/Tests/Legend.test.js → src/components/common/Tests/Legend.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Enzyme, {shallow, mount} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import Legend from '../Legend.js';
+import Legend from '../Legend.jsx';
 
 Enzyme.configure({adapter: new Adapter()});
 

src/containers/Graphs/FrequencyContainer.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './Styles/FrequencyContainer.scss'
+import Frequency from '../../components/Frequency/Frequency.jsx'
+
+export default ({}) => {
+  return (
+    <div className='FrequencyContainer'>
+      <Frequency/>
+    </div>)
+}

src/containers/Graphs/Styles/FrequencyContainer.scss

@@ -0,0 +1,8 @@
+.FrequencyContainer{
+  width: 100vw;
+  height: 20vh;
+  float: left;
+  outline-style: dotted;
+  outline-width: thin;
+  outline-color: green;
+}

src/containers/Graphs/Styles/TimeToCloseContainer.scss

@@ -0,0 +1,8 @@
+.TimeToCloseContainer{
+  width: 40vw;
+  height: 60vh;
+  float: left;
+  outline-style: dotted;
+  outline-width: thin;
+  outline-color: yellow;
+}

src/containers/Graphs/TimeToCloseContainer.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './Styles/TimeToCloseContainer.scss'
+import TimeToClose from '../../components/TimeToClose/TimeToClose.jsx'
+
+export default ({}) => {
+  return (
+    <div className='TimeToCloseContainer'>
+      <TimeToClose/>
+    </div>)
+}

src/containers/Header/Header.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import './Styles/Header.scss'
+import NCFilter from '../../components/common/NCFilter.jsx'
+import DataPicker from '../../components/common/dataPicker.jsx'
+import Legend from '../../components/common/Legend.jsx'
+
+export default ({}) => {
+  return (
+    <div className='Header'>
+      <NCFilter isPrimary={true}/>
+      <NCFilter isPrimary={false}/>
+      <DataPicker/>
+      <Legend/>
+    </div>)
+}

src/containers/Header/Styles/Header.scss

@@ -0,0 +1,8 @@
+.Header {
+  width: 100vw;
+  height: 20vh;
+  float: left;
+  outline-style: dotted;
+  outline-width: thin;
+  outline-color: blue;
+}

src/containers/Map/MapContainer.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './Styles/MapContainer.scss'
+import PinMap from '../../components/PinMap/PinMap.jsx'
+
+export default ({}) => {
+  return (
+    <div className='MapContainer'>
+      <PinMap/>
+    </div>)
+}