add alert-level-changes widget with working time range selector

client/src/components/Widgets/PlumeEvents.jsx

@@ -2,24 +2,13 @@ import VdapApi from '../../hooks/useVdapApi.js';
 import { useMemo } from 'react';
 import Plot from 'react-plotly.js';
 import {Box, Flex, Spinner, Text} from "@chakra-ui/react";
+import useBuildUrl from "@/hooks/useBuildUrl.js";
 
 export default function PlumeEvents({ settings, widgetID}) {
-  const url = useMemo(() =>{
-    if (settings?.startDate && settings?.endDate)
-      return '/api/v2/plume_events?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate;
-    else {
-      const base_url = '/api/v2/plume_events';
-      let today = new Date();
-      let sevenDaysAgo = new Date(today);
-      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
-
-      sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA');
-      today = today.toLocaleDateString('en-CA');
-
-      return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today;
-    }
-  }, [settings?.startDate, settings?.endDate]);
+  // Build url, defaults to 7 days past
+  const url = useBuildUrl('/api/v2/plume_events', settings?.startDate, settings?.endDate);
 
+  // Retrieve data from api
   const { data: apiData, isLoading, error } = VdapApi(url);
 
   const plotTraces = useMemo(() => {