crud for subjects, assignments and tasks

app/assignment/createAssignment.tsx

@@ -1,7 +1,8 @@
+import { defaultStyles } from '@/constants/defaultStyles';
 import { supabase } from '@/lib/supabase';
 import { router, Stack, useLocalSearchParams } from 'expo-router';
 import { 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, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
 
 export default function CreateAssignment() {
   const sId = (useLocalSearchParams().sId as string) ?? null;
@@ -12,20 +13,17 @@ export default function CreateAssignment() {
   const [isSaving, SetIsSaving] = useState(false);
 
   const CreateAssignment = async () => {
-    if(title.trim() === '' || deadline.trim() === '') {
+    if(title.trim() === '') {
-      Alert.alert("Title and deadline are required!");
+      Alert.alert("Title is required!");
       return;
     }
+        
+    const { data, error: userError } = await supabase.auth.getUser();
 
-    setIsSaving(true);
+    if(userError || !data.user) {
-
+      router.replace("../createUser");
-    try {
+      return;
-      const { data: userData, error: userError } = await supabase.auth.getUser();
+    } 
-
-      if (userError || !userData.user) {
-        router.replace('../createUser');
-        return;
-      }
 
     SetIsSaving(true);
 
@@ -48,7 +46,6 @@ export default function CreateAssignment() {
 
     SetTitle('');
     SetDescription('');
-    SetDeadline('');
     SetIsCompleted(false);
 
     SetIsSaving(false);
@@ -67,46 +64,120 @@ export default function CreateAssignment() {
 
       <View style={defaultStyles.container}>
         <Text style={defaultStyles.title}>Create New Assignment</Text>
-        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+        <KeyboardAvoidingView 
+          className="flex-1 bg-gray-100"
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        >
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-            <View style={defaultStyles.container}>
+            <ScrollView
-              <TextInput
+              keyboardShouldPersistTaps="handled"
-                style={defaultStyles.inputText}
+              contentContainerStyle={{
-                placeholder="Enter title"
+                flexGrow: 1,
-                value={title}
+                justifyContent: 'center',
-                onChangeText={SetTitle}
+                paddingHorizontal: 20,
-              />
+                paddingVertical: 32,
-              <TextInput
+              }}
-                style={defaultStyles.inputText}
+            >
-                placeholder="Enter description"
+              <View className="rounded-3xl bg-white p-6 shadow-lg">
-                value={description}
+                <View className="mb-4">
-                onChangeText={SetDescription}
+                  <Text className="mb-2 text-sm font-semibold text-gray-700">
-              />
+                    Title
-              <TextInput
+                  </Text>
-                style={defaultStyles.inputText}
+                  <TextInput
-                placeholder="Deadline (YYYY-MM-DD)"
+                    className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
-                value={deadline}
+                    placeholder="Enter title"
-                onChangeText={SetDeadline}
+                    placeholderTextColor="#9ca3af"
-              />
+                    value={title}
-              <Pressable
+                    onChangeText={SetTitle}
-                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={CreateAssignment} disabled={isSaving} />
+                <View className="mb-4">
-              {isSaving && (
+                  <Text className="mb-2 text-sm font-semibold text-gray-700">
-                <ActivityIndicator size="large" />
+                    Description
-              )}
+                  </Text>
-              <Button title="Cancel" onPress={() => router.back()} />
+                  <TextInput
-            </View>
+                    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"
-          </ScrollView>
+                    placeholderTextColor="#9ca3af"
-        </TouchableWithoutFeedback>
+                    value={description}
-      </KeyboardAvoidingView>
+                    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>
+            </ScrollView>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </View>
     </>
   );
 }