fixed geolocation not updating (#114)

Geovation · Nov 19, 2018 · a3fa298 · a3fa298
1 parent 8c035e9
commit a3fa298
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 74 deletions.
diff --git a/src/App.js b/src/App.js
@@ -12,18 +12,18 @@ class App extends Component {
     this.state = {
       renderPage: () => (<Loading />),
       file: null,
-      location: {},
-      isSignedIn: undefined,
+      location: null,
+      isSignedIn: null,
       photosToModerate: []
     };
     this.geoid = null;
   }
 
   openAnonymousPage = () => {
-    this.setState({ renderPage: () => (<config.AnonymousPage closePage={this.closePage}/>) });
+    this.setState({ renderPage: () => (<config.AnonymousPage closePage={this.openLandingPage}/>) });
   };
 
-  closePage = () => {
+  openLandingPage = () => {
     this.setState({ renderPage: () => (<LandingPage
         openMenu={this.openMenu}
         closeMenu={this.closeMenu}
@@ -38,47 +38,42 @@ class App extends Component {
   };
 
   openSignedinPage = () => {
-    this.setState({ renderPage: () => (<config.SignedinPage closePage={this.closePage}/>) });
+    this.setState({ renderPage: () => (<config.SignedinPage closePage={this.openLandingPage}/>) });
   };
 
   openEverybodyPage = () => {
-    this.setState({ renderPage: () => (<config.EverybodyPage closePage={this.closePage}/>) });
+    this.setState({ renderPage: () => (<config.EverybodyPage closePage={this.openLandingPage}/>) });
   };
 
   openModeratorPage = () => {
-    this.setState({ renderPage: () => (<config.ModeratorPage closePage={this.closePage} photos={this.state.photosToModerate}/>) });
+    this.setState({ renderPage: () => (<config.ModeratorPage closePage={this.openLandingPage} photos={this.state.photosToModerate}/>) });
   };
 
   openPhotoPage = (file) => {
     this.setState({
-      renderPage: () => (<PhotoPage location={this.state.location} file={this.state.file} closePage={this.closePage}/>),
+      renderPage: () => (<PhotoPage location={this.state.location} file={this.state.file} closePage={this.openLandingPage}/>),
       file
     });
   };
 
   openMap = () => {
-    this.setState({ renderPage: () => (<Map closePage={this.closePage}/>) });
+    this.setState({ renderPage: () => (<Map closePage={this.openLandingPage}/>) });
   };
 
-  getLocation() {
+  setLocationWatcher() {
     if (navigator && navigator.geolocation) {
       this.geoid = navigator.geolocation.watchPosition(position => {
         const location = {
           latitude: position.coords.latitude,
           longitude: position.coords.longitude
         };
+
         this.setState({
           location
         });
 
-        this.closePage();
-
       }, error => {
         console.log('Error: ', error.message);
-        this.closePage();
-      }, {
-        enableHighAccuracy: true,
-        timeout: 3000
       });
     }
   }
@@ -98,7 +93,9 @@ class App extends Component {
       this.setState({isSignedIn: user});
     });
 
-    this.getLocation();
+    this.setLocationWatcher();
+
+    this.openLandingPage();
   }
 
   async componentWillUnmount() {
@@ -109,8 +106,7 @@ class App extends Component {
     await this.unregisterPhotosToModerate();
     await config.dbModule.disconnect();
 
-    if(navigator.geolocation) navigator.geolocation.clearWatch(this.geoid);
-
+    if(this.geoid && navigator.geolocation) navigator.geolocation.clearWatch(this.geoid);
   }
 
   render() {

diff --git a/src/components/PhotoPage.js b/src/components/PhotoPage.js
@@ -5,7 +5,9 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
-import Loading from './Loading';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+// import Loading from './Loading';
 import backButton from '../images/left-arrow.svg';
 import config from '../custom/config';
 import './PhotoPage.scss';
@@ -16,65 +18,61 @@ class PhotoPage extends Component {
     this.state = {
       imgSrc: '',
       open: false,
-      opendialogtext: false,
       message: '',
       value: '',
       sending: false
-    };;
+    };
 
     this.base64 = null;
+    this.dialogCloseCallback = null;
   }
 
   handleChange = (event) => {
     this.setState({ value: event.target.value });
   }
 
-  openDialog = (message) => {
+  openDialog = (message, fn) => {
     this.setState({
       sending: false,
       open: true,
       message
     });
+
+    this.dialogCloseCallback = fn;
   }
 
   closeDialog = () => {
-    this.setState({ open: false });
-    if (this.state.message === 'Failed to upload. Please try again!') {
-      this.loadImage();
-    } else {
-      this.closePage();
-    }
+    this.dialogCloseCallback ? this.dialogCloseCallback() : this.setState({ open: false });
   }
 
-  openDialogText = () => {
-    this.setState({ opendialogtext: true });
-  }
+  sendFile = async () => {
+    if (!this.props.location) {
+      this.openDialog("Could not get the location yet. You won't be able to upload an image.");
+    } else {
 
-  closeDialogText = () => {
-    this.setState({ opendialogtext: false });
-  }
+      let data = {};
+      const text =  this.state.value;
+      const { location } = this.props;
+      data.base64 = this.base64;
+      if (text !== '') {
+        data['text'] = text;
+        if (location) {
+          data['latitude'] = location.latitude;
+          data['longitude'] = location.longitude;
+        }
+        this.setState({ sending: true });
+        try {
+          const res = await config.uploadPhoto(data);
+          console.log(res);
+          this.openDialog("Photo was uploaded successfully", this.closePage);
 
-  sendFile = async () => {
-    let data = {}
-    const text =  this.state.value;
-    const { location } = this.props;
-    data.base64 = this.base64;
-    if (text !== '') {
-      data['text'] = text;
-      if (location) {
-        data['latitude'] = location.latitude;
-        data['longitude'] = location.longitude;
-      }
-      this.setState({ sending: true });
-      try {
-        const res = await config.uploadPhoto(data);
-        console.log(res);
-        this.openDialog("Photo was uploaded successfully");
-      } catch (e) {
-        this.openDialog(e.message || e);
+        } catch (e) {
+          this.openDialog(e.message || e);
+        }
+      } else {
+        this.openDialog("Please enter some text");
       }
-    } else {
-      this.openDialogText();
+
     }
   }
 
@@ -120,10 +118,7 @@ class PhotoPage extends Component {
 
   render() {
     return (
-      this.state.sending ?
-        <Loading />
-      :
-        <div className='geovation-photos'>
+       <div className='geovation-photos'>
           <div className='headline'>
             <Button onClick={this.closePage}>
               <img className='buttonback' src={backButton} alt=''/>
@@ -157,23 +152,16 @@ class PhotoPage extends Component {
               </Button>
             </DialogActions>
           </Dialog>
-          <Dialog
-            open={this.state.opendialogtext}
-            onClose={this.closeDialogText}
-            aria-labelledby='alert-dialog-title'
-            aria-describedby='alert-dialog-description'
-          >
+
+          <Dialog open={this.state.sending}>
             <DialogContent>
-              <DialogContentText id='alert-dialog-description'>
-                Please enter some text
+              <DialogContentText id="loading-dialog-text">
+                Be patient ;)
               </DialogContentText>
+              <CircularProgress className="progress" size={50} thickness={6}/>
             </DialogContent>
-            <DialogActions>
-              <Button onClick={this.closeDialogText} color='primary'>
-                Ok
-              </Button>
-            </DialogActions>
           </Dialog>
+
         </div>
     );
   }

diff --git a/src/components/PhotoPage.scss b/src/components/PhotoPage.scss
@@ -16,7 +16,6 @@
     .buttonback {
       height:25px
     }
-
   }
 
   .entertext {
@@ -56,5 +55,8 @@
 
   }
 
+}
 
-};
+.progress {
+  color: $color2 !important;
+}