restyle subject, assignment, and task screens with card layouts, consistent inputs, custom theme classes. replaced buttons with pressables and fixed some saving issues
This commit is contained in:
Fhj0607
@@ -2,10 +2,23 @@ import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { router, Stack, useLocalSearchParams } from 'expo-router';
|
||||
import { useState } from 'react';
|
||||
import { ActivityIndicator, Alert, Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
export default function CreateAssignment() {
|
||||
const sId = (useLocalSearchParams().sId as string) ?? null;
|
||||
|
||||
const [title, SetTitle] = useState('');
|
||||
const [description, SetDescription] = useState('');
|
||||
const [deadline, SetDeadline] = useState('');
|
||||
@@ -13,171 +26,188 @@ export default function CreateAssignment() {
|
||||
const [isSaving, SetIsSaving] = useState(false);
|
||||
|
||||
const CreateAssignment = async () => {
|
||||
if(title.trim() === '') {
|
||||
Alert.alert("Title is required!");
|
||||
if (title.trim() === '') {
|
||||
Alert.alert('Title is required!');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const { data, error: userError } = await supabase.auth.getUser();
|
||||
|
||||
if(userError || !data.user) {
|
||||
router.replace("../createUser");
|
||||
if (userError || !data.user) {
|
||||
router.replace('../createUser');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
SetIsSaving(true);
|
||||
|
||||
const { error: dbError } = await supabase.from("assignments").insert({
|
||||
title,
|
||||
description,
|
||||
deadline,
|
||||
const { error: dbError } = await supabase.from('assignments').insert({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
deadline: deadline.trim(),
|
||||
isCompleted,
|
||||
lastChanged: new Date().toISOString(),
|
||||
uId: data.user.id,
|
||||
sId: sId,
|
||||
sId,
|
||||
});
|
||||
|
||||
if (dbError) {
|
||||
Alert.alert("Assignment could not be created, please try again");
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Assignment could not be created, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Assignment successfully created!");
|
||||
Alert.alert('Assignment successfully created!');
|
||||
|
||||
SetTitle('');
|
||||
SetDescription('');
|
||||
SetDeadline('');
|
||||
SetIsCompleted(false);
|
||||
|
||||
SetIsSaving(false);
|
||||
|
||||
router.back();
|
||||
}
|
||||
};
|
||||
|
||||
const inputClassName =
|
||||
'rounded-2xl border border-app-border bg-app-subtle px-4 py-3 text-base text-text-main';
|
||||
|
||||
const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Create Assignment",
|
||||
headerTitleStyle: defaultStyles.title
|
||||
title: 'Create Assignment',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Create New Assignment</Text>
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-gray-100"
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<ScrollView
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 32,
|
||||
}}
|
||||
>
|
||||
<View className="rounded-3xl bg-white p-6 shadow-lg">
|
||||
<View className="mb-4">
|
||||
<Text className="mb-2 text-sm font-semibold text-gray-700">
|
||||
Title
|
||||
</Text>
|
||||
<TextInput
|
||||
className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
|
||||
placeholder="Enter title"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={title}
|
||||
onChangeText={SetTitle}
|
||||
/>
|
||||
</View>
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-app-bg"
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<ScrollView
|
||||
className="flex-1"
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 32,
|
||||
}}
|
||||
>
|
||||
<View className="mb-6">
|
||||
<Text className="text-3xl font-bold text-text-main">
|
||||
Create Assignment
|
||||
</Text>
|
||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||
Add a new assignment to keep your subject organized.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="mb-4">
|
||||
<Text className="mb-2 text-sm font-semibold text-gray-700">
|
||||
Description
|
||||
</Text>
|
||||
<TextInput
|
||||
className="min-h-28 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900" placeholder="Enter description"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={description}
|
||||
onChangeText={SetDescription}
|
||||
multiline
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="mb-4">
|
||||
<Text className="mb-2 text-sm font-semibold text-gray-700">
|
||||
Deadline
|
||||
</Text>
|
||||
<TextInput
|
||||
className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
|
||||
placeholder="YYYY-MM-DD"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={deadline}
|
||||
onChangeText={SetDeadline}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
className={`mb-6 flex-row items-center rounded-xl border p-4
|
||||
${isCompleted
|
||||
? 'border-blue-600 bg-blue-50'
|
||||
: 'border-gray-300 bg-gray-50'
|
||||
}`
|
||||
}
|
||||
onPress={() => SetIsCompleted((current) => !current)}
|
||||
>
|
||||
<View
|
||||
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2
|
||||
${isCompleted
|
||||
? 'border-blue-600 bg-blue-600'
|
||||
: 'border-gray-400 bg-white'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{isCompleted && (
|
||||
<Text className="text-base font-bold text-white">✓</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Text className="text-base font-semibold text-gray-900">
|
||||
{isCompleted ? 'Completed' : 'Not completed'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-blue-400' : 'bg-blue-600'
|
||||
}`}
|
||||
onPress={CreateAssignment}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<Text className="text-base font-bold text-white">
|
||||
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
{isSaving && (
|
||||
<View className="mt-4">
|
||||
<ActivityIndicator size="small" />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Pressable
|
||||
className="mt-3 h-14 items-center justify-center rounded-2xl bg-gray-200"
|
||||
onPress={() => router.back()}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<Text className="text-base font-bold text-gray-900">
|
||||
Cancel
|
||||
</Text>
|
||||
</Pressable>
|
||||
<View className="rounded-3xl border border-app-border bg-app-surface p-5 shadow-sm">
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Title</Text>
|
||||
<TextInput
|
||||
className={inputClassName}
|
||||
placeholder="Enter assignment title"
|
||||
value={title}
|
||||
onChangeText={SetTitle}
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Description</Text>
|
||||
<TextInput
|
||||
className={`${inputClassName} min-h-28`}
|
||||
placeholder="Add a short description"
|
||||
value={description}
|
||||
onChangeText={SetDescription}
|
||||
multiline
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Deadline</Text>
|
||||
<TextInput
|
||||
className={inputClassName}
|
||||
placeholder="YYYY-MM-DD"
|
||||
value={deadline}
|
||||
onChangeText={SetDeadline}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
|
||||
isCompleted
|
||||
? 'border-accent bg-accent-soft'
|
||||
: 'border-app-border bg-app-subtle'
|
||||
}`}
|
||||
onPress={() => SetIsCompleted((current) => !current)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<View
|
||||
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
|
||||
isCompleted
|
||||
? 'border-accent bg-accent'
|
||||
: 'border-app-border bg-app-surface'
|
||||
}`}
|
||||
>
|
||||
{isCompleted && (
|
||||
<Text className="text-sm font-bold text-text-inverse">
|
||||
✓
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="flex-1">
|
||||
<Text className="text-base font-semibold text-text-main">
|
||||
Mark as completed
|
||||
</Text>
|
||||
<Text className="mt-1 text-sm text-text-muted">
|
||||
You can change this later.
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-accent-disabled' : 'bg-accent'
|
||||
}`}
|
||||
onPress={CreateAssignment}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<View className="flex-row items-center">
|
||||
<ActivityIndicator size="small" />
|
||||
<Text className="ml-3 text-base font-bold text-text-inverse">
|
||||
Creating...
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text className="text-base font-bold text-text-inverse">
|
||||
Create Assignment
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className="mt-3 h-14 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
|
||||
onPress={() => router.back()}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<Text className="text-base font-semibold text-text-secondary">
|
||||
Cancel
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user