feat: 🎨 list user hydrometers on personal consumption select

Vini7Dev · Jun 25, 2023 · a86a141 · a86a141
1 parent 0adcf87
commit a86a141
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/mobile/src/screens/PersonalConsumption/index.tsx b/mobile/src/screens/PersonalConsumption/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { format } from 'date-fns'
 import { LineChart } from 'react-native-gifted-charts'
 
@@ -18,6 +18,7 @@ import { NavigationHeader } from '../../components/NavigationHeader'
 import { CompareByOptions } from '../../components/CompareByOptions'
 import { MOCK_CONSUMPTIONS } from './MOCK_CONSUMPTIONS'
 import { Select } from '../../components/Select'
+import { api } from '../../services/api'
 
 interface ConsumptionProps {
     id: string
@@ -26,6 +27,11 @@ interface ConsumptionProps {
     created_at: string
 }
 
+interface HydrometerProps {
+    id: string
+    name: string
+}
+
 const ChartComponent: React.FC = () => {
     const {
         pastGroup,
@@ -123,6 +129,20 @@ const ChartComponent: React.FC = () => {
 export const PersonalConsumption: React.FC = () => {
     const [selectedHydrometerId, setSelectedHydrometerId] = useState<string>()
 
+    const [userHydrometerList, setUserHydrometerList] = useState<HydrometerProps[]>([])
+
+    const handleGetUserHydrometerList = async () => {
+        const {
+            data: userHydrometerListResponse
+        } = await api.get<HydrometerProps[]>('/user-hydrometers')
+
+        setUserHydrometerList(userHydrometerListResponse)
+    }
+
+    useEffect(() => {
+        handleGetUserHydrometerList()
+    }, [])
+
     const handleSelectHydrometer = useCallback((value?: string) => {
         setSelectedHydrometerId(value)
     }, [])
@@ -135,10 +155,10 @@ export const PersonalConsumption: React.FC = () => {
                 <ScreenContent>
                     <Select
                         placeholder="Selecione um hidrômetro"
-                        options={[
-                            { label: 'Casa 1', value: '1' },
-                            { label: 'Casa 2', value: '2' },
-                        ]}
+                        options={userHydrometerList.map(hydrometer => ({
+                            value: hydrometer.id,
+                            label: hydrometer.name,
+                        }))}
                         onSelect={handleSelectHydrometer}
                     />
 

diff --git a/mobile/src/screens/PersonalHydrometersList/index.tsx b/mobile/src/screens/PersonalHydrometersList/index.tsx
@@ -69,7 +69,7 @@ const HydrometerItem: React.FC<HydrometerItemProps> = ({
                         </HydrometerName>
 
                         <HydrometerAddress>
-                            {address.street} - {address.number ?? 'S/N'}
+                            {address?.street ?? 'Sem endereço'} - {address?.number ?? 'S/N'}
                         </HydrometerAddress>
                     </>
                 </HydrometerNameContainer>