Added: check if beer was added, if not, show alert; Added packages picker,expo-camera

frontend/app.json

@@ -12,7 +12,9 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-		"assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
     },
@@ -25,6 +27,17 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-		"plugins": ["expo-router"]
+    "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"
+    ]
   }
 }

frontend/app/(app)/(tabs)/beer/add.js

@@ -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,
+	},
 });

frontend/package.json

@@ -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",