Merge branch 'main' of github.com:Fhj0607/Study-Sprint

app/task/_layout.tsx

@@ -3,8 +3,7 @@ import { Stack } from "expo-router";
 export default function TaskLayout() {
   return (
     <Stack>
-      <Stack.Screen name="createTask" options={{ title: "Create Task" }} />
-      <Stack.Screen name="editTask" options={{ title: "Edit Task" }} />
+      <Stack.Screen name="upsertTask" options={{ title: "Create Task" }} />
       <Stack.Screen name="viewDetailsTask" options={{ title: "Task Details" }} />
     </Stack>
   );

app/task/editTask.tsx

@@ -1,136 +0,0 @@
-import { defaultStyles } from '@/constants/defaultStyles';
-import { CheckAssignmentCompletion } from '@/lib/progress';
-import { supabase } from '@/lib/supabase';
-import type { Task } from '@/lib/types';
-import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
-import { useCallback, useState } from 'react';
-import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
-
-export default function EditTask() {
-  const { tId } = useLocalSearchParams<{ tId: string }>();
-  const [task, SetTask] = useState<Task | null>(null)
-  const [isSaving, SetIsSaving] = useState(false);
-
-  const GetTask = async (tId: string) => { 
-    const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
-
-    if (error) {
-      Alert.alert("Task could not be fetched, please try again");
-      return;
-    }
-
-    SetTask(data ?? null);
-  }
-
-  useFocusEffect(
-    useCallback(() => {
-      if (tId) {
-        GetTask(tId);
-      }
-    }, [tId])
-  );
-
-  const EditTask = async () => {
-    if (!task) return;
-
-    if(task.title.trim() === '') {
-      Alert.alert("Title is required!");
-      return;
-    }
-        
-    const { data, error: userError } = await supabase.auth.getUser();
-
-    if(userError || !data.user) {
-      router.replace("../createUser");
-      return;
-    } 
-
-    SetIsSaving(true);
-
-    const { error: dbError } = await supabase.from("tasks").update({
-      title: task.title,
-      description: task.description,
-      isCompleted: task.isCompleted,
-      lastChanged: new Date().toISOString(),
-      uId: data.user.id,
-      aId: task.aId,
-    }).eq("tId", tId);
-
-    SetIsSaving(false);
-
-    if (dbError) {
-      Alert.alert("Task could not be edited, please try again");
-      return;
-    }
-
-    Alert.alert("Task successfully edited!");
-
-    if (task.aId) {
-      try {
-        await CheckAssignmentCompletion(task.aId);
-      } catch {
-        Alert.alert("Failed to update assignment completion state");
-      }
-    }
-
-    router.back();
-  }
-
-  return (
-    <View style={defaultStyles.container}>
-      <Stack.Screen
-        options={{
-          title: "Edit Task",
-          headerTitleStyle: defaultStyles.title
-        }}
-      />
-
-      {!task && (
-        <View style={defaultStyles.container}>
-          <Text style={defaultStyles.title}>Task not found</Text>
-        </View>
-      )}
-
-      {task && (
-        <View style={defaultStyles.container}>
-          <Text style={defaultStyles.title}>Edit Task</Text>
-          <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
-            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-              <View style={defaultStyles.container}>
-                <TextInput
-                  testID="task-title-input"
-                  style={defaultStyles.inputText}
-                  placeholder="Title"
-                  value={task.title}
-                  onChangeText={(text) => SetTask(prev => prev ? { ...prev, title: text } : prev)}
-                />
-                <TextInput
-                  style={defaultStyles.inputText}
-                  placeholder="Text"
-                  value={task.description}
-                  onChangeText={(text) => SetTask(prev => prev ? { ...prev, description: text } : prev)}
-                />
-                <Pressable
-                  onPress={() => SetTask(prev => prev ? { ...prev, isCompleted: !prev.isCompleted } : prev)}
-                  style={defaultStyles.checkboxContainer}
-                >
-                  <View style={defaultStyles.checkbox}>
-                    {task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
-                  </View>
-                  <Text style={defaultStyles.checkboxLabel}>{task.isCompleted ? 'Completed' : 'Not Completed'}</Text>
-                </Pressable>
-
-                <Button testID="edit-task-button" title={isSaving ? "Saving..." : "Save"} onPress={EditTask} disabled={isSaving} />
-                {isSaving && (
-                  <ActivityIndicator size="large" />
-                )}
-                <Button title="Cancel" onPress={() => router.back()} />
-              </View>
-            </TouchableWithoutFeedback>
-          </KeyboardAvoidingView>
-        </View>
-      )}
-    </View>
-  )
-}
-

app/task/upsertTask.tsx

@@ -1,8 +1,9 @@
 import { defaultStyles } from '@/constants/defaultStyles';
 import { CheckAssignmentCompletion } from '@/lib/progress';
 import { supabase } from '@/lib/supabase';
+import type { Task } from '@/lib/types';
 import { router, Stack, useLocalSearchParams } from 'expo-router';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
   Alert,
@@ -17,15 +18,57 @@ import {
   View,
 } from 'react-native';
 
-export default function CreateTask() {
-  const aId = (useLocalSearchParams().aId as string) ?? null;
+export default function UpsertTask() {
+  const { tId, aId: routeAId } = useLocalSearchParams<{
+    tId?: string;
+    aId?: string;
+  }>();
+
+  const isEditMode = Boolean(tId);
 
   const [title, SetTitle] = useState('');
   const [description, SetDescription] = useState('');
   const [isCompleted, SetIsCompleted] = useState(false);
+  const [assignmentId, SetAssignmentId] = useState<string | null>(routeAId ?? null);
+
+  const [isLoading, SetIsLoading] = useState(isEditMode);
   const [isSaving, SetIsSaving] = useState(false);
 
-  const CreateTask = async () => {
+  useEffect(() => {
+    if (!isEditMode || !tId) {
+      SetIsLoading(false);
+      return;
+    }
+
+    const loadTask = async () => {
+      SetIsLoading(true);
+
+      const { data, error } = await supabase
+        .from('tasks')
+        .select('*')
+        .eq('tId', tId)
+        .single();
+
+      SetIsLoading(false);
+
+      if (error || !data) {
+        Alert.alert('Task could not be loaded, please try again');
+        router.back();
+        return;
+      }
+
+      const task = data as Task;
+
+      SetTitle(task.title ?? '');
+      SetDescription(task.description ?? '');
+      SetIsCompleted(task.isCompleted ?? false);
+      SetAssignmentId(task.aId ?? routeAId ?? null);
+    };
+
+    loadTask();
+  }, [isEditMode, tId, routeAId]);
+
+  const handleSubmit = async () => {
     if (title.trim() === '') {
       Alert.alert('Title is required!');
       return;
@@ -34,42 +77,55 @@ export default function CreateTask() {
     const { data, error: userError } = await supabase.auth.getUser();
 
     if (userError || !data.user) {
-      router.replace('../createUser');
+      router.replace('/login');
+      return;
+    }
+
+    if (!assignmentId) {
+      Alert.alert('Missing assignment', 'This task is not linked to an assignment.');
       return;
     }
 
     SetIsSaving(true);
 
-    const { error: dbError } = await supabase.from('tasks').insert({
+    const payload = {
       title: title.trim(),
       description: description.trim(),
       isCompleted,
       lastChanged: new Date().toISOString(),
       uId: data.user.id,
-      aId,
-    });
+      aId: assignmentId,
+    };
 
-    if (dbError) {
+    const result =
+      isEditMode && tId
+        ? await supabase.from('tasks').update(payload).eq('tId', tId)
+        : await supabase.from('tasks').insert(payload);
+
+    if (result.error) {
       SetIsSaving(false);
-      Alert.alert('Task could not be created, please try again');
+      Alert.alert(
+        isEditMode
+          ? 'Task could not be updated, please try again'
+          : 'Task could not be created, please try again'
+      );
       return;
     }
 
-    Alert.alert('Task successfully created!');
-
-    if (aId) {
-      try {
-        await CheckAssignmentCompletion(aId);
-      } catch {
-        Alert.alert("Failed to update assignment completion state");
-      }
+    try {
+      await CheckAssignmentCompletion(assignmentId);
+    } catch {
+      SetIsSaving(false);
+      Alert.alert('Failed to update assignment completion state');
+      return;
     }
 
-    SetTitle('');
-    SetDescription('');
-    SetIsCompleted(false);
     SetIsSaving(false);
 
+    Alert.alert(
+      isEditMode ? 'Task successfully updated!' : 'Task successfully created!'
+    );
+
     router.back();
   };
 
@@ -78,11 +134,19 @@ export default function CreateTask() {
 
   const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary';
 
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-app-bg">
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
   return (
     <>
       <Stack.Screen
         options={{
-          title: 'Create Task',
+          title: isEditMode ? 'Edit Task' : 'Create Task',
           headerTitleStyle: defaultStyles.title,
         }}
       />
@@ -104,10 +168,12 @@ export default function CreateTask() {
           >
             <View className="mb-6">
               <Text className="text-3xl font-bold text-text-main">
-                Create Task
+                {isEditMode ? 'Edit Task' : 'Create Task'}
               </Text>
               <Text className="mt-2 text-base leading-6 text-text-secondary">
-                Add a small step to move this assignment forward.
+                {isEditMode
+                  ? 'Update this task and keep your assignment moving forward.'
+                  : 'Add a small step to move this assignment forward.'}
               </Text>
             </View>
 
@@ -118,6 +184,7 @@ export default function CreateTask() {
                   testID="task-title-input"
                   className={inputClassName}
                   placeholder="Enter task title"
+                  placeholderTextColor="#9CA3AF"
                   value={title}
                   onChangeText={SetTitle}
                   returnKeyType="next"
@@ -129,6 +196,7 @@ export default function CreateTask() {
                 <TextInput
                   className={`${inputClassName} min-h-28`}
                   placeholder="Add a short description"
+                  placeholderTextColor="#9CA3AF"
                   value={description}
                   onChangeText={SetDescription}
                   multiline
@@ -174,19 +242,19 @@ export default function CreateTask() {
                 className={`h-14 items-center justify-center rounded-2xl ${
                   isSaving ? 'bg-accent-disabled' : 'bg-accent'
                 }`}
-                onPress={CreateTask}
+                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">
-                      Creating...
+                      {isEditMode ? 'Saving...' : 'Creating...'}
                     </Text>
                   </View>
                 ) : (
                   <Text className="text-base font-bold text-text-inverse">
-                    Create Task
+                    {isEditMode ? 'Save Changes' : 'Create Task'}
                   </Text>
                 )}
               </Pressable>

app/task/viewDetailsTask.tsx

@@ -1,36 +1,88 @@
-import { defaultStyles } from '@/constants/defaultStyles';
+import { formatDateTime } from '@/lib/date';
 import { CheckAssignmentCompletion } from '@/lib/progress';
+import { getSubjectColorSet, type SubjectColor } from '@/lib/subjectColors';
 import { supabase } from '@/lib/supabase';
 import type { Task } from '@/lib/types';
 import { Session } from '@supabase/supabase-js';
 import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
 import { useCallback, useEffect, useState } from 'react';
-import { Alert, Button, Text, View } from "react-native";
+import { Alert, Pressable, Text, View } from 'react-native';
 
 export default function ViewDetailsTask() {
   const { tId } = useLocalSearchParams<{ tId: string }>();
-  const [task, SetTask] = useState<Task | null>(null)
-  const [session, SetSession] = useState<Session | null>(null)
+
+  const [task, SetTask] = useState<Task | null>(null);
+  const [session, SetSession] = useState<Session | null>(null);
+  const [contextMeta, setContextMeta] = useState({
+    subjectTitle: 'No Subject',
+    assignmentTitle: 'No Assignment',
+    subjectColor: 'slate' as SubjectColor,
+  });
 
   useEffect(() => {
-    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null));
+
     const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
-      SetSession(newSession)
-    })
-    return () => sub.subscription.unsubscribe()
-    },
-  [])
+      SetSession(newSession);
+    });
 
-  const GetTask = async (tId: string) => { 
-    const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
+    return () => sub.subscription.unsubscribe();
+  }, []);
 
-    if (error) {
-      Alert.alert("Task could not be fetched, please try again");
+  const GetTask = async (taskId: string) => {
+    const { data, error } = await supabase
+      .from('tasks')
+      .select('*')
+      .eq('tId', taskId)
+      .single();
+
+    if (error || !data) {
+      Alert.alert('Task could not be fetched, please try again');
       return;
     }
 
-    SetTask(data ?? null);
-  }
+    SetTask(data);
+
+    if (data.aId) {
+      const { data: assignmentData, error: assignmentError } = await supabase
+        .from('assignments')
+        .select('title, sId')
+        .eq('aId', data.aId)
+        .single();
+
+      if (assignmentError || !assignmentData) {
+        setContextMeta({
+          subjectTitle: 'Unknown Subject',
+          assignmentTitle: 'Unknown Assignment',
+          subjectColor: 'slate',
+        });
+        return;
+      }
+
+      if (assignmentData.sId) {
+        const { data: subjectData, error: subjectError } = await supabase
+          .from('subjects')
+          .select('title, color')
+          .eq('sId', assignmentData.sId)
+          .single();
+
+        if (subjectError || !subjectData) {
+          setContextMeta({
+            subjectTitle: 'Unknown Subject',
+            assignmentTitle: assignmentData.title ?? 'Unknown Assignment',
+            subjectColor: 'slate',
+          });
+          return;
+        }
+
+        setContextMeta({
+          subjectTitle: subjectData.title ?? 'Unknown Subject',
+          assignmentTitle: assignmentData.title ?? 'Unknown Assignment',
+          subjectColor: (subjectData.color as SubjectColor | undefined) ?? 'slate',
+        });
+      }
+    }
+  };
 
   useFocusEffect(
     useCallback(() => {
@@ -40,89 +92,207 @@ export default function ViewDetailsTask() {
     }, [session, tId])
   );
 
-  const DeleteTask = async (tId: string) => {
+  const DeleteTask = async (taskId: string) => {
     Alert.alert(
-      "Delete Task",
-      "Are you sure you want to delete this task?",
+      'Delete Task',
+      'Are you sure you want to delete this task?',
       [
         {
-          text: "Cancel",
-          style: "cancel"
+          text: 'Cancel',
+          style: 'cancel',
         },
         {
-          text: "Delete",
-          style: "destructive",
+          text: 'Delete',
+          style: 'destructive',
           onPress: async () => {
-            const { error } = await supabase.from("tasks").delete().eq("tId", tId);
+            const { error } = await supabase
+              .from('tasks')
+              .delete()
+              .eq('tId', taskId);
 
             if (error) {
-              Alert.alert("Task could not be deleted, please try again");
+              Alert.alert('Task could not be deleted, please try again');
               return;
             }
 
-            Alert.alert("Task deleted successfully!");
-
             const aId = task?.aId;
 
             if (aId) {
               try {
                 await CheckAssignmentCompletion(aId);
               } catch {
-                Alert.alert("Failed to update assignment completion state");
+                Alert.alert('Failed to update assignment completion state');
               }
             }
 
+            Alert.alert('Task deleted successfully!');
             router.back();
-          }
-        }
+          },
+        },
       ]
-    )
+    );
+  };
+
+  const colorSet = getSubjectColorSet(contextMeta.subjectColor);
+
+  if (!task) {
+    return (
+      <View className="flex-1 bg-app-bg px-5 pt-6">
+        <Stack.Screen
+          options={{
+            title: 'Task Details',
+            headerRight: () => (
+              <Pressable
+                className="rounded-full bg-app-subtle px-4 py-2"
+                onPress={async () => await supabase.auth.signOut()}
+              >
+                <Text className="text-sm font-semibold text-text-secondary">
+                  Logout
+                </Text>
+              </Pressable>
+            ),
+          }}
+        />
+
+        <View
+          className="rounded-3xl bg-app-surface p-5"
+          style={{
+            borderWidth: 1,
+            borderColor: colorSet.strong,
+          }}
+        >
+          <Text className="text-2xl font-bold text-text-main">
+            Task not found
+          </Text>
+          <Text className="mt-2 text-base text-text-secondary">
+            The task could not be loaded.
+          </Text>
+
+          <Pressable
+            className="mt-5 h-12 items-center justify-center rounded-2xl bg-accent"
+            onPress={() => router.back()}
+          >
+            <Text className="text-base font-bold text-text-inverse">
+              Go back
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    );
   }
 
+  const isOwner = session?.user.id === task.uId;
+
   return (
-    <View style={defaultStyles.container}>
+    <View className="flex-1 bg-app-bg px-5 pt-6">
       <Stack.Screen
         options={{
-          title: "Details",
-          headerTitleStyle: defaultStyles.title,
-          headerLeft: () => {
-            return (
-              <View style={defaultStyles.buttonContainer}>
-                <Button title="Back" onPress={router.back} />
-              </View>
-            )
-          },
-          headerRight: () => {
-            return (
-              <View style={defaultStyles.buttonContainer}>
-                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
-              </View>
-            )
-          },
+          title: 'Task Details',
+          headerRight: () => (
+            <Pressable
+              className="rounded-full bg-app-subtle px-4 py-2"
+              onPress={async () => await supabase.auth.signOut()}
+            >
+              <Text className="text-sm font-semibold text-text-secondary">
+                Logout
+              </Text>
+            </Pressable>
+          ),
         }}
       />
 
-      {!task && (
-        <View style={defaultStyles.container}>
-          <Text style={defaultStyles.title}>Task not found</Text>
-        </View>
-      )}
-      
-      {task && (
-        <View style={defaultStyles.container}>
-          <Text style={defaultStyles.title}>{task.title}</Text>
-          <Text style={defaultStyles.body}>{task.description}</Text>
-          <View style={defaultStyles.checkbox}>
-              {task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+      <View
+        className="rounded-3xl bg-app-surface p-5"
+        style={{
+          borderWidth: 1,
+          borderColor: colorSet.strong,
+        }}
+      >
+        <View className="flex-row items-start">
+          <View
+            className="mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2"
+            style={{
+              borderColor: task.isCompleted ? colorSet.strong : '#DDD6C8',
+              backgroundColor: task.isCompleted ? colorSet.strong : '#EFEBE3',
+            }}
+          >
+            {task.isCompleted && (
+              <Text className="text-sm font-bold text-text-inverse">✓</Text>
+            )}
           </View>
-          <Text style={defaultStyles.body}>{task.lastChanged}</Text>
 
-          <View style={defaultStyles.buttonContainer}>
-            <Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: task.tId }})} />
-            <Button testID = "delete-task-button" title="Delete" onPress={() => DeleteTask(task.tId)} />
+          <View className="flex-1">
+            <Text
+              className={`text-2xl font-bold ${
+                task.isCompleted ? 'text-text-secondary' : 'text-text-main'
+              }`}
+            >
+              {task.title}
+            </Text>
+
+            {task.description ? (
+              <Text className="mt-3 text-base leading-6 text-text-secondary">
+                {task.description}
+              </Text>
+            ) : (
+              <Text className="mt-3 text-base text-text-muted">
+                No description added.
+              </Text>
+            )}
+
+            <View className="mt-4 flex-row flex-wrap">
+              <View
+                className="mr-2 mb-2 rounded-full px-3 py-1"
+                style={{ backgroundColor: colorSet.soft }}
+              >
+                <Text
+                  className="text-xs font-semibold"
+                  style={{ color: colorSet.strong }}
+                >
+                  {contextMeta.subjectTitle}
+                </Text>
+              </View>
+
+              <View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-secondary">
+                  {contextMeta.assignmentTitle}
+                </Text>
+              </View>
+            </View>
+
+            <Text className="mt-2 text-sm text-text-muted">
+              Last changed: {formatDateTime(task.lastChanged)}
+            </Text>
           </View>
         </View>
-      )}
+
+        {isOwner && (
+          <View className="mt-5 flex-row border-t border-app-border pt-5">
+            <Pressable
+              className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
+              onPress={() =>
+                router.push({
+                  pathname: '/task/upsertTask',
+                  params: { tId: task.tId },
+                })
+              }
+            >
+              <Text className="text-sm font-bold text-text-secondary">
+                Edit
+              </Text>
+            </Pressable>
+
+            <Pressable
+              className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+              onPress={() => DeleteTask(task.tId)}
+            >
+              <Text className="text-sm font-bold text-status-danger">
+                Delete
+              </Text>
+            </Pressable>
+          </View>
+        )}
+      </View>
     </View>
   );
-}
+}