From 0ab2fa2c329fce6b9973a4b85860c9fc9e025031 Mon Sep 17 00:00:00 2001 From: StarAppeal Date: Fri, 6 Dec 2024 21:24:17 +0100 Subject: [PATCH] add tabs (prototype) --- app/(tabs)/_layout.tsx | 56 +++++++++++++++++++++++++ app/(tabs)/index.tsx | 24 +++++++++++ app/(tabs)/modes/clock.tsx | 0 app/(tabs)/modes/image.tsx | 0 app/(tabs)/modes/music.tsx | 0 app/(tabs)/modes/text.tsx | 14 +++++++ app/(tabs)/settings.tsx | 1 + app/_layout.tsx | 8 +--- app/index.tsx | 44 ------------------- app/protected/index.tsx | 35 ---------------- package-lock.json | 22 ---------- src/components/AuthenticatedWrapper.tsx | 5 ++- src/components/themed/ThemedHeader.tsx | 2 - src/core/Stack.tsx | 13 ++++++ 14 files changed, 113 insertions(+), 111 deletions(-) create mode 100644 app/(tabs)/_layout.tsx create mode 100644 app/(tabs)/index.tsx create mode 100644 app/(tabs)/modes/clock.tsx create mode 100644 app/(tabs)/modes/image.tsx create mode 100644 app/(tabs)/modes/music.tsx create mode 100644 app/(tabs)/modes/text.tsx create mode 100644 app/(tabs)/settings.tsx delete mode 100644 app/index.tsx delete mode 100644 app/protected/index.tsx create mode 100644 src/core/Stack.tsx diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx new file mode 100644 index 0000000..b1dd9c1 --- /dev/null +++ b/app/(tabs)/_layout.tsx @@ -0,0 +1,56 @@ +import {Tabs} from 'expo-router'; +import React from "react"; +import {FontAwesome} from "@expo/vector-icons"; +import {useTheme} from "@/src/context/ThemeProvider"; +import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper"; + +export default function TabLayout() { + const theme = useTheme(); + return ( + + + , + }} + /> + , + }} + /> + , + }} + /> + + + + ); +} diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx new file mode 100644 index 0000000..701daa1 --- /dev/null +++ b/app/(tabs)/index.tsx @@ -0,0 +1,24 @@ +import ThemedButton from "@/src/components/themed/ThemedButton"; +import ThemedBackground from "@/src/components/themed/ThemedBackground"; +import {useAuth} from "@/src/context/AuthProvider"; +import {useRouter} from "expo-router"; +import ThemedHeader from "@/src/components/themed/ThemedHeader"; + +export default function HomeScreen() { + const {logout} = useAuth(); + const router = useRouter(); + return ( + + Welcome to the Home Page! + { + console.log("Button pressed"); + logout(); + router.replace("/login"); + } + }> + Logout + + + + ); +} diff --git a/app/(tabs)/modes/clock.tsx b/app/(tabs)/modes/clock.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/(tabs)/modes/image.tsx b/app/(tabs)/modes/image.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/(tabs)/modes/music.tsx b/app/(tabs)/modes/music.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/(tabs)/modes/text.tsx b/app/(tabs)/modes/text.tsx new file mode 100644 index 0000000..8c72c9d --- /dev/null +++ b/app/(tabs)/modes/text.tsx @@ -0,0 +1,14 @@ +import ThemedHeader from "@/src/components/themed/ThemedHeader"; +import ThemedBackground from "@/src/components/themed/ThemedBackground"; + +export default function TextScreen() { + return ( + + + Text Mode + + + ); +} + + diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/app/(tabs)/settings.tsx @@ -0,0 +1 @@ + diff --git a/app/_layout.tsx b/app/_layout.tsx index c635bc2..476c9fc 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -3,18 +3,14 @@ import React from "react"; import {AuthProvider} from "@/src/context/AuthProvider"; import {ThemeProvider} from "@/src/context/ThemeProvider"; -import {Stack} from "expo-router"; +import CustomStack from "@/src/core/Stack"; export default function Layout() { return ( - + ); diff --git a/app/index.tsx b/app/index.tsx deleted file mode 100644 index 4bf6772..0000000 --- a/app/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; - -import {useRouter} from "expo-router"; - -import ThemedBackground from "../src/components/themed/ThemedBackground"; -import Logo from "../src/components/Logo"; -import ThemedHeader from "../src/components/themed/ThemedHeader"; -import ThemedParagraph from "../src/components/themed/ThemedParagraph"; -import ThemedButton from "../src/components/themed/ThemedButton"; - -import {useAuth} from "@/src/context/AuthProvider"; -import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper"; - -export default function HomeScreen() { - const router = useRouter(); - const {token, logout} = useAuth(); - - return ( - - - - Welcome 💫 - Congratulations you are logged in. - {token} - router.push("/protected")}> - OwO what's this? - - - { - await logout(); - router.replace("/login"); - } - } - > - Sign out - - - - ); -} diff --git a/app/protected/index.tsx b/app/protected/index.tsx deleted file mode 100644 index 944ee40..0000000 --- a/app/protected/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import {useAuth} from "@/src/context/AuthProvider"; -import Logo from "@/src/components/Logo"; -import ThemedHeader from "@/src/components/themed/ThemedHeader"; -import ThemedParagraph from "@/src/components/themed/ThemedParagraph"; -import ThemedButton from "../../src/components/themed/ThemedButton"; -import ThemedBackground from "@/src/components/themed/ThemedBackground"; -import {useRouter} from "expo-router"; -import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper"; - -export default function ProtectedScreen(): JSX.Element { - const router = useRouter(); - const {token, logout} = useAuth(); - - return ( - - - - Welcome 💫 - Dies ist geheim. PSST ! - {token} - { - await logout(); - router.replace("/login"); - } - } - > - Sign out - - - - ); -} diff --git a/package-lock.json b/package-lock.json index de0974a..fd02e15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,7 +41,6 @@ "@babel/core": "^7.26.0", "@types/jest": "^29.5.14", "@types/react": "~18.3.12", - "@types/react-native-vector-icons": "^6.4.18", "@types/react-test-renderer": "^18.3.0", "compression": "^1.7.5", "eslint-config-expo": "~8.0.1", @@ -5027,27 +5026,6 @@ "csstype": "^3.0.2" } }, - "node_modules/@types/react-native": { - "version": "0.70.19", - "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz", - "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "*" - } - }, - "node_modules/@types/react-native-vector-icons": { - "version": "6.4.18", - "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz", - "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "*", - "@types/react-native": "^0.70" - } - }, "node_modules/@types/react-test-renderer": { "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz", diff --git a/src/components/AuthenticatedWrapper.tsx b/src/components/AuthenticatedWrapper.tsx index 59b5dcb..d877149 100644 --- a/src/components/AuthenticatedWrapper.tsx +++ b/src/components/AuthenticatedWrapper.tsx @@ -1,12 +1,13 @@ import React from "react"; import {useAuth} from "@/src/context/AuthProvider"; -import {Redirect} from "expo-router"; +import NotAuthenticated from "@/src/components/NotAuthenticated"; const AuthenticatedWrapper: React.FC<{ children: React.ReactNode }> = ({children}) => { const {isAuthenticated} = useAuth(); if (!isAuthenticated) { - return ; + return ; + // return ; } return <>{children}; diff --git a/src/components/themed/ThemedHeader.tsx b/src/components/themed/ThemedHeader.tsx index d300278..c77e412 100644 --- a/src/components/themed/ThemedHeader.tsx +++ b/src/components/themed/ThemedHeader.tsx @@ -1,14 +1,12 @@ import React from "react"; import {StyleSheet} from "react-native"; import {Text} from "react-native-paper"; -import {useTheme} from "@/src/context/ThemeProvider"; type Props = { children: React.ReactNode; } export default function ThemedHeader(props: Props) { - const {theme} = useTheme(); return ; } diff --git a/src/core/Stack.tsx b/src/core/Stack.tsx new file mode 100644 index 0000000..4e7d1b5 --- /dev/null +++ b/src/core/Stack.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import {Stack} from "expo-router"; + + +export default function CustomStack() { + return ( + + + ); +}