352 lines
16 KiB
TypeScript
352 lines
16 KiB
TypeScript
import { defaultStyles } from '@/constants/defaultStyles';
|
|
import { SUBJECT_COLOR_KEYS, SUBJECT_COLORS, type SubjectColor } from '@/lib/subjectColors';
|
|
import { supabase } from '@/lib/supabase';
|
|
import type { Subject } from '@/lib/types';
|
|
import { router, Stack, useLocalSearchParams } from 'expo-router';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Keyboard,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
Text,
|
|
TextInput,
|
|
TouchableWithoutFeedback,
|
|
View
|
|
} from 'react-native';
|
|
|
|
|
|
export default function UpsertSubject() {
|
|
const { sId } = useLocalSearchParams<{ sId?: string }>();
|
|
const isEditMode = Boolean(sId);
|
|
|
|
const [title, setTitle] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [isActive, setIsActive] = useState(true);
|
|
const [color, setColor] = useState<SubjectColor>('blue');
|
|
|
|
const [isLoading, setIsLoading] = useState(isEditMode);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!isEditMode || !sId) return;
|
|
|
|
const loadSubject = async () => {
|
|
setIsLoading(true);
|
|
|
|
const { data, error } = await supabase
|
|
.from('subjects')
|
|
.select('*')
|
|
.eq('sId', sId)
|
|
.single();
|
|
|
|
setIsLoading(false);
|
|
|
|
if (error || !data ) {
|
|
Alert.alert('Subject could not be loaded, please try again');
|
|
router.back();
|
|
return;
|
|
}
|
|
|
|
const subject = data as Subject;
|
|
|
|
setTitle(subject.title ?? '');
|
|
setDescription(subject.description ?? '');
|
|
setIsActive(subject.isActive ?? true);
|
|
setColor(subject.color ?? 'blue');
|
|
};
|
|
|
|
loadSubject();
|
|
}, [isEditMode, sId]);
|
|
|
|
const handleSubmit = async () => {
|
|
if (title.trim() === '') {
|
|
Alert.alert('Title is required!');
|
|
return;
|
|
}
|
|
|
|
const { data, error: userError } = await supabase.auth.getUser();
|
|
|
|
if (userError || !data.user) {
|
|
router.replace('/login');
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
|
|
const payload = {
|
|
title: title.trim(),
|
|
description : description.trim(),
|
|
isActive,
|
|
color,
|
|
lastChanged: new Date().toISOString(),
|
|
uId: data.user.id,
|
|
};
|
|
|
|
const result = isEditMode && sId
|
|
? await supabase.from('subjects').update(payload).eq('sId', sId)
|
|
: await supabase.from('subjects').insert(payload);
|
|
|
|
setIsSaving(false);
|
|
|
|
if(result.error) {
|
|
Alert.alert(
|
|
isEditMode
|
|
? 'Subject could not be updated, please try again'
|
|
: 'Subject could not be created, please try again'
|
|
);
|
|
return;
|
|
}
|
|
|
|
Alert.alert(
|
|
isEditMode ? 'Subject updated successfully!' : 'Subject created successfully!'
|
|
);
|
|
|
|
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';
|
|
|
|
const selectedColor = useMemo(() => SUBJECT_COLORS[color], [color]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View className="flex-1 items-center justify-center bg-app-bg">
|
|
<ActivityIndicator size="large" />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Stack.Screen
|
|
options= {{
|
|
title: isEditMode ? 'Edit Subject' : 'Create Subject',
|
|
headerTitleStyle: defaultStyles.title,
|
|
headerTitleAlign: 'center',
|
|
}}
|
|
/>
|
|
|
|
<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">
|
|
{isEditMode ? 'Edit Subject' : 'Create Subject'}
|
|
</Text>
|
|
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
|
{isEditMode? ' Update this subject and keep your study structure organized.'
|
|
: 'Add a subject to organize your assignments and studyt tasks.'}
|
|
</Text>
|
|
</View>
|
|
|
|
<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 subject title"
|
|
placeholderTextColor="#9CA3AF"
|
|
value={title}
|
|
onChangeText={setTitle}
|
|
returnKeyType="next"
|
|
/>
|
|
</View>
|
|
|
|
<View className ="mb-5">
|
|
<Text className={labelClassName}>Description</Text>
|
|
<TextInput
|
|
className={`${inputClassName} min-h-28`}
|
|
placeholder="Add a short description"
|
|
placeholderTextColor="#9CA3AF"
|
|
value={description}
|
|
onChangeText={setDescription}
|
|
multiline
|
|
textAlignVertical="top"
|
|
/>
|
|
</View>
|
|
|
|
<View className="mb-6">
|
|
<Text className={labelClassName}>Color</Text>
|
|
|
|
<View className="mb-4">
|
|
<Text className={labelClassName}>Preview</Text>
|
|
|
|
<View
|
|
className="rounded-3xl bg-app-surface p-4"
|
|
style={{
|
|
borderWidth: 1,
|
|
borderColor: selectedColor.strong,
|
|
}}
|
|
>
|
|
<View className="flex-row items-center">
|
|
<View
|
|
className="mr-3 h-12 w-12 items-center justify-center rounded-2xl"
|
|
style={{ backgroundColor: selectedColor.soft }}
|
|
>
|
|
<Text
|
|
className="text-base font-bold"
|
|
style={{ color: selectedColor.strong }}
|
|
>
|
|
{title.trim().charAt(0).toUpperCase() || 'S'}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex-1">
|
|
<Text
|
|
className="text-base font-bold text-text-main"
|
|
numberOfLines={1}
|
|
>
|
|
{title.trim() || 'Subject Preview'}
|
|
</Text>
|
|
|
|
<Text
|
|
className="mt-1 text-sm leading-5 text-text-secondary"
|
|
numberOfLines={2}
|
|
>
|
|
{description.trim() || 'This color will be used as the subject card accent.'}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="ml-3">
|
|
<View
|
|
className="rounded-full px-3 py-1"
|
|
style={{ backgroundColor: selectedColor.soft }}
|
|
>
|
|
<Text
|
|
className="text-xs font-semibold"
|
|
style={{ color: selectedColor.strong }}
|
|
>
|
|
{isActive ? 'Active' : 'Inactive'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="flex-row flex-wrap">
|
|
{SUBJECT_COLOR_KEYS.map((colorKey) => {
|
|
const colorOption = SUBJECT_COLORS[colorKey];
|
|
const isSelected = color === colorKey;
|
|
|
|
return (
|
|
<Pressable
|
|
key={colorKey}
|
|
onPress={() => setColor(colorKey)}
|
|
className="mr-3 mb-3 rounded-2xl border border-app-border bg-app--surface p-2"
|
|
style={{
|
|
borderColor: isSelected
|
|
? colorOption.strong
|
|
: '#FFFFFF',
|
|
}}
|
|
>
|
|
<View className="flex-row items-center">
|
|
<View
|
|
className="mr-2 h-8 w-8 rounded-xl"
|
|
style={{ backgroundColor: colorOption.strong }}
|
|
/>
|
|
<Text
|
|
className="text-sm font-semibold"
|
|
style={{
|
|
color: isSelected
|
|
? colorOption.strong
|
|
: '#52616B',
|
|
}}
|
|
>
|
|
{colorOption.label}
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
|
|
<Pressable
|
|
onPress={() => setIsActive((state) => !state)}
|
|
disabled={isSaving}
|
|
className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
|
|
isActive
|
|
? 'border-accent bg-accent-soft'
|
|
: 'border-app-border bg-app-subtle'
|
|
}`}
|
|
>
|
|
<View
|
|
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
|
|
isActive
|
|
? 'border-accent bg-accent'
|
|
: 'border-app-border bg-app-surface'
|
|
}`}
|
|
>
|
|
{isActive && (
|
|
<Text className="text-sm font-bold text-text-inverse">✓</Text>
|
|
)}
|
|
</View>
|
|
|
|
<View className="flex-1">
|
|
<Text className="text-base font-semibold text-text-main">
|
|
Active subject
|
|
</Text>
|
|
<Text className="mt-1 text-sm text-text-muted">
|
|
Active subjects appear in your main study workflow.
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
|
|
<Pressable
|
|
className={`h-14 items-center justify-center rounded-2xl ${
|
|
isSaving
|
|
? 'bg-accent-disabled'
|
|
: 'bg-accent'
|
|
}`}
|
|
onPress={handleSubmit}
|
|
disabled={isSaving}
|
|
>
|
|
{isSaving ? (
|
|
<View className="flex-row items-center">
|
|
<ActivityIndicator size="small" />
|
|
<Text className="ml-3 text-base font-bold-text-text-inverse">
|
|
{isEditMode ? 'Saving...' : 'Creating...'}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<Text className="text-base font-bold text-text-inverse">
|
|
{isEditMode ? 'Save Changes' : 'Create Subject'}
|
|
</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>
|
|
</>
|
|
);
|
|
} |