Frontend: fix "add story" button can't be opened multiple times (#38)

* modal updated - now can open/close multiple times * "bout Us" * 'About Us' Modal * 'About Us' Modal * "About Us" Modal is in play * modal open problem fix * close modal on submit Co-authored-by: ornokrean <[email protected]>
OSS-team-zulu · Jul 8, 2020 · c8f4814 · c8f4814
1 parent 88a2ef1
commit c8f4814
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/frontend/zulu/src/components/Map/Map.css b/frontend/zulu/src/components/Map/Map.css
@@ -41,4 +41,11 @@ body,
     font-size: 14px;
     padding: 4px;
     border-radius: 3px;
+}
+.modal-content{
+        width: 70% !important;
+    margin: auto !important;
+    padding: 30px 0px !important;
+    text-align: center !important;
+    border-radius: 15px;
 }
diff --git a/frontend/zulu/src/components/Map/MapGeojsonMarkers.jsx b/frontend/zulu/src/components/Map/MapGeojsonMarkers.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { ListGroup, ListGroupItem, Button, FormGroup, FormControl, ControlLabel, Modal } from "react-bootstrap";
 import L from 'leaflet';
 import { Map, TileLayer, Marker, Popup } from "react-leaflet";
 import Basemap from './Basemaps';
@@ -83,6 +84,7 @@ class MapComponent extends Component {
   }
 
   async handleSubmit(event) {
+    this.closeModal();
     event.preventDefault();
     let file = this.fileInput?.current?.files[0];
     let hasFile = (typeof file !== 'undefined');
@@ -141,6 +143,11 @@ class MapComponent extends Component {
   showModal = () => {
     this.setState({ showModal: true })
   };
+
+  closeModal() {
+    this.setState({ showModal: false })
+  }
+
   render() {
     var center = [this.state.lat, this.state.lng];
 
@@ -164,8 +171,9 @@ class MapComponent extends Component {
             </Fab>
           </Container>
         </div>
-        {this.state.showModal &&
-          <Popup position={[this.state.lat, this.state.lng]}>
+        {
+          <Modal position={[this.state.lat, this.state.lng]} show={this.state.showModal} onHide={this.closeModal.bind(this)}>
+
             <form onSubmit={this.handleSubmit}>
               <h3> Add your Story. </h3>
               <label>
@@ -184,14 +192,16 @@ class MapComponent extends Component {
               <label>
                 <br />
                       Add a photo: (optional) <br />
-                <input type="file" ref={this.fileInput} />
+                <input type="file" style={{ marginRight: "-95px" }} ref={this.fileInput} />
+
                 <br />
               </label>
               <br />
               <br />
               <input type="submit" value="Submit" />
             </form>
-          </Popup>}
+          </Modal>}
+
 
         <TileLayer
           attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'