Merge branch 'main' into feature/falling-fruit#495-change-outdated-tw…

…itter-logo

src/components/auth/LoginPage.js

@@ -49,6 +49,19 @@ const LoginPage = () => {
           })}
           onSubmit={(values, { setSubmitting }) => {
             dispatch(login(values))
+              .unwrap()
+              .catch((error) => {
+                // Here, set the error message based on the error received
+                setStatus(
+                  'general',
+                  `Sign in failed: ${
+                    error.message || 'Unexpected error occurred'
+                  }`,
+                )
+              })
+              .finally(() => {
+                setSubmitting(false)
+              })
             setSubmitting(false)
           }}
         >

src/components/connect/ConnectInitLocation.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { useLocation } from 'react-router-dom'
+
+import { setIsBeingInitializedMobile } from '../../redux/locationSlice'
+import { useAppHistory } from '../../utils/useAppHistory'
+import { useIsDesktop } from '../../utils/useBreakpoint'
+
+const ConnectInitLocation = () => {
+  const isDesktop = useIsDesktop()
+  const history = useAppHistory()
+  const dispatch = useDispatch()
+  const location = useLocation()
+  const isSettingsPage = location.pathname.startsWith('/settings')
+
+  useEffect(() => {
+    if (!isSettingsPage) {
+      if (isDesktop) {
+        history.push('/locations/new')
+        return
+      }
+
+      dispatch(setIsBeingInitializedMobile(true))
+    }
+  }, [history, isDesktop, dispatch, isSettingsPage])
+
+  return null
+}
+
+export default ConnectInitLocation

src/components/connect/ConnectMap.js

@@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { setInitialView } from '../../redux/mapSlice'
 import { parseCurrentUrl } from '../../utils/appUrl'
-import ConnectPath from './ConnectPath'
 
 const DEFAULT_LAT = 40.1125785
 const DEFAULT_LNG = -88.2287926
@@ -25,7 +24,7 @@ const ConnectMap = () => {
     }
   }, [dispatch, hasInitialView]) //eslint-disable-line
 
-  return <ConnectPath />
+  return null
 }
 
 export default ConnectMap

src/components/connect/DisconnectInitLocation.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { setIsBeingInitializedMobile } from '../../redux/locationSlice'
+
+const DisconnectInitLocation = () => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(setIsBeingInitializedMobile(false))
+  }, [dispatch])
+
+  return null
+}
+
+export default DisconnectInitLocation

src/components/connect/connectRoutes.js

@@ -1,5 +1,6 @@
 import { Route } from 'react-router-dom'
 
+import ConnectInitLocation from './ConnectInitLocation'
 import ConnectList from './ConnectList'
 import ConnectLocation from './ConnectLocation'
 import ConnectMap from './ConnectMap'
@@ -8,6 +9,7 @@ import ConnectOverscroll from './ConnectOverscroll'
 import ConnectPath from './ConnectPath'
 import ConnectReview from './ConnectReview'
 import ConnectTypes from './ConnectTypes'
+import DisconnectInitLocation from './DisconnectInitLocation'
 import DisconnectLocation from './DisconnectLocation'
 import DisconnectReview from './DisconnectReview'
 
@@ -35,7 +37,7 @@ const connectRoutes = [
    * - get the view from URL or default to our chosen location centred on U of Illinois
    * - if this is the first render, dispatch a Redux update
    */
-  <Route key="connect-view" path={['/map', '/settings']}>
+  <Route key="connect-view" path={['/map', '/settings', '/locations/init']}>
     <ConnectMap />
   </Route>,
   /*
@@ -63,6 +65,20 @@ const connectRoutes = [
   <Route key="connect-new-location" path="/locations/new">
     <ConnectNewLocation />
   </Route>,
+  /*
+   * ConnectInitLocation
+   * why:
+   * - mobile only URL
+   * - map needs to know we're in this state rather than generic map state
+   *
+   *
+   * actions:
+   * - if on desktop because of screen resize, go to /locations/new
+   * - set a flag in redux
+   */
+  <Route key="connect-init-location" path={['/locations/init', '/settings']}>
+    <ConnectInitLocation />
+  </Route>,
   /*
    * ConnectLocation
    * why:
@@ -95,7 +111,8 @@ const connectRoutes = [
   >
     {({ match }) =>
       match &&
-      match.params.locationId !== 'new' && (
+      match.params.locationId !== 'new' &&
+      match.params.locationId !== 'init' && (
         <ConnectLocation
           locationId={match.params.locationId}
           isBeingEdited={match.params.nextSegment === 'edit'}
@@ -137,7 +154,7 @@ const connectRoutes = [
    *
    * action: clear location in Redux
    */
-  <Route key="disconnect-location" path={['/map']}>
+  <Route key="disconnect-location" path={['/map', '/locations/init']}>
     {({ match }) => match && <DisconnectLocation />}
   </Route>,
   /*
@@ -174,6 +191,16 @@ const connectRoutes = [
   <Route key="disconnect-review" path={['/map', '/locations']}>
     {({ match }) => match && <DisconnectReview />}
   </Route>,
+
+  /*
+   * DisconnectInitLocation
+   * why: need to clear the mobile initialization state when navigating to main views
+   *
+   * action: clear isBeingInitializedMobile in Redux when on /map or /list
+   */
+  <Route key="disconnect-init-location" path={['/map', '/list']}>
+    <DisconnectInitLocation />
+  </Route>,
 ]
 
 export default connectRoutes

src/components/desktop/Header.js

@@ -99,13 +99,15 @@ const StyledHeader = styled.header`
           color: ${({ theme }) => theme.orange};
         }
       }
-      
+
       .signin,
       .signup {
         min-width: auto;
       }
+    }
   }
 `
+
 const Dropdown = ({ className, children, label, isMatch }) => (
   <div className={className}>
     <div className={`button${isMatch ? ' active' : ''}`}>

src/components/list/Locations.js

@@ -10,9 +10,14 @@ import { ReactComponent as LeafIcon } from './leaf.svg'
 
 const TypeNameTagWrapper = styled.span`
   display: inline-block;
-  margin-right: 1em;
   margin-bottom: 0.5em;
   opacity: ${({ isSelected }) => (isSelected ? 1 : 0.5)};
+  font-size: 0.875rem;
+  &:not(:nth-last-child(2))::after {
+    content: '·';
+    margin: 0 0.5em;
+    color: ${({ theme }) => theme.secondaryText};
+  }
 `
 const CommonName = styled.span`
   font-weight: bold;
@@ -25,16 +30,12 @@ const ScientificName = styled.span`
   color: ${({ theme }) => theme.secondaryText};
 `
 
-const TypeNameWrapper = styled.div`
-  font-size: 0.875rem;
-`
-
 const TypeName = ({ commonName, scientificName }) => (
-  <TypeNameWrapper>
+  <span>
     {commonName && <CommonName>{commonName}</CommonName>}
     {commonName && scientificName && <span style={{ margin: '0 0.25em' }} />}
     {scientificName && <ScientificName>{scientificName}</ScientificName>}
-  </TypeNameWrapper>
+  </span>
 )
 
 const LocationItem = styled.li`

src/components/map/MapPage.js

@@ -177,6 +177,7 @@ const MapPage = ({ isDesktop }) => {
     location: selectedLocation,
     isLoading: locationIsLoading,
     streetViewOpen: showStreetView,
+    isBeingInitializedMobile,
   } = useSelector((state) => state.location)
   const {
     mapType,
@@ -195,7 +196,7 @@ const MapPage = ({ isDesktop }) => {
           )
         : locations
 
-  const isAddingLocation = locationId === 'new'
+  const isAddingLocation = locationId === 'new' || isBeingInitializedMobile
   const isViewingLocation =
     locationId !== null && !isEditingLocation && !isAddingLocation
   const showLabels = settingsShowLabels || isAddingLocation || isEditingLocation
@@ -264,7 +265,7 @@ const MapPage = ({ isDesktop }) => {
 
   const handleAddLocationClick = () => {
     if (currentZoom >= VISIBLE_CLUSTER_ZOOM_LIMIT) {
-      history.push('/locations/new')
+      history.push('/locations/init')
     } else {
       toast.info(t('menu.zoom_in_to_add_location'))
     }
@@ -293,7 +294,7 @@ const MapPage = ({ isDesktop }) => {
     >
       {(mapIsLoading || locationIsLoading) && <BottomLeftLoadingIndicator />}
       {isAddingLocation && !isDesktop && <AddLocationCentralUnmovablePin />}
-      {!locationId && !isDesktop && (
+      {!isAddingLocation && !isEditingLocation && !isDesktop && (
         <AddLocationButton onClick={handleAddLocationClick} />
       )}
       {isEditingLocation && !isDesktop && <EditLocationCentralUnmovablePin />}
@@ -428,7 +429,9 @@ const MapPage = ({ isDesktop }) => {
               // confusingly it doesn't work from inside the component
               $geoService={getGoogleMaps && getGoogleMaps().Geocoder}
               onChange={setDraggedPosition}
-              onDragEnd={(newPosition) => dispatch(updatePosition(newPosition))}
+              onDragEnd={(newPosition) => {
+                dispatch(updatePosition(newPosition))
+              }}
             />
           )}
         </GoogleMapReact>

src/components/mobile/LocationNav.js

@@ -53,13 +53,13 @@ const LocationNav = () => {
         path="/locations/:locationId/edit/position"
         component={LocationPositionNav}
       />
-      <Route path="/locations/new/details">
+      <Route path="/locations/new">
         <TopBarNav
-          onBack={() => history.push('/locations/new')}
+          onBack={() => history.push('/locations/init')}
           title="New location"
         />
       </Route>
-      <Route path="/locations/new">
+      <Route path="/locations/init">
         <TopBarNav
           left={
             <Instructions>
@@ -81,7 +81,7 @@ const LocationNav = () => {
                 raised
                 size={54}
                 color={theme.green}
-                onClick={() => history.push('/locations/new/details')}
+                onClick={() => history.push('/locations/new')}
               />
             </>
           }

src/components/mobile/MobileLayout.js

@@ -34,9 +34,7 @@ const shouldDisplayMapPage = (pathname) => {
     strict: false,
   })
 
-  const isPlacingNewLocationMarker =
-    match?.params.locationId === 'new' &&
-    match?.params.nextSegment !== 'details'
+  const isPlacingNewLocationMarker = match?.params.locationId === 'init'
 
   const locationId =
     match?.params.locationId && parseInt(match.params.locationId)
@@ -104,12 +102,12 @@ const MobileLayout = () => {
               <EditLocationForm editingId={match.params.locationId} />
             )}
           </Route>
-          <Route path="/locations/new/details">
+          <Route path="/locations/new">
             <LocationForm />
           </Route>
           <Route path={['/map', '/locations', '/list', '/settings']}>
             <Switch>
-              <Route path="/locations/new" />
+              <Route path="/locations/init" />
               <Route path="/locations/:locationId/edit/position" />
               <Route path="/locations/:locationId">
                 {!streetView && <EntryMobile />}
@@ -135,7 +133,7 @@ const MobileLayout = () => {
             '/reviews/:reviewId/edit',
             '/locations/:locationId/review',
             '/locations/:locationId/edit/details',
-            '/locations/new/details',
+            '/locations/new',
           ]}
         />
         <Route>

src/components/mobile/Tabs.js

@@ -15,9 +15,12 @@ const Tabs = () => {
   const { t } = useTranslation()
   const { pathname } = useLocation()
   const history = useAppHistory()
-  const { locationId, isBeingEdited, streetViewOpen } = useSelector(
-    (state) => state.location,
-  )
+  const {
+    isBeingInitializedMobile,
+    locationId,
+    isBeingEdited,
+    streetViewOpen,
+  } = useSelector((state) => state.location)
   const isLoggedIn = useSelector((state) => !!state.auth.user)
 
   const tabs = [
@@ -71,10 +74,10 @@ const Tabs = () => {
   }, [pathname])
 
   const handleTabChange = (newTabIndex) => {
-    if (newTabIndex === 1 && locationId === 'new') {
+    if (newTabIndex === 1 && isBeingInitializedMobile) {
       // If switching to the Map tab and adding the location, reopen that view
       // to allow e.g. switching satellite view on
-      history.push(`/locations/new`)
+      history.push(`/locations/init`)
     } else if (newTabIndex === 1 && locationId && isBeingEdited) {
       // We could also be editing position of the location
       history.push(`/locations/${locationId}/edit/position`)

src/components/mobile/TopBarSwitch.js

@@ -13,6 +13,7 @@ const TopBarSwitch = () => (
         '/locations/:locationId/review',
         '/locations/:locationId/edit',
         '/locations/new',
+        '/locations/init',
       ]}
     >
       <TopBar>