Feat/map update

.gitignore

@@ -24,3 +24,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.vscode
+
+key_file
+key_file.pub

key_file

@@ -0,0 +1,54 @@
+-----BEGIN RSA PRIVATE KEY-----
+Proc-Type: 4,ENCRYPTED
+DEK-Info: AES-128-CBC,060C7F6BB6D7544F4DF0B0F076801EA9
+
+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
+-----END RSA PRIVATE KEY-----

key_file.pub

@@ -0,0 +1 @@
+ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQCi3kUTVjIVhkaa0GSr3vieErzdaVlZs1tski+XwGQZFFq2jCHfxHl361bLx6pQRwak/QQRZ6soPveHEvOxm/Ss7nMZS34twni3M709uAjanaFVx7hjiRjf+YLiAyyCWlsTt/1QPjMdSl3NUWiK5TUaR3qmOKI6utmqMwB2wT/5Py5wq/zSMcQ7BspytztkTug2o3eKvD7OhWvDfhtjhWgCybk1rETbVdxzbvsqqFsqqWX6YJII97IHlB5VoJBjm7TYopBS+amh4enFTwBkI8wzRuKdONoZ2sR138J1zMN9s4vEe9So1OInshbYM3JISCIeGtIZi5eaJP14N5ewj5K8Pi3i+4rP619f5ZUp4L9qbIKz6VGwmg4xEDc3ARYYFxpsTJz4+wLmmPadW7RqI528cwD/cfLmeO56pli7hviBT0itc9w2GFAhYFHm91EQBsTvkZTSWThXdx9Tt9vl3Cj1B9hpaHwaf8X99aln7NxMzmif6qr/46XwYGa4gVolBDX3fEbdbWXrUHpXMEwP24PpZBfq5QXVx8n9iEvaGEzbVUVwhTVcJrV3Ogt5C+X9AaUfu0ie+fiRW1grcfuk+R1VW2ZvZSbsIJeBhRP8n2bqBfrGF26IMJpkGGJEqyWZbbN+dApfeg4MUQaABbN8nYc9AkyqIFhs37Cj+hLzSqg3Lw== eugen.lefter@gmail.com

src/App/AppContainer.js

@@ -1,21 +1,23 @@
 // import React/Redux dependencies
-import React, { Component } from 'react';
-import { Route } from 'react-router';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { loadResources } from '../action/resourceDataAction';
-import { getAllSites } from '../api/directoryGoogleSheets';
+import React, { Component } from "react";
+import { Route } from "react-router";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { loadResources } from "../action/resourceDataAction";
+import { getAllSites } from "../api/directoryGoogleSheets";
 
 // import components
 
-import Header from '../components/Header/Header';
-import MapPage from '../components/MapPage/MapPage';
-import AdminPage from '../components/AdminPage/AdminPage';
-import { SplitScreenTogglePane } from '../components/AdminPage/SplitScreenTogglePane';
-import SavedResourcePanel from '../components/SavedResources/SavedResourcePanel';
-import NotFoundPage from '../components/NotFoundPage/NotFoundPage';
-import { Loading } from '../components/Common/Loading';
-import { FeedbackContainer } from '../components/Common/FeedbackContainer';
+import Header from "../components/Header/Header";
+import MapPage from "../components/MapPage/MapPage";
+import AdminPage from "../components/AdminPage/AdminPage";
+import { SplitScreenTogglePane } from "../components/AdminPage/SplitScreenTogglePane";
+import SavedResourcePanel from "../components/SavedResources/SavedResourcePanel";
+import NotFoundPage from "../components/NotFoundPage/NotFoundPage";
+import { Loading } from "../components/Common/Loading";
+import { FeedbackContainer } from "../components/Common/FeedbackContainer";
+import LandingPage from '../components/LandingPage/LandingPage';
+// import Button from '../components/Button/Button'
 
 const envSheetId = process.env.REACT_APP_GOOGLE_SHEETS_ID;
 
@@ -34,14 +36,15 @@ class AppContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
+
       position: {},
       displayFeedbackLink: true,
-      isValidPage: true,
+      isValidPage: true
     };
   }
 
   static propTypes = {
-    dispatch: PropTypes.func,
+    dispatch: PropTypes.func
   };
 
   componentDidMount() {
@@ -75,26 +78,36 @@ class AppContainer extends Component {
             position: {
               coordinates: {
                 lat: parseFloat(position.coords.latitude),
-                lng: parseFloat(position.coords.longitude),
-              },
-            },
+                lng: parseFloat(position.coords.longitude)
+              }
+            }
           });
         },
         error => {
           console.log(error);
-        },
+        }
       );
     }
   };
 
   toggleSavedResourcesPane = () => {
     this.setState({
-      isSavedResourcePaneOpen: !this.state.isSavedResourcePaneOpen,
+      isSavedResourcePaneOpen: !this.state.isSavedResourcePaneOpen
     });
   };
 
+  goToResources = () => {
+    this.setState({
+      landingPage: false
+    })
+  }
+
+
+
+
   render() {
     const { isFetchingResource } = this.props;
+
 
     if (!this.state.isValidPage) {
       return <NotFoundPage />;
@@ -104,13 +117,18 @@ class AppContainer extends Component {
       return <Loading />;
     }
 
+
+
+
     return (
-      <div className="viewport">
-        <div className="viewport-header">
+      <div className="viewport" >      
+        <div>
+          <div className="viewport-header">
           <Header toggleSavedResourcesPane={this.toggleSavedResourcesPane} />
         </div>
 
         <div className="page">
+
           <Route
             exact
             path="/:resource/admin"
@@ -136,6 +154,9 @@ class AppContainer extends Component {
         {this.state.displayFeedbackLink && (
           <FeedbackContainer hideFeedbackLink={this.hideFeedbackLink} />
         )}
+        </div>
+
+
       </div>
     );
   }

src/components/Button/Button.js

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+
+class Button extends Component {
+  constructor(props){
+    super(props);
+  }
+
+
+
+  render() {
+    const  { goToResources } = this.props; 
+    return <button onClick={goToResources}> Go to Resources </button>;
+  }
+}
+
+export default Button;

src/components/LandingPage/LandingPage.js

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+
+
+class LandingPage extends Component {
+  render() {
+    return (
+      <div >
+        <h1> Welcom to Community Connect</h1>
+        <p style={{ margin: "5rem", fontSize: "1.2rem", lineHeight: "2.2rem" }}>
+          "Community Connect" is a health resource web application that aims to
+          consolidate information about businesses and organization available in
+          communities that promote healthy lifestyle choices. A health resource
+          is defined as services or materials that improve the quality of life
+          of others, ranging from affordable child care, substance abuse
+          counseling, domestic violence support, and more. We are working in
+          conjunction with Massachusetts General Hospital's Center for Community
+          Health Improvement, MGH Revere HealthCare Center, and Revere CARES
+          Coalition to create an extensive database in our pilot region of
+          Revere, Chelsea, Charlestown, and eventually the Greater Boston Area.
+        </p>
+
+
+      </div>
+
+    );
+  }
+}
+
+export default LandingPage;

src/components/MapPage/Map.js

@@ -1,32 +1,41 @@
-import React from 'react';
-import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps';
-import { MarkerClusterer } from 'react-google-maps/lib/components/addons/MarkerClusterer';
-import OrganizationMarker from './OrganizationMarker';
-import { compose, lifecycle } from 'recompose';
+import React from "react";
+import { withScriptjs, withGoogleMap, GoogleMap } from "react-google-maps";
+import { MarkerClusterer } from "react-google-maps/lib/components/addons/MarkerClusterer";
+import OrganizationMarker from "./OrganizationMarker";
+import { compose, lifecycle } from "recompose";
+import Styles from "./mapStyles";
 
 const Map = compose(
   lifecycle({
-    componentWillMount () {
+    componentWillMount() {
       this.setState({
         zoomToMarkers: map => {
           const bounds = new window.google.maps.LatLngBounds();
           map.props.children.props.children.forEach(child => {
             bounds.extend(
               new window.google.maps.LatLng(
                 child.props.resource.coordinates.lat,
-                child.props.resource.coordinates.lng,
-              ),
+                child.props.resource.coordinates.lng
+              )
             );
           });
           map.fitBounds(bounds);
-        },
+        }
       });
-    },
+    }
   }),
+
   withScriptjs,
-  withGoogleMap,
+  withGoogleMap
 )(props => (
-  <GoogleMap {...props} ref={props.zoomToMarkers} defaultZoom={5}>
+  <GoogleMap
+    {...props}
+    ref={props.zoomToMarkers}
+    defaultZoom={5}
+    defaultOptions={{
+      styles: Styles
+    }}
+  >
     <MarkerClusterer
       averageCenter={true}
       enableRetinaIcons={true}

src/components/MapPage/MapPage.js

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import ResultList from './ResultList';
-import OrganizationMap from './OrganizationMap';
-import { SplitScreenSlidingPane } from './SplitScreenSlidingPane';
-import cx from 'classnames';
+import ResultList from "./ResultList";
+import OrganizationMap from "./OrganizationMap";
+import { SplitScreenSlidingPane } from "./SplitScreenSlidingPane";
+import cx from "classnames";
 
 class MapPage extends Component {
   render() {
-    const mapClassName = cx('map-container');
+    const mapClassName = cx("map-container");
     return (
       <div className={mapClassName}>
         <SplitScreenSlidingPane>

src/components/MapPage/OrganizationMarker.js

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
-import { Marker, InfoWindow } from 'react-google-maps';
+import React, { Component } from "react";
+import { Marker, InfoWindow } from "react-google-maps";
 
 export class OrganizationMarker extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: this.props.open,
+      open: this.props.open
     };
   }
 
@@ -31,20 +31,32 @@ export class OrganizationMarker extends Component {
 
   render() {
     let { resource } = this.props;
+    let iconMarker = new window.google.maps.MarkerImage(
+      "https://cdn0.iconfinder.com/data/icons/business-human-resources-2/128/60-512.png",
+      null /* size is determined at runtime */,
+      null /* origin is 0,0 */,
+      null /* anchor is bottom center of the scaled image */,
+      new window.google.maps.Size(32, 32)
+    );
+    const InfoWindowStyle = {
+      backgroundColor: "green"
+    };
     return (
       <Marker
+        icon={iconMarker}
         optimize={false}
         position={resource.coordinates}
         onClick={this.scrollToElement}
       >
         {this.state.open && (
-          <InfoWindow onCloseClick={this.handleClose}>
+          <InfoWindow onCloseClick={this.handleClose} style={InfoWindowStyle}>
             <div>
               {resource.groupedResource.map(resource => (
                 <div
                   key={resource.id}
                   id={resource.id}
                   onClick={this.handleClickOfInfoWindow}
+                  style={{ padding: "25px" }}
                 >
                   <h3>{resource.name}</h3>
                   <div>{resource.combinedaddress}</div>