Commit cfded411 authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Se creó la nueva versión de la pantalla principal de la aplicación

parent 19b630e8

mobile/src/screens/state_selection/state_selection_page.tsx

+47 −14
Original line number Diff line number Diff line
@@ -2,16 +2,24 @@ import { View, ActivityIndicator, Text } from "react-native"; 
import { pageStyles } from "../page_styles";

import { useGetStates } from "../../hooks/useGetStates";

import { ApiRequestStatus } from "../../common/constants/api_request_states";

import { Caroussel } from "../../common/components/caroussel/caroussel";

import {

  Caroussel

} from "../../common/components/caroussel/caroussel";

import { router } from "expo-router";

import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";

import { AnimatedBackground } from "../../common/components/animated_background";

import { ErrorPage } from "../error_page/error_page";

import { LinearGradient } from "expo-linear-gradient";

import { LIGHT_THEME } from "../../common/constants/theme";

import { useDataContext } from "../../common/contexts/data_context";

import { useAuth } from "../../auth/contexts/auth_context";

import { CARROUSEL_HEIGHT, CARROUSEL_WIDTH } from "../../common/constants/caroussel";



export const StateSelectionPage = () => {

  const { data, requestStatus, refresh } = useGetStates();

  const { selectedStateIndex, onIndexChange, backgroundImageAnimation } =

    useAnimatedSelectedIndex(200, 200);

  const { user } = useAuth();



  if (requestStatus === ApiRequestStatus.LOADING) {

    return (
@@ -22,9 +30,7 @@ export const StateSelectionPage = () => { 
  }



  if (requestStatus === ApiRequestStatus.ERROR || !data) {

    return (

      <ErrorPage refresh={refresh}/>

    );

    return <ErrorPage refresh={refresh} />;

  }



  const handleOnPress = (id: number) => {
@@ -32,16 +38,43 @@ export const StateSelectionPage = () => { 
  };



  return (

    <View style={pageStyles.page_container}>

    <View style={{

      flex: 1,

      backgroundColor: LIGHT_THEME.color.background,

      alignItems: "center",

    }}>

      <Text style={{

        fontSize: 24,

        fontWeight: "bold",

        margin: 20,



      }}>

        {`Hola, ${user?.name} ${user?.lastName}!`}

      </Text>

      <View style={{ height: CARROUSEL_HEIGHT, width: CARROUSEL_WIDTH}}>

        <AnimatedBackground

          imageUri={data[selectedStateIndex].imageUri}

          backgroundImageAnimation={backgroundImageAnimation}

        />

        <LinearGradient

          colors={[

            LIGHT_THEME.color.background,

            "transparent",

            LIGHT_THEME.color.background,

          ]}

          locations={[0.1, 0.4, 0.9]}

          style={{

            position: "absolute",

            width: "100%",

            height: "100%",

          }}

        />

        <Caroussel

          data={data}

          onPress={handleOnPress}

          onIndexChange={onIndexChange}

        />

      </View>

    </View>

  );

};