frontend: reorganize tabs and remove cruft
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
286fe93819d9fb8b22de437d4bbf6887d6de40cd Browse filesParents
cfc8f14Changed files
8
Additions
+72
Deletions
-244
frontend/app/(tabs)/_layout.tsx
1 1
import { Tabs, Redirect, router } from 'expo-router';
2 2
import React, { useEffect } from 'react';
3 3
import { View, ActivityIndicator } from 'react-native';
4 4
5 5
import { HapticTab } from '@/components/misc/haptic-tab';
38 38
headerShown: false,
39 39
tabBarButton: HapticTab,
40 40
}}>
41 41
42 42
<Tabs.Screen
43 -
name="index"
43 +
name="history/index"
44 44
options={{
45 -
title: 'Home',
46 -
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
45 +
title: 'Histórico',
46 +
tabBarIcon: ({ color }) => <IconSymbol size={28} name="history" color={color} />,
47 47
}}
48 48
/>
49 49
50 50
<Tabs.Screen
51 -
name="explore"
51 +
name="insights/index"
52 52
options={{
53 -
title: 'Explore',
54 -
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
53 +
title: 'Insights',
54 +
tabBarIcon: ({ color }) => <IconSymbol size={28} name="lightbulb-outline" color={color} />,
55 55
}}
56 56
/>
57 57
58 58
<Tabs.Screen
59 -
name="settings"
59 +
name="new/index"
60 60
options={{
61 -
title: 'Configurações',
61 +
title: 'Novo',
62 +
tabBarIcon: ({ color }) => <IconSymbol size={28} name="add-circle" color={color} />,
63 +
}}
64 +
/>
65 +
66 +
<Tabs.Screen
67 +
name="actions/index"
68 +
options={{
69 +
title: 'Ações',
70 +
tabBarIcon: ({ color }) => <IconSymbol size={28} name="bolt" color={color} />,
71 +
}}
72 +
/>
73 +
74 +
<Tabs.Screen
75 +
name="settings/index"
76 +
options={{
77 +
title: 'Ajustes',
62 78
tabBarIcon: ({ color }) => <IconSymbol size={28} name="settings.fill" color={color} />,
63 79
}}
64 80
/>
65 81
</Tabs>
66 82
);
67 83
}
/dev/null → frontend/app/(tabs)/actions/index.tsx
1 +
import { ThemedText } from '@/components/misc/themed-text';
2 +
import { ThemedView } from '@/components/misc/themed-view';
3 +
4 +
export default function Actions() {
5 +
return (
6 +
<ThemedView>
7 +
<ThemedText>
8 +
Actions
9 +
</ThemedText>
10 +
</ThemedView>
11 +
)
12 +
}
frontend/app/(tabs)/explore.tsx → /dev/null
1 -
import { Image } from 'expo-image';
2 -
import { Platform, StyleSheet } from 'react-native';
3 -
4 -
import { Collapsible } from '@/components/ui/collapsible';
5 -
import { ExternalLink } from '@/components/misc/external-link';
6 -
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
7 -
import { ThemedText } from '@/components/misc/themed-text';
8 -
import { ThemedView } from '@/components/misc/themed-view';
9 -
import { IconSymbol } from '@/components/ui/icon-symbol';
10 -
import { Fonts } from '@/constants/theme';
11 -
12 -
export default function TabTwoScreen() {
13 -
return (
14 -
<ParallaxScrollView
15 -
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
16 -
headerImage={
17 -
<IconSymbol
18 -
size={310}
19 -
color="#808080"
20 -
name="chevron.left.forwardslash.chevron.right"
21 -
style={styles.headerImage}
22 -
/>
23 -
}>
24 -
<ThemedView style={styles.titleContainer}>
25 -
<ThemedText
26 -
type="title"
27 -
style={{
28 -
fontFamily: Fonts.rounded,
29 -
}}>
30 -
Explore
31 -
</ThemedText>
32 -
</ThemedView>
33 -
<ThemedText>This app includes example code to help you get started.</ThemedText>
34 -
<Collapsible title="File-based routing">
35 -
<ThemedText>
36 -
This app has two screens:{' '}
37 -
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
38 -
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
39 -
</ThemedText>
40 -
<ThemedText>
41 -
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
42 -
sets up the tab navigator.
43 -
</ThemedText>
44 -
<ExternalLink href="https://docs.expo.dev/router/introduction">
45 -
<ThemedText type="link">Learn more</ThemedText>
46 -
</ExternalLink>
47 -
</Collapsible>
48 -
<Collapsible title="Android, iOS, and web support">
49 -
<ThemedText>
50 -
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
51 -
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
52 -
</ThemedText>
53 -
</Collapsible>
54 -
<Collapsible title="Images">
55 -
<ThemedText>
56 -
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
57 -
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
58 -
different screen densities
59 -
</ThemedText>
60 -
<Image
61 -
source={require('@/assets/images/react-logo.png')}
62 -
style={{ width: 100, height: 100, alignSelf: 'center' }}
63 -
/>
64 -
<ExternalLink href="https://reactnative.dev/docs/images">
65 -
<ThemedText type="link">Learn more</ThemedText>
66 -
</ExternalLink>
67 -
</Collapsible>
68 -
<Collapsible title="Light and dark mode components">
69 -
<ThemedText>
70 -
This template has light and dark mode support. The{' '}
71 -
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
72 -
what the user's current color scheme is, and so you can adjust UI colors accordingly.
73 -
</ThemedText>
74 -
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
75 -
<ThemedText type="link">Learn more</ThemedText>
76 -
</ExternalLink>
77 -
</Collapsible>
78 -
<Collapsible title="Animations">
79 -
<ThemedText>
80 -
This template includes an example of an animated component. The{' '}
81 -
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
82 -
the powerful{' '}
83 -
<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
84 -
react-native-reanimated
85 -
</ThemedText>{' '}
86 -
library to create a waving hand animation.
87 -
</ThemedText>
88 -
{Platform.select({
89 -
ios: (
90 -
<ThemedText>
91 -
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
92 -
component provides a parallax effect for the header image.
93 -
</ThemedText>
94 -
),
95 -
})}
96 -
</Collapsible>
97 -
</ParallaxScrollView>
98 -
);
99 -
}
100 -
101 -
const styles = StyleSheet.create({
102 -
headerImage: {
103 -
color: '#808080',
104 -
bottom: -90,
105 -
left: -35,
106 -
position: 'absolute',
107 -
},
108 -
titleContainer: {
109 -
flexDirection: 'row',
110 -
gap: 8,
111 -
},
112 -
});
/dev/null → frontend/app/(tabs)/history/index.tsx
1 +
import { ThemedText } from '@/components/misc/themed-text';
2 +
import { ThemedView } from '@/components/misc/themed-view';
3 +
4 +
export default function History() {
5 +
return (
6 +
<ThemedView>
7 +
<ThemedText>
8 +
History
9 +
</ThemedText>
10 +
</ThemedView>
11 +
)
12 +
}
frontend/app/(tabs)/index.tsx → /dev/null
1 -
import { Image } from 'expo-image';
2 -
import { Platform, StyleSheet, TouchableOpacity, Alert } from 'react-native';
3 -
4 -
import { HelloWave } from '@/components/hello-wave';
5 -
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
6 -
import { ThemedText } from '@/components/misc/themed-text';
7 -
import { ThemedView } from '@/components/misc/themed-view';
8 -
import { Link } from 'expo-router';
9 -
import { useAuth } from '@/context/AuthContext';
10 -
import { Button } from '@/components/ui';
11 -
12 -
export default function HomeScreen() {
13 -
const { user, logout } = useAuth();
14 -
15 -
const handleLogout = async () => {
16 -
Alert.alert(
17 -
'Sair',
18 -
'Tem certeza que quer sair?',
19 -
[
20 -
{ text: 'Cancelar', style: 'cancel' },
21 -
{
22 -
text: 'Sair',
23 -
style: 'destructive',
24 -
onPress: logout
25 -
},
26 -
]
27 -
);
28 -
};
29 -
30 -
return (
31 -
<ParallaxScrollView
32 -
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
33 -
headerImage={
34 -
<Image
35 -
source={require('@/assets/images/partial-react-logo.png')}
36 -
style={styles.reactLogo}
37 -
/>
38 -
}>
39 -
<ThemedView style={styles.titleContainer}>
40 -
<ThemedText type="title">Bem vindo{user?.firstName ? `, ${user.firstName}` : ''}!</ThemedText>
41 -
<HelloWave />
42 -
</ThemedView>
43 -
<ThemedView style={styles.stepContainer}>
44 -
<Button
45 -
title="Sair"
46 -
variant="outline"
47 -
onPress={handleLogout}
48 -
/>
49 -
</ThemedView>
50 -
<ThemedView style={styles.stepContainer}>
51 -
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
52 -
<ThemedText>
53 -
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
54 -
Press{' '}
55 -
<ThemedText type="defaultSemiBold">
56 -
{Platform.select({
57 -
ios: 'cmd + d',
58 -
android: 'cmd + m',
59 -
web: 'F12',
60 -
})}
61 -
</ThemedText>{' '}
62 -
to open developer tools.
63 -
</ThemedText>
64 -
</ThemedView>
65 -
<ThemedView style={styles.stepContainer}>
66 -
<Link href="/modal">
67 -
<Link.Trigger>
68 -
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
69 -
</Link.Trigger>
70 -
<Link.Preview />
71 -
<Link.Menu>
72 -
<Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
73 -
<Link.MenuAction
74 -
title="Share"
75 -
icon="square.and.arrow.up"
76 -
onPress={() => alert('Share pressed')}
77 -
/>
78 -
<Link.Menu title="More" icon="ellipsis">
79 -
<Link.MenuAction
80 -
title="Delete"
81 -
icon="trash"
82 -
destructive
83 -
onPress={() => alert('Delete pressed')}
84 -
/>
85 -
</Link.Menu>
86 -
</Link.Menu>
87 -
</Link>
88 -
89 -
<ThemedText>
90 -
{`Tap the Explore tab to learn more about what's included in this starter app.`}
91 -
</ThemedText>
92 -
</ThemedView>
93 -
<ThemedView style={styles.stepContainer}>
94 -
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
95 -
<ThemedText>
96 -
{`When you're ready, run `}
97 -
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
98 -
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
99 -
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
100 -
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
101 -
</ThemedText>
102 -
</ThemedView>
103 -
</ParallaxScrollView>
104 -
);
105 -
}
106 -
107 -
const styles = StyleSheet.create({
108 -
titleContainer: {
109 -
flexDirection: 'row',
110 -
alignItems: 'center',
111 -
gap: 8,
112 -
},
113 -
stepContainer: {
114 -
gap: 8,
115 -
marginBottom: 8,
116 -
},
117 -
reactLogo: {
118 -
height: 178,
119 -
width: 290,
120 -
bottom: 0,
121 -
left: 0,
122 -
position: 'absolute',
123 -
},
124 -
});
/dev/null → frontend/app/(tabs)/insights/index.tsx
1 +
import { ThemedText } from '@/components/misc/themed-text';
2 +
import { ThemedView } from '@/components/misc/themed-view';
3 +
4 +
export default function Insights() {
5 +
return (
6 +
<ThemedView>
7 +
<ThemedText>
8 +
Insights
9 +
</ThemedText>
10 +
</ThemedView>
11 +
)
12 +
}
/dev/null → frontend/app/(tabs)/new/index.tsx
1 +
import { ThemedText } from '@/components/misc/themed-text';
2 +
import { ThemedView } from '@/components/misc/themed-view';
3 +
4 +
export default function New() {
5 +
return (
6 +
<ThemedView>
7 +
<ThemedText>
8 +
New
9 +
</ThemedText>
10 +
</ThemedView>
11 +
)
12 +
}
frontend/app/(tabs)/settings.tsx → frontend/app/(tabs)/settings/index.tsx
1 1
import { TouchableOpacity, StyleSheet, Text, SectionList, View, Alert } from 'react-native';
2 2
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
3 3
import { useState } from 'react';
4 4
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
5 5
import { Link } from 'expo-router'
126 126
},
127 127
logout: {
128 128
textColor: '#FF2C2C'
129 129
}
130 130
});