Correct website regrex

src/components/AddResourceModal/AddBathroom/PageOne.jsx

@@ -16,6 +16,8 @@ import MyLocationIcon from '@mui/icons-material/MyLocation';
 
 import { isMobile } from 'react-device-detect';
 
+import { WEBSITE_REGEX } from '../utils';
+
 const ENTRY_TYPE = [
   { entryType: 'Open access', explanation: 'Public site, open to all' },
   { entryType: 'Restricted', explanation: 'May not be open to all' },
@@ -192,7 +194,7 @@ const PageOne = ({
         <Controller
           rules={{
             required: false,
-            pattern: /^[A-Za-z]{1,}[.]{1}[a-z]{2,3}/
+            pattern: WEBSITE_REGEX
           }}
           control={control}
           name="website"

src/components/AddResourceModal/AddFood/PageOne.jsx

@@ -23,6 +23,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { isMobile } from 'react-device-detect';
 
+import { WEBSITE_REGEX } from '../utils';
+
 const PageOne = ({
   // state values and handlers for the textfields
   onDrop,
@@ -263,7 +265,7 @@ const PageOne = ({
         <Controller
           rules={{
             required: false,
-            pattern: /^[A-Za-z]{1,}[.]{1}[a-z]{2,3}/
+            pattern: WEBSITE_REGEX
           }}
           control={control}
           name="website"

src/components/AddResourceModal/AddForaging/PageOne.jsx

@@ -23,6 +23,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { isMobile } from 'react-device-detect';
 
+import { WEBSITE_REGEX } from '../utils';
+
 const ENTRY_TYPE = [
   { entryType: 'Open access', explanation: 'Public site, open to all' },
   { entryType: 'Restricted', explanation: 'May not be open to all' },
@@ -241,7 +243,7 @@ const PageOne = ({
         <Controller
           rules={{
             required: false,
-            pattern: /^[A-Za-z]{1,}[.]{1}[a-z]{2,3}/
+            pattern: WEBSITE_REGEX
           }}
           control={control}
           name="website"

src/components/AddResourceModal/AddWaterTap/PageOne.jsx

@@ -23,6 +23,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { isMobile } from 'react-device-detect';
 
+import { WEBSITE_REGEX } from '../utils';
+
 const ENTRY_TYPE = [
   { entryType: 'Open access', explanation: 'Public site, open to all' },
   { entryType: 'Restricted', explanation: 'May not be open to all' },
@@ -253,7 +255,7 @@ const PageOne = ({
         <Controller
           rules={{
             required: false,
-            pattern: /^[A-Za-z]{1,}[.]{1}[a-z]{2,3}/
+            pattern: WEBSITE_REGEX
           }}
           control={control}
           name="website"

src/components/AddResourceModal/utils.js

@@ -35,3 +35,13 @@ export const connectToFirebase = (hostname, resourceType) => {
   // return firebase.initializeApp(firebaseConfig, "new");
   return initializeApp(firebaseConfig, 'new');
 };
+
+export const WEBSITE_REGEX = new RegExp(
+  '^([a-zA-Z]+:\\/\\/)?' + // protocol (optional)
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+    '(\\#[-a-z\\d_]*)?$', // fragment locator
+  'i'
+);

src/components/Toolbar/Toolbar.js

@@ -16,6 +16,7 @@ import {
   toggleResourceType,
   toggleResourceMenu
 } from '../../actions/actions';
+import selectFilteredResource from '../../selectors/waterSelectors';
 import styles from './Toolbar.module.scss';
 
 import {
@@ -128,16 +129,7 @@ function Toolbar(props) {
     // NOTE: This was left as an acceptable scenario for now,
     // as it is difficult for a user to do this reliably due to the popup of the location panel.
     // This may be reproducible on Desktop.
-    let data;
-
-    switch (props.resourceType) {
-      case WATER_RESOURCE_TYPE:
-        data = props?.allResources;
-        break;
-      // TODO(vontell): Filter based on requested type
-      default:
-        data = props?.allResources;
-    }
+    let data = props.filteredResources;
 
     const closest = getClosest(data, {
       lat: props.userLocation.lat,
@@ -394,6 +386,7 @@ function Toolbar(props) {
 const mapStateToProps = state => ({
   resourceType: state.filterMarkers.resourceType,
   allResources: state.filterMarkers.allResources,
+  filteredResources: selectFilteredResource(state),
   userLocation: state.filterMarkers.userLocation,
   toolbarModal: state.filterMarkers.toolbarModal,
   isResourceMenuShown: state.filterMarkers.isResourceMenuShown