StarAppeal/matrix-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tabs (prototype)

Browse Source
This commit is contained in:
StarAppeal
2024-12-06 21:24:17 +01:00
parent 879f85290f
commit 0ab2fa2c32
14 changed files with 113 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(tabs)/_layout.tsx
+56
View File
@@ -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 (
<AuthenticatedWrapper>
<Tabs
screenOptions={{
headerStyle: {
backgroundColor: theme.theme.colors.primaryContainer,
},
headerTitleStyle: {
color: theme.theme.colors.onPrimaryContainer,
},
headerTitleContainerStyle: {
paddingHorizontal: 16,
},
tabBarActiveTintColor: theme.theme.colors.primary,
tabBarInactiveTintColor: theme.theme.colors.onSurfaceVariant,
tabBarStyle: {
backgroundColor: theme.theme.colors.surface,
borderTopColor: theme.theme.colors.outline,
elevation: 4,
},
}}
>
<Tabs.Screen
name={'modes/text'}
options={{
title: 'Text',
tabBarIcon: ({color}) => <FontAwesome size={28} name="file-text" color={color}/>,
}}
/>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({color}) => <FontAwesome size={28} name="home" color={color}/>,
}}
/>
<Tabs.Screen
name="settings"
options={{
title: 'Settings',
tabBarIcon: ({color}) => <FontAwesome size={28} name="cog" color={color}/>,
}}
/>
</Tabs>
</AuthenticatedWrapper>
);
}
app/(tabs)/index.tsx
+24
View File
@@ -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 (
<ThemedBackground>
<ThemedHeader>Welcome to the Home Page!</ThemedHeader>
<ThemedButton mode={"outlined"} onPress={() => {
console.log("Button pressed");
logout();
router.replace("/login");
}
}>
Logout
</ThemedButton>
</ThemedBackground>
);
}
app/(tabs)/modes/clock.tsx
View File
app/(tabs)/modes/image.tsx
View File
app/(tabs)/modes/music.tsx
View File
app/(tabs)/modes/text.tsx
+14
View File
@@ -0,0 +1,14 @@
import ThemedHeader from "@/src/components/themed/ThemedHeader";
import ThemedBackground from "@/src/components/themed/ThemedBackground";
export default function TextScreen() {
return (
<ThemedBackground>
<ThemedHeader>
Text Mode
</ThemedHeader>
</ThemedBackground>
);
}
app/(tabs)/settings.tsx
+1
View File
@@ -0,0 +1 @@
app/_layout.tsx
+2 -6
View File
@@ -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 (
<ThemeProvider>
<AuthProvider>
<Stack
screenOptions={{
headerShown: false
}}
/>
<CustomStack />
</AuthProvider>
</ThemeProvider>
);
app/index.tsx
-44
View File
@@ -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 (
<AuthenticatedWrapper>
<ThemedBackground>
<Logo/>
<ThemedHeader>Welcome 💫</ThemedHeader>
<ThemedParagraph>Congratulations you are logged in.</ThemedParagraph>
<ThemedParagraph>{token}</ThemedParagraph>
<ThemedButton
mode="outlined"
onPress={() => router.push("/protected")}>
OwO what's this?
</ThemedButton>
<ThemedButton
mode="outlined"
onPress={async () => {
await logout();
router.replace("/login");
}
}
>
Sign out
</ThemedButton>
</ThemedBackground>
</AuthenticatedWrapper>
);
}
app/protected/index.tsx
-35
View File
@@ -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 (
<AuthenticatedWrapper>
<ThemedBackground>
<Logo/>
<ThemedHeader>Welcome 💫</ThemedHeader>
<ThemedParagraph>Dies ist geheim. PSST !</ThemedParagraph>
<ThemedParagraph>{token}</ThemedParagraph>
<ThemedButton
mode="outlined"
onPress={async () => {
await logout();
router.replace("/login");
}
}
>
Sign out
</ThemedButton>
</ThemedBackground>
</AuthenticatedWrapper>
);
}
package-lock.json
Generated
-22
View File
@@ -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",
src/components/AuthenticatedWrapper.tsx
+3 -2
View File
@@ -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 <Redirect href={"/login"}/>;
return <NotAuthenticated />;
// return <Redirect href={"/login"}/>;
}
return <>{children}</>;
src/components/themed/ThemedHeader.tsx
-2
View File
@@ -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 <Text style={styles.header} {...props} />;
}
src/core/Stack.tsx
+13
View File
@@ -0,0 +1,13 @@
import React from "react";
import {Stack} from "expo-router";
export default function CustomStack() {
return (
<Stack
screenOptions={{
headerShown: false,
}}>
</Stack>
);
}