Skip to content

Commit

Permalink
Merge pull request #67 from wwi21seb-projekt/uploadImage_register
Browse files Browse the repository at this point in the history
Upload image register
  • Loading branch information
thommy3 authored Jul 4, 2024
2 parents 9650698 + 04d17af commit ef0565a
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 15 deletions.
Binary file added assets/images/default_profile_picture.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 21 additions & 6 deletions authentification/AuthContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { navigate, reset } from "../navigation/NavigationService";
import { jwtDecode } from "jwt-decode";
import "core-js/stable/atob";
import { registerForPushNotificationsAsync } from "../screens/NotificationScreen";
import * as FileSystem from 'expo-file-system';

interface AuthContextType {
token: string | null;
Expand All @@ -33,6 +34,7 @@ interface AuthContextType {
password: string,
nickname: string,
email: string,
profilePicture: string,
setServerError: Dispatch<SetStateAction<string>>,
setUsernameErrorText: Dispatch<SetStateAction<string>>,
setEmailErrorText: Dispatch<SetStateAction<string>>,
Expand Down Expand Up @@ -273,24 +275,37 @@ export const AuthProvider: React.FC<Props> = ({ children }) => {
password,
nickname,
email,
profilePicture,
setServerError,
setUsernameErrorText,
setEmailErrorText,
) => {
let response;
let data;
let base64;

if(profilePicture !== ''){
base64 = await FileSystem.readAsStringAsync(profilePicture, {
encoding: FileSystem.EncodingType.Base64,
});
}

const body = JSON.stringify({
username: username,
password: password,
nickname: nickname,
email: email,
profilePicture: base64
})


try {
response = await fetch(`${baseUrl}users`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: username,
password: password,
nickname: nickname,
email: email,
}),
body: body,
});
data = await response.json();
switch (response.status) {
Expand Down
46 changes: 45 additions & 1 deletion components/Register.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React, { useState, Dispatch, SetStateAction } from "react";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import { ScrollView, Text, TouchableOpacity, View, Image } from "react-native";
import FloatingLabelInput from "./FloatingLabelInput";
import { COLORS } from "../theme";
import { useAuth } from "../authentification/AuthContext";
import * as ImagePicker from 'expo-image-picker';
import Ionicons from "@expo/vector-icons/Ionicons";


interface Props {
setServerError: Dispatch<SetStateAction<string>>;
Expand Down Expand Up @@ -135,13 +138,53 @@ const Register: React.FC<Props> = ({ setServerError }) => {
}
};

const [image, setImage] = useState('');
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});


if (!result.canceled) {
setImage(result.assets[0].uri);
}
};

const removeImage = () => {
setImage('');
}

return (
<ScrollView
className="bg-white px-10"
automaticallyAdjustKeyboardInsets={true}
alwaysBounceVertical={false}
showsVerticalScrollIndicator={false}
>
<View className="flex-row items-center justify-center mb-5 mt-1">
<View className="relative">
<TouchableOpacity
className="h-20 w-20 rounded-full overflow-hidden border-lightgray border-2 items-center justify-center"
onPress={pickImage}>
<Image source={image === '' ? require('../assets/images/default_profile_picture.jpeg') : { uri: image }} className="h-20 w-20 rounded-full"/>
</TouchableOpacity>
<TouchableOpacity
className="absolute top-0 right-0 rounded-full bg-white"
onPress={removeImage}
style={{ transform: [{ translateX: 1 }, { translateY: -0 }] }}
>
<Ionicons
name="trash-outline"
size={20}
color={COLORS.red}
/>
</TouchableOpacity>
</View>
</View>

<FloatingLabelInput
label="Email address"
errorText={emailErrorText}
Expand Down Expand Up @@ -205,6 +248,7 @@ const Register: React.FC<Props> = ({ setServerError }) => {
password,
nickname,
email,
image,
setServerError,
setUsernameErrorText,
setEmailErrorText,
Expand Down
10 changes: 2 additions & 8 deletions screens/PostScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import {
Text,
Keyboard,
TouchableWithoutFeedback,
Button,
Image,
StyleSheet
} from "react-native";
import { SHADOWS, COLORS } from "../theme";
import { baseUrl } from "../env";
Expand Down Expand Up @@ -106,7 +104,7 @@ const PostScreen: React.FC = () => {
const [image, setImage] = useState('');
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
Expand Down Expand Up @@ -143,11 +141,7 @@ const PostScreen: React.FC = () => {
</View>
<View className="mt-10 items-center">
<TouchableOpacity onPress={pickImage}>
{image !== '' ? (
<Image className="w-96 h-96 mb-5"source={{ uri: image }}/>
) : (
<Image className="w-96 h-96 mb-5" source={require("../assets/images/image_placeholder.jpeg")}/>
)}
<Image className="w-96 h-96 mb-5" source={image === '' ? require("../assets/images/image_placeholder.jpeg") : { uri: image }}/>
</TouchableOpacity>
</View>
<View>
Expand Down

0 comments on commit ef0565a

Please sign in to comment.