Added: check if beer was added, if not, show alert; Added packages picker,expo-camera
This commit is contained in:
parent
e8a0449ad2
commit
674ee65c29
@ -1,30 +1,43 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "deguapp",
|
||||
"slug": "deguapp",
|
||||
"scheme": "deguapp",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"assetBundlePatterns": ["**/*"],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"plugins": ["expo-router"]
|
||||
}
|
||||
"expo": {
|
||||
"name": "deguapp",
|
||||
"slug": "deguapp",
|
||||
"scheme": "deguapp",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"assetBundlePatterns": [
|
||||
"**/*"
|
||||
],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"plugins": [
|
||||
"expo-router",
|
||||
[
|
||||
"expo-image-picker",
|
||||
{
|
||||
"photosPermission": "The app accesses your photos to let you share them with your friends.",
|
||||
"cameraPermission": "The app accesses your camera to let you take photos of your beer and share them with your friends.",
|
||||
"microphonePermission": "The app accesses your microphone to let you record audio and share it with your friends."
|
||||
}
|
||||
],
|
||||
"expo-secure-store"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,34 @@
|
||||
import { StyleSheet, TextInput, View } from "react-native";
|
||||
import { StyleSheet, TextInput, View, Image } from "react-native";
|
||||
import { useState } from "react";
|
||||
import Button from "@components/Button";
|
||||
import { colors } from "@components/style";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import { Picker } from "@react-native-picker/picker";
|
||||
|
||||
export default function BeerAdd() {
|
||||
const [b_name, setBName] = useState("");
|
||||
const [b_degree, setBDegree] = useState("");
|
||||
const [b_packaging, setBPackaging] = useState("");
|
||||
const [b_brand, setBBrand] = useState("");
|
||||
const [image, setImage] = useState(null);
|
||||
const [selectPackaging, setSelectedPackaging] = useState();
|
||||
|
||||
ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
|
||||
const pickImage = async () => {
|
||||
// No permissions request is necessary for launching the image library
|
||||
let result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.All,
|
||||
allowsEditing: true,
|
||||
aspect: [4, 3],
|
||||
quality: 1,
|
||||
});
|
||||
|
||||
console.log(result);
|
||||
|
||||
if (!result.canceled) {
|
||||
setImage(result.assets[0].uri);
|
||||
}
|
||||
};
|
||||
|
||||
async function addBeer() {
|
||||
// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
|
||||
@ -24,6 +45,14 @@ export default function BeerAdd() {
|
||||
}),
|
||||
});
|
||||
const res = await req.json();
|
||||
|
||||
if (res.success & res.new_beer_id) {
|
||||
window.location.href = `/beer/${res.new_beer_id}`;
|
||||
} else {
|
||||
alert(
|
||||
"Beer was not added successfully. Please check your data and try again.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@ -57,6 +86,27 @@ export default function BeerAdd() {
|
||||
onChangeText={(text) => setBPackaging(text)}
|
||||
placeholderTextColor="#aaaaaa"
|
||||
/>
|
||||
<Picker
|
||||
selectedValue={selectPackaging}
|
||||
onValueChange={(itemValue, itemIndex) =>
|
||||
setSelectedPackaging(itemValue)
|
||||
}
|
||||
>
|
||||
<Picker.Item label="Can" value="can" />
|
||||
<Picker.Item label="Glass" value="glass" />
|
||||
<Picker.Item label="Pint" value="pint" />
|
||||
<Picker.Item label="Oddel Barrel" value="oddelBarel" />
|
||||
<Picker.Item label="Tank" value="tank" />
|
||||
<Picker.Item label="PET bottle" value="petBottle" />
|
||||
</Picker>
|
||||
<View style={styles.imageContainer}>
|
||||
<Button
|
||||
style={styles.imageButton}
|
||||
title="Pick an image from gallery"
|
||||
onPress={pickImage}
|
||||
/>
|
||||
{image && <Image source={{ uri: image }} style={styles.image} />}
|
||||
</View>
|
||||
<Button title="Add beer" color={colors.green} onPress={addBeer} />
|
||||
</View>
|
||||
</View>
|
||||
@ -65,22 +115,35 @@ export default function BeerAdd() {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingTop: "10%",
|
||||
gap: 15,
|
||||
},
|
||||
input: {},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "60%",
|
||||
width: "100%",
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
borderRadius: 10,
|
||||
padding: 13,
|
||||
color: "#fff",
|
||||
},
|
||||
imageButton: {
|
||||
width: "100%",
|
||||
backgroundColor: "#FFD700",
|
||||
},
|
||||
imageContainer: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
image: {
|
||||
width: 150,
|
||||
height: 150,
|
||||
},
|
||||
});
|
||||
|
||||
1848
frontend/package-lock.json
generated
1848
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,24 +9,26 @@
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/metro-runtime": "~3.1.3",
|
||||
"@expo/metro-runtime": "~3.2.1",
|
||||
"@react-native-async-storage/async-storage": "^1.23.1",
|
||||
"@react-native-picker/picker": "2.7.5",
|
||||
"@types/react": "~18.2.45",
|
||||
"axios": "^1.6.8",
|
||||
"expo": "~50.0.17",
|
||||
"expo-constants": "~15.4.6",
|
||||
"expo-linear-gradient": "~12.7.2",
|
||||
"expo-linking": "~6.2.2",
|
||||
"expo-router": "~3.4.10",
|
||||
"expo-secure-store": "^12.8.1",
|
||||
"expo-status-bar": "~1.11.1",
|
||||
"expo": "^51.0.2",
|
||||
"expo-constants": "~16.0.1",
|
||||
"expo-image-picker": "~15.0.4",
|
||||
"expo-linear-gradient": "~13.0.2",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-router": "~3.5.11",
|
||||
"expo-secure-store": "~13.0.1",
|
||||
"expo-status-bar": "~1.12.1",
|
||||
"expo-system-ui": "~3.0.4",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-native": "0.73.6",
|
||||
"react-native-safe-area-context": "4.8.2",
|
||||
"react-native-screens": "~3.29.0",
|
||||
"react-native-web": "~0.19.6",
|
||||
"expo-system-ui": "~2.9.4"
|
||||
"react-native": "0.74.1",
|
||||
"react-native-safe-area-context": "4.10.1",
|
||||
"react-native-screens": "3.31.1",
|
||||
"react-native-web": "~0.19.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user