Add reset search button

Author: rachelekm

demo/app/src/components/Header/Header.js

@@ -1,14 +1,17 @@
 import Link from 'next/link';
 import { FaGithub } from 'react-icons/fa';
 import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/DateRangePicker';
-
 import { useAppContext } from 'src/context/appContext';
 import Container from '@components/Container';
 
+import {
+  UTurnArrowLeft
+} from '@vectopus/atlas-icons-react';
+
 import styles from './Header.module.scss';
 
 const Header = () => {
-  const { userParams, setUserParams } = useAppContext();
+  const { userParams, setUserParams, opportunities, resetSearch } = useAppContext();
 
   return (
     <>
@@ -31,6 +34,7 @@ const Header = () => {
       </header>
       <div className={styles.toolbar}>
         <DateRangePicker onChange={(v) => setUserParams({...userParams, dateRange: v})} value={userParams.dateRange} clearIcon={null} minDate={new Date()} />
+        {opportunities && <button className={styles.resetSearch} onClick={resetSearch}>Reset Search <UTurnArrowLeft size={12} className={styles.resetSearchIcon}/> </button>}
       </div>
     </>
   );

demo/app/src/components/Header/Header.module.scss

@@ -61,4 +61,19 @@
   height: 35px;
   background-color: $color-light-gray;
   z-index: 9999;
+
+  .resetSearch,
+  .resetSearchIcon {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .resetSearch {
+    margin-left: 20px;
+    background: none;
+    color: grey;
+    padding: 0;
+    text-decoration: none;
+    border: none;
+  }
 }

demo/app/src/components/Map/Map.js

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
-import { useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useAppContext } from 'src/context/appContext';
 
 // react-leaflet-draw styles
@@ -44,6 +44,14 @@ const Map = (props) => {
   const [featureGroup, setFeatureGroup] = useState();
   const { userParams, setUserParams } = useAppContext();
   const { url, attribution } = whichMap('Stadia.AlidadeSmooth');
+  const markerRef = useRef(null);
+
+  useEffect(() => {
+    if(!userParams.geometry && markerRef.current){
+      featureGroup.removeLayer(markerRef.current);
+      markerRef.current = null;
+    }
+  }, [userParams]);
 
   /**
    * saves feature group ref for later editing
@@ -56,6 +64,7 @@ const Map = (props) => {
    * on layer created handler
    */
   function onCreated(e) {
+    markerRef.current = e.layer;
     setUserParams({...userParams, geometry: {
           "type": "Point",
           "coordinates": [e.layer._latlng.lng, e.layer._latlng.lat]

demo/app/src/context/appContext.js

@@ -1,12 +1,21 @@
-import { createContext, useContext, useMemo, useState } from 'react';
+import { createContext, useContext, useRef, useMemo, useState } from 'react';
 import useGetOpportunities from 'src/hooks/useGetOpportunities';
 import useGetProducts from '../hooks/useGetProducts';
 import { formatToISOString } from 'src/utils';
 
 const AppContext = createContext();
 
+const today = new Date();
+const defaultUserParams = {
+  dateRange: [
+    today,
+    new Date(new Date(today).setDate(today.getDate() + 3)),
+  ],
+  provider: 'all',
+  product: 'all'
+}
+
 export default function AppProvider({ children }) {
-  const today = new Date();
   /**
    * @typedef {object} UserParams
    * @property {[Date, Date]} dateRange
@@ -16,17 +25,11 @@ export default function AppProvider({ children }) {
   const [
     userParams,
     setUserParams
-  ] = useState({
-    dateRange: [
-      today,
-      new Date(new Date(today).setDate(today.getDate() + 3)),
-    ],
-    provider: 'all',
-    product: 'all'
-  });
+  ] = useState({...defaultUserParams});
   const [hoveredOpportunity, setHoveredOpportunity] = useState(null);
   const [selectedOpportunity, setSelectedOpportunity] = useState(null);
   const [openFilters, setOpenFilters] = useState(false);
+  const opportunitiesRef = useRef(null);
 
   const postParams = useMemo(() => {
     return userParams.geometry ? {
@@ -40,7 +43,13 @@ export default function AppProvider({ children }) {
   }, [userParams])
 
   const { isLoading: isLoadingProducts, data: products, error: errorProducts } = useGetProducts();
-  const { isLoading: isLoadingOpps, data: opportunities, error: errorOpps } = useGetOpportunities(products, postParams);
+  const { isLoading: isLoadingOpps, data: opportunitiesData, error: errorOpps } = useGetOpportunities(products, postParams);
+
+  opportunitiesRef.current = (postParams && opportunitiesData) ? opportunitiesData : null;
+
+  function resetSearch(){
+    setUserParams({...defaultUserParams});
+  }
 
   const app = {
     userParams,
@@ -49,15 +58,16 @@ export default function AppProvider({ children }) {
     isLoadingProducts,
     products,
     errorProducts,
-    opportunities,
+    opportunities: opportunitiesRef.current,
     errorOpps,
     selectedOpportunity,
     setSelectedOpportunity,
     hoveredOpportunity,
     setHoveredOpportunity,
     openFilters,
     setOpenFilters,
-    setHoveredOpportunity
+    setHoveredOpportunity,
+    resetSearch
   }
 
   return (