frontend: make new entries behave as stacks
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
87c2c7279a81f897d50a9cef8c07aaf8fca0cc0c Browse filesParents
76e9483Changed files
4
Additions
+67
Deletions
-2
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';
54 54
tabBarIcon: ({ color }) => <IconSymbol size={28} name="lightbulb-outline" color={color} />,
55 55
}}
56 56
/>
57 57
58 58
<Tabs.Screen
59 -
name="new/index"
59 +
name="new"
60 60
options={{
61 61
title: 'Novo',
62 62
tabBarIcon: ({ color }) => <IconSymbol size={28} name="add-circle" color={color} />,
63 63
}}
64 64
/>
79 79
}}
80 80
/>
81 81
</Tabs>
82 82
);
83 83
}
/dev/null → frontend/app/(tabs)/new/_layout.tsx
1 +
import { Stack } from 'expo-router';
2 +
3 +
export const unstable_settings = {
4 +
initialRouteName: 'index'
5 +
};
6 +
7 +
export default function MoodLayout() {
8 +
return (
9 +
<Stack
10 +
screenOptions={{
11 +
headerShown: false
12 +
}}>
13 +
<Stack.Screen name="index" />
14 +
<Stack.Screen name="entry" options={{
15 +
headerTitle: "Registrar humor",
16 +
headerShown: true
17 +
}} />
18 +
</Stack>
19 +
);
20 +
}
/dev/null → frontend/app/(tabs)/new/entry.tsx
1 +
import { useState, useEffect } from 'react';
2 +
import {
3 +
Link, router, useLocalSearchParams
4 +
} from 'expo-router';
5 +
6 +
import {
7 +
View,
8 +
Text,
9 +
StyleSheet
10 +
} from 'react-native';
11 +
12 +
import { SafeAreaView } from 'react-native-safe-area-context';
13 +
import { ThemedText } from '@/components/misc/themed-text';
14 +
import { ThemedView } from '@/components/misc/themed-view';
15 +
import { ScreenLayout } from '@/components/ui/ScreenLayout';
16 +
import { useAuth } from '@/context/AuthContext';
17 +
import { Grid, Col, Row, Between } from '@/components/ui/LayoutHelpers';
18 +
import { Card } from '@/components/ui/Cards';
19 +
import { Button } from '@/components/ui/Button';
20 +
import { Section, SectionHeader } from '@/components/ui/Sections';
21 +
22 +
export default function NewMoodEntry() {
23 +
const { user } = useAuth();
24 +
// TODO: transform this into a specific mood component
25 +
const { initialMood } = useLocalSearchParams();
26 +
27 +
return (
28 +
<SafeAreaView style={styles.container}>
29 +
<ThemedText>
30 +
Little black sub {initialMood}
31 +
</ThemedText>
32 +
</SafeAreaView>
33 +
);
34 +
}
35 +
36 +
const styles = StyleSheet.create({
37 +
container: {
38 +
backgroundColor: 'pink'
39 +
}
40 +
});
frontend/app/(tabs)/new/index.tsx
1 1
import { useEffect, useState } from 'react';
2 -
import {
2 +
import {
3 3
StyleSheet
4 4
} from 'react-native';
5 5
6 6
import { ThemedText } from '@/components/misc/themed-text';
7 7
import { ThemedView } from '@/components/misc/themed-view';
12 12
import { Button } from '@/components/ui/Button';
13 13
import { Section, SectionHeader } from '@/components/ui/Sections';
14 14
import { MoodSelector } from '@/components/ui/EmojiSelectors';
15 15
import { Typography, Spacing, Shadows } from '@/constants/theme';
16 16
import { useThemeColor } from '@/hooks/use-theme-color';
17 +
import { router } from 'expo-router';
17 18
18 19
export default function New() {
19 20
const { user } = useAuth();
20 21
const [mood, setMood] = useState<string>('bem');
21 22
const [isLoading, setIsLoading] = useState<boolean>(false);
22 23
24 +
// TODO: Move these elsewhere
23 25
const moodOptions = [
24 26
{ id: 'sad', icon: '😢', label: 'Triste' },
25 27
{ id: 'neutral', icon: '😐', label: 'Neutro' },
26 28
{ id: 'good', icon: '😊', label: 'Bem' },
27 29
{ id: 'great', icon: '🤩', label: 'Ótimo' },
28 30
{ id: 'angry', icon: '😠', label: 'Irritado' },
29 31
];
30 32
31 33
const initQuickRegister = () => {
32 34
console.log("Register: ", mood);
35 +
36 +
// TODO: Set down on camelCase vs kebab case
37 +
router.navigate(`/new/entry?initialMood=${mood}`)
33 38
};
34 39
35 40
return (
36 41
<ScreenLayout userName={user.firstName}
37 42
onNotificationPress={() => console.log('Notifications')}
107 112
marginRight: 16,
108 113
marginBottom: 16,
109 114
...Shadows.lg
110 115
}
111 116
});