redesigned completion and reopening subjects/assignments/tasks and how it is rendered

2026-05-01 12:36:58 +02:00
parent e3c0b286b8
commit ae613f8707
4 changed files with 239 additions and 124 deletions
--- a/app/(tabs)/subjects.tsx
+++ b/app/(tabs)/subjects.tsx
@@ -1,18 +1,26 @@
-import { SUBJECT_COLORS } from '@/lib/subjectColors';
+import { SUBJECT_COLORS, type SubjectColor } from '@/lib/subjectColors';
 import { supabase } from '@/lib/supabase';
 import { Subject } from '@/lib/types';
 import { Session } from '@supabase/supabase-js';
 import { router, Stack, useFocusEffect } from 'expo-router';
 import { useCallback, useEffect, useState } from 'react';
-import { ActivityIndicator, Alert, Pressable, ScrollView, Text, View } from 'react-native';
-
-import type { SubjectColor } from '@/lib/subjectColors';
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from 'react-native';

 export default function Subjects() {
  const [subjects, SetSubjects] = useState<Subject[]>([]);
  const [session, SetSession] = useState<Session | null>(null);
  const [isLoading, SetIsLoading] = useState(true);

+  const activeSubjects = subjects.filter((subject) => subject.isActive);
+  const inactiveSubjects = subjects.filter((subject) => !subject.isActive);
+
  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => {
      SetSession(data.session ?? null);
@@ -59,64 +67,10 @@ export default function Subjects() {
    }, [session])
  );

-  return (
-    <View className="flex-1 bg-app-bg">
-      <Stack.Screen
-        options={{
-          title: 'Subjects',
-          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>
-          ),
-        }}
-      />
-
-      <ScrollView
-        className="flex-1"
-        contentContainerStyle={{
-          paddingHorizontal: 20,
-          paddingTop: 20,
-          paddingBottom: 32,
-        }}
-        showsVerticalScrollIndicator={false}
-      >
-        <View className="mb-6">
-          <Text className="text-3xl font-bold text-text-main">Subjects</Text>
-          <Text className="mt-2 text-base leading-6 text-text-secondary">
-            Pick a subject to manage assignments and tasks.
-          </Text>
-        </View>
-
-        {isLoading ? (
-          <View className="items-center justify-center rounded-3xl border border-app-border bg-app-surface p-5">
-            <ActivityIndicator size="large" color="#2563eb" />
-            <Text className="mt-4 text-center text-base font-semibold text-text-secondary">
-              Loading subjects...
-            </Text>
-          </View>
-        ) : subjects.length === 0 ? (
-          <View className="rounded-3xl border border-app-border bg-app-surface p-5">
-            <Text className="text-center text-base font-semibold text-text-secondary">
-              No subjects yet
-            </Text>
-            <Text className="mt-1 text-center text-sm text-text-muted">
-              Create your first subject to get started.
-            </Text>
-          </View>
-        ) : (
-          <View>
-            {subjects.map((subject) => {
+  const RenderSubjectCard = (subject: Subject) => {
    const colorKey: SubjectColor = subject.color ?? 'slate';
    const colorSet = SUBJECT_COLORS[colorKey];
-
-              const firstLetter =
-                subject.title?.trim().charAt(0).toUpperCase() || '?';
+    const firstLetter = subject.title?.trim().charAt(0).toUpperCase() || '?';

    return (
      <Pressable
@@ -178,7 +132,102 @@ export default function Subjects() {
        </View>
      </Pressable>
    );
-            })}
+  };
+
+  return (
+    <View className="flex-1 bg-app-bg">
+      <Stack.Screen
+        options={{
+          title: 'Subjects',
+          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>
+          ),
+        }}
+      />
+
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{
+          paddingHorizontal: 20,
+          paddingTop: 20,
+          paddingBottom: 32,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        {isLoading ? (
+          <View className="items-center justify-center rounded-3xl border border-app-border bg-app-surface p-5">
+            <ActivityIndicator size="large" color="#2563eb" />
+            <Text className="mt-4 text-center text-base font-semibold text-text-secondary">
+              Loading subjects...
+            </Text>
+          </View>
+        ) : subjects.length === 0 ? (
+          <View className="rounded-3xl border border-app-border bg-app-surface p-5">
+            <Text className="text-center text-base font-semibold text-text-secondary">
+              No subjects yet
+            </Text>
+            <Text className="mt-1 text-center text-sm text-text-muted">
+              Create your first subject to get started.
+            </Text>
+          </View>
+        ) : (
+          <View>
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                Active Subjects
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {activeSubjects.length}
+                </Text>
+              </View>
+            </View>
+
+            {activeSubjects.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  No active subjects
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Subjects with ongoing work will show up here.
+                </Text>
+              </View>
+            ) : (
+              activeSubjects.map(RenderSubjectCard)
+            )}
+
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                Inactive Subjects
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {inactiveSubjects.length}
+                </Text>
+              </View>
+            </View>
+
+            {inactiveSubjects.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  No inactive subjects
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Completed or paused subjects will show up here.
+                </Text>
+              </View>
+            ) : (
+              inactiveSubjects.map(RenderSubjectCard)
+            )}
          </View>
        )}

--- a/app/assignment/viewDetailsAssignment.tsx
+++ b/app/assignment/viewDetailsAssignment.tsx
@@ -167,6 +167,32 @@ export default function ViewDetailsAssignment() {
    )
  }

+  const ToggleTaskCompletion = async (task: Task) => {
+    const nextIsCompleted = !task.isCompleted;
+
+    const { error } = await supabase
+      .from("tasks")
+      .update({
+        isCompleted: nextIsCompleted,
+        lastChanged: new Date().toISOString(),
+      })
+      .eq("tId", task.tId);
+
+    if (error) {
+      Alert.alert("Task could not be updated, please try again");
+      return;
+    }
+
+    try {
+      await CheckAssignmentCompletion(task.aId);
+    } catch {
+      Alert.alert("Failed to update assignment completion state");
+    }
+
+    await GetTasks(task.aId);
+    await GetAssignment(task.aId);
+  }
+
  const colorSet = getSubjectColorSet(subjectMeta.color);

  const completedTasks = tasks.filter((task) => task.isCompleted).length;
@@ -234,7 +260,7 @@ export default function ViewDetailsAssignment() {
      <SectionList
        className="flex-1"
        contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 20, paddingBottom: 32 }}
-        sections={taskSections}
+        sections={totalTasks === 0 ? [] : taskSections}
        keyExtractor={(item) => item.tId}
        showsVerticalScrollIndicator={false}
        stickySectionHeadersEnabled={false}
@@ -248,18 +274,6 @@ export default function ViewDetailsAssignment() {
              }}
            >
              <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: assignment.isCompleted ? colorSet.strong : '#DDD6C8',
-                    backgroundColor: assignment.isCompleted ? colorSet.strong : '#EFEBE3',
-                  }}
-                >
-                  {assignment.isCompleted && (
-                    <Text className="text-sm font-bold text-text-inverse">✓</Text>
-                  )}
-                </View>
-
                <View className="flex-1">
                  <Text className="text-2xl font-bold text-text-main">
                    {assignment.title}
@@ -399,18 +413,6 @@ export default function ViewDetailsAssignment() {
                }
              >
                <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: item.isCompleted ? colorSet.strong : '#DDD6C8',
-                      backgroundColor: item.isCompleted ? colorSet.strong : '#EFEBE3',
-                    }}
-                  >
-                    {item.isCompleted && (
-                      <Text className="text-sm font-bold text-text-inverse">✓</Text>
-                    )}
-                  </View>
-
                  <View className="flex-1">
                    <Text
                      className={`text-base font-bold ${
@@ -434,6 +436,19 @@ export default function ViewDetailsAssignment() {

              {isOwner && (
                <View className="mt-4 flex-row border-t border-app-border pt-4">
+                  <Pressable
+                    className="mr-3 flex-1 items-center justify-center rounded-2xl py-3"
+                    style={{ backgroundColor: item.isCompleted ? '#EFEBE3' : colorSet.soft }}
+                    onPress={() => ToggleTaskCompletion(item)}
+                  >
+                    <Text
+                      className="text-sm font-bold"
+                      style={{ color: colorSet.strong }}
+                    >
+                      {item.isCompleted ? 'Reopen' : 'Complete'}
+                    </Text>
+                  </Pressable>
+
                  <Pressable
                    className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
                    onPress={() =>
@@ -459,6 +474,19 @@ export default function ViewDetailsAssignment() {
            </View>
          );
        }}
+        ListEmptyComponent={
+          <View
+            className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5"
+            style={{ borderColor: colorSet.strong }}
+          >
+            <Text className="text-center text-base font-semibold text-text-secondary">
+              No tasks needed yet
+            </Text>
+            <Text className="mt-1 text-center text-sm text-text-muted">
+              Add tasks if this assignment needs smaller steps.
+            </Text>
+          </View>
+        }
        renderSectionFooter={({ section }) =>
          section.data.length === 0 ? (
            <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5" style={{ borderColor: colorSet.strong }}>
--- a/app/subject/viewDetailsSubject.tsx
+++ b/app/subject/viewDetailsSubject.tsx
@@ -78,6 +78,32 @@ export default function ViewDetailsSubject() {
    SetAssignments(data ?? []);
  };

+  const ToggleAssignmentCompletion = async (assignment: Assignment) => {
+    const nextIsCompleted = !assignment.isCompleted;
+
+    const { error } = await supabase
+      .from('assignments')
+      .update({
+        isCompleted: nextIsCompleted,
+        lastChanged: new Date().toISOString(),
+      })
+      .eq('aId', assignment.aId);
+
+    if (error) {
+      Alert.alert('Assignment could not be updated, please try again');
+      return;
+    }
+
+    try {
+      await CheckSubjectCompletion(assignment.sId);
+    } catch {
+      Alert.alert('Failed to update subject status');
+    }
+
+    await GetAssignments(assignment.sId);
+    await GetSubject(assignment.sId);
+  };
+
  useFocusEffect(
    useCallback(() => {
      if (!session || !sId) {
@@ -267,7 +293,7 @@ export default function ViewDetailsSubject() {
          paddingTop: 20,
          paddingBottom: 32,
        }}
-        sections={assignmentSections}
+        sections={totalAssignments === 0 ? [] : assignmentSections}
        keyExtractor={(item) => item.aId}
        showsVerticalScrollIndicator={false}
        stickySectionHeadersEnabled={false}
@@ -396,7 +422,7 @@ export default function ViewDetailsSubject() {
              }
            >
              <Text className="text-base font-bold text-text-inverse">
-                Create Assignment
+                Add Assignment
              </Text>
            </Pressable>
          </View>
@@ -422,7 +448,9 @@ export default function ViewDetailsSubject() {
                borderColor: colorSet.strong,
              }}
            >
+              <View className="flex-row items-center">
                <Pressable
+                  className="flex-1"
                  onPress={() =>
                    router.push({
                      pathname: '/assignment/viewDetailsAssignment',
@@ -430,7 +458,6 @@ export default function ViewDetailsSubject() {
                    })
                  }
                >
-                <View className="flex-row items-center">
                  <View className="flex-1">
                    <Text
                      className={`text-base font-bold ${
@@ -453,11 +480,24 @@ export default function ViewDetailsSubject() {
                      Deadline: {formatDate(item.deadline)}
                    </Text>
                  </View>
-                </View>
                </Pressable>
+              </View>

              {isOwner && (
                <View className="mt-4 flex-row border-t border-app-border pt-4">
+                  <Pressable
+                    className="mr-3 flex-1 items-center justify-center rounded-2xl py-3"
+                    style={{ backgroundColor: item.isCompleted ? '#EFEBE3' : colorSet.soft }}
+                    onPress={() => ToggleAssignmentCompletion(item)}
+                  >
+                    <Text
+                      className="text-sm font-bold"
+                      style={{ color: colorSet.strong }}
+                    >
+                      {item.isCompleted ? 'Reopen' : 'Complete'}
+                    </Text>
+                  </Pressable>
+
                  <Pressable
                    className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
                    onPress={() =>
@@ -485,6 +525,16 @@ export default function ViewDetailsSubject() {
            </View>
          );
        }}
+        ListEmptyComponent={
+          <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+            <Text className="text-center text-base font-semibold text-text-secondary">
+              No assignments yet
+            </Text>
+            <Text className="mt-1 text-center text-sm text-text-muted">
+              Add one when this subject has work to track.
+            </Text>
+          </View>
+        }
        renderSectionFooter={({ section }) =>
          section.data.length === 0 ? (
            <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
--- a/app/task/viewDetailsTask.tsx
+++ b/app/task/viewDetailsTask.tsx
@@ -212,18 +212,6 @@ export default function ViewDetailsTask() {
        }}
      >
        <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>
-
          <View className="flex-1">
            <Text
              className={`text-2xl font-bold ${