fix: remove unnecesary loadings and fix loading display (#42)

* fix: remove unnecesary loadings and fix loading display

* fix: remove last slash in baseURL

Author: vacodoceo

src/components/Loading/Loading.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import Container from '@material-ui/core/Container'
+import Grid from '@material-ui/core/Grid'
+import { makeStyles } from '@material-ui/core/styles'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+
+const useStyles = makeStyles({
+  container: {
+    height: 'calc(100vh - 3px)',
+    padding: 0,
+  },
+  dim: {
+    left: 0,
+    width: '100%',
+    height: '102%',
+    position: 'fixed',
+    backgroundColor: fade('#ffffff', 0.5),
+    zIndex: 10001,
+    top: 56,
+  },
+  circularProgress: {
+    position: 'relative',
+    top: -28,
+  },
+})
+
+const Loading = () => {
+  const classes = useStyles()
+  return (
+    <Container className={classes.dim}>
+      <Grid
+        container
+        direction="column"
+        justify="center"
+        alignItems="center"
+        align="center"
+        className={classes.container}
+      >
+        <Grid item>
+          <CircularProgress className={classes.circularProgress} />
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}
+
+export default Loading

src/redux/store.js

@@ -30,7 +30,7 @@ import currentTripReducer from './reducers/currentTrip'
 import { currentTripModel } from './models/currentTrip'
 
 export const client = axios.create({
-  baseURL: 'https://playground-api.salgode.com',
+  baseURL: 'https://api.salgode.com',
   responseType: 'json',
   requestType: 'json',
 })

src/screens/FindTrip/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import { Container } from '@material-ui/core'
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 import Select, { components } from 'react-select'
 import { withStyles } from '@material-ui/core/styles'
 import { FindTripsCard } from './../../components/MyTripsCard/index'
@@ -128,7 +128,7 @@ class FindTripScreen extends Component {
             }}
           />
           {loading ? (
-            <CircularProgress />
+            <Loading />
           ) : (
             <div>
               {trips.map((trip, i) => (

src/screens/MyTripDetails/index.js

@@ -11,7 +11,7 @@ import { TripDetailsCard } from '../../components/MyTripsCard/index'
 import { TripManifestCard } from '../../components/MyTripsCard/index'
 
 // Components
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 import Divider from '@material-ui/core/Divider'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
@@ -92,7 +92,7 @@ class MyTripDetails extends Component {
         'Hubo un problema obteniendo el detalle del viaje. Por favor intentalo de nuevo.'
       )
     }
-    this.setState({ manifest: reserve.payload.data })
+    this.setState({ manifest: reserve.payload.data, loading: false })
   }
 
   renderDetails() {
@@ -131,7 +131,7 @@ class MyTripDetails extends Component {
 
   render() {
     const { loading, reservations } = this.state
-    if (loading) return <CircularProgress />
+    if (loading) return <Loading />
     return (
       <div>
         {this.renderDetails()}

src/screens/MyTrips/index.js

@@ -8,7 +8,7 @@ import './style.sass'
 import { MyTripsCard } from '../../components/MyTripsCard/index'
 
 // Components
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 import Grid from '@material-ui/core/Grid'
 
 class MyTrips extends Component {
@@ -45,7 +45,7 @@ class MyTrips extends Component {
     const { loading, trips } = this.state
     return (
       <div>
-        {loading && <CircularProgress />}
+        {loading && <Loading />}
         <Grid container spacing={2} justify="center" alignItems="center">
           {trips.map((trip, i) => {
             return (

src/screens/PassengerTrips/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import { getPassengerTripsAction } from '../../redux/actions/passengerTrips'
 import PassengerTripCard from '../../components/PassengerTrips/index'
 
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 import Grid from '@material-ui/core/Grid'
 
 class PassengerTrips extends Component {
@@ -39,7 +39,7 @@ class PassengerTrips extends Component {
   render() {
     const { loading, trips } = this.state
     if (loading) {
-      return <div>{loading && <CircularProgress />}</div>
+      return <div>{loading && <Loading />}</div>
     }
     return (
       <div>

src/screens/RequestedTrip/index.js

@@ -7,7 +7,7 @@ import { fetchRequestedTrips } from '../../redux/actions/requestedTrip'
 import { RequestedTripCard } from '../../components/MyTripsCard/index'
 
 // Components
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 import Grid from '@material-ui/core/Grid'
 
 class RequestedTrip extends Component {
@@ -44,7 +44,7 @@ class RequestedTrip extends Component {
     const { loading, trips } = this.state
     return (
       <div>
-        {loading && <CircularProgress />}
+        {loading && <Loading />}
         <Grid container spacing={2} justify="center" alignItems="center">
           {trips.map((trip, i) => {
             return (

src/screens/SignIn/index.js

@@ -10,7 +10,7 @@ import { setObject, USER_DATA, TOKEN } from '../../utils/storeData'
 
 // Components
 import { SignInForm } from '../../components/index'
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 
 const MESSAGE =
   'Hubo un problema iniciando sesión. Por favor intentalo de nuevo.'
@@ -33,7 +33,10 @@ class SignInScreen extends React.Component {
 
     const user = await signIn(payload)
 
-    if (user.error || !user.payload.data.email) return alert(MESSAGE)
+    if (user.error || !user.payload.data.email) {
+      this.setState({ loading: false })
+      return alert(MESSAGE)
+    }
 
     this.setState({ loading: false })
     setObject(USER_DATA, user.payload.data)
@@ -47,7 +50,7 @@ class SignInScreen extends React.Component {
       <div className="sign-in">
         <SignInForm onSubmit={this.onSubmit} />
 
-        {loading && <CircularProgress />}
+        {loading && <Loading />}
       </div>
     )
   }

src/screens/SignUp/index.js

@@ -10,7 +10,7 @@ import { signupUser } from '../../redux/actions/user'
 
 // Components
 import { SignUpForm } from '../../components/index'
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 
 const MESSAGE = 'Hubo un problema registrandote. Por favor intentalo de nuevo.'
 
@@ -34,8 +34,10 @@ class SignUpScreen extends React.Component {
 
     this.setState({ loading: false })
 
-    if (user.error || !user.payload.data.email || !user.payload.data.user_id)
+    if (user.error || !user.payload.data.email || !user.payload.data.user_id) {
+      this.setState({ loading: false })
       return alert(MESSAGE)
+    }
 
     setObject(USER_DATA, user.payload.data)
     setObject(TOKEN, user.payload.data.token)
@@ -49,7 +51,7 @@ class SignUpScreen extends React.Component {
       <div className="sign-up">
         <SignUpForm onSubmit={this.onSubmit} />
 
-        {loading && <CircularProgress />}
+        {loading && <Loading />}
       </div>
     )
   }

src/screens/UpdateUser/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import UpdateUserForm from '../../components/User/UpdateForm'
-import { CircularProgress } from '@material-ui/core'
+import Loading from '../../components/Loading/Loading'
 import { getObject, USER_DATA } from '../../utils/storeData'
 
 const UpdateUser = () => {
@@ -21,7 +21,7 @@ const UpdateUser = () => {
     setIsLoading(false)
   }, [])
 
-  if (isLoading) return <CircularProgress />
+  if (isLoading) return <Loading />
 
   return (
     <div className="columns has-margin-top-40">