fix: fav indicator selection

expo-app/src/assets/icons/indicators/air.tsx

@@ -3,7 +3,7 @@ import Svg, { Mask, Path, G, Circle } from 'react-native-svg';
 
 export function AirIcon() {
   return (
-    <Svg width={36} height={36} viewBox="0 0 36 36" fill="none">
+    <Svg className="h-9 w-9" viewBox="0 0 36 36" fill="none">
       <Mask
         id="a"
         maskUnits="userSpaceOnUse"

expo-app/src/assets/icons/indicators/pollens.tsx

@@ -3,7 +3,7 @@ import Svg, { Circle } from 'react-native-svg';
 
 export function PollensIcon() {
   return (
-    <Svg width={21} height={31} viewBox="0 0 21 31" fill="none">
+    <Svg className="h-9 w-9" viewBox="0 0 21 31" fill="none">
       <Circle
         cx={4.50025}
         cy={4.50025}

expo-app/src/assets/icons/indicators/ultra-violet.tsx

@@ -3,7 +3,7 @@ import Svg, { Circle, Path } from 'react-native-svg';
 
 export function UltraVioletIcon() {
   return (
-    <Svg width={35} height={33} viewBox="0 0 35 33" fill="none">
+    <Svg className="h-9 w-9" viewBox="0 0 35 33" fill="none">
       <Circle cx={17.5011} cy={15.5001} r={8.55186} fill="#fff" />
       <Path
         d="M17.501 24.052a8.552 8.552 0 01-7.322-12.97l7.322 4.418v8.552z"

expo-app/src/assets/icons/indicators/water.tsx

@@ -3,7 +3,7 @@ import Svg, { Path } from 'react-native-svg';
 
 export function WaterIcon() {
   return (
-    <Svg width={40} height={37} viewBox="0 0 37 37" fill="none">
+    <Svg className="h-9 w-9" viewBox="0 0 37 37" fill="none">
       <Path
         d="M5 10c4.138 0 7.242-5 7.242-5s3.103 5 7.24 5c4.139 0 8.276-5 8.276-5s4.139 5 7.242 5M5 22.5c4.138 0 7.242-5 7.242-5s3.103 5 7.24 5c4.139 0 8.276-5 8.276-5s4.139 5 7.242 5M5 35c4.138 0 7.242-5 7.242-5s3.103 5 7.24 5c4.139 0 8.276-5 8.276-5s4.139 5 7.242 5"
         stroke="#fff"

expo-app/src/assets/icons/indicators/weather.tsx

@@ -3,7 +3,7 @@ import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg';
 
 export function WeatherIcon() {
   return (
-    <Svg width={27} height={27} viewBox="0 0 27 27" fill="none">
+    <Svg className="h-9 w-9" viewBox="0 0 27 27" fill="none">
       <G clipPath="url(#clip0_158_6817)" fill="#fff">
         <Path d="M10.334 25.945a.791.791 0 00.791-.79v-2.11a.791.791 0 00-1.582 0v2.11c0 .436.354.79.791.79zM13.498 27a.791.791 0 00.791-.791v-4.746a.791.791 0 00-1.582 0v4.746c0 .437.354.791.791.791zM19.826 27a.791.791 0 00.791-.791v-6.328a.791.791 0 10-1.582 0v6.328c0 .437.354.791.791.791zM23.035 24.643c.414 0 .75-.273.75-.609v-6.496c0-.337-.336-.61-.75-.61s-.75.273-.75.61v6.496c0 .336.336.609.75.609zM16.662 27a.791.791 0 00.791-.791v-3.164a.791.791 0 00-1.582 0v3.164c0 .437.354.791.791.791zM16.662 20.672a.791.791 0 00.791-.791v-2.11a.79.79 0 10-1.582 0v2.11c0 .437.354.79.791.79zM7.17 27a.791.791 0 00.79-.791v-6.328a.791.791 0 10-1.581 0v6.328c0 .437.354.791.79.791zM4.006 20.672a.791.791 0 00.79-.791v-2.11a.791.791 0 10-1.581 0v2.11c0 .437.354.79.79.79zM10.338 20.567a.79.79 0 00.595-.27l7.383-8.438a.791.791 0 00-.595-1.312h-1.885l1.537-3.074a.79.79 0 00-.707-1.145h-3.691a.79.79 0 00-.708.437l-3.691 7.383a.791.791 0 00.707 1.145h1.996l-1.675 4.189a.79.79 0 00.734 1.085z" />
         <Path d="M4.314 5.329A6.074 6.074 0 0110.334 0c1.623 0 3.145.637 4.277 1.77a5.003 5.003 0 017.24 2.466 5.545 5.545 0 015.094 5.52 5.543 5.543 0 01-5.537 5.537H17.41l2.094-2.393c.611-.699.759-1.697.375-2.543a2.379 2.379 0 00-1.529-1.306l.436-.87c.37-.742.331-1.605-.104-2.31a2.358 2.358 0 00-2.019-1.125h-3.691a2.36 2.36 0 00-2.123 1.312l-3.691 7.383a2.355 2.355 0 00-.115 1.852H5.061a5.015 5.015 0 01-5.01-5.01A5.018 5.018 0 014.314 5.33z" />

expo-app/src/components/indicators/indicators-selector.tsx

@@ -1,49 +1,47 @@
 import { View } from 'react-native';
-import MyText from '../ui/my-text';
-import Api from '~/services/api';
-
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Indicator } from '~/types/indicator';
-import Button from '../ui/button';
 import { IndicatorService } from '~/services/indicator';
 import { cn } from '~/utils/tailwind';
+import { useIndicator } from '~/zustand/indicator/useIndicator';
+import Button from '../ui/button';
 
 interface IndicatorsSelectorProps {
-  navigation: any;
-  setFavoriteIndicator: (indicator: Indicator | null) => void;
   indicators: Indicator[] | null;
   favoriteIndicator: Indicator | null;
-  onSubmit: (state: Indicator | null) => void;
+  onSubmit: () => void;
 }
 export function IndicatorsSelector(props: IndicatorsSelectorProps) {
   const [state, setState] = useState<Indicator | null>(props.favoriteIndicator);
+  const { setFavoriteIndicator } = useIndicator((state) => state);
   function handleSelectIndicator(indicator: Indicator) {
     setState(indicator);
   }
 
   function handleSubmit() {
-    props.onSubmit(state);
+    setFavoriteIndicator(state);
+    props.onSubmit();
   }
   return (
-    <View className="flex  items-start  ">
+    <View className="flex items-start">
       {props.indicators?.map((indicator) => {
         const isFavorite = state?.slug === indicator.slug;
         return (
           <Button
             onPress={() => handleSelectIndicator(indicator)}
             viewClassName={cn(
               `${isFavorite ? 'bg-app-yellow' : ''}
-               border-white border-2 rounded-full p-4 my-2 `,
+               border-white border-2 rounded-full px-4 py-2 my-2 items-center`,
             )}
-            textClassName="text-white text-md "
+            textClassName="text-white text-base"
             key={indicator.slug}
             icon={IndicatorService.getIconBySlug(indicator.slug)}
           >
             {indicator.name}
           </Button>
         );
       })}
-      {state?.slug ? (
+      {!!state?.slug && (
         <View className="mx-auto mt-2">
           <Button
             onPress={handleSubmit}
@@ -54,7 +52,7 @@ export function IndicatorsSelector(props: IndicatorsSelectorProps) {
             C'est parti !
           </Button>
         </View>
-      ) : null}
+      )}
     </View>
   );
 }

expo-app/src/scenes/dashboard/dashboard.tsx

@@ -10,28 +10,19 @@ import useMunicipality from '~/zustand/municipality/useMunicipality';
 import { IndicatorDetail } from './indicator-detail';
 import { IndicatorSelectorSheet } from './indicator-selector-sheet';
 
-export function DashboardPage({ navigation }: { navigation: any }) {
+export function DashboardPage() {
   const { setFavoriteIndicator, favoriteIndicator, indicators, setIndicators } =
     useIndicator((state) => state);
   const { municipality } = useMunicipality((state) => state);
   const [error, setError] = useState<string>('');
   useEffect(() => {
     let ignore = false;
-    setIndicators([]);
-    async function getIndicators() {
-      return Api.get({
-        path: '/indicators',
-      }).then((response) => {
-        const indicators = response.data as Indicator[];
-        setIndicators(indicators);
-        if (!ignore) {
-          if (!response.ok) {
-            setError(response.error);
-          } else setIndicators(indicators);
-        }
-      });
-    }
-    getIndicators();
+    Api.get({ path: '/indicators' }).then((response) => {
+      const indicators = response.data as Indicator[];
+      if (!!ignore) return;
+      if (!response.ok) return setError(response.error);
+      setIndicators(indicators);
+    });
     return () => {
       ignore = true;
     };
@@ -80,11 +71,8 @@ export function DashboardPage({ navigation }: { navigation: any }) {
         </View>
 
         <IndicatorSelectorSheet
-          handleSubmit={handleSubmit}
           indicators={indicators}
           favoriteIndicator={favoriteIndicator}
-          setFavoriteIndicator={setFavoriteIndicator}
-          navigation={navigation}
         />
 
         <IndicatorDetail />

expo-app/src/scenes/dashboard/indicator-selector-sheet.tsx

@@ -7,11 +7,8 @@ import { IndicatorsSelector } from '~/components/indicators/indicators-selector'
 import { Indicator } from '~/types/indicator';
 
 interface IndicatorSelectorSheetProps {
-  navigation: any;
   indicators: Indicator[] | null;
   favoriteIndicator: Indicator | null;
-  setFavoriteIndicator: (indicator: Indicator | null) => void;
-  handleSubmit: (indicator: Indicator | null) => void;
 }
 export function IndicatorSelectorSheet(props: IndicatorSelectorSheetProps) {
   const bottomSheetRef = useRef<BottomSheet>(null);
@@ -25,11 +22,6 @@ export function IndicatorSelectorSheet(props: IndicatorSelectorSheetProps) {
     bottomSheetRef.current?.close();
   }
 
-  function onSubmit(indicator: Indicator | null) {
-    props.handleSubmit(indicator);
-    closeBottomSheet();
-  }
-
   if (props.favoriteIndicator?.slug) {
     return <></>;
   }
@@ -44,12 +36,13 @@ export function IndicatorSelectorSheet(props: IndicatorSelectorSheetProps) {
           onChange={handleSheetChanges}
         >
           <View className="flex flex-1 bg-app-primary p-6">
+            <MyText className="mb-4 text-white">
+              Sélectionnez votre indicateur favori&nbsp;?
+            </MyText>
             <IndicatorsSelector
-              onSubmit={onSubmit}
-              navigation={props.navigation}
+              onSubmit={closeBottomSheet}
               indicators={props.indicators}
               favoriteIndicator={props.favoriteIndicator}
-              setFavoriteIndicator={props.setFavoriteIndicator}
             />
           </View>
         </BottomSheet>