React Native Expo app — full mobile client
- Expo SDK 54, expo-router, NativeWind - 7 screens: login, tasks, calendar, goals, chat, settings, tabs - API client (api.hasdo.info), SecureStore auth, AuthContext - Tab navigation: Ukoly, Kalendar, Cile, Chat, Nastaveni - Pull-to-refresh, FAB, group colors, priority dots - Calendar grid with task dots - AI chat with keyboard avoiding - Web export verified (780 modules, 1.5MB bundle) - Bundle ID: info.hasdo.taskteam Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,20 +0,0 @@
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>Open up App.tsx to start working on your app!</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
@@ -1,34 +1,41 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "mobile",
|
||||
"slug": "mobile",
|
||||
"name": "Task Team",
|
||||
"slug": "task-team",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"newArchEnabled": true,
|
||||
"userInterfaceStyle": "automatic",
|
||||
"splash": {
|
||||
"image": "./assets/splash-icon.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
"backgroundColor": "#3B82F6"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "info.hasdo.taskteam"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
"backgroundColor": "#3B82F6"
|
||||
},
|
||||
"edgeToEdgeEnabled": true,
|
||||
"predictiveBackGestureEnabled": false
|
||||
"package": "info.hasdo.taskteam"
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
"bundler": "metro"
|
||||
},
|
||||
"scheme": "taskteam",
|
||||
"plugins": [
|
||||
"expo-router",
|
||||
"expo-secure-store"
|
||||
"expo-secure-store",
|
||||
[
|
||||
"expo-notifications",
|
||||
{
|
||||
"icon": "./assets/icon.png",
|
||||
"color": "#3B82F6"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
63
mobile/app/(tabs)/_layout.tsx
Normal file
63
mobile/app/(tabs)/_layout.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { Tabs } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
export default function TabLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
tabBarActiveTintColor: '#3B82F6',
|
||||
tabBarInactiveTintColor: '#94A3B8',
|
||||
headerStyle: { backgroundColor: '#3B82F6' },
|
||||
headerTintColor: '#fff',
|
||||
headerTitleStyle: { fontWeight: 'bold' },
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Ukoly',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="checkbox-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="calendar"
|
||||
options={{
|
||||
title: 'Kalendar',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="calendar-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="goals"
|
||||
options={{
|
||||
title: 'Cile',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="trophy-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="chat"
|
||||
options={{
|
||||
title: 'Chat',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="chatbubble-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="settings"
|
||||
options={{
|
||||
title: 'Nastaveni',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="settings-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
264
mobile/app/(tabs)/calendar.tsx
Normal file
264
mobile/app/(tabs)/calendar.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
RefreshControl,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
const DAYS = ['Po', 'Ut', 'St', 'Ct', 'Pa', 'So', 'Ne'];
|
||||
const MONTHS = [
|
||||
'Leden', 'Unor', 'Brezen', 'Duben', 'Kveten', 'Cerven',
|
||||
'Cervenec', 'Srpen', 'Zari', 'Rijen', 'Listopad', 'Prosinec',
|
||||
];
|
||||
|
||||
function getDaysInMonth(year: number, month: number) {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
|
||||
function getFirstDayOfMonth(year: number, month: number) {
|
||||
const day = new Date(year, month, 1).getDay();
|
||||
return day === 0 ? 6 : day - 1; // Monday = 0
|
||||
}
|
||||
|
||||
export default function CalendarScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [tasks, setTasks] = useState<any[]>([]);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
||||
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth();
|
||||
|
||||
const loadTasks = useCallback(async () => {
|
||||
if (!token) return;
|
||||
try {
|
||||
const res = await api.getTasks(token);
|
||||
setTasks(res.data || []);
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTasks();
|
||||
}, [loadTasks]);
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
await loadTasks();
|
||||
setRefreshing(false);
|
||||
}, [loadTasks]);
|
||||
|
||||
const prevMonth = () => {
|
||||
setCurrentDate(new Date(year, month - 1, 1));
|
||||
setSelectedDate(null);
|
||||
};
|
||||
|
||||
const nextMonth = () => {
|
||||
setCurrentDate(new Date(year, month + 1, 1));
|
||||
setSelectedDate(null);
|
||||
};
|
||||
|
||||
const daysInMonth = getDaysInMonth(year, month);
|
||||
const firstDay = getFirstDayOfMonth(year, month);
|
||||
|
||||
const tasksByDate: Record<string, any[]> = {};
|
||||
tasks.forEach((t) => {
|
||||
if (t.due_date) {
|
||||
const d = t.due_date.substring(0, 10);
|
||||
if (!tasksByDate[d]) tasksByDate[d] = [];
|
||||
tasksByDate[d].push(t);
|
||||
}
|
||||
});
|
||||
|
||||
const today = new Date().toISOString().substring(0, 10);
|
||||
|
||||
const selectedTasks = selectedDate ? tasksByDate[selectedDate] || [] : [];
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||
}
|
||||
>
|
||||
{/* Month navigator */}
|
||||
<View style={styles.monthNav}>
|
||||
<TouchableOpacity onPress={prevMonth} style={styles.navBtn}>
|
||||
<Ionicons name="chevron-back" size={24} color="#3B82F6" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.monthTitle}>
|
||||
{MONTHS[month]} {year}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={nextMonth} style={styles.navBtn}>
|
||||
<Ionicons name="chevron-forward" size={24} color="#3B82F6" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Day headers */}
|
||||
<View style={styles.dayHeaders}>
|
||||
{DAYS.map((d) => (
|
||||
<Text key={d} style={styles.dayHeader}>
|
||||
{d}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Calendar grid */}
|
||||
<View style={styles.grid}>
|
||||
{Array.from({ length: firstDay }).map((_, i) => (
|
||||
<View key={`empty-${i}`} style={styles.dayCell} />
|
||||
))}
|
||||
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||||
const day = i + 1;
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const hasTasks = !!tasksByDate[dateStr];
|
||||
const isToday = dateStr === today;
|
||||
const isSelected = dateStr === selectedDate;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={day}
|
||||
style={[
|
||||
styles.dayCell,
|
||||
isToday && styles.todayCell,
|
||||
isSelected && styles.selectedCell,
|
||||
]}
|
||||
onPress={() => setSelectedDate(dateStr)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.dayText,
|
||||
isToday && styles.todayText,
|
||||
isSelected && styles.selectedText,
|
||||
]}
|
||||
>
|
||||
{day}
|
||||
</Text>
|
||||
{hasTasks && (
|
||||
<View
|
||||
style={[
|
||||
styles.dot,
|
||||
isSelected && { backgroundColor: '#fff' },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* Selected date tasks */}
|
||||
{selectedDate && (
|
||||
<View style={styles.tasksSection}>
|
||||
<Text style={styles.tasksSectionTitle}>
|
||||
Ukoly na {selectedDate}
|
||||
</Text>
|
||||
{selectedTasks.length === 0 ? (
|
||||
<Text style={styles.noTasks}>Zadne ukoly</Text>
|
||||
) : (
|
||||
selectedTasks.map((t) => (
|
||||
<View key={t.id} style={styles.taskItem}>
|
||||
<Ionicons
|
||||
name={t.status === 'done' ? 'checkmark-circle' : 'ellipse-outline'}
|
||||
size={20}
|
||||
color={t.status === 'done' ? '#22C55E' : '#94A3B8'}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.taskItemText,
|
||||
t.status === 'done' && { textDecorationLine: 'line-through', color: '#94A3B8' },
|
||||
]}
|
||||
>
|
||||
{t.title}
|
||||
</Text>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
monthNav: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
navBtn: { padding: 8 },
|
||||
monthTitle: { fontSize: 18, fontWeight: '700', color: '#1E293B' },
|
||||
dayHeaders: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#fff',
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E2E8F0',
|
||||
},
|
||||
dayHeader: {
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
},
|
||||
grid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
backgroundColor: '#fff',
|
||||
padding: 4,
|
||||
},
|
||||
dayCell: {
|
||||
width: '14.28%',
|
||||
aspectRatio: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
todayCell: {
|
||||
backgroundColor: '#EFF6FF',
|
||||
borderRadius: 20,
|
||||
},
|
||||
selectedCell: {
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 20,
|
||||
},
|
||||
dayText: { fontSize: 15, color: '#1E293B' },
|
||||
todayText: { color: '#3B82F6', fontWeight: '700' },
|
||||
selectedText: { color: '#fff', fontWeight: '700' },
|
||||
dot: {
|
||||
width: 5,
|
||||
height: 5,
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#3B82F6',
|
||||
marginTop: 2,
|
||||
},
|
||||
tasksSection: {
|
||||
margin: 12,
|
||||
padding: 16,
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
},
|
||||
tasksSectionTitle: { fontSize: 16, fontWeight: '600', color: '#1E293B', marginBottom: 12 },
|
||||
noTasks: { color: '#94A3B8', fontSize: 14 },
|
||||
taskItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingVertical: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F1F5F9',
|
||||
},
|
||||
taskItemText: { fontSize: 14, color: '#1E293B', flex: 1 },
|
||||
});
|
||||
217
mobile/app/(tabs)/chat.tsx
Normal file
217
mobile/app/(tabs)/chat.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
type Message = {
|
||||
id: string;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
timestamp: Date;
|
||||
};
|
||||
|
||||
export default function ChatScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{
|
||||
id: '0',
|
||||
role: 'assistant',
|
||||
content: 'Ahoj! Jsem vas AI asistent pro Task Team. Mohu vam pomoci s ukoly, planovani a organizaci. Na co se chcete zeptat?',
|
||||
timestamp: new Date(),
|
||||
},
|
||||
]);
|
||||
const [input, setInput] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const flatListRef = useRef<FlatList>(null);
|
||||
|
||||
const sendMessage = useCallback(async () => {
|
||||
if (!input.trim() || !token || sending) return;
|
||||
|
||||
const userMsg: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: 'user',
|
||||
content: input.trim(),
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, userMsg]);
|
||||
setInput('');
|
||||
setSending(true);
|
||||
|
||||
try {
|
||||
const res = await api.sendChatMessage(token, userMsg.content);
|
||||
const aiMsg: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: 'assistant',
|
||||
content: res.data?.reply || 'Omlouvam se, nepodarilo se zpracovat odpoved.',
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, aiMsg]);
|
||||
} catch (err: any) {
|
||||
const errMsg: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: 'assistant',
|
||||
content: `Chyba: ${err.message}`,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, errMsg]);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}, [input, token, sending]);
|
||||
|
||||
const renderMessage = ({ item }: { item: Message }) => {
|
||||
const isUser = item.role === 'user';
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.msgRow,
|
||||
isUser ? styles.msgRowUser : styles.msgRowAi,
|
||||
]}
|
||||
>
|
||||
{!isUser && (
|
||||
<View style={styles.avatar}>
|
||||
<Ionicons name="sparkles" size={16} color="#3B82F6" />
|
||||
</View>
|
||||
)}
|
||||
<View
|
||||
style={[
|
||||
styles.bubble,
|
||||
isUser ? styles.bubbleUser : styles.bubbleAi,
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.bubbleText,
|
||||
isUser && { color: '#fff' },
|
||||
]}
|
||||
>
|
||||
{item.content}
|
||||
</Text>
|
||||
<Text style={[styles.timestamp, isUser && { color: 'rgba(255,255,255,0.6)' }]}>
|
||||
{item.timestamp.toLocaleTimeString('cs-CZ', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
keyboardVerticalOffset={90}
|
||||
>
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
data={messages}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={renderMessage}
|
||||
contentContainerStyle={styles.listContent}
|
||||
onContentSizeChange={() =>
|
||||
flatListRef.current?.scrollToEnd({ animated: true })
|
||||
}
|
||||
/>
|
||||
|
||||
<View style={styles.inputBar}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Napiste zpravu..."
|
||||
value={input}
|
||||
onChangeText={setInput}
|
||||
multiline
|
||||
maxLength={2000}
|
||||
editable={!sending}
|
||||
onSubmitEditing={sendMessage}
|
||||
blurOnSubmit={false}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={[styles.sendBtn, (!input.trim() || sending) && styles.sendBtnDisabled]}
|
||||
onPress={sendMessage}
|
||||
disabled={!input.trim() || sending}
|
||||
>
|
||||
{sending ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Ionicons name="send" size={20} color="#fff" />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
listContent: { padding: 12, paddingBottom: 4 },
|
||||
msgRow: { flexDirection: 'row', marginBottom: 12, maxWidth: '85%' },
|
||||
msgRowUser: { alignSelf: 'flex-end' },
|
||||
msgRowAi: { alignSelf: 'flex-start' },
|
||||
avatar: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#EFF6FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 8,
|
||||
marginTop: 4,
|
||||
},
|
||||
bubble: { borderRadius: 16, padding: 12, maxWidth: '100%' },
|
||||
bubbleUser: {
|
||||
backgroundColor: '#3B82F6',
|
||||
borderBottomRightRadius: 4,
|
||||
},
|
||||
bubbleAi: {
|
||||
backgroundColor: '#fff',
|
||||
borderBottomLeftRadius: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
},
|
||||
bubbleText: { fontSize: 15, lineHeight: 21, color: '#1E293B' },
|
||||
timestamp: { fontSize: 10, color: '#94A3B8', marginTop: 4, textAlign: 'right' },
|
||||
inputBar: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
padding: 12,
|
||||
backgroundColor: '#fff',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E2E8F0',
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
fontSize: 15,
|
||||
maxHeight: 100,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
sendBtn: {
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
backgroundColor: '#3B82F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: 8,
|
||||
},
|
||||
sendBtnDisabled: { backgroundColor: '#94A3B8' },
|
||||
});
|
||||
162
mobile/app/(tabs)/goals.tsx
Normal file
162
mobile/app/(tabs)/goals.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
RefreshControl,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
export default function GoalsScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [goals, setGoals] = useState<any[]>([]);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
const loadGoals = useCallback(async () => {
|
||||
if (!token) return;
|
||||
try {
|
||||
const res = await api.getGoals(token);
|
||||
setGoals(res.data || []);
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
loadGoals();
|
||||
}, [loadGoals]);
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
await loadGoals();
|
||||
setRefreshing(false);
|
||||
}, [loadGoals]);
|
||||
|
||||
const renderGoal = ({ item }: { item: any }) => {
|
||||
const progress = item.progress || 0;
|
||||
const total = item.target || 100;
|
||||
const pct = Math.min(Math.round((progress / total) * 100), 100);
|
||||
|
||||
return (
|
||||
<View style={styles.goalCard}>
|
||||
<View style={styles.goalHeader}>
|
||||
<View style={styles.goalIcon}>
|
||||
<Ionicons
|
||||
name={pct >= 100 ? 'trophy' : 'flag-outline'}
|
||||
size={24}
|
||||
color={pct >= 100 ? '#F59E0B' : '#3B82F6'}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.goalInfo}>
|
||||
<Text style={styles.goalTitle}>{item.title}</Text>
|
||||
{item.description && (
|
||||
<Text style={styles.goalDesc} numberOfLines={2}>
|
||||
{item.description}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<Text style={styles.goalPct}>{pct}%</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.progressBarBg}>
|
||||
<View
|
||||
style={[
|
||||
styles.progressBarFill,
|
||||
{
|
||||
width: `${pct}%`,
|
||||
backgroundColor: pct >= 100 ? '#22C55E' : pct >= 50 ? '#3B82F6' : '#F59E0B',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.goalFooter}>
|
||||
<Text style={styles.goalStat}>
|
||||
{progress} / {total}
|
||||
</Text>
|
||||
{item.deadline && (
|
||||
<Text style={styles.goalDeadline}>
|
||||
<Ionicons name="time-outline" size={12} color="#94A3B8" />{' '}
|
||||
{new Date(item.deadline).toLocaleDateString('cs-CZ')}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<FlatList
|
||||
data={goals}
|
||||
keyExtractor={(item) => item.id?.toString()}
|
||||
renderItem={renderGoal}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||
}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.empty}>
|
||||
<Ionicons name="trophy-outline" size={48} color="#CBD5E1" />
|
||||
<Text style={styles.emptyText}>Zatim zadne cile</Text>
|
||||
<Text style={styles.emptySubtext}>
|
||||
Vytvorte cile ve webove aplikaci
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
listContent: { padding: 12, paddingBottom: 20 },
|
||||
goalCard: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 2,
|
||||
},
|
||||
goalHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
|
||||
goalIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#EFF6FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
goalInfo: { flex: 1, marginLeft: 12 },
|
||||
goalTitle: { fontSize: 16, fontWeight: '600', color: '#1E293B' },
|
||||
goalDesc: { fontSize: 13, color: '#64748B', marginTop: 2 },
|
||||
goalPct: { fontSize: 18, fontWeight: '700', color: '#3B82F6' },
|
||||
progressBarBg: {
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#E2E8F0',
|
||||
},
|
||||
progressBarFill: {
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
},
|
||||
goalFooter: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: 8,
|
||||
},
|
||||
goalStat: { fontSize: 12, color: '#64748B' },
|
||||
goalDeadline: { fontSize: 12, color: '#94A3B8' },
|
||||
empty: { alignItems: 'center', marginTop: 60 },
|
||||
emptyText: { color: '#94A3B8', fontSize: 16, marginTop: 12 },
|
||||
emptySubtext: { color: '#CBD5E1', fontSize: 13, marginTop: 4 },
|
||||
});
|
||||
329
mobile/app/(tabs)/index.tsx
Normal file
329
mobile/app/(tabs)/index.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
RefreshControl,
|
||||
Alert,
|
||||
TextInput,
|
||||
Modal,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
const PRIORITY_COLORS: Record<string, string> = {
|
||||
high: '#EF4444',
|
||||
medium: '#F59E0B',
|
||||
low: '#22C55E',
|
||||
};
|
||||
|
||||
const STATUS_ICONS: Record<string, string> = {
|
||||
todo: 'ellipse-outline',
|
||||
in_progress: 'time-outline',
|
||||
done: 'checkmark-circle',
|
||||
};
|
||||
|
||||
export default function TasksScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [tasks, setTasks] = useState<any[]>([]);
|
||||
const [groups, setGroups] = useState<any[]>([]);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [showAdd, setShowAdd] = useState(false);
|
||||
const [newTitle, setNewTitle] = useState('');
|
||||
const [filter, setFilter] = useState<string>('all');
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!token) return;
|
||||
try {
|
||||
const [tasksRes, groupsRes] = await Promise.all([
|
||||
api.getTasks(token),
|
||||
api.getGroups(token),
|
||||
]);
|
||||
setTasks(tasksRes.data || []);
|
||||
setGroups(groupsRes.data || []);
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
await loadData();
|
||||
setRefreshing(false);
|
||||
}, [loadData]);
|
||||
|
||||
const addTask = async () => {
|
||||
if (!newTitle.trim() || !token) return;
|
||||
try {
|
||||
await api.createTask(token, { title: newTitle.trim() });
|
||||
setNewTitle('');
|
||||
setShowAdd(false);
|
||||
await loadData();
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTask = async (task: any) => {
|
||||
if (!token) return;
|
||||
const newStatus = task.status === 'done' ? 'todo' : 'done';
|
||||
try {
|
||||
await api.updateTask(token, task.id, { status: newStatus });
|
||||
await loadData();
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredTasks =
|
||||
filter === 'all' ? tasks : tasks.filter((t) => t.status === filter);
|
||||
|
||||
const getGroupColor = (groupId: string) => {
|
||||
const group = groups.find((g) => g.id === groupId);
|
||||
return group?.color || '#64748B';
|
||||
};
|
||||
|
||||
const renderTask = ({ item }: { item: any }) => (
|
||||
<TouchableOpacity
|
||||
style={styles.taskCard}
|
||||
onPress={() => toggleTask(item)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.taskLeft}>
|
||||
<Ionicons
|
||||
name={STATUS_ICONS[item.status] as any || 'ellipse-outline'}
|
||||
size={24}
|
||||
color={item.status === 'done' ? '#22C55E' : '#94A3B8'}
|
||||
/>
|
||||
<View style={styles.taskInfo}>
|
||||
<Text
|
||||
style={[
|
||||
styles.taskTitle,
|
||||
item.status === 'done' && styles.taskDone,
|
||||
]}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
{item.group_name && (
|
||||
<View
|
||||
style={[
|
||||
styles.groupBadge,
|
||||
{ backgroundColor: getGroupColor(item.group_id) + '20' },
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.groupBadgeText,
|
||||
{ color: getGroupColor(item.group_id) },
|
||||
]}
|
||||
>
|
||||
{item.group_name}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
{item.priority && (
|
||||
<View
|
||||
style={[
|
||||
styles.priorityDot,
|
||||
{ backgroundColor: PRIORITY_COLORS[item.priority] || '#94A3B8' },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Filter bar */}
|
||||
<View style={styles.filterBar}>
|
||||
{['all', 'todo', 'in_progress', 'done'].map((f) => (
|
||||
<TouchableOpacity
|
||||
key={f}
|
||||
style={[styles.filterBtn, filter === f && styles.filterBtnActive]}
|
||||
onPress={() => setFilter(f)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.filterText,
|
||||
filter === f && styles.filterTextActive,
|
||||
]}
|
||||
>
|
||||
{f === 'all'
|
||||
? 'Vse'
|
||||
: f === 'todo'
|
||||
? 'K provedeni'
|
||||
: f === 'in_progress'
|
||||
? 'Rozpracovano'
|
||||
: 'Hotovo'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Task list */}
|
||||
<FlatList
|
||||
data={filteredTasks}
|
||||
keyExtractor={(item) => item.id?.toString()}
|
||||
renderItem={renderTask}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||
}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.empty}>
|
||||
<Ionicons name="document-outline" size={48} color="#CBD5E1" />
|
||||
<Text style={styles.emptyText}>Zatim zadne ukoly</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* FAB */}
|
||||
<TouchableOpacity
|
||||
style={styles.fab}
|
||||
onPress={() => setShowAdd(true)}
|
||||
>
|
||||
<Ionicons name="add" size={28} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Add task modal */}
|
||||
<Modal visible={showAdd} transparent animationType="slide">
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>Novy ukol</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Nazev ukolu..."
|
||||
value={newTitle}
|
||||
onChangeText={setNewTitle}
|
||||
autoFocus
|
||||
onSubmitEditing={addTask}
|
||||
/>
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity
|
||||
style={styles.cancelBtn}
|
||||
onPress={() => {
|
||||
setShowAdd(false);
|
||||
setNewTitle('');
|
||||
}}
|
||||
>
|
||||
<Text style={styles.cancelText}>Zrusit</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.addBtn} onPress={addTask}>
|
||||
<Text style={styles.addBtnText}>Pridat</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
filterBar: {
|
||||
flexDirection: 'row',
|
||||
padding: 12,
|
||||
gap: 8,
|
||||
backgroundColor: '#fff',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E2E8F0',
|
||||
},
|
||||
filterBtn: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#F1F5F9',
|
||||
},
|
||||
filterBtnActive: { backgroundColor: '#3B82F6' },
|
||||
filterText: { fontSize: 13, color: '#64748B' },
|
||||
filterTextActive: { color: '#fff', fontWeight: '600' },
|
||||
listContent: { padding: 12, paddingBottom: 80 },
|
||||
taskCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 8,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 2,
|
||||
},
|
||||
taskLeft: { flexDirection: 'row', alignItems: 'center', flex: 1 },
|
||||
taskInfo: { marginLeft: 12, flex: 1 },
|
||||
taskTitle: { fontSize: 15, color: '#1E293B', fontWeight: '500' },
|
||||
taskDone: {
|
||||
textDecorationLine: 'line-through',
|
||||
color: '#94A3B8',
|
||||
},
|
||||
groupBadge: { marginTop: 4, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 8, alignSelf: 'flex-start' },
|
||||
groupBadgeText: { fontSize: 11, fontWeight: '600' },
|
||||
priorityDot: { width: 10, height: 10, borderRadius: 5 },
|
||||
empty: { alignItems: 'center', marginTop: 60 },
|
||||
emptyText: { color: '#94A3B8', fontSize: 16, marginTop: 12 },
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#3B82F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#3B82F6',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: '#fff',
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
padding: 24,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
modalTitle: { fontSize: 18, fontWeight: '700', color: '#1E293B', marginBottom: 16 },
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
modalActions: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 12,
|
||||
marginTop: 16,
|
||||
},
|
||||
cancelBtn: { paddingHorizontal: 20, paddingVertical: 10 },
|
||||
cancelText: { color: '#64748B', fontSize: 15 },
|
||||
addBtn: {
|
||||
backgroundColor: '#3B82F6',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
},
|
||||
addBtnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
|
||||
});
|
||||
220
mobile/app/(tabs)/settings.tsx
Normal file
220
mobile/app/(tabs)/settings.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Switch,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import Constants from 'expo-constants';
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const { user, logout } = useAuthContext();
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [notifications, setNotifications] = useState(true);
|
||||
const [language, setLanguage] = useState<'cs' | 'en'>('cs');
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert(
|
||||
'Odhlaseni',
|
||||
'Opravdu se chcete odhlasit?',
|
||||
[
|
||||
{ text: 'Zrusit', style: 'cancel' },
|
||||
{
|
||||
text: 'Odhlasit',
|
||||
style: 'destructive',
|
||||
onPress: logout,
|
||||
},
|
||||
],
|
||||
);
|
||||
};
|
||||
|
||||
const renderSection = (title: string, children: React.ReactNode) => (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
<View style={styles.sectionContent}>{children}</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderRow = (
|
||||
icon: string,
|
||||
label: string,
|
||||
right?: React.ReactNode,
|
||||
onPress?: () => void,
|
||||
) => (
|
||||
<TouchableOpacity
|
||||
style={styles.row}
|
||||
onPress={onPress}
|
||||
disabled={!onPress && !right}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
>
|
||||
<View style={styles.rowLeft}>
|
||||
<Ionicons name={icon as any} size={20} color="#64748B" />
|
||||
<Text style={styles.rowLabel}>{label}</Text>
|
||||
</View>
|
||||
{right || (onPress && <Ionicons name="chevron-forward" size={18} color="#CBD5E1" />)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
{/* User card */}
|
||||
<View style={styles.userCard}>
|
||||
<View style={styles.userAvatar}>
|
||||
<Text style={styles.userAvatarText}>
|
||||
{(user?.name || 'U')[0].toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.userInfo}>
|
||||
<Text style={styles.userName}>{user?.name || 'Uzivatel'}</Text>
|
||||
<Text style={styles.userEmail}>{user?.email || ''}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{renderSection('Predvolby', (
|
||||
<>
|
||||
{renderRow(
|
||||
'moon-outline',
|
||||
'Tmavy rezim',
|
||||
<Switch
|
||||
value={darkMode}
|
||||
onValueChange={setDarkMode}
|
||||
trackColor={{ false: '#E2E8F0', true: '#3B82F6' }}
|
||||
/>,
|
||||
)}
|
||||
{renderRow(
|
||||
'notifications-outline',
|
||||
'Oznameni',
|
||||
<Switch
|
||||
value={notifications}
|
||||
onValueChange={setNotifications}
|
||||
trackColor={{ false: '#E2E8F0', true: '#3B82F6' }}
|
||||
/>,
|
||||
)}
|
||||
{renderRow(
|
||||
'language-outline',
|
||||
'Jazyk',
|
||||
<TouchableOpacity
|
||||
style={styles.langToggle}
|
||||
onPress={() => setLanguage(language === 'cs' ? 'en' : 'cs')}
|
||||
>
|
||||
<Text style={styles.langText}>
|
||||
{language === 'cs' ? 'Cestina' : 'English'}
|
||||
</Text>
|
||||
</TouchableOpacity>,
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
{renderSection('Ucet', (
|
||||
<>
|
||||
{renderRow('person-outline', 'Upravit profil', undefined, () =>
|
||||
Alert.alert('Info', 'Bude k dispozici brzy'),
|
||||
)}
|
||||
{renderRow('lock-closed-outline', 'Zmenit heslo', undefined, () =>
|
||||
Alert.alert('Info', 'Bude k dispozici brzy'),
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
{renderSection('Informace', (
|
||||
<>
|
||||
{renderRow('information-circle-outline', 'Verze', (
|
||||
<Text style={styles.versionText}>
|
||||
{Constants.expoConfig?.version || '1.0.0'}
|
||||
</Text>
|
||||
))}
|
||||
{renderRow('document-text-outline', 'Podminky pouziti', undefined, () =>
|
||||
Alert.alert('Info', 'Bude k dispozici brzy'),
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
{/* Logout */}
|
||||
<TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
|
||||
<Ionicons name="log-out-outline" size={20} color="#EF4444" />
|
||||
<Text style={styles.logoutText}>Odhlasit se</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={{ height: 40 }} />
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
userCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
padding: 20,
|
||||
margin: 12,
|
||||
borderRadius: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 2,
|
||||
},
|
||||
userAvatar: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#3B82F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
userAvatarText: { color: '#fff', fontSize: 22, fontWeight: '700' },
|
||||
userInfo: { marginLeft: 16, flex: 1 },
|
||||
userName: { fontSize: 18, fontWeight: '600', color: '#1E293B' },
|
||||
userEmail: { fontSize: 14, color: '#64748B', marginTop: 2 },
|
||||
section: { marginTop: 12, marginHorizontal: 12 },
|
||||
sectionTitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 6,
|
||||
marginLeft: 4,
|
||||
},
|
||||
sectionContent: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F1F5F9',
|
||||
},
|
||||
rowLeft: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
rowLabel: { fontSize: 15, color: '#1E293B' },
|
||||
langToggle: {
|
||||
backgroundColor: '#F1F5F9',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
},
|
||||
langText: { fontSize: 13, color: '#3B82F6', fontWeight: '600' },
|
||||
versionText: { fontSize: 14, color: '#94A3B8' },
|
||||
logoutBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
marginTop: 24,
|
||||
marginHorizontal: 12,
|
||||
paddingVertical: 14,
|
||||
backgroundColor: '#FEF2F2',
|
||||
borderRadius: 12,
|
||||
},
|
||||
logoutText: { color: '#EF4444', fontSize: 16, fontWeight: '600' },
|
||||
});
|
||||
32
mobile/app/_layout.tsx
Normal file
32
mobile/app/_layout.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Slot, useRouter, useSegments } from 'expo-router';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { AuthProvider, useAuthContext } from '../lib/AuthContext';
|
||||
|
||||
function AuthGate() {
|
||||
const { token, loading } = useAuthContext();
|
||||
const segments = useSegments();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) return;
|
||||
const inAuthGroup = segments[0] === 'login';
|
||||
|
||||
if (!token && !inAuthGroup) {
|
||||
router.replace('/login');
|
||||
} else if (token && inAuthGroup) {
|
||||
router.replace('/');
|
||||
}
|
||||
}, [token, loading, segments]);
|
||||
|
||||
return <Slot />;
|
||||
}
|
||||
|
||||
export default function RootLayout() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<StatusBar style="auto" />
|
||||
<AuthGate />
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
256
mobile/app/login.tsx
Normal file
256
mobile/app/login.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../lib/AuthContext';
|
||||
|
||||
export default function LoginScreen() {
|
||||
const { login, register } = useAuthContext();
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login');
|
||||
const [email, setEmail] = useState('');
|
||||
const [name, setName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!email.trim() || !password.trim()) {
|
||||
Alert.alert('Chyba', 'Vyplnte vsechna pole');
|
||||
return;
|
||||
}
|
||||
if (mode === 'register' && !name.trim()) {
|
||||
Alert.alert('Chyba', 'Vyplnte jmeno');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
if (mode === 'login') {
|
||||
await login(email.trim(), password);
|
||||
} else {
|
||||
await register(email.trim(), name.trim(), password);
|
||||
}
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message || 'Nepodarilo se prihlasit');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* Logo */}
|
||||
<View style={styles.logoSection}>
|
||||
<View style={styles.logoCircle}>
|
||||
<Ionicons name="checkbox" size={40} color="#fff" />
|
||||
</View>
|
||||
<Text style={styles.appName}>Task Team</Text>
|
||||
<Text style={styles.appDesc}>
|
||||
Spravujte ukoly, cile a tymovou spolupraci
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Form */}
|
||||
<View style={styles.form}>
|
||||
{/* Mode toggle */}
|
||||
<View style={styles.modeToggle}>
|
||||
<TouchableOpacity
|
||||
style={[styles.modeBtn, mode === 'login' && styles.modeBtnActive]}
|
||||
onPress={() => setMode('login')}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.modeBtnText,
|
||||
mode === 'login' && styles.modeBtnTextActive,
|
||||
]}
|
||||
>
|
||||
Prihlaseni
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.modeBtn, mode === 'register' && styles.modeBtnActive]}
|
||||
onPress={() => setMode('register')}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.modeBtnText,
|
||||
mode === 'register' && styles.modeBtnTextActive,
|
||||
]}
|
||||
>
|
||||
Registrace
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{mode === 'register' && (
|
||||
<View style={styles.inputGroup}>
|
||||
<Ionicons
|
||||
name="person-outline"
|
||||
size={20}
|
||||
color="#94A3B8"
|
||||
style={styles.inputIcon}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Jmeno"
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
autoCapitalize="words"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Ionicons
|
||||
name="mail-outline"
|
||||
size={20}
|
||||
color="#94A3B8"
|
||||
style={styles.inputIcon}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Ionicons
|
||||
name="lock-closed-outline"
|
||||
size={20}
|
||||
color="#94A3B8"
|
||||
style={styles.inputIcon}
|
||||
/>
|
||||
<TextInput
|
||||
style={[styles.input, { flex: 1 }]}
|
||||
placeholder="Heslo"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!showPassword}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowPassword(!showPassword)}
|
||||
style={styles.eyeBtn}
|
||||
>
|
||||
<Ionicons
|
||||
name={showPassword ? 'eye-off-outline' : 'eye-outline'}
|
||||
size={20}
|
||||
color="#94A3B8"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.submitBtn, loading && styles.submitBtnDisabled]}
|
||||
onPress={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.submitBtnText}>
|
||||
{mode === 'login' ? 'Prihlasit se' : 'Zaregistrovat se'}
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
},
|
||||
logoSection: { alignItems: 'center', marginBottom: 40 },
|
||||
logoCircle: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#3B82F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
appName: { fontSize: 28, fontWeight: '800', color: '#1E293B' },
|
||||
appDesc: {
|
||||
fontSize: 15,
|
||||
color: '#64748B',
|
||||
textAlign: 'center',
|
||||
marginTop: 8,
|
||||
},
|
||||
form: {},
|
||||
modeToggle: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#E2E8F0',
|
||||
borderRadius: 12,
|
||||
padding: 4,
|
||||
marginBottom: 24,
|
||||
},
|
||||
modeBtn: {
|
||||
flex: 1,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
},
|
||||
modeBtnActive: { backgroundColor: '#fff' },
|
||||
modeBtnText: { fontSize: 15, color: '#64748B', fontWeight: '500' },
|
||||
modeBtnTextActive: { color: '#3B82F6', fontWeight: '700' },
|
||||
inputGroup: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
marginBottom: 12,
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
inputIcon: { marginRight: 10 },
|
||||
input: {
|
||||
flex: 1,
|
||||
paddingVertical: 14,
|
||||
fontSize: 16,
|
||||
color: '#1E293B',
|
||||
},
|
||||
eyeBtn: { padding: 4 },
|
||||
submitBtn: {
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 12,
|
||||
paddingVertical: 16,
|
||||
alignItems: 'center',
|
||||
marginTop: 8,
|
||||
shadowColor: '#3B82F6',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
submitBtnDisabled: { backgroundColor: '#94A3B8' },
|
||||
submitBtnText: { color: '#fff', fontSize: 17, fontWeight: '700' },
|
||||
});
|
||||
@@ -1,8 +1 @@
|
||||
import { registerRootComponent } from 'expo';
|
||||
|
||||
import App from './App';
|
||||
|
||||
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
|
||||
// It also ensures that whether you load the app in Expo Go or in a native build,
|
||||
// the environment is set up appropriately
|
||||
registerRootComponent(App);
|
||||
import 'expo-router/entry';
|
||||
|
||||
17
mobile/lib/AuthContext.tsx
Normal file
17
mobile/lib/AuthContext.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import { useAuth } from './useAuth';
|
||||
|
||||
type AuthContextType = ReturnType<typeof useAuth>;
|
||||
|
||||
const AuthContext = createContext<AuthContextType | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const auth = useAuth();
|
||||
return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
|
||||
}
|
||||
|
||||
export function useAuthContext(): AuthContextType {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error('useAuthContext must be used within AuthProvider');
|
||||
return ctx;
|
||||
}
|
||||
64
mobile/lib/api.ts
Normal file
64
mobile/lib/api.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
const API_BASE = 'https://api.hasdo.info';
|
||||
|
||||
export async function apiFetch<T>(
|
||||
path: string,
|
||||
opts: { method?: string; body?: any; token?: string } = {}
|
||||
): Promise<T> {
|
||||
const headers: Record<string, string> = { 'Content-Type': 'application/json' };
|
||||
if (opts.token) headers['Authorization'] = `Bearer ${opts.token}`;
|
||||
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
method: opts.method || 'GET',
|
||||
headers,
|
||||
body: opts.body ? JSON.stringify(opts.body) : undefined,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ message: `HTTP ${res.status}` }));
|
||||
throw new Error(err.message || `HTTP ${res.status}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// Auth
|
||||
export const login = (data: { email: string; password: string }) =>
|
||||
apiFetch<{ data: { token: string; user: any } }>('/api/v1/auth/login', {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
});
|
||||
|
||||
export const register = (data: { email: string; name: string; password: string }) =>
|
||||
apiFetch<{ data: { token: string; user: any } }>('/api/v1/auth/register', {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
});
|
||||
|
||||
// Tasks
|
||||
export const getTasks = (token: string) =>
|
||||
apiFetch<{ data: any[] }>('/api/v1/tasks', { token });
|
||||
|
||||
export const createTask = (token: string, data: any) =>
|
||||
apiFetch<{ data: any }>('/api/v1/tasks', { method: 'POST', body: data, token });
|
||||
|
||||
export const updateTask = (token: string, id: string, data: any) =>
|
||||
apiFetch<{ data: any }>(`/api/v1/tasks/${id}`, { method: 'PUT', body: data, token });
|
||||
|
||||
export const deleteTask = (token: string, id: string) =>
|
||||
apiFetch<void>(`/api/v1/tasks/${id}`, { method: 'DELETE', token });
|
||||
|
||||
// Groups
|
||||
export const getGroups = (token: string) =>
|
||||
apiFetch<{ data: any[] }>('/api/v1/groups', { token });
|
||||
|
||||
// Goals
|
||||
export const getGoals = (token: string) =>
|
||||
apiFetch<{ data: any[] }>('/api/v1/goals', { token });
|
||||
|
||||
// Chat
|
||||
export const sendChatMessage = (token: string, message: string) =>
|
||||
apiFetch<{ data: { reply: string } }>('/api/v1/chat', {
|
||||
method: 'POST',
|
||||
body: { message },
|
||||
token,
|
||||
});
|
||||
60
mobile/lib/auth.ts
Normal file
60
mobile/lib/auth.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import * as SecureStore from 'expo-secure-store';
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
const TOKEN_KEY = 'taskteam_token';
|
||||
const USER_KEY = 'taskteam_user';
|
||||
|
||||
export async function getToken(): Promise<string | null> {
|
||||
if (Platform.OS === 'web') {
|
||||
return localStorage.getItem(TOKEN_KEY);
|
||||
}
|
||||
return SecureStore.getItemAsync(TOKEN_KEY);
|
||||
}
|
||||
|
||||
export async function setToken(token: string): Promise<void> {
|
||||
if (Platform.OS === 'web') {
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
return;
|
||||
}
|
||||
await SecureStore.setItemAsync(TOKEN_KEY, token);
|
||||
}
|
||||
|
||||
export async function removeToken(): Promise<void> {
|
||||
if (Platform.OS === 'web') {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
return;
|
||||
}
|
||||
await SecureStore.deleteItemAsync(TOKEN_KEY);
|
||||
}
|
||||
|
||||
export async function getUser(): Promise<any | null> {
|
||||
let raw: string | null;
|
||||
if (Platform.OS === 'web') {
|
||||
raw = localStorage.getItem(USER_KEY);
|
||||
} else {
|
||||
raw = await SecureStore.getItemAsync(USER_KEY);
|
||||
}
|
||||
if (!raw) return null;
|
||||
try {
|
||||
return JSON.parse(raw);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function setUser(user: any): Promise<void> {
|
||||
const raw = JSON.stringify(user);
|
||||
if (Platform.OS === 'web') {
|
||||
localStorage.setItem(USER_KEY, raw);
|
||||
return;
|
||||
}
|
||||
await SecureStore.setItemAsync(USER_KEY, raw);
|
||||
}
|
||||
|
||||
export async function removeUser(): Promise<void> {
|
||||
if (Platform.OS === 'web') {
|
||||
localStorage.removeItem(USER_KEY);
|
||||
return;
|
||||
}
|
||||
await SecureStore.deleteItemAsync(USER_KEY);
|
||||
}
|
||||
44
mobile/lib/useAuth.ts
Normal file
44
mobile/lib/useAuth.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { getToken, setToken, removeToken, getUser, setUser, removeUser } from './auth';
|
||||
import * as api from './api';
|
||||
|
||||
export function useAuth() {
|
||||
const [token, setTokenState] = useState<string | null>(null);
|
||||
const [user, setUserState] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const t = await getToken();
|
||||
const u = await getUser();
|
||||
setTokenState(t);
|
||||
setUserState(u);
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const loginFn = useCallback(async (email: string, password: string) => {
|
||||
const res = await api.login({ email, password });
|
||||
await setToken(res.data.token);
|
||||
await setUser(res.data.user);
|
||||
setTokenState(res.data.token);
|
||||
setUserState(res.data.user);
|
||||
}, []);
|
||||
|
||||
const registerFn = useCallback(async (email: string, name: string, password: string) => {
|
||||
const res = await api.register({ email, name, password });
|
||||
await setToken(res.data.token);
|
||||
await setUser(res.data.user);
|
||||
setTokenState(res.data.token);
|
||||
setUserState(res.data.user);
|
||||
}, []);
|
||||
|
||||
const logout = useCallback(async () => {
|
||||
await removeToken();
|
||||
await removeUser();
|
||||
setTokenState(null);
|
||||
setUserState(null);
|
||||
}, []);
|
||||
|
||||
return { token, user, loading, login: loginFn, register: registerFn, logout };
|
||||
}
|
||||
1045
mobile/package-lock.json
generated
1045
mobile/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,14 +1,17 @@
|
||||
{
|
||||
"name": "mobile",
|
||||
"name": "task-team-mobile",
|
||||
"version": "1.0.0",
|
||||
"main": "index.ts",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web"
|
||||
"web": "expo start --web",
|
||||
"export:web": "expo export --platform web",
|
||||
"lint": "expo lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^14.0.4",
|
||||
"@react-navigation/native": "^7.2.2",
|
||||
"expo": "~54.0.33",
|
||||
"expo-constants": "~18.0.13",
|
||||
@@ -18,12 +21,17 @@
|
||||
"expo-router": "~6.0.23",
|
||||
"expo-secure-store": "~15.0.8",
|
||||
"expo-status-bar": "~3.0.9",
|
||||
"nativewind": "^4.1.23",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-css-interop": "^0.2.3",
|
||||
"react-native-gesture-handler": "^2.30.1",
|
||||
"react-native-reanimated": "^4.3.0",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
"react-native-screens": "~4.16.0"
|
||||
"react-native-screens": "~4.16.0",
|
||||
"react-native-web": "^0.21.0",
|
||||
"tailwindcss": "^3.4.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "~19.1.0",
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
}
|
||||
"strict": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user