frontend/app/(app)/(tabs)/_layout.js

@@ -20,7 +20,7 @@ export default function TabLayout() {
 						backgroundColor: colors.darkSecondary,
 					},
 					tabBarActiveTintColor: colors.gold,
-					headerShown: false,
+					headerShown: true,
 				}}
 				sceneContainerStyle={{ backgroundColor: colors.dark }}
 			>
@@ -62,7 +62,10 @@ export default function TabLayout() {
 				/>
 
 				{/* Hide following routes from bottom bar */}
-				<Tabs.Screen name="beer/add" options={{ href: null }} />
+				<Tabs.Screen
+					name="beer/add"
+					options={{ href: null, title: "Add beer" }}
+				/>
 			</Tabs>
 		</View>
 	);

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

@@ -1,10 +1,86 @@
-import { View } from "react-native";
-import Text from "@components/Text";
+import { StyleSheet, TextInput, View } from "react-native";
+import { useState } from "react";
+import Button from "@components/Button";
+import { colors } from "@components/style";
 
 export default function BeerAdd() {
+	const [b_name, setBName] = useState("");
+	const [b_degree, setBDegree] = useState("");
+	const [b_packaging, setBPackaging] = useState("");
+	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",
+			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();
+	}
+
 	return (
-		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
-			<Text>Beer Add</Text>
+		<View style={styles.container}>
+			<View style={styles.form}>
+				<TextInput
+					style={styles.input}
+					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>
 		</View>
 	);
 }
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	form: {
+		flex: 1,
+		alignItems: "center",
+		paddingTop: "10%",
+		gap: 15,
+	},
+	input: {},
+	input: {
+		height: "auto",
+		width: "60%",
+		borderColor: "gray",
+		borderWidth: 1,
+		borderRadius: 5,
+		padding: 10,
+		color: "#fff",
+	},
+});

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

@@ -1,21 +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 (
-		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
-			<Text>Tab BEER</Text>
+	const [data, setData] = useState([]);
+	useEffect(() => {
+		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");
 				}}
 			/>
+
+			<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>
 	);
 }
+
+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 }} />