From e389116aa33a3425f7527bd2a1632388377ca096 Mon Sep 17 00:00:00 2001
From: Vinicius7Codeby <viniciusgabriel.pb@gmail.com>
Date: Sat, 1 Jul 2023 00:30:46 -0300
Subject: [PATCH] feat: :art: custom period filter on regional consumptions

---
 .../src/screens/PersonalConsumption/index.tsx |  2 +-
 .../src/screens/RegionalConsumption/index.tsx | 34 +++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/mobile/src/screens/PersonalConsumption/index.tsx b/mobile/src/screens/PersonalConsumption/index.tsx
index b931079..974b826 100644
--- 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
index bc619e3..52d36b9 100644
--- 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}
                     />
 
                     {