Se cambiaron los datos de prueba por los hooks que proporcionan la información real (d3510076) · Commits · Omar Luna / PueblosMagicosConIA

mobile/src/profile/screens/change_interests_screen.tsx

+17 −85

Original line number	Diff line number	Diff line
		@@ -3,98 +3,30 @@ import { LIGHT_THEME } from "../../common/constants/theme";
		import { ScrollView } from "react-native-gesture-handler";
		import { useState } from "react";
		import { MultipleOptionPicker } from "../components/multiple_option_pickeer";
		import { useUpdateInterests } from "../hooks/useUpdateInterests";
		import { ApiRequestStatus } from "../../common/constants/api_request_states";
		import { InterestSlide } from "../components/interest_slide";
		import { SlideControl } from "../../common/components/slide_control";

		export const ChangeInterestsScreen = () => {
		const [options, setOptions] = useState( [
		{
		id: 1,
		name: "Arquitectura",
		isSelected: false,
		},
		{
		id: 2,
		name: "Ciencia",
		isSelected: false,
		},
		{
		id: 3,
		name: "Cultura",
		isSelected: false,
		},
		{
		id: 4,
		name: "Deportes",
		isSelected: false,
		},
		{
		id: 5,
		name: "Economía",
		isSelected: false,
		},
		{
		id: 6,
		name: "Educación",
		isSelected: false,
		},
		{
		id: 7,
		name: "Entretenimiento",
		isSelected: false,
		},
		{
		id: 8,
		name: "Gastronomía",
		isSelected: false,
		},
		{
		id: 9,
		name: "Historia",
		isSelected: false,
		},
		{
		id: 10,
		name: "Moda",
		isSelected: false,
		},
		{
		id: 11,
		name: "Música",
		isSelected: false,
		},
		{
		id: 12,
		name: "Política",
		isSelected: false,
		},
		{
		id: 13,
		name: "Salud",
		isSelected: false,
		},
		{
		id: 14,
		name: "Tecnología",
		isSelected: false,
		},
		]);
		const { toogleInterest: onToogleOption, interests: options, requestStatus, onSubmit } = useUpdateInterests();

		if (requestStatus === ApiRequestStatus.LOADING) {
		return <Text>Loading...</Text>;
		}

		const onToogleOption = (optionId: number) => {
		setOptions(
		options.map((option) =>
		option.id === optionId
		? { ...option, isSelected: !option.isSelected }
		: option
		)
		);
		};
		if (requestStatus === ApiRequestStatus.ERROR) {
		return <Text>Error</Text>;
		}

		const onFinish = () => {
		onSubmit();
		}

		return (
		<View style={styles.container}>
		<Text>
		{`Selecciona las categorías que te interesan, puedes cambiarlos en la pestaña de cuenta > Cambiar intereses`}
		</Text>
		<MultipleOptionPicker options={options} toogleOption={onToogleOption} />
		<InterestSlide options={options} onToogleOption={onToogleOption} />
		<SlideControl onFinish={onFinish} onNext={() => {}} onPrevious={() => {}} isFirst isLast />
		</View>
		);
		};