diff --git a/App.js b/App.js index c8c86fc..1f67c37 100644 --- a/App.js +++ b/App.js @@ -21,6 +21,7 @@ import NewPostView from './Views/NewPost.js'; import { TouchableOpacity, View } from 'react-native'; import MenuView from './Views/Menu.js'; import ProfileSettings from './Views/ProfileSettings.js'; +import InviteView from './Views/Invite.js'; const Tab = createBottomTabNavigator(); @@ -255,6 +256,10 @@ export default function App() { name="ProfileSettings" component={ProfileSettings} /> + { + const gState = useSnapshot(GlobalState); + const viewer = gState.me; + return ( + + + {i18n.t("message.invite")} + setText(text)} + /> + setText(text)} + /> + + + + + + ) +} + +export default InviteView; \ No newline at end of file diff --git a/Views/Menu.js b/Views/Menu.js index 0e4fa10..14f9023 100644 --- a/Views/Menu.js +++ b/Views/Menu.js @@ -1,5 +1,5 @@ import React from "react"; -import { View } from "react-native"; +import { View, ImageBackground } from "react-native"; import { Text, List, RadioButton } from "react-native-paper"; import i18n from "../i18nMessages.js"; import Moment from 'moment'; @@ -18,12 +18,17 @@ let MenuView = ({navigation})=>{ return ( + {navigation.navigate("ProfileSettings")}} left={props => } /> } /> } /> + {navigation.navigate("Invite")}} left={props => } /> } /> @@ -33,6 +38,7 @@ let MenuView = ({navigation})=>{ + ) } diff --git a/Views/ProfileSettings.js b/Views/ProfileSettings.js index cc51d4a..dda283f 100644 --- a/Views/ProfileSettings.js +++ b/Views/ProfileSettings.js @@ -1,6 +1,6 @@ import React from "react"; -import { View } from "react-native"; -import { Text, TextInput, RadioButton, Divider } from "react-native-paper"; +import { View, ImageBackground, ScrollView } from "react-native"; +import { Text, TextInput, Button, Divider } from "react-native-paper"; import i18n from "../i18nMessages.js"; import Moment from 'moment'; import 'moment/min/locales'; @@ -8,43 +8,126 @@ import ProfileCardHorizontal from "../components/ProfileCardHorizontal.js"; Moment.locale(i18n.locale); import { useSnapshot } from 'valtio'; import GlobalState from '../contexts/GlobalState.js'; +import API from "../API.js"; +import ProfileHeader from "../components/ProfileHeader.js"; +import * as ImagePicker from 'expo-image-picker'; + let ProfileSettings = ()=>{ const gState = useSnapshot(GlobalState); const viewer = gState.me; + const [photo, setPhoto] = React.useState(null); + const [name, setName] = React.useState(viewer.profile.firstName); + const [lastName, setLastName] = React.useState(viewer.profile.lastName); + const [photoUrl, setphotoUrl] = React.useState(viewer.profile.photo); + const [updateKey, setUpdateKey] = React.useState(0); + const [description, setDescription] = React.useState(viewer.profile.description); + + const pickImage = async () => { + // No permissions request is necessary for launching the image library + let result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.Images, + allowsEditing: true, + aspect: [4, 3], + quality: 0.7, + //allowsMultipleSelection: true, + }); + if (!result.cancelled) { + setPhoto(result); + let newPhotoURL = await handleUploadPhoto(result); + if(newPhotoURL !== ""){ + setphotoUrl(newPhotoURL); + GlobalState.me.profile.photo = newPhotoURL; + setUpdateKey(updateKey+1); + } + setPhoto(null); + } + }; + + const handleUploadPhoto = async (photo) => { + if (!photo) return; + const uri = + Platform.OS === "android" + ? photo.uri + : photo.uri.replace("file://", ""); + const filename = photo.uri.split("/").pop(); + const match = /\.(\w+)$/.exec(filename); + const ext = match?.[1]; + const type = match ? `image/${match[1]}` : `image`; + const formData = new FormData(); + formData.append("banner", { + uri, + name: `image.${ext}`, + type, + }); + let uploadedFile = ''; + try { + uploadedFile = await fetch("https://social.emmint.com/upload.php", { + method: "POST", + body: formData, + headers: { "Content-Type": "multipart/form-data" } + }) + .then((res) => res.json()) + .then((data) => { + return data.fileName; + }) + .catch((err) => console.error(err)); + } catch (err) { + console.log(err); + alert("Something went wrong"); + } + return uploadedFile; + }; + + let updateProfile = () => { + GlobalState.me.profile.firstName = name; + GlobalState.me.profile.lastName = lastName; + GlobalState.me.profile.description = description; + API.updateMyProfile(viewer.profile, viewer.data); + setUpdateKey(updateKey+1); + } + return ( - - Profile Settings - + + Profile Settings + + setName(text)} + /> + setLastName(text)} + /> + setText(text)} + label={i18n.t("message.description")} + style={{backgroundColor:"rgba(0,0,0,0)", marginBottom:5}} + multiline={true} + numberOfLines={3} + value={description} + onChangeText={text => setDescription(text)} /> - setText(text)} - /> - - setText(text)} - /> - - - - - + + + + Preview: + + + + + ) } diff --git a/Views/Search.js b/Views/Search.js index 15418ef..eec3cc2 100644 --- a/Views/Search.js +++ b/Views/Search.js @@ -5,6 +5,7 @@ import API from "../API"; import ProfileCardHorizontal from "../components/ProfileCardHorizontal"; import { useSnapshot } from 'valtio'; import GlobalState from '../contexts/GlobalState.js'; +import ProfileHeader from "../components/ProfileHeader"; const Search = () => { const viewer = useSnapshot(GlobalState).me; diff --git a/assets/Invite.png b/assets/Invite.png new file mode 100644 index 0000000..a02c230 Binary files /dev/null and b/assets/Invite.png differ diff --git a/assets/settings.png b/assets/settings.png new file mode 100644 index 0000000..5fb7fe7 Binary files /dev/null and b/assets/settings.png differ diff --git a/components/ProfileHeader.js b/components/ProfileHeader.js index 63604d3..d901274 100644 --- a/components/ProfileHeader.js +++ b/components/ProfileHeader.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Text } from 'react-native'; +import { View } from 'react-native'; import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper'; import UserName from './UserName'; import FollowButton from './basics/FollowButton'; @@ -13,11 +13,22 @@ const ProfileHeader = ({ profileObj }) => { - + <Title style={{position: "absolute", top: -60, left: 10, backgroundColor: "rgba(255,255,255,0.4)", padding: 10}}> <UserName profileid={profileObj._id} /> - {profileObj.profile.description} - + {profileObj.profile.description} + + + {/* diff --git a/i18nMessages.js b/i18nMessages.js index 9349c7d..a6dc594 100644 --- a/i18nMessages.js +++ b/i18nMessages.js @@ -60,7 +60,10 @@ const messages = { searchCourses: "Search Courses", news: "News", wrongInformation: "Please review the information.", - submit: "Submit" + submit: "Submit", + IKnowThisPerson: "I know this person", + update: "Update", + }, }, es: { @@ -120,6 +123,8 @@ const messages = { news: "Noticias", wrongInformation: "Por favor revisa la información introducida.", submit: "Ingresar", + IKnowThisPerson: "Conozco a esta persona", + update: "Actualizar", }, } }