Added: images and review button on beer/get

Fixes: #12

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

@@ -108,8 +108,12 @@ export default function BeerAdd() {
 
 	async function addBeer() {
 		// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
+
 		const data = new FormData();
+		if (Platform.OS == "web") {
+			// TODO: On phone its imposibble to upload an image
 			data.append("photos", dataURItoBlob(image.uri));
+		}
 		data.append("brand", b_brand);
 		data.append("name", b_name);
 		data.append("degree", b_degree);
@@ -124,7 +128,9 @@ export default function BeerAdd() {
 			const res = await req.json();
 
 			if (res.code == 201 && res.data._id) {
-				window.location.href = `/beer/${res.data._id}`;
+				// TODO: reditect using expo router
+				// window.location.href = `/beer/${res.data._id}`;
+				alert("Added");
 			} else {
 				alert(
 					"Beer was not added successfully. Please check your data and try again.",
@@ -198,9 +204,8 @@ export default function BeerAdd() {
 					) : (
 						false
 					)}
-
-					{image && <Image source={{ uri: image }} style={styles.image} />}
 				</View>
+				{image && <Image source={{ uri: image.uri }} style={styles.image} />}
 				<Button title="Add beer" color={colors.gold} onPress={addBeer} />
 			</View>
 		</View>

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

@@ -4,15 +4,17 @@ import {
 	FlatList,
 	Dimensions,
 	StatusBar,
+	Image,
 } from "react-native";
 import Text from "@components/Text";
 import Button from "@components/Button";
 import { colors } from "@components/style";
 import { router } from "expo-router";
 import { useEffect, useState } from "react";
-import { FlashList } from "@shopify/flash-list";
+// import { FlashList } from "@shopify/flash-list";
 
 export default function Tab() {
+	const API_HOST = process.env.EXPO_PUBLIC_API_URL.replace("/api/v1", "");
 	const [data, setData] = useState([]);
 	useEffect(() => {
 		fetchData();
@@ -62,11 +64,34 @@ export default function Tab() {
 				keyExtractor={(item) => String(item._id)}
 				renderItem={({ item }) => (
 					<View style={styles.item}>
+						<Image
+							source={
+								item.imgs[0]
+									? {
+											uri: `${API_HOST}/public/uploads/${item.imgs[0]}`,
+										}
+									: {
+											uri: "https://imagesvc.meredithcorp.io/v3/mm/image?url=https:%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F44%2F2020%2F09%2F29%2Flight-beer.jpg",
+										}
+							}
+							style={styles.itemImg}
+						/>
+						<View style={styles.itemDesc}>
 							<Text>Name: {item.name}</Text>
 							<Text>Brand: {item.brand}</Text>
 							<Text>Degree: {item.degree}</Text>
 							<Text>Packaging: {item.packaging}</Text>
 						</View>
+						<View style={styles.itemAddReview}>
+							<Button
+								title="Add review"
+								color={colors.gold}
+								onPress={() => {
+									router.push(`/review/${item._id}`);
+								}}
+							/>
+						</View>
+					</View>
 				)}
 			/>
 		</View>
@@ -92,4 +117,12 @@ export const styles = StyleSheet.create({
 		padding: 13,
 		marginBottom: "5%",
 	},
+	itemImg: {
+		height: 300,
+		resizeMode: "contain",
+	},
+	itemDesc: {
+		alignItems: "center",
+		paddingBottom: "2%",
+	},
 });

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

@@ -7,7 +7,6 @@ import * as ImagePicker from "expo-image-picker";
 import DropDownPicker from "react-native-dropdown-picker";
 const DropdownTheme = require("@components/DropdownTheme");
 import { Platform } from "react-native";
-import RangeSlider, { Slider } from "react-native-range-slider-expo";
 
 export default function reviewAdd() {
 	const [b_name, setBName] = useState("");