fr/deguapp
1
1
Fork 1
Code Issues 18 Pull Requests 1 Actions Releases 2 Activity

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

Browse Source
This commit is contained in:
Filip Rojek 2024-05-08 21:18:47 +02:00
parent e62ef8695b
commit b17cf25970
15 changed files with 15591 additions and 15222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/app/(app)/(tabs)/_layout.js Normal file
View File

@ -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>
);
}

10
frontend/app/(app)/(tabs)/beer/add.js Normal file
View File

@ -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>
);
}

21
frontend/app/(app)/(tabs)/beer/index.js Normal file
View File

@ -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>
);
}

30
frontend/app/(app)/(tabs)/index.js Normal file
View File

@ -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%",
},
});

10
frontend/app/(app)/(tabs)/review.js Normal file
View File

@ -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>
);
}

17
frontend/app/(app)/(tabs)/settings.js Normal file
View File

@ -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>
);
}

14
frontend/app/(app)/_layout.js
View File

@ -1,7 +1,7 @@
import { Redirect, Stack } from "expo-router";
import { useAuth } from "../context/AuthContext";
import { View, Text } from "react-native";
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();
@ -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>
);
}

23
frontend/app/(app)/index.js
View File

@ -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>
);
}

13
frontend/babel.config.js
View File

@ -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",
},
},
],
],
};
};

2
frontend/components/Button.js
View File

@ -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 }) => [

15
frontend/components/Link.js Normal file
View File

@ -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;

13
frontend/components/Text.js Normal file
View File

@ -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;

3
frontend/components/style.js
View File

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

190
frontend/package-lock.json generated
View File

@ -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",

3
frontend/package.json
View File

@ -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
}