feat: 🎨 custom period filter on regional consumptions

Vini7Dev · Jul 1, 2023 · e389116 · e389116
1 parent ffbe26f
commit e389116
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/mobile/src/screens/PersonalConsumption/index.tsx b/mobile/src/screens/PersonalConsumption/index.tsx
@@ -80,7 +80,7 @@ export const PersonalConsumption: React.FC = () => {
         const formatEndDate = `${format(end, 'yyyy-MM-dd')}T23:59:59.999Z`
 
         handleGetConsumptionMarkings(`start_date=${formatStartDate}&end_date=${formatEndDate}`)
-    }, [handleGetConsumptionMarkings])
+    }, [compareBy, handleGetConsumptionMarkings])
 
     const handleSelectHydrometer = useCallback((value?: string) => {
         setSelectedHydrometerId(value)

diff --git a/mobile/src/screens/RegionalConsumption/index.tsx b/mobile/src/screens/RegionalConsumption/index.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react'
+import { format } from 'date-fns'
 
 import {
     ScreenScrollView,
@@ -78,23 +79,33 @@ export const RegionalConsumption: React.FC = () => {
         return `Antes: ${pastConsumptionValueFormat}/m³ → Atual: ${presentConsumptionValueFormat}/m³`
     }, [compareBy, groupedConsumptionMarkings])
 
-    useEffect(() => {
-        const handleGetConsumptionMarkings = async () => {
-            setIsLoadingConsumptions(true)
+    const handleGetConsumptionMarkings = async (query?: string) => {
+        setIsLoadingConsumptions(true)
 
-            const {
-                data: groupedConsumptionMarkingsResponse
-            } = await api.get<GroupedConsumptionMarkings>(
-                `/regional-consumption-markings?period_type=${compareBy}`
-            )
+        const {
+            data: groupedConsumptionMarkingsResponse
+        } = await api.get<GroupedConsumptionMarkings>(
+            `/regional-consumption-markings?period_type=${compareBy}&${query}`
+        )
 
-            setGroupedConsumptionMarkings(groupedConsumptionMarkingsResponse)
-            setIsLoadingConsumptions(false)
-        }
+        setGroupedConsumptionMarkings(groupedConsumptionMarkingsResponse)
+        setIsLoadingConsumptions(false)
+    }
 
+    useEffect(() => {
         handleGetConsumptionMarkings()
     }, [compareBy])
 
+    const handleLoadConsumptionsByCustomInterval = useCallback(async (
+        start: Date,
+        end: Date,
+    ) => {
+        const formatStartDate = `${format(start, 'yyyy-MM-dd')}T00:00:00.000Z`
+        const formatEndDate = `${format(end, 'yyyy-MM-dd')}T23:59:59.999Z`
+
+        handleGetConsumptionMarkings(`start_date=${formatStartDate}&end_date=${formatEndDate}`)
+    }, [compareBy, handleGetConsumptionMarkings])
+
     const handleUpdateCompareBy = useCallback((value: CompareBy) => {
         setCompareBy(value)
     }, [])
@@ -107,6 +118,7 @@ export const RegionalConsumption: React.FC = () => {
                 <ScreenContent>
                     <CompareByOptions
                         onSelectCompareOption={handleUpdateCompareBy}
+                        onSelectValidCustomInterval={handleLoadConsumptionsByCustomInterval}
                     />
 
                     {