Added: tests for reviews, Reviews GET API endpoint; Fixed: tests for beers

frontend/app.json

@@ -12,9 +12,7 @@
 			"resizeMode": "contain",
 			"backgroundColor": "#ffffff"
 		},
-    "assetBundlePatterns": [
+		"assetBundlePatterns": ["**/*"],
-      "**/*"
-    ],
 		"ios": {
 			"supportsTablet": true
 		},
@@ -27,17 +25,6 @@
 		"web": {
 			"favicon": "./assets/favicon.png"
 		},
-    "plugins": [
+		"plugins": ["expo-router"]
-      "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,78 +1,13 @@
-import { StyleSheet, TextInput, View, Image } from "react-native";
+import { StyleSheet, TextInput, View } from "react-native";
 import { useState } from "react";
 import Button from "@components/Button";
-import Text from "@components/Text";
 import { colors } from "@components/style";
-import * as ImagePicker from "expo-image-picker";
-import DropDownPicker from "react-native-dropdown-picker";
-/* import DropdownTheme from "@components/DropdownTheme"; */
-const DropdownTheme = require("@components/DropdownTheme");
 
 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();
-
-	const [open, setOpen] = useState(false);
-	const [value, setValue] = useState(null);
-	const [items, setItems] = useState([
-		{ label: "Tank beer", value: "tank" },
-		{ label: "Cask beer", value: "cask" },
-		{ label: "Glass bottle", value: "glass" },
-		{ label: "Can", value: "can" },
-		{ label: "PET bottle", value: "pet" },
-	]);
-
-	DropDownPicker.addTheme("DropdownTheme", DropdownTheme);
-	DropDownPicker.setTheme("DropdownTheme");
-
-	ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
-	const pickImage = async () => {
-		const permissionResult =
-			await ImagePicker.requestMediaLibraryPermissionsAsync();
-
-		if (permissionResult.granted === false) {
-			alert("You've refused to allow this appp to access your photos!");
-			return;
-		}
-
-		// No permissions request is necessary for launching the image library
-		const result = await ImagePicker.launchImageLibraryAsync({
-			mediaTypes: ImagePicker.MediaTypeOptions.Images,
-			allowsEditing: true,
-			aspect: [3, 4],
-			// quality: 1,
-		});
-
-		// Explore the result
-		console.log(result);
-
-		if (!result.canceled) {
-			setImage(result.assets[0].uri);
-		}
-	};
-
-	const openCamera = async () => {
-		// Ask the user for the permission to access the camera
-		const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
-
-		if (permissionResult.granted === false) {
-			alert("You've refused to allow this app to access your camera!");
-			return;
-		}
-
-		const result = await ImagePicker.launchCameraAsync();
-
-		// Explore the result
-		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
@@ -89,22 +24,11 @@ export default function BeerAdd() {
 			}),
 		});
 		const res = await req.json();
-
-		if (res.code == 201 && res.data._id) {
-			window.location.href = `/beer/${res.data._id}`;
-		} else {
-			alert(
-				"Beer was not added successfully. Please check your data and try again.",
-			);
-		}
 	}
 
 	return (
 		<View style={styles.container}>
 			<View style={styles.form}>
-				<Text style={styles.text}>
-					Spill your thoughts about the beer you just sipped!
-				</Text>
 				<TextInput
 					style={styles.input}
 					placeholder="Name"
@@ -133,33 +57,7 @@ export default function BeerAdd() {
 					onChangeText={(text) => setBPackaging(text)}
 					placeholderTextColor="#aaaaaa"
 				/>
-				<DropDownPicker
+				<Button title="Add beer" color={colors.green} onPress={addBeer} />
-					open={open}
-					value={value}
-					items={items}
-					setOpen={setOpen}
-					setValue={setValue}
-					setItems={setItems}
-					placeholder={"What are you drinking from?"}
-					theme="DropdownTheme"
-				/>
-				<View style={styles.imageContainer}>
-					<Button
-						title="Open gallery"
-						onPress={pickImage}
-						buttonStyle={styles.imageButton}
-						textStyle={styles.imageTextButton}
-					/>
-
-					<Button
-						onPress={openCamera}
-						title="Open camera"
-						buttonStyle={styles.imageButton}
-						textStyle={styles.imageTextButton}
-					/>
-				</View>
-				{image && <Image source={{ uri: image }} style={styles.image} />}
-				<Button title="Add beer" color={colors.gold} onPress={addBeer} />
 			</View>
 		</View>
 	);
@@ -167,50 +65,22 @@ export default function BeerAdd() {
 
 const styles = StyleSheet.create({
 	container: {
-		width: "100%",
+		flex: 1,
-		height: "100%",
-		alignItems: "center",
-		display: "flex",
 	},
 	form: {
+		flex: 1,
 		alignItems: "center",
+		paddingTop: "10%",
 		gap: 15,
-		width: "80%",
 	},
+	input: {},
 	input: {
 		height: "auto",
-		width: "100%",
+		width: "60%",
 		borderColor: "gray",
 		borderWidth: 1,
-		borderRadius: 10,
+		borderRadius: 5,
-		padding: 13,
+		padding: 10,
 		color: "#fff",
 	},
-	imageContainer: {
-		alignItems: "center",
-		justifyContent: "center",
-		display: "flex",
-		flexDirection: "row",
-		gap: 10,
-	},
-	imageButton: {
-		backgroundColor: colors.dark,
-		borderColor: "gray",
-		borderWidth: 1,
-		borderRadius: 10,
-	},
-	imageTextButton: {
-		color: colors.white,
-	},
-	image: {
-		width: 150,
-		height: 150,
-	},
-	text: {
-		color: colors.white,
-		fontSize: 24,
-		textAlign: "center",
-		paddingBottom: "3%",
-		paddingTop: "10%",
-	},
 });

frontend/components/Button.js

@@ -7,8 +7,6 @@ export default function Button(props) {
 		title = "Button",
 		color = "black",
 		textColor = "white",
-		buttonStyle,
-		textStyle,
 	} = props;
 	return (
 		<Pressable
@@ -21,13 +19,10 @@ export default function Button(props) {
 							: "black",
 				},
 				styles.button,
-				buttonStyle,
 			]}
 			onPress={onPress}
 		>
-			<Text style={[styles.text, { color: textColor }, textStyle]}>
+			<Text style={[styles.text, { color: textColor }]}>{title}</Text>
-				{title}
-			</Text>
 		</Pressable>
 	);
 }

frontend/components/DropdownTheme.js

@@ -1,170 +0,0 @@
-import { StyleSheet } from "react-native";
-
-import { colors } from "@components/style";
-
-export const ICONS = {
-	ARROW_DOWN: require("@assets/DropdownIcons/arrow-down.png"),
-	ARROW_UP: require("@assets/DropdownIcons/arrow-up.png"),
-	TICK: require("@assets/DropdownIcons/tick.png"),
-	CLOSE: require("../assets/DropdownIcons/close.png"),
-};
-
-export default StyleSheet.create({
-	container: {
-		width: "100%",
-	},
-	style: {
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "space-between",
-		width: "100%",
-		minHeight: 50,
-		borderRadius: 8,
-		borderWidth: 1,
-		borderColor: "gray",
-		paddingHorizontal: 10,
-		paddingVertical: 3,
-		backgroundColor: colors.dark,
-	},
-	label: {
-		flex: 1,
-		color: colors.placeholder,
-	},
-	labelContainer: {
-		flex: 1,
-		flexDirection: "row",
-	},
-	arrowIcon: {
-		width: 20,
-		height: 20,
-	},
-	tickIcon: {
-		width: 20,
-		height: 20,
-	},
-	closeIcon: {
-		width: 30,
-		height: 30,
-	},
-	badgeStyle: {
-		flexDirection: "row",
-		alignItems: "center",
-		borderRadius: 15,
-		backgroundColor: colors.white,
-		paddingHorizontal: 10,
-		paddingVertical: 5,
-	},
-	badgeDotStyle: {
-		width: 10,
-		height: 10,
-		borderRadius: 10 / 2,
-		marginRight: 8,
-		backgroundColor: colors.white,
-	},
-	badgeSeparator: {
-		width: 5,
-	},
-	listBody: {
-		height: "100%",
-	},
-	listBodyContainer: {
-		flexGrow: 1,
-		alignItems: "center",
-	},
-	dropDownContainer: {
-		position: "absolute",
-		backgroundColor: colors.darkSecondary,
-		borderRadius: 10,
-		borderColor: colors.black,
-		borderWidth: 1,
-		width: "100%",
-		overflow: "hidden",
-		zIndex: 1000,
-	},
-	modalContentContainer: {
-		flexGrow: 1,
-		backgroundColor: colors.white,
-	},
-	listItemContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "space-between",
-		paddingHorizontal: 10,
-		height: 40,
-	},
-	listItemLabel: {
-		flex: 1,
-		color: colors.placeholder,
-	},
-	iconContainer: {
-		marginRight: 10,
-	},
-	arrowIconContainer: {
-		marginLeft: 10,
-	},
-	tickIconContainer: {
-		marginLeft: 10,
-	},
-	closeIconContainer: {
-		marginLeft: 10,
-	},
-	listParentLabel: {},
-	listChildLabel: {},
-	listParentContainer: {},
-	listChildContainer: {
-		paddingLeft: 40,
-	},
-	searchContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		padding: 10,
-		borderBottomColor: colors.darkSecondary,
-		borderBottomWidth: 1,
-	},
-	searchTextInput: {
-		flexGrow: 1,
-		flexShrink: 1,
-		margin: 0,
-		paddingHorizontal: 10,
-		paddingVertical: 5,
-		borderRadius: 8,
-		borderColor: colors.darkSecondary,
-		borderWidth: 1,
-		color: colors.white,
-	},
-	itemSeparator: {
-		height: 1,
-		backgroundColor: colors.darkSecondary,
-	},
-	flatListContentContainer: {
-		flexGrow: 1,
-	},
-	customItemContainer: {},
-	customItemLabel: {
-		fontStyle: "italic",
-	},
-	listMessageContainer: {
-		flex: 1,
-		justifyContent: "center",
-		alignItems: "center",
-		padding: 10,
-	},
-	listMessageText: {
-		color: colors.gold,
-	},
-	selectedItemContainer: {},
-	selectedItemLabel: {},
-	modalTitle: {
-		fontSize: 18,
-		color: colors.gold,
-	},
-	extendableBadgeContainer: {
-		flexDirection: "row",
-		flexWrap: "wrap",
-		flex: 1,
-	},
-	extendableBadgeItemContainer: {
-		marginVertical: 3,
-		marginEnd: 7,
-	},
-});

frontend/components/style.js

@@ -8,5 +8,4 @@ export const colors = {
 	dark: "#010409",
 	darkSecondary: "#0D1117",
 	white: "#FFFFFF",
-	placeholder: "#aaaaaa",
 };

frontend/package.json

@@ -9,26 +9,24 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~3.2.1",
+    "@expo/metro-runtime": "~3.1.3",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@types/react": "~18.2.45",
     "axios": "^1.6.8",
-    "expo": "^51.0.2",
+    "expo": "~50.0.17",
-    "expo-constants": "~16.0.1",
+    "expo-constants": "~15.4.6",
-    "expo-image-picker": "~15.0.4",
+    "expo-linear-gradient": "~12.7.2",
-    "expo-linear-gradient": "~13.0.2",
+    "expo-linking": "~6.2.2",
-    "expo-linking": "~6.3.1",
+    "expo-router": "~3.4.10",
-    "expo-router": "~3.5.11",
+    "expo-secure-store": "^12.8.1",
-    "expo-secure-store": "~13.0.1",
+    "expo-status-bar": "~1.11.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.74.1",
+    "react-native": "0.73.6",
-    "react-native-dropdown-picker": "^5.4.6",
+    "react-native-safe-area-context": "4.8.2",
-    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "~3.29.0",
-    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.6",
-    "react-native-web": "~0.19.6"
+    "expo-system-ui": "~2.9.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",