Added: Link and Text component, Named links for components..., Tab layout

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

@@ -0,0 +1,69 @@
+import React from "react";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { Tabs } from "expo-router";
+import { StyleSheet, View } from "react-native";
+import { colors } from "@components/style";
+import { StatusBar } from "expo-status-bar";
+
+export default function TabLayout() {
+	return (
+		<View style={{ flex: 1 }}>
+			<StatusBar style="light" />
+			<Tabs
+				screenOptions={{
+					headerStyle: {
+						backgroundColor: colors.dark,
+					},
+					headerTintColor: "white",
+					tabBarStyle: {
+						backgroundColor: colors.darkSecondary,
+					},
+					tabBarActiveTintColor: colors.gold,
+					headerShown: false,
+				}}
+				sceneContainerStyle={{ backgroundColor: colors.dark }}
+			>
+				<Tabs.Screen
+					name="index"
+					options={{
+						title: "Home",
+						tabBarIcon: ({ color }) => (
+							<FontAwesome size={28} name="home" color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="beer/index"
+					options={{
+						title: "Beers",
+						tabBarIcon: ({ color }) => (
+							<FontAwesome size={28} name="beer" color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="review"
+					options={{
+						title: "Reviews",
+						tabBarIcon: ({ color }) => (
+							<MaterialIcons size={28} name="reviews" color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="settings"
+					options={{
+						title: "Settings",
+						tabBarIcon: ({ color }) => (
+							<FontAwesome size={28} name="cog" color={color} />
+						),
+					}}
+				/>
+
+				{/* Hide following routes from bottom bar */}
+				<Tabs.Screen name="beer/add" options={{ href: null }} />
+			</Tabs>
+		</View>
+	);
+}

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

@@ -0,0 +1,10 @@
+import { View } from "react-native";
+import Text from "@components/Text";
+
+export default function BeerAdd() {
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Beer Add</Text>
+		</View>
+	);
+}

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

@@ -0,0 +1,21 @@
+import { View } from "react-native";
+import Text from "@components/Text";
+import Button from "@components/Button";
+import { colors } from "@components/style";
+import { router } from "expo-router";
+
+export default function Tab() {
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Tab BEER</Text>
+
+			<Button
+				title="Add Beers"
+				color={colors.gold}
+				onPress={() => {
+					router.replace("/beer/add");
+				}}
+			/>
+		</View>
+	);
+}

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

@@ -0,0 +1,30 @@
+import { StyleSheet, Text, View } from "react-native";
+import Button from "@components/Button";
+import { colors } from "@components/style";
+import { useAuth } from "@context/AuthContext";
+import Link from "@components/Link";
+
+export default function Index() {
+	const { onLogout, authState } = useAuth();
+	const user = authState.user;
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.h1}>Welcome {user.username}</Text>
+			<Link href="/beer">Go to BEER</Link>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: "center",
+	},
+	h1: {
+		color: "#FFF",
+		fontSize: 30,
+		textAlign: "center",
+		paddingTop: "20%",
+	},
+});

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

@@ -0,0 +1,10 @@
+import { View } from "react-native";
+import Text from "@components/Text";
+
+export default function Tab() {
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Tab REVIEW</Text>
+		</View>
+	);
+}

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

@@ -0,0 +1,17 @@
+import { View } from "react-native";
+import Button from "@components/Button";
+import { colors } from "@components/style";
+import { useAuth } from "@context/AuthContext";
+import Text from "@components/Text";
+
+export default function Tab() {
+	const { onLogout, authState } = useAuth();
+	const user = authState.user;
+
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Welcome {user.username}</Text>
+			<Button title="Log out" color={colors.brown} onPress={onLogout} />
+		</View>
+	);
+}

frontend/app/(app)/_layout.js

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

frontend/app/(app)/index.js

@@ -1,23 +0,0 @@
-import { Text, View } from "react-native";
-
-import { useAuth } from "../context/AuthContext";
-
-export default function Index() {
-	const { onLogout, authState } = useAuth();
-
-	const user = authState.user;
-
-	return (
-		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-			<Text>Welcome {user.username}</Text>
-			<Text
-				onPress={() => {
-					// The `app/(app)/_layout.tsx` will redirect to the sign-in screen.
-					onLogout();
-				}}
-			>
-				Sign Out
-			</Text>
-		</View>
-	);
-}

frontend/babel.config.js

@@ -2,5 +2,18 @@ module.exports = function (api) {
 	api.cache(true);
 	return {
 		presets: ["babel-preset-expo"],
+		plugins: [
+			[
+				"module-resolver",
+				{
+					root: ["."],
+					alias: {
+						"@components": "./components",
+						"@context": "./app/context",
+						"@assets": "./assets",
+					},
+				},
+			],
+		],
 	};
 };

frontend/components/Button.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Text, StyleSheet, Pressable } from "react-native";
 
 export default function Button(props) {
-	const { onPress, title = "Save", color = "black" } = props;
+	const { onPress, title = "Button", color = "black" } = props;
 	return (
 		<Pressable
 			style={({ pressed }) => [

frontend/components/Link.js

@@ -0,0 +1,15 @@
+import { Link as EXLink } from "expo-router";
+
+const Link = (props) => {
+	const defaultStyles = {
+		color: "white",
+	};
+
+	return (
+		<EXLink style={[defaultStyles, props.style]} href={props.href}>
+			{props.children}
+		</EXLink>
+	);
+};
+
+export default Link;

frontend/components/Text.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Text as RNText } from "react-native";
+
+const Text = (props) => {
+	// Apply your default text color and any other styles here
+	const defaultStyles = {
+		color: "white", // Set the default text color to white
+	};
+
+	return <RNText style={[defaultStyles, props.style]}>{props.children}</RNText>;
+};
+
+export default Text;

frontend/components/style.js

@@ -5,5 +5,6 @@ export const colors = {
 	green: "#228B22ff",
 	charcoal: "#2C3E50ff",
 	black: "#020405ff",
-	dark: "#010611",
+	dark: "#010409",
+	darkSecondary: "#0D1117",
 };

frontend/package-lock.json

@@ -27,7 +27,8 @@
 			},
 			"devDependencies": {
 				"@babel/core": "^7.20.0",
-        "@biomejs/biome": "1.7.3"
+				"@biomejs/biome": "1.7.3",
+				"babel-plugin-module-resolver": "^5.0.2"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -6979,6 +6980,70 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
+		"node_modules/babel-plugin-module-resolver": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.2.tgz",
+			"integrity": "sha512-9KtaCazHee2xc0ibfqsDeamwDps6FZNo5S0Q81dUqEuFzVwPhcT4J5jOqIVvgCA3Q/wO9hKYxN/Ds3tIsp5ygg==",
+			"dev": true,
+			"dependencies": {
+				"find-babel-config": "^2.1.1",
+				"glob": "^9.3.3",
+				"pkg-up": "^3.1.0",
+				"reselect": "^4.1.7",
+				"resolve": "^1.22.8"
+			}
+		},
+		"node_modules/babel-plugin-module-resolver/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/babel-plugin-module-resolver/node_modules/glob": {
+			"version": "9.3.5",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-9.3.5.tgz",
+			"integrity": "sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"minimatch": "^8.0.2",
+				"minipass": "^4.2.4",
+				"path-scurry": "^1.6.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/babel-plugin-module-resolver/node_modules/minimatch": {
+			"version": "8.0.4",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz",
+			"integrity": "sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/babel-plugin-module-resolver/node_modules/minipass": {
+			"version": "4.2.8",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+			"integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/babel-plugin-polyfill-corejs2": {
 			"version": "0.4.11",
 			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
@@ -9016,6 +9081,16 @@
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
+		"node_modules/find-babel-config": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-2.1.1.tgz",
+			"integrity": "sha512-5Ji+EAysHGe1OipH7GN4qDjok5Z1uw5KAwDCbicU/4wyTZY7CqOCzcWbG7J5ad9mazq67k89fXlbc1MuIfl9uA==",
+			"dev": true,
+			"dependencies": {
+				"json5": "^2.2.3",
+				"path-exists": "^4.0.0"
+			}
+		},
 		"node_modules/find-cache-dir": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
@@ -12461,6 +12536,40 @@
 			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
+		"node_modules/path-scurry": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
+			"integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^10.2.0",
+				"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/path-scurry/node_modules/lru-cache": {
+			"version": "10.2.2",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+			"integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+			"dev": true,
+			"engines": {
+				"node": "14 || >=16.14"
+			}
+		},
+		"node_modules/path-scurry/node_modules/minipass": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.0.tgz",
+			"integrity": "sha512-oGZRv2OT1lO2UF1zUcwdTb3wqUwI0kBGTgt/T7OdSj6M6N5m3o5uPf0AIW6lVxGGoiWUR7e2AwTE+xiwK8WQig==",
+			"dev": true,
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
 		"node_modules/path-type": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -12568,6 +12677,79 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/pkg-up": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+			"integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/pkg-up/node_modules/find-up": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+			"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/pkg-up/node_modules/locate-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+			"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^3.0.0",
+				"path-exists": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/pkg-up/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/pkg-up/node_modules/p-locate": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+			"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/pkg-up/node_modules/path-exists": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+			"integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/plist": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
@@ -13407,6 +13589,12 @@
 				"path-parse": "^1.0.5"
 			}
 		},
+		"node_modules/reselect": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+			"integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==",
+			"dev": true
+		},
 		"node_modules/resolve": {
 			"version": "1.22.8",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",

frontend/package.json

@@ -28,7 +28,8 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.20.0",
-		"@biomejs/biome": "1.7.3"
+		"@biomejs/biome": "1.7.3",
+		"babel-plugin-module-resolver": "^5.0.2"
 	},
 	"private": true
 }