Added: beer add page; all beers page

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

@@ -1,6 +1,5 @@
 import { StyleSheet, TextInput, View } from "react-native";
 import { useState } from "react";
-import Text from "@components/Text";
 import Button from "@components/Button";
 import { colors } from "@components/style";
 
@@ -11,6 +10,7 @@ export default function BeerAdd() {
 	const [b_brand, setBBrand] = useState("");
 
 	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",
@@ -23,9 +23,7 @@ export default function BeerAdd() {
 				photos: null,
 			}),
 		});
-		console.log(1, req);
 		const res = await req.json();
-		console.log(2, res);
 	}
 
 	return (
@@ -36,24 +34,28 @@ export default function BeerAdd() {
 					placeholder="Name"
 					value={b_name}
 					onChangeText={(text) => setBName(text)}
+					placeholderTextColor="#aaaaaa"
 				/>
 				<TextInput
 					style={styles.input}
 					placeholder="Brand"
 					value={b_brand}
 					onChangeText={(text) => setBBrand(text)}
+					placeholderTextColor="#aaaaaa"
 				/>
 				<TextInput
 					style={styles.input}
 					placeholder="Degree"
 					value={b_degree}
 					onChangeText={(text) => setBDegree(text)}
+					placeholderTextColor="#aaaaaa"
 				/>
 				<TextInput
 					style={styles.input}
 					placeholder="Packaging"
 					value={b_packaging}
 					onChangeText={(text) => setBPackaging(text)}
+					placeholderTextColor="#aaaaaa"
 				/>
 				<Button title="Add beer" color={colors.green} onPress={addBeer} />
 			</View>
@@ -80,6 +82,5 @@ const styles = StyleSheet.create({
 		borderRadius: 5,
 		padding: 10,
 		color: "#fff",
-		placeholderTextColor: "#aaaaaa",
 	},
 });

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

@@ -1,25 +1,74 @@
-import { View } from "react-native";
+import { StyleSheet, View, FlatList } 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";
 
 export default function Tab() {
-	return (
+	const [data, setData] = useState([]);
-		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+	useEffect(() => {
-			<Text>Tab BEER</Text>
+		fetchData();
+	}, []);
 
+	async function fetchData() {
+		try {
+			const res = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/get`, {
+				method: "GET",
+				credentials: "include",
+			});
+			const data = await res.json();
+			setData(data.data);
+		} catch (err) {
+			console.error(err);
+			alert("Something went wrong");
+		}
+	}
+
+	return (
+		<View style={styles.container}>
 			<Button
-				title="Add Beers"
+				title="Add Beer"
 				color={colors.gold}
 				onPress={() => {
 					router.replace("/beer/add");
 				}}
 			/>
 
-			<View style={styles.beerContainer}>
+			<FlatList
-				<Text>kokot</Text>
+				data={data}
-			</View>
+				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>
 	);
 }
+
+export const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		marginTop: "5%",
+	},
+	beerList: {
+		width: "100%",
+		paddingHorizontal: "15%",
+		marginTop: "5%",
+	},
+	item: {
+		borderColor: "gray",
+		borderWidth: 1,
+		borderRadius: 10,
+		padding: 13,
+		marginBottom: "5%",
+	},
+});

frontend/app/(app)/_layout.js

@@ -1,7 +1,6 @@
 import { Redirect, Stack, Slot } from "expo-router";
 import { useAuth } from "@context/AuthContext";
 import { View, Text, StyleSheet } from "react-native";
-import { StatusBar } from "expo-status-bar";
 
 export default function AppLayout() {
 	const { authState } = useAuth();
@@ -14,10 +13,12 @@ export default function AppLayout() {
 			</View>
 		);
 	}
+
 	if (!authState.authenticated) {
 		console.log("get the fuck out");
 		return <Redirect href="/login" />;
 	}
+
 	return (
 		<Stack>
 			<Stack.Screen name="(tabs)" options={{ headerShown: false }} />