Commit 8677d7b9 authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Se cambió el archivo de ubicación dentro del proyecto

parent 262b437f

mobile/src/account/screens/account_page.tsx→mobile/src/profile/screens/account_page.tsx

+186 −0
Original line number Diff line number Diff line
@@ -15,13 +15,23 @@ import { 
} from "@expo/vector-icons";

import { CustomTileButton } from "../../common/components/custom_tile_button";

import { router } from "expo-router";

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

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

import { useRef, useState } from "react";

import Modal from "react-native-modal";

import { set } from "react-hook-form";

import { AntDesign } from "@expo/vector-icons";

import RNPickerSelect from 'react-native-picker-select';

import { AvailableLanguages } from "../../lang/translations";

import i18n from 'i18next';

import { useTranslation } from "react-i18next";



//TODO: Add source to CircleAvatar

const source = require("../../../assets/avatar.png");



export const AccountPage = () => {

  const { logout, user } = useAuth();

  const LANG = useTranslation();

  const [isModalVisible, setModalVisible] = useState(false);

  return (

    <View style={styles.container}>

      <View style={styles.profilePhotoContainer}>
@@ -33,7 +43,7 @@ export const AccountPage = () => { 


      <View

        style={{

          flex: 2

          flex: 2,

        }}

      >

        {/* <CustomTileButton
@@ -51,31 +61,123 @@ export const AccountPage = () => { 
          title="Change my tastes"

          leadingIcon={<FontAwesome name="edit" size={24} color="black" />}

        />*/}

          

        <CustomTileButton

          title={LANG.t("accountScreen.changeLanguageButton")}

          leadingIcon={<FontAwesome name="language" size={24} color="black" />}

          onPress={() => setModalVisible(true)}

        />

        <ChangeLanguageModal

          isVisible={isModalVisible}

          onClose={() => setModalVisible(false)}

        />

        <CustomTileButton

        //TODO: Add multilanguage support

          title={"Change my interests"}

          leadingIcon={<FontAwesome name="edit" size={24} color="black" />}

          onPress={() => router.push("/profile/interests")}

        />

      </View>

      <CustomTileButton

            title="Logout"

        title={LANG.t("accountScreen.logoutButton")}

        onPress={logout}

            leadingIcon={

              <MaterialIcons name="logout" size={24} color="black" />

        leadingIcon={<MaterialIcons name="logout" size={24} color="black" />}

      />

    </View>

  );

};



interface ChangeLanguageModalProps {

  onClose: () => void;

  isVisible: boolean;

}



const ChangeLanguageModal = ({

  onClose,

  isVisible,

}: ChangeLanguageModalProps) => {

  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);

  const {i18n} = useTranslation();

  const onSave = () => {

    i18n.changeLanguage(selectedLanguage || 'en');

    onClose();

  }

  return (

    <Modal isVisible={isVisible} style={modalStyles.modal}>

      <View style={modalStyles.modalContainer}>

        <AntDesign

          name="close"

          size={30}

          color="red"

          style={modalStyles.closeButton}

          onPress={onClose}

        />

        <Text style={modalStyles.selectLanguageText}>Select Language</Text>

        <RNPickerSelect

      onValueChange={(value) => setSelectedLanguage(value)}

      items={AvailableLanguages.map((lang) => ({

        label: lang.value,

        value: lang.key,

      }))

      }

    />

    <TouchableOpacity onPress={onSave} style={modalStyles.saveBtn}>

      <Text style={modalStyles.saveBtnText}>Save</Text>

    </TouchableOpacity>

      </View>

    </Modal>

  );

};



const modalStyles = StyleSheet.create({

  modal: {

    justifyContent: "center",

    alignItems: "center",

  },

  modalContainer: {

    width: "90%",

    aspectRatio: 1,

    backgroundColor: "white",

    borderRadius: 10,

    padding: 20,

    justifyContent: "space-around",

    alignItems: "center",

  },

  closeButton: {

    position: "absolute",

    top: 10,

    right: 10,

  },

  selectLanguageText: {

    fontSize: 20,

    fontWeight: "bold",

  },

  saveBtn: {

    backgroundColor: LIGHT_THEME.color.primary,

    padding: 10,

    borderRadius: 20,

    height: 40,

    width: "70%",

    justifyContent: "center",

    alignItems: "center",

  },

  saveBtnText: {

    color: "white",

    fontWeight: "bold",

  }

});



const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: "center",

    padding: 20,

    backgroundColor: LIGTHT_THEME.color.background,

    backgroundColor: LIGHT_THEME.color.background,

  },

  profilePhotoContainer: {

    alignItems: "center",

    justifyContent: "center",

    width: "100%",

    flex: 1

    flex: 1,

  },

  user_name: {

    fontSize: 18,