Chris/studysprint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style edit task screen and fix task update flow

Browse Source
This commit is contained in:
Fhj0607
2026-04-21 12:56:24 +02:00
parent 473ba75e3e
commit 5bde373514
4 changed files with 330 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/(tabs)/_layout.tsx
View File

@@ -1,6 +1,6 @@
import { supabase } from "@/lib/supabase"; import { supabase } from "@/lib/supabase";
import { Session } from "@supabase/supabase-js"; import { Session } from "@supabase/supabase-js";
import { Redirect, Tabs } from "expo-router"; import { Tabs } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function TabLayout() { export default function TabLayout() {
@@ -27,9 +27,9 @@ export default function TabLayout() {
return null; return null;
} }
if (!session) { // if (!session) {
return <Redirect href="/createUser" />; // return <Redirect href="/createUser" />;
} // }
return ( return (
<Tabs> <Tabs>

415
app/(tabs)/editTask.tsx
View File

@@ -1,80 +1,103 @@
import { defaultStyles } from '@/constants/defaultStyles'; import { defaultStyles } from '@/constants/defaultStyles';
import { supabase } from '@/lib/supabase'; import { supabase } from '@/lib/supabase';
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router'; import {
router,
Stack,
useFocusEffect,
useLocalSearchParams,
} from 'expo-router';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native'; import {
ActivityIndicator,
Alert,
Keyboard,
KeyboardAvoidingView,
Platform,
Pressable,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableWithoutFeedback,
View
} from 'react-native';
export default function EditTask() { export default function EditTask() {
const [title, SetTitle] = useState(''); const { taskId } = useLocalSearchParams<{ taskId?: string }>();
const [description, SetDescription] = useState('');
const [isCompleted, SetIsCompleted] = useState(false); const [title, setTitle] = useState('');
const [deadline, SetDeadline] = useState(''); const [description, setDescription] = useState('');
const [isSaving, SetIsSaving] = useState(false); const [deadline, setDeadline] = useState('');
const { tId } = useLocalSearchParams(); const [isCompleted, setIsCompleted] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isSaving, setIsSaving] = useState(false);
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
const GetTask = async () => { const getTask = async () => {
if (!tId) return; if (!taskId) return;
const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single(); setIsLoading(true);
if (error) { try {
Alert.alert("Task not found"); const { data, error } = await supabase
return; .from('tasks')
.select('*')
.eq('tId', taskId)
.single();
if (error || !data) {
Alert.alert('Task not found');
router.back();
return;
}
setTitle(data.title ?? '');
setDescription(data.description ?? '');
setDeadline(data.deadline ?? '');
setIsCompleted(Boolean(data.isCompleted));
} finally {
setIsLoading(false);
} }
};
if (data) { getTask();
SetTitle(data.title); }, [taskId])
SetDescription(data.description);
SetIsCompleted(data.isCompleted);
SetDeadline(data.deadline);
}
}
GetTask();
}, [tId])
); );
const EditTask = async () => { const handleSaveTask = async () => {
if(title.trim() === '' || description.trim() === '' || deadline.trim() === '') { if (!title.trim() || !description.trim() || !deadline.trim()) {
Alert.alert("All fields are required!"); Alert.alert("All fields are required!");
return; return;
} }
setIsSaving(true);
const { data, error: userError } = await supabase.auth.getUser();
if(userError || !data.user) { try {
router.replace("../createUser"); const { data: userData, error: userError } = await supabase.auth.getUser();
return; if (userError || !userData.user) {
router.replace("../createUser");
return;
}
const { error: dbError } = await supabase.from("tasks").update({
title,
description,
isCompleted,
lastChanged: new Date().toISOString(),
deadline,
uId: userData.user.id,
}).eq("tId", taskId);
if (dbError) {
Alert.alert("Task could not be edited, please try again");
return;
}
Alert.alert("Task successfully edited!");
router.back();
} finally {
setIsSaving(false);
} }
};
SetIsSaving(true);
const { error: dbError } = await supabase.from("tasks").update({
title,
description,
isCompleted,
lastChanged: new Date().toISOString(),
deadline,
uId: data.user.id,
}).eq("tId", tId);
if (dbError) {
Alert.alert("Task could not be edited, please try again");
return;
}
Alert.alert("Task successfully edited!");
SetTitle('');
SetDescription('');
SetIsCompleted(false);
SetDeadline('');
SetIsSaving(false);
router.back();
}
return ( return (
<> <>
@@ -85,49 +108,245 @@ export default function EditTask() {
}} }}
/> />
<View style={defaultStyles.container}> <KeyboardAvoidingView
<Text style={defaultStyles.title}>Edit Task</Text> style={{ flex: 1 }}
<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}> behavior={Platform.OS === "ios" ? "padding" : "height"}
<TouchableWithoutFeedback onPress={Keyboard.dismiss}> >
<View style={defaultStyles.container}>
<TextInput
style={defaultStyles.inputText}
placeholder="Title"
value={title}
onChangeText={SetTitle}
/>
<TextInput
style={defaultStyles.inputText}
placeholder="Text"
value={description}
onChangeText={SetDescription}
/>
<TextInput
style={defaultStyles.inputText}
placeholder="Deadline (YYYY-MM-DD)"
value={deadline}
onChangeText={SetDeadline}
/>
<Pressable
onPress={() => SetIsCompleted(state => !state)}
style={defaultStyles.checkboxContainer}
>
<View style={defaultStyles.checkbox}>
{isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
</View>
<Text style={defaultStyles.checkboxLabel}>{isCompleted ? 'Completed' : 'Not completed'}</Text>
</Pressable>
<Button title={isSaving ? "Saving..." : "Save"} onPress={EditTask} disabled={isSaving} /> <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
{isSaving && ( <ScrollView
<ActivityIndicator size="large" /> style={defaultStyles.container}
keyboardShouldPersistTaps="handled"
>
<View style={styles.card}>
<Text style={defaultStyles.title}>Edit Task</Text>
<Text style={styles.subtitle}>Update your task details below.</Text>
{isLoading ? (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" />
<Text style={styles.loadingText}>Loading task...</Text>
</View>
) : (
<>
<View style={styles.field}>
<Text style={styles.label}>Title</Text>
<TextInput
style={styles.input}
placeholder="Enter task title"
value={title}
onChangeText={setTitle}
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Description</Text>
<TextInput
style={[styles.input, styles.textArea]}
placeholder="Enter task description"
placeholderTextColor="#9ca3af"
value={description}
onChangeText={setDescription}
multiline
textAlignVertical="top"
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Deadline</Text>
<TextInput
style={styles.input}
placeholder="YYYY-MM-DD"
placeholderTextColor="#9ca3af"
value={deadline}
onChangeText={setDeadline}
/>
</View>
<Pressable
style={[
styles.checkboxContainer,
isCompleted && styles.checkboxContainerActive,
]}
onPress={() => setIsCompleted((current) => !current)}
>
<View
style={[
styles.checkbox,
isCompleted && styles.checkboxActive,
]}
>
{isCompleted && <Text style={styles.checkboxMark}>✓</Text>}
</View>
<Text style={styles.checkboxLabel}>
{isCompleted ? 'Completed' : 'Not completed'}
</Text>
</Pressable>
<View style={styles.buttonGroup}>
<Pressable
style={[
styles.primaryButton,
isSaving && styles.disabledButton,
]}
onPress={handleSaveTask}
disabled={isSaving}
>
<Text style={styles.primaryButtonText}>
{isSaving ? 'Saving...' : 'Save Changes'}
</Text>
</Pressable>
{isSaving && (
<ActivityIndicator size="small" />
)}
<Pressable
style={styles.secondaryButton}
onPress={() => router.back()}
disabled={isSaving}
>
<Text style={styles.secondaryButtonText}>Cancel</Text>
</Pressable>
</View>
</>
)} )}
<Button title="Cancel" onPress={() => router.back()} />
</View> </View>
</TouchableWithoutFeedback> </ScrollView>
</KeyboardAvoidingView> </TouchableWithoutFeedback>
</View> </KeyboardAvoidingView>
</> </>
) );
} }
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: 'f3f4f6'
},
container: {
flexGrow: 1,
justifyContent: 'center',
padding: 20,
},
card: {
backgroundColor: '#fff',
borderRadius: 8,
padding: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.1,
shadowRadius: 10,
elevation: 5,
},
subtitle: {
fontSize: 15,
color: '#6b7280',
marginBottom: 24,
},
loadingContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 40,
gap: 12,
},
loadingText: {
color: '#6b7280',
fontSize: 15,
},
field: {
marginBottom: 16,
},
label: {
fontSize: 14,
fontWeight: '600',
color: '#374151',
marginBottom: 8,
},
input: {
minHeight: 50,
borderWidth: 1,
borderColor: '#d1d5db',
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 12,
fontSize: 16,
color: '#111827',
backgroundColor: '#f9fafb',
},
textArea: {
minHeight: 110,
},
checkboxContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 12,
borderWidth: 1,
borderColor: '#d1d5db',
borderRadius: 12,
padding: 14,
marginTop: 4,
marginBottom: 22,
backgroundColor: '#f9fafb',
},
checkboxContainerActive: {
borderColor: '#2563eb',
backgroundColor: '#eff6ff',
},
checkbox: {
width: 24,
height: 24,
borderWidth: 2,
borderColor: '#9ca3af',
borderRadius: 6,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ffffff',
},
checkboxActive: {
borderColor: '#2563eb',
backgroundColor: '#2563eb',
},
checkboxMark: {
color: '#ffffff',
fontSize: 16,
fontWeight: '700',
},
checkboxLabel: {
fontSize: 16,
fontWeight: '600',
color: '#111827',
},
buttonGroup: {
gap: 12,
},
primaryButton: {
height: 52,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#2563eb',
},
primaryButtonText: {
color: '#ffffff',
fontSize: 16,
fontWeight: '700',
},
disabledButton: {
opacity: 0.6,
},
secondaryButton: {
height: 52,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#e5e7eb',
},
secondaryButtonText: {
color: '#111827',
fontSize: 16,
fontWeight: '700',
},
});

2
app/createUser.tsx
View File

@@ -20,7 +20,7 @@ export default function CreateUser() {
}); });
if (error) { if (error) {
Alert.alert("User could not be created, please try again"); Alert.alert(error.message, "User could not be created, please try again");
return; return;
} }

8
lib/supabase.ts
View File

@@ -5,6 +5,14 @@ import 'react-native-url-polyfill/auto';
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL! const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!
const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY! const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
if (!supabaseUrl) {
throw new Error('Missing EXPO_PUBLIC_SUPABASE_URL');
}
if (!supabaseKey) {
throw new Error('Missing EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY');
}
const SecureStoreAdapter = { const SecureStoreAdapter = {
getItem: async (key: string) => { getItem: async (key: string) => {
return await SecureStore.getItemAsync(key); return await SecureStore.getItemAsync(key);