Se creó la versión inicial de la página para actualizar los intereses del usuario (cacfd649) · Commits · Diego Correa / PueblosMagicos

mobile/src/profile/screens/change_interests_screen.tsx

0 → 100644

+109 −0

Original line number	Diff line number	Diff line
		import { View, StyleSheet, Text } from "react-native";
		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";

		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 onToogleOption = (optionId: number) => {
		setOptions(
		options.map((option) =>
		option.id === optionId
		? { ...option, isSelected: !option.isSelected }
		: option
		)
		);
		};

		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} />
		</View>
		);
		};

		const styles = StyleSheet.create({
		container: {
		flex: 1,
		alignItems: "center",
		padding: 20,
		backgroundColor: LIGHT_THEME.color.background,
		},
		});