frontend: make new entries behave as stacks

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 87c2c7279a81f897d50a9cef8c07aaf8fca0cc0c

Parents: 76e9483

4 file(s) changed

frontend/app/(tabs)/_layout.tsx +1 -1
frontend/app/(tabs)/new/_layout.tsx +20 -0
frontend/app/(tabs)/new/entry.tsx +40 -0
frontend/app/(tabs)/new/index.tsx +6 -1

frontend/app/(tabs)/_layout.tsx

@@ -56,7 +56,7 @@ }}
          />
    
          <Tabs.Screen
  -         name="new/index"
  +         name="new"
            options={{
              title: 'Novo',
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="add-circle" color={color} />,

frontend/app/(tabs)/new/_layout.tsx

@@ -0,0 +1,20 @@
  + import { Stack } from 'expo-router';
  + 
  + export const unstable_settings = {
  +   initialRouteName: 'index'
  + };
  + 
  + export default function MoodLayout() {
  +   return (
  +     <Stack
  +       screenOptions={{
  +         headerShown: false
  +       }}>
  +       <Stack.Screen name="index" />
  +       <Stack.Screen name="entry" options={{
  +         headerTitle: "Registrar humor",
  +         headerShown: true
  +       }} />
  +     </Stack>
  +   );
  + }

frontend/app/(tabs)/new/entry.tsx

@@ -0,0 +1,40 @@
  + import { useState, useEffect } from 'react';
  + import {
  +   Link, router, useLocalSearchParams
  + } from 'expo-router';
  + 
  + import {
  +   View,
  +   Text,
  +   StyleSheet
  + } from 'react-native';
  + 
  + import { SafeAreaView } from 'react-native-safe-area-context';
  + import { ThemedText } from '@/components/misc/themed-text';
  + import { ThemedView } from '@/components/misc/themed-view';
  + import { ScreenLayout } from '@/components/ui/ScreenLayout';
  + import { useAuth } from '@/context/AuthContext';
  + import { Grid, Col, Row, Between } from '@/components/ui/LayoutHelpers';
  + import { Card } from '@/components/ui/Cards';
  + import { Button } from '@/components/ui/Button';
  + import { Section, SectionHeader } from '@/components/ui/Sections';
  + 
  + export default function NewMoodEntry() {
  +   const { user } = useAuth();
  +   // TODO: transform this into a specific mood component
  +   const { initialMood } = useLocalSearchParams();
  + 
  +   return (
  +     <SafeAreaView style={styles.container}>
  +       <ThemedText>
  +         Little black sub {initialMood}
  +       </ThemedText>
  +     </SafeAreaView>
  +   );
  + }
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     backgroundColor: 'pink'
  +   }
  + });

frontend/app/(tabs)/new/index.tsx

@@ -1,5 +1,5 @@
    import { useEffect, useState } from 'react';
  - import { 
  + import {
      StyleSheet
    } from 'react-native';
    

@@ -14,12 +14,14 @@ import { Section, SectionHeader } from '@/components/ui/Sections';
    import { MoodSelector } from '@/components/ui/EmojiSelectors';
    import { Typography, Spacing, Shadows } from '@/constants/theme';
    import { useThemeColor } from '@/hooks/use-theme-color';
  + import { router } from 'expo-router';
    
    export default function New() {
      const { user } = useAuth();
      const [mood, setMood] = useState<string>('bem');
      const [isLoading, setIsLoading] = useState<boolean>(false);
    
  +   // TODO: Move these elsewhere
      const moodOptions = [
        { id: 'sad', icon: '😢', label: 'Triste' },
        { id: 'neutral', icon: '😐', label: 'Neutro' },

@@ -30,6 +32,9 @@ ];
    
      const initQuickRegister = () => {
        console.log("Register: ", mood);
  + 
  +     // TODO: Set down on camelCase vs kebab case
  +     router.navigate(`/new/entry?initialMood=${mood}`)
      };
    
      return (