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

client/src/components/Widgets/IvansAlerts.jsx

@@ -2,6 +2,7 @@ import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
 import {useEffect, useMemo } from 'react';
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import VdapApi from '../../hooks/useVdapApi.js';
+import useBuildUrl from "@/hooks/useBuildUrl.js";
 
 export default function IvansAlerts({ settings, widgetID }) {
   console.log("IvansAlerts widget ID: ", widgetID);
@@ -9,22 +10,8 @@ export default function IvansAlerts({ settings, widgetID }) {
   const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set
   const sorts = settings?.activeSorts;
 
-  // build url once on mount
-  const url = useMemo(() =>{
-    if (settings?.startDate && settings?.endDate)
-      return '/api/v2/comm_coor_ivans?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate;
-    else {
-      const base_url = '/api/v2/comm_coor_ivans';
-      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, default is 7 days past
+  const url = useBuildUrl('/api/v2/comm_coor_ivans', settings?.startDate, settings?.endDate);
 
   // VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
   const {data: apiData, isLoading, error} = VdapApi(url);
@@ -145,7 +132,7 @@ export default function IvansAlerts({ settings, widgetID }) {
 
   if (data.length === 0) return (
     <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Text color="gray.400">No flight level data available this week.</Text>
+      <Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
     </Flex>
   );