Merge branch 'master' of github.com:haxaco/c4v-team1

client/package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "google-map-react": "^1.1.4",
     "node-sass": "^4.11.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-google-location": "^1.2.2",
+    "react-places-autocomplete": "^7.2.1",
     "react-redux": "^7.0.2",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",

client/public/index.html

@@ -38,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvdgUHoWt0MgqmWmcw-IcMAXMvRLWxcpE&libraries=places"></script>
   </body>
 </html>

client/src/actions/index.js

@@ -1 +1,2 @@
-export * from './mapAction';
+export * from './mapAction';
+export * from './reportAction';

client/src/actions/reportAction.js

@@ -0,0 +1,6 @@
+import axios from 'axios'
+
+export const postReport = (info) => async dispatch => {
+    console.log(info)
+    // axios.post('/')
+  };

client/src/components/Map.js

@@ -65,14 +65,12 @@ class Map extends Component {
       return new window.google.maps.Marker({
         position: location,
         label: labels[i % labels.length],
-        icon: batteryIcon,
-        size: new window.google.maps.Size(25, 25)
       });
     });
     // Add a marker clusterer to manage the markers.
     var markerCluster = new window.MarkerClusterer(map, markers, {
       imagePath:
-        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/"
+        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
     });
   };
   render() {

client/src/components/Panel/PanelAction.js

@@ -1,16 +1,29 @@
-import React, {Component} from 'react';
+import React, { Component } from "react";
+import ReportAction from "./ReportPanel";
 
 class PanelAction extends Component {
-    render() {
-        return (
-            <div className="panel-action">
-                <div className="panel-action__wrapper">
-                    <button className="btn action-btn">Report</button>
-                    <button className="btn action-btn">See all incident</button>
-                </div>
-            </div>
-        )
+    state = {
+        showReport: false,
     }
+
+
+    closeReport = () => {
+        this.setState({showReport: false});
+    }
+
+  render() {
+    return (
+      <React.Fragment>
+        {this.state.showReport && <ReportAction closeReport={this.closeReport} />}
+        <div className="panel-action">
+          <div className="panel-action__wrapper">
+            <button className="btn action-btn" onClick={() => this.setState({showReport: true})}>Report</button>
+            <button className="btn action-btn">See all incident</button>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
 }
 
-export default PanelAction;
+export default PanelAction;

client/src/components/Panel/ReportPanel.js

@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import { postReport } from "../../actions";
+import { connect } from "react-redux";
+import { GoogleComponent } from "react-google-location";
+const API_KEY = "AIzaSyCvdgUHoWt0MgqmWmcw-IcMAXMvRLWxcpE";
+
+class ReportAction extends Component {
+  state = {
+    location: "",
+    cat: ""
+  };
+  handleSubmit = e => {
+    e.preventDefault();
+    const { location, cat } = this.state;
+    this.props.postReport({ location, cat });
+  };
+  render() {
+    console.log(this.state.location);
+    return (
+      <div className="report-panel">
+        <div className="fade" onClick={() => this.props.closeReport()} />
+        <div className="report-panel__wrapper">
+          <form onSubmit={e => this.handleSubmit(e)}>
+            <GoogleComponent
+              apiKey={API_KEY}
+              language={"en"}
+              //   country={"country:in|country:ve"}
+              coordinates={true}
+              //   locationBoxStyle={"custom-style"}
+              //   locationListStyle={"custom-style-list"}
+              onChange={e => this.setState({ location: e.target })}
+            ></GoogleComponent>
+            {/* <input type="text" placeholder="Address" onChange={e => this.setState({location: e.target.value })}/> */}
+            <input
+              type="type"
+              placeholder="Category"
+              onChange={e => this.setState({ cat: e.target.value })}
+            />
+            <button type="submit">Submit</button>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(
+  null,
+  { postReport }
+)(ReportAction);

client/src/styles/components/reportPanel.scss

@@ -0,0 +1,39 @@
+.report-panel {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .fade {
+        background: rgba(0, 0, 0, .7);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    }
+
+    &__wrapper {
+        background: black;
+        width: 400px;
+        height: 400px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        position: relative;
+
+        input {
+            width: 100%;
+            padding: 10px;
+            border: 0;
+            border-radius: 20px;
+            margin-top: 10px;
+        }
+
+    }
+
+
+}
+

client/src/styles/main.scss

@@ -6,4 +6,5 @@
 //components styling
 @import 'components/map';
 @import 'components/navigation';
-@import 'components/panelAction';
+@import 'components/panelAction';
+@import 'components/reportPanel';