Added: upload image in beer add form

Fix: image was rendering inside buttons view
Edited: restyled beer get; Added: flashlist package
2024-05-14 22:27:10 +02:00 · 2024-05-14 22:25:23 +02:00 · 2024-05-14 22:25:23 +02:00 · 2024-05-14 22:25:21 +02:00
6 changed files with 129 additions and 38 deletions
--- a/api/.gitignore
+++ b/api/.gitignore
@ -3,3 +3,4 @@ dist/
 package-lock.json
 .env
 test-report.html
+uploads/
--- a/api/src/app.ts
+++ b/api/src/app.ts
@ -36,6 +36,7 @@ app.use(morgan("dev"));
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
 app.use(express.static(path.join(__dirname, "public")));
+app.use('/public/uploads', express.static(path.join(__dirname, '../uploads')));
 app.use(cookieParser());

 // Routes
--- a/frontend/app/(app)/(tabs)/beer/add.js
+++ b/frontend/app/(app)/(tabs)/beer/add.js
@ -5,8 +5,8 @@ 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");
+import { Platform } from "react-native";

 export default function BeerAdd() {
 	const [b_name, setBName] = useState("");
@ -49,7 +49,7 @@ export default function BeerAdd() {
 		console.log(result);

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

@ -68,7 +68,7 @@ export default function BeerAdd() {
 		console.log(result);

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

@ -87,29 +87,54 @@ export default function BeerAdd() {
 			}
 		}
 	}
+	function dataURItoBlob(dataURI) {
+		// convert base64/URLEncoded data component to raw binary data held in a string
+		var byteString;
+		if (dataURI.split(",")[0].indexOf("base64") >= 0)
+			byteString = atob(dataURI.split(",")[1]);
+		else byteString = unescape(dataURI.split(",")[1]);
+
+		// separate out the mime component
+		var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
+
+		// write the bytes of the string to a typed array
+		var ia = new Uint8Array(byteString.length);
+		for (var i = 0; i < byteString.length; i++) {
+			ia[i] = byteString.charCodeAt(i);
+		}
+
+		return new Blob([ia], { type: mimeString });
+	}

 	async function addBeer() {
 		// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
-		const req = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/add`, {
-			method: "POST",
-			credentials: "include",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({
-				brand: b_brand,
-				name: b_name,
-				degree: b_degree,
-				packaging: b_packaging,
-				photos: null,
-			}),
-		});
-		const res = await req.json();
+		const data = new FormData();
+		data.append("photos", dataURItoBlob(image.uri));
+		data.append("brand", b_brand);
+		data.append("name", b_name);
+		data.append("degree", b_degree);
+		data.append("packaging", "can");

-		if (res.code == 201 && res.data._id) {
-			window.location.href = `/beer/${res.data._id}`;
-		} else {
+		try {
+			const req = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/add`, {
+				method: "POST",
+				credentials: "include",
+				body: data,
+			});
+			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.",
+				);
+			}
+		} catch (err) {
 			alert(
 				"Beer was not added successfully. Please check your data and try again.",
 			);
+			console.error(err);
 		}
 	}

@ -140,6 +165,7 @@ export default function BeerAdd() {
 					onChangeText={(text) => validateDegreeInput(text)}
 					placeholderTextColor="#aaaaaa"
 					keyboardType="numeric"
+					maxLength={3}
 				/>

 				<DropDownPicker
@ -168,7 +194,7 @@ export default function BeerAdd() {
 						textStyle={styles.imageTextButton}
 					/>
 				</View>
-				{image && <Image source={{ uri: image }} style={styles.image} />}
+				{image && <Image source={{ uri: image.uri }} style={styles.image} />}
 				<Button title="Add beer" color={colors.gold} onPress={addBeer} />
 			</View>
 		</View>
--- a/frontend/app/(app)/(tabs)/beer/index.js
+++ b/frontend/app/(app)/(tabs)/beer/index.js
@ -1,9 +1,16 @@
-import { StyleSheet, View, FlatList } from "react-native";
+import {
+	StyleSheet,
+	View,
+	FlatList,
+	Dimensions,
+	StatusBar,
+} 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";

 export default function Tab() {
 	const [data, setData] = useState([]);
@ -28,26 +35,42 @@ export default function Tab() {
 	return (
 		<View style={styles.container}>
 			<Button
-				title="Add Beer"
+				title="Add new beer"
 				color={colors.gold}
 				onPress={() => {
 					router.replace("/beer/add");
 				}}
 			/>

-			<FlatList
-				data={data}
-				style={styles.beerList}
-				keyExtractor={(item) => String(item._id)}
-				renderItem={({ item }) => (
-					<View style={styles.item}>
-						<Text>Name: {item.name}</Text>
-						<Text>Brand: {item.brand}</Text>
-						<Text>Degree: {item.degree}</Text>
-						<Text>Packaging: {item.packaging}</Text>
-					</View>
-				)}
-			/>
+			<View style={styles.beerList}>
+				{/* 				<FlashList
+					data={data}
+					estimatedItemSize={100}
+					keyExtractor={(item) => String(item._id)}
+					renderItem={({ item }) => (
+						<View style={styles.item}>
+							<Text>Name: {item.name}</Text>
+							<Text>Brand: {item.brand}</Text>
+							<Text>Degree: {item.degree}</Text>
+							<Text>Packaging: {item.packaging}</Text>
+						</View>
+					)}
+				/> */}
+
+				<FlatList
+					data={data}
+					style={styles.beerList}
+					keyExtractor={(item) => String(item._id)}
+					renderItem={({ item }) => (
+						<View style={styles.item}>
+							<Text>Name: {item.name}</Text>
+							<Text>Brand: {item.brand}</Text>
+							<Text>Degree: {item.degree}</Text>
+							<Text>Packaging: {item.packaging}</Text>
+						</View>
+					)}
+				/>
+			</View>
 		</View>
 	);
 }
@ -57,12 +80,12 @@ export const styles = StyleSheet.create({
 		flex: 1,
 		justifyContent: "center",
 		alignItems: "center",
-		marginTop: "5%",
+		width: "100%",
 	},
 	beerList: {
 		width: "100%",
 		paddingHorizontal: "15%",
-		marginTop: "5%",
+		marginTop: "2%",
 	},
 	item: {
 		borderColor: "gray",
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@expo/metro-runtime": "~3.2.1",
        "@react-native-async-storage/async-storage": "^1.23.1",
+        "@shopify/flash-list": "1.6.4",
        "@types/react": "~18.2.45",
        "axios": "^1.6.8",
        "expo": "^51.0.2",
@ -6303,6 +6304,25 @@
        "join-component": "^1.1.0"
      }
    },
+    "node_modules/@shopify/flash-list": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.6.4.tgz",
+      "integrity": "sha512-M2momcnY7swsvmpHIFDVbdOaFw4aQocJXA/lFP0Gpz+alQjFylqVKvszxl4atYO2SNbjxlb2L6hEP9WEcAknGQ==",
+      "dependencies": {
+        "recyclerlistview": "4.2.0",
+        "tslib": "2.4.0"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@shopify/flash-list/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
    "node_modules/@sideway/address": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@ -13091,6 +13111,20 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/recyclerlistview": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz",
+      "integrity": "sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==",
+      "dependencies": {
+        "lodash.debounce": "4.0.8",
+        "prop-types": "15.8.1",
+        "ts-object-utils": "0.0.5"
+      },
+      "peerDependencies": {
+        "react": ">= 15.2.1",
+        "react-native": ">= 0.30.0"
+      }
+    },
    "node_modules/regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -14337,6 +14371,11 @@
      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
    },
+    "node_modules/ts-object-utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/ts-object-utils/-/ts-object-utils-0.0.5.tgz",
+      "integrity": "sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA=="
+    },
    "node_modules/tslib": {
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -28,7 +28,8 @@
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
-    "react-native-web": "~0.19.6"
+    "react-native-web": "~0.19.6",
+    "@shopify/flash-list": "1.6.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
Author	SHA1	Message	Date
Filip Rojek	82c90c1ceb	Added: upload image in beer add form	2024-05-14 22:27:10 +02:00
Filip Rojek	4fe4808b3c	Fix: image was rendering inside buttons view	2024-05-14 22:25:23 +02:00
KeviNmp4	b6b9b989c7	Edited: restyled beer get; Added: flashlist package	2024-05-14 22:25:23 +02:00
KeviNmp4	13b223ed5f	Fixes: #25	2024-05-14 22:25:21 +02:00