Chris/studysprint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

app now correctly handles the hierarchy subject -> assignment -> task. Implemented consistent styling and coloring on all three levels and correctly configured expo routing

Browse Source
This commit is contained in:
Fhj0607
2026-04-30 11:23:41 +02:00
parent 67c625f42c
commit 6f5158ff41
7 changed files with 265 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assignment/_layout.tsx
View File

@@ -3,9 +3,7 @@ import { Stack } from "expo-router";
export default function AssignmentLayout() { export default function AssignmentLayout() {
return ( return (
<Stack> <Stack>
<Stack.Screen name="assignments" options={{ title: 'Assignments' }} /> <Stack.Screen name="upsertAssignment" options={{ title: 'Create/Edit Assignment' }} />
<Stack.Screen name="createAssignment" options={{ title: "Create Assignment" }} />
<Stack.Screen name="editAssignment" options={{ title: "Edit Assignment" }} />
<Stack.Screen name="viewDetailsAssignment" options={{ title: "Assignment Details" }} /> <Stack.Screen name="viewDetailsAssignment" options={{ title: "Assignment Details" }} />
</Stack> </Stack>
); );

336
app/assignment/assignments.tsx
View File

@@ -1,336 +0,0 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { CheckSubjectCompletion } from '@/lib/progress';
import { supabase } from '@/lib/supabase';
import type { Assignment, Task } from '@/lib/types';
import { Ionicons } from '@expo/vector-icons';
import { Session } from '@supabase/supabase-js';
import { router, Stack, useFocusEffect } from 'expo-router';
import { useCallback, useEffect, useState } from 'react';
import {
Alert,
Pressable,
SectionList,
Text,
View,
} from 'react-native';
export default function Assignments() {
const [assignments, SetAssignments] = useState<Assignment[]>([]);
const [tasksByAssignment, SetTasksByAssignment] = useState<Record<string, Task[]>>({});
const [session, SetSession] = useState<Session | null>(null);
const assignmentSections = [
{
title: 'Upcoming Assignments',
data: assignments.filter((assignment) => !assignment.isCompleted),
emptyMessage: 'No upcoming assignments',
},
{
title: 'Completed Assignments',
data: assignments.filter((assignment) => assignment.isCompleted),
emptyMessage: 'No completed assignments',
},
];
useEffect(() => {
supabase.auth
.getSession()
.then(({ data }) => SetSession(data.session ?? null));
const { data: sub } = supabase.auth.onAuthStateChange(
(_event, newSession) => {
SetSession(newSession);
}
);
return () => sub.subscription.unsubscribe();
}, []);
const GetAssignments = async () => {
const { data: assignmentsData, error: assignmentsError } = await supabase
.from('assignments')
.select('*')
.order('deadline', { ascending: false });
if (assignmentsError) {
Alert.alert('Assignments could not be fetched, please try again');
return;
}
const assignmentRows = assignmentsData ?? [];
SetAssignments(assignmentRows);
if (assignmentRows.length === 0) {
SetTasksByAssignment({});
return;
}
const aIds = assignmentRows.map((assignment) => assignment.aId);
const { data: tasksData, error: tasksError } = await supabase
.from('tasks')
.select('*')
.in('aId', aIds);
if (tasksError) {
Alert.alert('Assignment tasks could not be fetched, please try again');
SetTasksByAssignment({});
return;
}
const groupedTasks: Record<string, Task[]> = {};
for (const task of tasksData ?? []) {
if (!groupedTasks[task.aId]) {
groupedTasks[task.aId] = [];
}
groupedTasks[task.aId].push(task);
}
SetTasksByAssignment(groupedTasks);
};
useFocusEffect(
useCallback(() => {
if (session) {
GetAssignments();
}
}, [session])
);
const DeleteAssignment = async (aId: string, sId: string) => {
Alert.alert(
'Delete Assignment',
'Are you sure you want to delete this assignment?',
[
{
text: 'Cancel',
style: 'cancel',
},
{
text: 'Delete',
style: 'destructive',
onPress: async () => {
const { error } = await supabase
.from('assignments')
.delete()
.eq('aId', aId);
if (error) {
Alert.alert('Assignment could not be deleted, please try again');
return;
}
Alert.alert('Assignment deleted successfully!');
try {
await CheckSubjectCompletion(sId);
} catch {
Alert.alert("Failed to update subject status");
}
GetAssignments();
},
},
]
);
};
return (
<View className="flex-1 bg-app-bg">
<Stack.Screen
options={{
title: 'Assignments',
headerTitleStyle: defaultStyles.title,
headerRight: () => (
<View className="flex-row items-center">
<Pressable
className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
onPress={GetAssignments}
>
<Ionicons name="refresh" size={20} color="#333" />
</Pressable>
<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>
),
}}
/>
<View className="flex-1 px-5 pt-5">
<View className="mb-6">
<Text className="text-3xl font-bold text-text-main">
Assignments
</Text>
<Text className="mt-2 text-base leading-6 text-text-secondary">
Track what is coming up and what you have already finished.
</Text>
</View>
<Pressable
className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
onPress={() => router.push('/assignment/createAssignment')}
>
<Text className="text-base font-bold text-text-inverse">
Create Assignment
</Text>
</Pressable>
<SectionList
sections={assignmentSections}
keyExtractor={(item) => item.aId}
showsVerticalScrollIndicator={false}
stickySectionHeadersEnabled={false}
contentContainerStyle={{
paddingBottom: 32,
}}
renderSectionHeader={({ section: { title, data } }) => (
<View className="mb-3 mt-2 flex-row items-center justify-between">
<Text className="text-lg font-bold text-text-main">
{title}
</Text>
<View className="rounded-full bg-app-subtle px-3 py-1">
<Text className="text-xs font-semibold text-text-muted">
{data.length}
</Text>
</View>
</View>
)}
renderItem={({ item }) => {
const isOwner = session?.user.id === item.uId;
const assignmentTasks = tasksByAssignment[item.aId] ?? [];
const progress = assignmentTasks.length === 0 ? 0 : Math.round((assignmentTasks.filter(task => task.isCompleted).length / assignmentTasks.length) * 100);
return (
<View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
<Pressable
onPress={() =>
router.push({
pathname: '/assignment/viewDetailsAssignment',
params: { aId: item.aId },
})
}
>
<View className="flex-row items-start">
<View
className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
item.isCompleted
? 'border-accent bg-accent'
: 'border-app-border bg-app-subtle'
}`}
>
{item.isCompleted && (
<Text className="text-sm font-bold text-text-inverse">
✓
</Text>
)}
</View>
<View className="flex-1">
<Text
className={`text-base font-bold ${
item.isCompleted
? 'text-text-secondary'
: 'text-text-main'
}`}
>
{item.title}
</Text>
{item.description ? (
<Text
className="mt-1 text-sm leading-5 text-text-muted"
numberOfLines={2}
>
{item.description}
</Text>
) : null}
<View className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
<Text className="text-xs font-semibold text-text-secondary">
Deadline: {item.deadline || 'No deadline'}
</Text>
</View>
<View style={{ marginTop: 10 }}>
<Text style={{ marginBottom: 4 }}>{progress}%</Text>
<View
style={{
width: "100%",
height: 12,
backgroundColor: "#D9D9D9",
borderRadius: 999,
overflow: "hidden",
}}
>
<View
style={{
width: `${progress}%`,
height: "100%",
backgroundColor: "#4CAF50",
}}
/>
</View>
</View>
</View>
</View>
</Pressable>
{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 border border-app-border bg-app-subtle py-3"
onPress={() =>
router.push({
pathname: '/assignment/editAssignment',
params: { aId: item.aId },
})
}
>
<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={() => DeleteAssignment(item.aId, item.sId)}
>
<Text className="text-sm font-bold text-status-danger">
Delete
</Text>
</Pressable>
</View>
)}
</View>
);
}}
renderSectionFooter={({ section }) =>
section.data.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">
{section.emptyMessage}
</Text>
<Text className="mt-1 text-center text-sm text-text-muted">
New assignments will show up here.
</Text>
</View>
) : (
<View className="mb-2" />
)
}
/>
</View>
</View>
);
}

192
app/assignment/editAssignment.tsx
View File

@@ -1,192 +0,0 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { GetAssignmentNotificationId, RemoveAssignmentNotificationId, SaveAssignmentNotificationId } from '@/lib/asyncStorage';
import { CheckSubjectCompletion } from '@/lib/progress';
import { supabase } from '@/lib/supabase';
import type { Assignment } from '@/lib/types';
import * as Notifications from 'expo-notifications';
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 EditAssignment() {
const { aId } = useLocalSearchParams<{ aId: string }>();
const [assignment, SetAssignment] = useState<Assignment | null>(null)
const [isSaving, SetIsSaving] = useState(false);
const ScheduleDeadlineReminder = async (aId: string, title: string, deadline: string) => {
const dl = new Date(deadline);
if (isNaN(dl.getTime())) return null;
const deadlineReminder = new Date(dl.getTime() - 24 * 60 * 60 * 1000);
if (deadlineReminder <= new Date()) return null;
const nId = await Notifications.scheduleNotificationAsync({
content: {
title: 'Assignment deadline coming up',
body: `${title} is due in 24 hours.`,
data: { aId },
},
trigger: {
type: Notifications.SchedulableTriggerInputTypes.DATE,
date: deadlineReminder,
},
});
return nId;
}
const CancelDeadlineReminder = async (aId: string) => {
const nId = await GetAssignmentNotificationId(aId);
if (!nId) return;
await Notifications.cancelScheduledNotificationAsync(nId);
await RemoveAssignmentNotificationId(aId);
}
const GetAssignment = async (aId: string) => {
const { data, error } = await supabase.from("assignments").select("*").eq("aId", aId).single();
if (error) {
Alert.alert("Assignment could not be fetched, please try again");
return;
}
SetAssignment(data ?? null);
}
useFocusEffect(
useCallback(() => {
if (aId) {
GetAssignment(aId);
}
}, [aId])
);
const EditAssignment = async () => {
if (!assignment) return;
if(assignment.title.trim() === '' || assignment.deadline.trim() === '') {
Alert.alert("Title and deadline are required!");
return;
}
const { data: userData, error: userError } = await supabase.auth.getUser();
if(userError || !userData.user) {
router.replace("../createUser");
return;
}
SetIsSaving(true);
const { data: assignmentData, error: dbError } = await supabase.from("assignments").update({
title: assignment.title,
description: assignment.description,
deadline: assignment.deadline,
isCompleted: assignment.isCompleted,
lastChanged: new Date().toISOString(),
uId: userData.user.id,
sId: assignment.sId,
})
.eq("aId", aId)
.select()
.single();
SetIsSaving(false);
if (dbError) {
Alert.alert("Assignment could not be edited, please try again");
return;
}
Alert.alert("Assignment successfully edited!");
if (assignmentData) {
await CancelDeadlineReminder(assignmentData.aId);
if (!assignmentData.isCompleted) {
const nId = await ScheduleDeadlineReminder(assignmentData.aId, assignmentData.title, assignmentData.deadline);
if (nId) {
await SaveAssignmentNotificationId(assignmentData.aId, nId);
}
}
}
if (assignmentData.sId) {
try {
await CheckSubjectCompletion(assignmentData.sId);
} catch {
Alert.alert("Failed to update subject status");
}
}
router.back();
}
return (
<View style={defaultStyles.container}>
<Stack.Screen
options={{
title: "Edit Assignment",
headerTitleStyle: defaultStyles.title
}}
/>
{!assignment && (
<View style={defaultStyles.container}>
<Text style={defaultStyles.title}>Assignment not found</Text>
</View>
)}
{assignment && (
<View style={defaultStyles.container}>
<Text style={defaultStyles.title}>Edit Assignment</Text>
<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={defaultStyles.container}>
<TextInput
style={defaultStyles.inputText}
placeholder="Title"
value={assignment.title}
onChangeText={(text) => SetAssignment(prev => prev ? { ...prev, title: text } : prev)}
/>
<TextInput
style={defaultStyles.inputText}
placeholder="Text"
value={assignment.description}
onChangeText={(text) => SetAssignment(prev => prev ? { ...prev, description: text } : prev)}
/>
<TextInput
style={defaultStyles.inputText}
placeholder="Text"
value={assignment.deadline}
onChangeText={(text) => SetAssignment(prev => prev ? { ...prev, deadline: text } : prev)}
/>
<Pressable
onPress={() => SetAssignment(prev => prev ? { ...prev, isCompleted: !prev.isCompleted } : prev)}
style={defaultStyles.checkboxContainer}
>
<View style={defaultStyles.checkbox}>
{assignment.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
</View>
<Text style={defaultStyles.checkboxLabel}>{assignment.isCompleted ? 'Completed' : 'Not Completed'}</Text>
</Pressable>
<Button title={isSaving ? "Saving..." : "Save"} onPress={EditAssignment} disabled={isSaving} />
{isSaving && (
<ActivityIndicator size="large" />
)}
<Button title="Cancel" onPress={() => router.back()} />
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</View>
)}
</View>
)
}

192
app/assignment/createAssignment.tsx → app/assignment/upsertAssignment.tsx
View File

@@ -4,7 +4,7 @@ import { CheckSubjectCompletion } from '@/lib/progress';
import { supabase } from '@/lib/supabase'; import { supabase } from '@/lib/supabase';
import * as Notifications from 'expo-notifications'; import * as Notifications from 'expo-notifications';
import { router, Stack, useLocalSearchParams } from 'expo-router'; import { router, Stack, useLocalSearchParams } from 'expo-router';
import { useState } from 'react'; import { useEffect, useState } from 'react';
import { import {
ActivityIndicator, ActivityIndicator,
Alert, Alert,
@@ -19,28 +19,74 @@ import {
View, View,
} from 'react-native'; } from 'react-native';
export default function CreateAssignment() { export default function UpsertAssignment() {
const sId = (useLocalSearchParams().sId as string) ?? null; const { aId, sId: routeSId } = useLocalSearchParams<{
aId?: string;
sId?: string;
}>();
const isEditMode = Boolean(aId);
const [title, SetTitle] = useState(''); const [title, SetTitle] = useState('');
const [description, SetDescription] = useState(''); const [description, SetDescription] = useState('');
const [deadline, SetDeadline] = useState(''); const [deadline, SetDeadline] = useState('');
const [isCompleted, SetIsCompleted] = useState(false); const [isCompleted, SetIsCompleted] = useState(false);
const [subjectId, SetSubjectId] = useState<string | null>(routeSId ?? null);
const [isLoading, SetIsLoading] = useState(isEditMode);
const [isSaving, SetIsSaving] = useState(false); const [isSaving, SetIsSaving] = useState(false);
const ScheduleDeadlineReminder = async (aId: string, title: string, deadline: string) => { useEffect(() => {
const dl = new Date(deadline); if (!isEditMode || !aId) {
SetIsLoading(false);
return;
}
if (isNaN(dl.getTime())) return null; const loadAssignment = async () => {
SetIsLoading(true);
const { data, error } = await supabase
.from('assignments')
.select('*')
.eq('aId', aId)
.single();
SetIsLoading(false);
if (error || !data) {
Alert.alert('Assignment could not be loaded, please try again');
router.back();
return;
}
SetTitle(data.title ?? '');
SetDescription(data.description ?? '');
SetDeadline(data.deadline ?? '');
SetIsCompleted(data.isCompleted ?? false);
SetSubjectId(data.sId ?? routeSId ?? null);
};
loadAssignment();
}, [aId, isEditMode, routeSId]);
const ScheduleDeadlineReminder = async (
assignmentId: string,
assignmentTitle: string,
assignmentDeadline: string
) => {
const dl = new Date(assignmentDeadline);
if (Number.isNaN(dl.getTime())) return null;
const deadlineReminder = new Date(dl.getTime() - 24 * 60 * 60 * 1000); const deadlineReminder = new Date(dl.getTime() - 24 * 60 * 60 * 1000);
if (deadlineReminder <= new Date()) return null; if (deadlineReminder <= new Date()) return null;
const nId = await Notifications.scheduleNotificationAsync({ const nId = await Notifications.scheduleNotificationAsync({
content: { content: {
title: 'Assignment deadline coming up', title: 'Assignment deadline coming up',
body: `${title} is due in 24 hours.`, body: `${assignmentTitle} is due in 24 hours.`,
data: { aId }, data: { aId: assignmentId },
}, },
trigger: { trigger: {
type: Notifications.SchedulableTriggerInputTypes.DATE, type: Notifications.SchedulableTriggerInputTypes.DATE,
@@ -49,9 +95,40 @@ export default function CreateAssignment() {
}); });
return nId; return nId;
} };
const CreateAssignment = async () => { const updateDeadlineReminder = async (
assignmentId: string,
assignmentTitle: string,
assignmentDeadline: string,
completed: boolean
) => {
const existingNotificationId =
await AsyncStorage.GetAssignmentNotificationId(assignmentId);
if (existingNotificationId) {
try {
await Notifications.cancelScheduledNotificationAsync(
existingNotificationId
);
} catch {}
await AsyncStorage.RemoveAssignmentNotificationId(assignmentId);
}
if (completed) return;
const nId = await ScheduleDeadlineReminder(
assignmentId,
assignmentTitle,
assignmentDeadline
);
if (nId) {
await AsyncStorage.SaveAssignmentNotificationId(assignmentId, nId);
}
};
const handleSubmit = async () => {
if (title.trim() === '') { if (title.trim() === '') {
Alert.alert('Title is required!'); Alert.alert('Title is required!');
return; return;
@@ -60,54 +137,70 @@ export default function CreateAssignment() {
const { data: userData, error: userError } = await supabase.auth.getUser(); const { data: userData, error: userError } = await supabase.auth.getUser();
if (userError || !userData.user) { if (userError || !userData.user) {
router.replace('../createUser'); router.replace('/login');
return;
}
if (!subjectId) {
Alert.alert('Missing subject', 'This assignment is not linked to a subject.');
return; return;
} }
SetIsSaving(true); SetIsSaving(true);
const { data: assignmentData, error: dbError } = await supabase.from('assignments').insert({ const payload = {
title: title.trim(), title: title.trim(),
description: description.trim(), description: description.trim(),
deadline: deadline.trim(), deadline: deadline.trim(),
isCompleted, isCompleted,
lastChanged: new Date().toISOString(), lastChanged: new Date().toISOString(),
uId: userData.user.id, uId: userData.user.id,
sId, sId: subjectId,
}) };
.select()
.single();
if (dbError) { const result =
isEditMode && aId
? await supabase
.from('assignments')
.update(payload)
.eq('aId', aId)
.select()
.single()
: await supabase.from('assignments').insert(payload).select().single();
if (result.error || !result.data) {
SetIsSaving(false); SetIsSaving(false);
Alert.alert('Assignment could not be created, please try again'); Alert.alert(
isEditMode
? 'Assignment could not be updated, please try again'
: 'Assignment could not be created, please try again'
);
return; return;
} }
Alert.alert('Assignment successfully created!'); const savedAssignment = result.data;
if (!isCompleted && assignmentData) { await updateDeadlineReminder(
const nId = await ScheduleDeadlineReminder(assignmentData.aId, assignmentData.title, assignmentData.deadline); savedAssignment.aId,
savedAssignment.title,
savedAssignment.deadline,
savedAssignment.isCompleted
);
if (nId) { try {
await AsyncStorage.SaveAssignmentNotificationId(assignmentData.aId, nId); await CheckSubjectCompletion(subjectId);
} } catch {
Alert.alert('Failed to update subject status');
} }
if (sId) {
try {
await CheckSubjectCompletion(sId);
} catch {
Alert.alert("Failed to update subject status");
}
}
SetTitle('');
SetDescription('');
SetDeadline('');
SetIsCompleted(false);
SetIsSaving(false); SetIsSaving(false);
Alert.alert(
isEditMode
? 'Assignment successfully updated!'
: 'Assignment successfully created!'
);
router.back(); router.back();
}; };
@@ -116,11 +209,19 @@ export default function CreateAssignment() {
const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary'; 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 ( return (
<> <>
<Stack.Screen <Stack.Screen
options={{ options={{
title: 'Create Assignment', title: isEditMode ? 'Edit Assignment' : 'Create Assignment',
headerTitleStyle: defaultStyles.title, headerTitleStyle: defaultStyles.title,
}} }}
/> />
@@ -142,10 +243,12 @@ export default function CreateAssignment() {
> >
<View className="mb-6"> <View className="mb-6">
<Text className="text-3xl font-bold text-text-main"> <Text className="text-3xl font-bold text-text-main">
Create Assignment {isEditMode ? 'Edit Assignment' : 'Create Assignment'}
</Text> </Text>
<Text className="mt-2 text-base leading-6 text-text-secondary"> <Text className="mt-2 text-base leading-6 text-text-secondary">
Add a new assignment to keep your subject organized. {isEditMode
? 'Update this assignment and keep your subject organized.'
: 'Add a new assignment to keep your subject organized.'}
</Text> </Text>
</View> </View>
@@ -155,6 +258,7 @@ export default function CreateAssignment() {
<TextInput <TextInput
className={inputClassName} className={inputClassName}
placeholder="Enter assignment title" placeholder="Enter assignment title"
placeholderTextColor="#9CA3AF"
value={title} value={title}
onChangeText={SetTitle} onChangeText={SetTitle}
returnKeyType="next" returnKeyType="next"
@@ -166,6 +270,7 @@ export default function CreateAssignment() {
<TextInput <TextInput
className={`${inputClassName} min-h-28`} className={`${inputClassName} min-h-28`}
placeholder="Add a short description" placeholder="Add a short description"
placeholderTextColor="#9CA3AF"
value={description} value={description}
onChangeText={SetDescription} onChangeText={SetDescription}
multiline multiline
@@ -178,6 +283,7 @@ export default function CreateAssignment() {
<TextInput <TextInput
className={inputClassName} className={inputClassName}
placeholder="YYYY-MM-DD" placeholder="YYYY-MM-DD"
placeholderTextColor="#9CA3AF"
value={deadline} value={deadline}
onChangeText={SetDeadline} onChangeText={SetDeadline}
autoCapitalize="none" autoCapitalize="none"
@@ -222,19 +328,19 @@ export default function CreateAssignment() {
className={`h-14 items-center justify-center rounded-2xl ${ className={`h-14 items-center justify-center rounded-2xl ${
isSaving ? 'bg-accent-disabled' : 'bg-accent' isSaving ? 'bg-accent-disabled' : 'bg-accent'
}`} }`}
onPress={CreateAssignment} onPress={handleSubmit}
disabled={isSaving} disabled={isSaving}
> >
{isSaving ? ( {isSaving ? (
<View className="flex-row items-center"> <View className="flex-row items-center">
<ActivityIndicator size="small" /> <ActivityIndicator size="small" />
<Text className="ml-3 text-base font-bold text-text-inverse"> <Text className="ml-3 text-base font-bold text-text-inverse">
Creating... {isEditMode ? 'Saving...' : 'Creating...'}
</Text> </Text>
</View> </View>
) : ( ) : (
<Text className="text-base font-bold text-text-inverse"> <Text className="text-base font-bold text-text-inverse">
Create Assignment {isEditMode ? 'Save Changes' : 'Create Assignment'}
</Text> </Text>
)} )}
</Pressable> </Pressable>

10
app/assignment/viewDetailsAssignment.tsx
View File

@@ -1,4 +1,4 @@
import { formatDateTime } from '@/lib/date'; import { formatDate, formatDateTime } from '@/lib/date';
import { CheckAssignmentCompletion, CheckSubjectCompletion } from '@/lib/progress'; import { CheckAssignmentCompletion, CheckSubjectCompletion } from '@/lib/progress';
import { getSubjectColorSet, type SubjectColor } from '@/lib/subjectColors'; import { getSubjectColorSet, type SubjectColor } from '@/lib/subjectColors';
import { supabase } from '@/lib/supabase'; import { supabase } from '@/lib/supabase';
@@ -288,7 +288,7 @@ export default function ViewDetailsAssignment() {
<View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1"> <View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1">
<Text className="text-xs font-semibold text-text-secondary"> <Text className="text-xs font-semibold text-text-secondary">
Deadline: {formatDateTime(assignment.deadline) || 'No deadline'} Deadline: {formatDate(assignment.deadline) || 'No deadline'}
</Text> </Text>
</View> </View>
</View> </View>
@@ -332,7 +332,7 @@ export default function ViewDetailsAssignment() {
className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3" className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
onPress={() => onPress={() =>
router.push({ router.push({
pathname: '/assignment/editAssignment', pathname: '/assignment/upsertAssignment',
params: { aId: assignment.aId }, params: { aId: assignment.aId },
}) })
} }
@@ -385,7 +385,7 @@ export default function ViewDetailsAssignment() {
className="mb-4 rounded-3xl bg-app-surface p-4" className="mb-4 rounded-3xl bg-app-surface p-4"
style={{ style={{
borderWidth: 1, borderWidth: 1,
borderColor: colorSet.soft, borderColor: colorSet.strong,
}} }}
> >
<Pressable <Pressable
@@ -459,7 +459,7 @@ export default function ViewDetailsAssignment() {
}} }}
renderSectionFooter={({ section }) => renderSectionFooter={({ section }) =>
section.data.length === 0 ? ( section.data.length === 0 ? (
<View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5"> <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"> <Text className="text-center text-base font-semibold text-text-secondary">
{section.emptyMessage} {section.emptyMessage}
</Text> </Text>

33
app/subject/viewDetailsSubject.tsx
View File

@@ -86,6 +86,20 @@ export default function ViewDetailsSubject() {
}, [session, sId]) }, [session, sId])
); );
useEffect(() => {
const test = async () => {
try {
const { data, error } = await supabase.from('subjects').select('*').limit(1);
console.log('test data:', data);
console.log('test error:', error);
} catch (err) {
console.log('test crashed:', err);
}
};
test();
}, []);
const DeleteSubject = async (subjectId: string) => { const DeleteSubject = async (subjectId: string) => {
Alert.alert( Alert.alert(
'Delete Subject', 'Delete Subject',
@@ -348,7 +362,7 @@ export default function ViewDetailsSubject() {
className="mb-6 mt-5 h-14 items-center justify-center rounded-2xl bg-accent" className="mb-6 mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
onPress={() => onPress={() =>
router.push({ router.push({
pathname: '/assignment/createAssignment', pathname: '/assignment/upsertAssignment',
params: { sId: subject.sId }, params: { sId: subject.sId },
}) })
} }
@@ -374,7 +388,12 @@ export default function ViewDetailsSubject() {
const isOwner = session?.user.id === item.uId; const isOwner = session?.user.id === item.uId;
return ( return (
<View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4"> <View
className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4"
style={{
borderColor: colorSet.strong,
}}
>
<Pressable <Pressable
onPress={() => onPress={() =>
router.push({ router.push({
@@ -406,14 +425,6 @@ export default function ViewDetailsSubject() {
Deadline: {formatDate(item.deadline)} Deadline: {formatDate(item.deadline)}
</Text> </Text>
</View> </View>
<View className="ml-3">
<View className="rounded-full bg-app-subtle px-3 py-1">
<Text className="text-xs font-semibold text-text-secondary">
{item.isCompleted ? 'Completed' : 'Upcoming'}
</Text>
</View>
</View>
</View> </View>
</Pressable> </Pressable>
@@ -423,7 +434,7 @@ export default function ViewDetailsSubject() {
className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3" className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
onPress={() => onPress={() =>
router.push({ router.push({
pathname: '/assignment/editAssignment', pathname: '/assignment/upsertAssignment',
params: { aId: item.aId }, params: { aId: item.aId },
}) })
} }

99
app/task/viewDetailsTask.tsx
View File

@@ -1,4 +1,6 @@
import { formatDateTime } from '@/lib/date';
import { CheckAssignmentCompletion } from '@/lib/progress'; import { CheckAssignmentCompletion } from '@/lib/progress';
import { getSubjectColorSet, type SubjectColor } from '@/lib/subjectColors';
import { supabase } from '@/lib/supabase'; import { supabase } from '@/lib/supabase';
import type { Task } from '@/lib/types'; import type { Task } from '@/lib/types';
import { Session } from '@supabase/supabase-js'; import { Session } from '@supabase/supabase-js';
@@ -8,8 +10,14 @@ import { Alert, Pressable, Text, View } from 'react-native';
export default function ViewDetailsTask() { export default function ViewDetailsTask() {
const { tId } = useLocalSearchParams<{ tId: string }>(); const { tId } = useLocalSearchParams<{ tId: string }>();
const [task, SetTask] = useState<Task | null>(null); const [task, SetTask] = useState<Task | null>(null);
const [session, SetSession] = useState<Session | null>(null); const [session, SetSession] = useState<Session | null>(null);
const [contextMeta, setContextMeta] = useState({
subjectTitle: 'No Subject',
assignmentTitle: 'No Assignment',
subjectColor: 'slate' as SubjectColor,
});
useEffect(() => { useEffect(() => {
supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null)); supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null));
@@ -28,12 +36,55 @@ export default function ViewDetailsTask() {
.eq('tId', taskId) .eq('tId', taskId)
.single(); .single();
if (error) { if (error || !data) {
console.log('GetTask error:', error);
Alert.alert('Task could not be fetched, please try again'); Alert.alert('Task could not be fetched, please try again');
return; 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) {
console.log('GetTaskAssignment error:', assignmentError);
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) {
console.log('GetTaskSubject error:', subjectError);
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( useFocusEffect(
@@ -85,6 +136,8 @@ export default function ViewDetailsTask() {
); );
}; };
const colorSet = getSubjectColorSet(contextMeta.subjectColor);
if (!task) { if (!task) {
return ( return (
<View className="flex-1 bg-app-bg px-5 pt-6"> <View className="flex-1 bg-app-bg px-5 pt-6">
@@ -104,7 +157,13 @@ export default function ViewDetailsTask() {
}} }}
/> />
<View className="rounded-3xl border border-app-border bg-app-surface p-5"> <View
className="rounded-3xl bg-app-surface p-5"
style={{
borderWidth: 1,
borderColor: colorSet.strong,
}}
>
<Text className="text-2xl font-bold text-text-main"> <Text className="text-2xl font-bold text-text-main">
Task not found Task not found
</Text> </Text>
@@ -145,14 +204,20 @@ export default function ViewDetailsTask() {
}} }}
/> />
<View className="rounded-3xl border border-app-border bg-app-surface p-5"> <View
className="rounded-3xl bg-app-surface p-5"
style={{
borderWidth: 1,
borderColor: colorSet.strong,
}}
>
<View className="flex-row items-start"> <View className="flex-row items-start">
<View <View
className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${ className="mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2"
task.isCompleted style={{
? 'border-accent bg-accent' borderColor: task.isCompleted ? colorSet.strong : '#DDD6C8',
: 'border-app-border bg-app-subtle' backgroundColor: task.isCompleted ? colorSet.strong : '#EFEBE3',
}`} }}
> >
{task.isCompleted && ( {task.isCompleted && (
<Text className="text-sm font-bold text-text-inverse">✓</Text> <Text className="text-sm font-bold text-text-inverse">✓</Text>
@@ -179,15 +244,27 @@ export default function ViewDetailsTask() {
)} )}
<View className="mt-4 flex-row flex-wrap"> <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"> <View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1">
<Text className="text-xs font-semibold text-text-secondary"> <Text className="text-xs font-semibold text-text-secondary">
{task.isCompleted ? 'Completed' : 'In progress'} {contextMeta.assignmentTitle}
</Text> </Text>
</View> </View>
</View> </View>
<Text className="mt-2 text-sm text-text-muted"> <Text className="mt-2 text-sm text-text-muted">
Last changed: {task.lastChanged} Last changed: {formatDateTime(task.lastChanged)}
</Text> </Text>
</View> </View>
</View> </View>