eletrotupi / tcc/ commit / 2674dde

frontend: fix tabs routes mess

I was kind of applying a weird pattern nesting those tabs, after
re-reading and watching some other apps, I've realized that expo-router
wants somewhat flat directories, so tabs initial pages must go flat-wise
then the other pages must be outside the tags route group.

I might also need to use `<Slot />` as well, since I think those are
incorrect there instead of re-rendering the whole layout for those tabs,
but I'll get there eventually
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 2674ddedcd8c15845a5ac51c5978e7c7909b7238 Browse files
Parents f037eb7
Changed files
7
Additions
+23
Deletions
-5
frontend/app/(tabs)/_layout.tsx modified+4 -4
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="history/index"
43 + 
        name="history"
44 44 
        options={{
45 45 
          title: 'Histórico',
46 46 
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="history" color={color} />,
47 47 
        }}
48 48 
      />
49 49
50 50 
      <Tabs.Screen
51 - 
        name="insights/index"
51 + 
        name="insights"
52 52 
        options={{
53 53 
          title: 'Insights',
54 54 
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="lightbulb-outline" color={color} />,
55 55 
        }}
56 56 
      />
62 62 
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="add-circle" color={color} />,
63 63 
        }}
64 64 
      />
65 65
66 66 
      <Tabs.Screen
67 - 
        name="actions/index"
67 + 
        name="actions"
68 68 
        options={{
69 69 
          title: 'Ações',
70 70 
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="bolt" color={color} />,
71 71 
        }}
72 72 
      />
73 73
74 74 
      <Tabs.Screen
75 - 
        name="settings/index"
75 + 
        name="settings"
76 76 
        options={{
77 77 
          title: 'Ajustes',
78 78 
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="settings.fill" color={color} />,
79 79 
        }}
80 80 
      />
81 81 
    </Tabs>
82 82 
  );
83 83 
}
frontend/app/(tabs)/actions.tsx renamed
frontend/app/(tabs)/actions/index.tsx → frontend/app/(tabs)/actions.tsx
1 1 
import { ThemedText } from '@/components/misc/themed-text';
2 2 
import { ThemedView } from '@/components/misc/themed-view';
3 3 
import { ScreenLayout } from '@/components/ui/ScreenLayout';
4 4 
import { useAuth } from '@/context/AuthContext';
5 5
16 16 
        </ThemedText>
17 17 
      </ThemedView>
18 18 
    </ScreenLayout>
19 19 
  )
20 20 
}
frontend/app/(tabs)/history.tsx renamed
frontend/app/(tabs)/history/index.tsx → frontend/app/(tabs)/history.tsx
1 1 
import { ThemedText } from '@/components/misc/themed-text';
2 2 
import { ThemedView } from '@/components/misc/themed-view';
3 3 
import { ScreenLayout } from '@/components/ui/ScreenLayout';
4 4 
import { useAuth } from '@/context/AuthContext';
5 5
16 16 
        </ThemedText>
17 17 
      </ThemedView>
18 18 
    </ScreenLayout>
19 19 
  )
20 20 
}
frontend/app/(tabs)/insights.tsx renamed
frontend/app/(tabs)/insights/index.tsx → frontend/app/(tabs)/insights.tsx
1 1 
import { ThemedText } from '@/components/misc/themed-text';
2 2 
import { ThemedView } from '@/components/misc/themed-view';
3 3 
import { ScreenLayout } from '@/components/ui/ScreenLayout';
4 4 
import { useAuth } from '@/context/AuthContext';
5 5 
import { Card, CardHeader } from '@/components/ui/Cards'
35 35 
        </Section>
36 36 
      </ThemedView>
37 37 
    </ScreenLayout>
38 38 
  )
39 39 
}
frontend/app/(tabs)/settings.tsx renamed
frontend/app/(tabs)/settings/index.tsx → frontend/app/(tabs)/settings.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 
});
frontend/app/_layout.tsx modified+2 -1
frontend/app/_layout.tsx
1 1 
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
2 2 
import { Stack } from 'expo-router';
3 3 
import { useColorScheme } from 'react-native'
4 4
5 5 
import { AuthProvider } from '@/context/AuthContext';
6 6
7 7 
export const unstable_settings = {
8 - 
  anchor: '(tabs)/new',
8 + 
  initialRouteName: '(tabs)',
9 9 
};
10 10
11 11 
export default function RootLayout() {
12 12 
  const colorScheme = useColorScheme();
13 13
14 14 
  return (
15 15 
    <ThemeProvider value={DefaultTheme}>
16 16 
      <AuthProvider>
17 17 
        <Stack>
18 + 
          <Stack.Screen name="index" options={{ headerShown: false }} />
18 19 
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
19 20 
          <Stack.Screen
20 21 
            name="auth"
21 22 
            options={{
22 23 
              headerShown: false,
27 28 
        </Stack>
28 29 
      </AuthProvider>
29 30 
    </ThemeProvider>
30 31 
  );
31 32 
}
frontend/app/index.tsx added+17
/dev/null → frontend/app/index.tsx
1 + 
import { Redirect } from 'expo-router';
2 + 
import { useAuth } from '@/context/AuthContext';
3 + 
import { ActivityIndicator, View } from 'react-native';
4 +
5 + 
export default function Index() {
6 + 
  const { isAuthenticated, isLoading } = useAuth();
7 +
8 + 
  if (isLoading) {
9 + 
    return (
10 + 
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
11 + 
        <ActivityIndicator size="large" />
12 + 
      </View>
13 + 
    );
14 + 
  }
15 +
16 + 
  return <Redirect href={isAuthenticated ? '/(tabs)/new' : '/auth/login'} />;
17 + 
}