Merge branch 'develop' into 306-create-v2-chooseresource-desktop

phlask · Jul 18, 2023 · 36d655c · 36d655c
2 parents 8cc41f9 + d37255e
commit 36d655c
Show file tree

Hide file tree

Showing 14 changed files with 146 additions and 86 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+16.18.0
diff --git a/README.md b/README.md
@@ -80,7 +80,11 @@ Code behind the PHLASK Web Map
 
 ### Yarn
 
-1. Ensure you have [nodejs v16](https://nodejs.org/download/release/latest-v16.x/) installed on your machine
+1. Ensure you have [nodejs v16](https://nodejs.org/download/release/latest-v16.x/) installed on your machine.
+   - You can also use use [nvm](https://github.com/nvm-sh/nvm/tree/master#install--update-script).
+   - once you have install nvm
+   - run `nvm install` <- this will download the required verison (only required on the first installation)
+   - run `nvm use` sets that to the active version of node in your terminal
 1. Ensure you have [Yarn](https://yarnpkg.com/en/) installed on your machine
 1. Run `yarn install`
 1. Run `yarn start`

diff --git a/src/actions/actions.js b/src/actions/actions.js
@@ -106,7 +106,7 @@ export const getBathroomTaps = () => dispatch => {
 
   return onValue(ref(database, '/'), snapshot => {
     const snapshotVal = snapshot.val();
-    dispatch(getForagingSuccess(snapshotVal));
+    dispatch(getBathroomSuccess(snapshotVal));
   });
 };
 

diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js
@@ -17,7 +17,7 @@ const AddResourceModalV2 = props => {
   const onClose = () => props.setOpen(false);
 
   const refNode = createRef();
-  useOnClickOutside(refNode, () => onClose());
+  //useOnClickOutside(refNode, () => onClose());
 
   return (
     <>

diff --git a/src/components/ClosestTap/ClosestTap.js b/src/components/ClosestTap/ClosestTap.js
@@ -47,8 +47,8 @@ function getClosest(data, v) {
       closestTap.address = distances[i].address;
     }
   }
-
   return closestTap;
+
 }
 
 function getCoordinates() {

diff --git a/src/components/Foot/Foot.js b/src/components/Foot/Foot.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import ClosestTap from '../ClosestTap/ClosestTap';
 export class Foot extends Component {
   render() {
     return (

diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.js b/src/components/ReactGoogleMaps/ReactGoogleMaps.js
@@ -2,6 +2,7 @@ import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
 import React, { Component } from 'react';
 import ReactTouchEvents from 'react-touch-events';
 import SearchBar from '../SearchBar/SearchBar';
+import TutorialModal from '../TutorialModal/TutorialModal';
 import styles from './ReactGoogleMaps.module.scss';
 import { connect } from 'react-redux';
 import SelectedTap from '../SelectedTap/SelectedTap';
@@ -344,16 +345,16 @@ export class ReactGoogleMaps extends Component {
             </Map>
           </div>
         </ReactTouchEvents>
-        <div className={styles.searchBarContainer}>
-          <SearchBar
-            className="searchBar"
-            search={location => this.searchForLocation(location)}
-          />
-        </div>
-        <div>
-          {/* TODO: Rebuild the openResourceModal and setOpenResourceModal properties, since this is still class-based 
-              The intent behind this change is to have the Toolbar and AddResourceModal visually contained in the same bottom-left area so that we can take
-              the responsibility of positioning away from each and keep their presentation relative to their parent container */}
+        <Stack position="absolute" bottom="0px" height="143px" width="34%">
+          <Stack direction="row" spacing={2}>
+            <SearchBar
+              className="searchBar"
+              search={location => this.searchForLocation(location)}
+            />
+            <TutorialModal
+              showButton={isMobile ? !this.state.isSearchBarShown : true}
+            />
+          </Stack>
           <AddResourceModalV2
             open={this.state.openResourceModal}
             setOpen={() =>
@@ -370,7 +371,7 @@ export class ReactGoogleMaps extends Component {
             }
           />{' '}
           {/* TODO: Remove position-related styling from this component */}
-        </div>
+        </Stack>
         <SelectedTap></SelectedTap>
       </div>
     );

diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss b/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss
@@ -1,6 +1,7 @@
 .searchBarContainer {
-  position: relative;
-  top: 57px;
+  position: absolute;
+  width: 34%;
+  bottom: 75px;
 }
 
 .mapContainer {

diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js
@@ -12,7 +12,9 @@ import {
   faSearchLocation,
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons';
-import TutorialModal from '../TutorialModal/TutorialModal';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import SearchIcon from '@mui/icons-material/Search';
 
 class SearchBar extends React.Component {
   constructor(props) {
@@ -86,13 +88,18 @@ class SearchBar extends React.Component {
                   }`}
                 >
                   {/* type="search" is only HTML5 compliant */}
-                  <input
+                  <Input
                     {...getInputProps({
-                      placeholder: 'Search For Taps Near...'
+                      placeholder: 'Search For Resources Near...'
                     })}
                     className={`${styles.searchInput} form-control`}
                     type="search"
                     ref={this.state.refSearchBar}
+                    startAdornment={
+                      <InputAdornment position="start">
+                        <SearchIcon />
+                      </InputAdornment>
+                    }
                   />
                   {loading && (
                     <div className={styles.autocompleteDropdown}>
@@ -150,10 +157,6 @@ class SearchBar extends React.Component {
             />
           </button>
         )}
-
-        <TutorialModal
-          showButton={isMobile ? !this.state.isSearchBarShown : true}
-        />
       </>
     );
   }

diff --git a/src/components/SearchBar/SearchBar.module.scss b/src/components/SearchBar/SearchBar.module.scss
@@ -1,7 +1,7 @@
 .desktopSearch {
   display: flex;
   flex-direction: row;
-  width: 100%;
+  width: 84%;
   justify-content: flex-start;
   padding: 1rem 0 0 1rem;
   pointer-events: none;

diff --git a/src/components/SelectedTap/SelectedTap.js b/src/components/SelectedTap/SelectedTap.js
@@ -59,10 +59,11 @@ class SelectedTap extends React.Component {
   };
 
   getWalkingDurationAndTimes = () => {
+    if (!this.props.selectedPlace) return;
     const orsAPIKey =
       '5b3ce3597851110001cf6248ac903cdbe0364ca9850aa85cb64d8dfc';
     fetch(`https://api.openrouteservice.org/v2/directions/foot-walking?api_key=${orsAPIKey}&start=${this.props.userLocation.lng},
-    ${this.props.userLocation.lat}&end=${this.props.selectedPlace.lon},${this.props.selectedPlace.lat}`)
+    ${this.props.userLocation?.lat}&end=${this.props.selectedPlace?.lon},${this.props.selectedPlace?.lat}`)
       .then(response => response.json())
       .then(data => {
         // duration is returned in seconds
@@ -165,7 +166,7 @@ class SelectedTap extends React.Component {
     ReactGA.event({
       category: `Tap - ${this.props.phlaskType}`,
       action: 'InfoShown',
-      label: `${this.props.selectedPlace.organization}, ${this.props.selectedPlace.address}`
+      label: `${this.props.selectedPlace?.organization}, ${this.props.selectedPlace?.address}`
     });
   }
 
@@ -175,13 +176,13 @@ class SelectedTap extends React.Component {
     const selectedPlace = this.props.selectedPlace;
 
     this.setState({
-      organization: selectedPlace.organization,
-      address: selectedPlace.address,
-      tapDescription: selectedPlace.description
-        ? selectedPlace.description
+      organization: selectedPlace?.organization,
+      address: selectedPlace?.address,
+      tapDescription: selectedPlace?.description
+        ? selectedPlace?.description
         : 'Happy PHLasking',
-      tapStatement: selectedPlace.statement,
-      tapNormsAndRules: selectedPlace.norms_rules
+      tapStatement: selectedPlace?.statement,
+      tapNormsAndRules: selectedPlace?.norms_rules
     });
   }
 
@@ -213,24 +214,26 @@ class SelectedTap extends React.Component {
         <div>
           {isMobile && (
             <div ref={this.refSelectedTap} id="tap-info-container-mobile">
-              <SwipeableDrawer
-                anchor="bottom"
-                open={this.props.showingInfoWindow}
-                onOpen={() => this.toggleInfoWindow(true)}
-                onClose={() => this.toggleInfoWindow(false)}
-                PaperProps={{ square: false }}
-              >
-                <SelectedTapMobile
-                  image={tempImages.tapImg}
-                  estWalkTime={this.state.walkingDuration}
-                  selectedPlace={this.props.selectedPlace}
+              {this.props.selectedPlace && (
+                <SwipeableDrawer
+                  anchor="bottom"
+                  open={this.props.showingInfoWindow}
+                  onOpen={() => this.toggleInfoWindow(true)}
+                  onClose={() => this.toggleInfoWindow(false)}
+                  PaperProps={{ square: false }}
                 >
-                  <SelectedTapHours
-                    infoIsExpanded={this.props.infoIsExpanded}
+                  <SelectedTapMobile
+                    image={tempImages.tapImg}
+                    estWalkTime={this.state.walkingDuration}
                     selectedPlace={this.props.selectedPlace}
-                  />
-                </SelectedTapMobile>
-              </SwipeableDrawer>
+                  >
+                    <SelectedTapHours
+                      infoIsExpanded={this.props.infoIsExpanded}
+                      selectedPlace={this.props.selectedPlace}
+                    />
+                  </SelectedTapMobile>
+                </SwipeableDrawer>
+              )}
             </div>
           )}
           {!isMobile && (
@@ -287,11 +290,11 @@ class SelectedTap extends React.Component {
                       {this.props.phlaskType === PHLASK_TYPE_WATER ? (
                         <img
                           className="tap-info-icon-img"
-                          src={this.props.selectedPlace.infoIcon}
+                          src={this.props.selectedPlace?.infoIcon}
                           alt=""
                         ></img>
                       ) : (
-                        this.props.selectedPlace.infoIcon
+                        this.props.selectedPlace?.infoIcon
                       )}
                     </div>
                   </div>