Merge branch 'tailwind'
This commit is contained in:
Fhj0607
@@ -56,14 +56,15 @@ export default function TabLayout() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!session) {
|
if (!session) {
|
||||||
return <Redirect href="/createUser" />;
|
return <Redirect href="/login" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs>
|
<Tabs
|
||||||
<Tabs.Screen name="index" options={{title: "Index"}} />
|
screenOptions={{
|
||||||
<Tabs.Screen name="tasks" options={{title: "Tasks"}} />
|
headerShown: true,
|
||||||
<Tabs.Screen name="assignments" options={{title: "Assignments"}} />
|
}}>
|
||||||
|
<Tabs.Screen name="index" options={{title: 'Dashboard', tabBarLabel: 'Dashboard', }} />
|
||||||
<Tabs.Screen name="subjects" options={{title: "Subjects"}} />
|
<Tabs.Screen name="subjects" options={{title: "Subjects"}} />
|
||||||
<Tabs.Screen name="timer" options={{title: "Timer"}} />
|
<Tabs.Screen name="timer" options={{title: "Timer"}} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,40 +1,21 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
import { SUBJECT_COLORS } from '@/lib/subjectColors';
|
||||||
import { supabase } from '@/lib/supabase';
|
import { supabase } from '@/lib/supabase';
|
||||||
import type { Assignment, Subject } from '@/lib/types';
|
import { Subject } from '@/lib/types';
|
||||||
import { Ionicons } from '@expo/vector-icons';
|
|
||||||
import { Session } from '@supabase/supabase-js';
|
import { Session } from '@supabase/supabase-js';
|
||||||
import { router, Stack, useFocusEffect } from 'expo-router';
|
import { router, Stack, useFocusEffect } from 'expo-router';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import {
|
import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
|
||||||
Alert,
|
|
||||||
Pressable,
|
import type { SubjectColor } from '@/lib/subjectColors';
|
||||||
SectionList,
|
|
||||||
Text,
|
|
||||||
View,
|
|
||||||
} from 'react-native';
|
|
||||||
|
|
||||||
export default function Subjects() {
|
export default function Subjects() {
|
||||||
const [subjects, SetSubjects] = useState<Subject[]>([]);
|
const [subjects, SetSubjects] = useState<Subject[]>([]);
|
||||||
const [assignmentsBySubject, SetAssignmentsBySubject] = useState<Record<string, Assignment[]>>({});
|
|
||||||
const [session, SetSession] = useState<Session | null>(null);
|
const [session, SetSession] = useState<Session | null>(null);
|
||||||
|
|
||||||
const subjectSections = [
|
|
||||||
{
|
|
||||||
title: 'Active Subjects',
|
|
||||||
data: subjects.filter((subject) => subject.isActive),
|
|
||||||
emptyMessage: 'No active subjects',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Inactive Subjects',
|
|
||||||
data: subjects.filter((subject) => !subject.isActive),
|
|
||||||
emptyMessage: 'No inactive subjects',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
supabase.auth
|
supabase.auth.getSession().then(({ data }) => {
|
||||||
.getSession()
|
SetSession(data.session ?? null);
|
||||||
.then(({ data }) => SetSession(data.session ?? null));
|
});
|
||||||
|
|
||||||
const { data: sub } = supabase.auth.onAuthStateChange(
|
const { data: sub } = supabase.auth.onAuthStateChange(
|
||||||
(_event, newSession) => {
|
(_event, newSession) => {
|
||||||
@@ -46,47 +27,20 @@ export default function Subjects() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const GetSubjects = async () => {
|
const GetSubjects = async () => {
|
||||||
const { data: subjectsData, error: subjectsError } = await supabase
|
if (!session?.user.id) return;
|
||||||
|
|
||||||
|
const { data, error } = await supabase
|
||||||
.from('subjects')
|
.from('subjects')
|
||||||
.select('*')
|
.select('*')
|
||||||
|
.eq('uId', session.user.id)
|
||||||
.order('lastChanged', { ascending: false });
|
.order('lastChanged', { ascending: false });
|
||||||
|
|
||||||
if (subjectsError) {
|
if (error) {
|
||||||
Alert.alert('Subjects could not be fetched, please try again');
|
Alert.alert('Subjects could not be fetched, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const subjectRows = subjectsData ?? [];
|
SetSubjects((data as Subject[]) ?? []);
|
||||||
SetSubjects(subjectsData ?? []);
|
|
||||||
|
|
||||||
if (subjectRows.length === 0) {
|
|
||||||
SetAssignmentsBySubject({});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sIds = subjectRows.map((subject) => subject.sId);
|
|
||||||
|
|
||||||
const { data: assignmentsData, error: assignmentsError } = await supabase
|
|
||||||
.from('assignments')
|
|
||||||
.select('*')
|
|
||||||
.in('sId', sIds);
|
|
||||||
|
|
||||||
if (assignmentsError) {
|
|
||||||
Alert.alert('Subject assignments could not be fetched, please try again');
|
|
||||||
SetAssignmentsBySubject({});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const groupedAssignments: Record<string, Assignment[]> = {};
|
|
||||||
|
|
||||||
for (const assignment of assignmentsData ?? []) {
|
|
||||||
if (!groupedAssignments[assignment.sId]) {
|
|
||||||
groupedAssignments[assignment.sId] = [];
|
|
||||||
}
|
|
||||||
groupedAssignments[assignment.sId].push(assignment);
|
|
||||||
}
|
|
||||||
|
|
||||||
SetAssignmentsBySubject(groupedAssignments);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
@@ -97,232 +51,131 @@ export default function Subjects() {
|
|||||||
}, [session])
|
}, [session])
|
||||||
);
|
);
|
||||||
|
|
||||||
const DeleteSubject = async (sId: string) => {
|
|
||||||
Alert.alert(
|
|
||||||
'Delete Subject',
|
|
||||||
'Are you sure you want to delete this subject?',
|
|
||||||
[
|
|
||||||
{
|
|
||||||
text: 'Cancel',
|
|
||||||
style: 'cancel',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Delete',
|
|
||||||
style: 'destructive',
|
|
||||||
onPress: async () => {
|
|
||||||
const { error } = await supabase
|
|
||||||
.from('subjects')
|
|
||||||
.delete()
|
|
||||||
.eq('sId', sId);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
Alert.alert('Subject could not be deleted, please try again');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Alert.alert('Subject deleted successfully!');
|
|
||||||
GetSubjects();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="flex-1 bg-app-bg">
|
<View className="flex-1 bg-app-bg">
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
title: 'Subjects',
|
title: 'Subjects',
|
||||||
headerTitleStyle: defaultStyles.title,
|
|
||||||
headerRight: () => (
|
headerRight: () => (
|
||||||
<View className="flex-row items-center">
|
<Pressable
|
||||||
<Pressable
|
className="rounded-full bg-app-subtle px-4 py-2"
|
||||||
className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
|
onPress={async () => await supabase.auth.signOut()}
|
||||||
onPress={GetSubjects}
|
>
|
||||||
>
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
<Ionicons name="refresh" size={20} color="#333" />
|
Logout
|
||||||
</Pressable>
|
</Text>
|
||||||
|
</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">
|
<ScrollView
|
||||||
|
className="flex-1"
|
||||||
|
contentContainerStyle={{
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingBottom: 32,
|
||||||
|
}}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
>
|
||||||
<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">Subjects</Text>
|
||||||
Subjects
|
|
||||||
</Text>
|
|
||||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||||
Organize your study work by subject, then break it into assignments
|
Pick a subject to manage assignments and tasks.
|
||||||
and tasks.
|
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</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 colorKey: SubjectColor = subject.color ?? 'slate';
|
||||||
|
const colorSet = SUBJECT_COLORS[colorKey];
|
||||||
|
|
||||||
|
const firstLetter =
|
||||||
|
subject.title?.trim().charAt(0).toUpperCase() || '?';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Pressable
|
||||||
|
key={subject.sId}
|
||||||
|
className="mb-4 rounded-3xl bg-app-surface p-4"
|
||||||
|
style={{
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colorSet.strong,
|
||||||
|
}}
|
||||||
|
onPress={() =>
|
||||||
|
router.push({
|
||||||
|
pathname: '/subject/viewDetailsSubject',
|
||||||
|
params: { sId: subject.sId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View className="flex-row items-center">
|
||||||
|
<View
|
||||||
|
className="mr-3 h-12 w-12 items-center justify-center rounded-2xl"
|
||||||
|
style={{ backgroundColor: colorSet.soft }}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
className="text-base font-bold"
|
||||||
|
style={{ color: colorSet.strong }}
|
||||||
|
>
|
||||||
|
{firstLetter}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="flex-1">
|
||||||
|
<Text
|
||||||
|
className="text-base font-bold text-text-main"
|
||||||
|
numberOfLines={1}
|
||||||
|
>
|
||||||
|
{subject.title}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Text
|
||||||
|
className="mt-1 text-sm leading-5 text-text-secondary"
|
||||||
|
numberOfLines={2}
|
||||||
|
>
|
||||||
|
{subject.description || 'No description added.'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="ml-3">
|
||||||
|
<View
|
||||||
|
className="rounded-full px-3 py-1"
|
||||||
|
style={{ backgroundColor: colorSet.soft }}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
className="text-xs font-semibold"
|
||||||
|
style={{ color: colorSet.strong }}
|
||||||
|
>
|
||||||
|
{subject.isActive ? 'Active' : 'Inactive'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Pressable>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
<Pressable
|
<Pressable
|
||||||
className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
|
className="mt-2 h-14 items-center justify-center rounded-2xl bg-accent"
|
||||||
onPress={() => router.push('/subject/createSubject')}
|
onPress={() => router.push('/subject/upsertSubject')}
|
||||||
>
|
>
|
||||||
<Text className="text-base font-bold text-text-inverse">
|
<Text className="text-base font-bold text-text-inverse">
|
||||||
Create Subject
|
Create Subject
|
||||||
</Text>
|
</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
</ScrollView>
|
||||||
<SectionList
|
|
||||||
sections={subjectSections}
|
|
||||||
keyExtractor={(item) => item.sId}
|
|
||||||
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 subjectAssignments = assignmentsBySubject[item.sId] ?? [];
|
|
||||||
const progress = subjectAssignments.length === 0 ? 0 : Math.round((subjectAssignments.filter(assignment => assignment.isCompleted).length / subjectAssignments.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: '/subject/viewDetailsSubject',
|
|
||||||
params: { sId: item.sId },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<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.isActive
|
|
||||||
? 'border-accent bg-accent'
|
|
||||||
: 'border-app-border bg-app-subtle'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{item.isActive && (
|
|
||||||
<Text className="text-sm font-bold text-text-inverse">
|
|
||||||
✓
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View className="flex-1">
|
|
||||||
<Text
|
|
||||||
className={`text-base font-bold ${
|
|
||||||
item.isActive
|
|
||||||
? 'text-text-main'
|
|
||||||
: 'text-text-secondary'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{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">
|
|
||||||
{item.isActive ? 'Active' : 'Inactive'}
|
|
||||||
</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: '/subject/editSubject',
|
|
||||||
params: { sId: item.sId },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<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={() => DeleteSubject(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">
|
|
||||||
Subjects you create will show up here.
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<View className="mb-2" />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -3,8 +3,7 @@ import { Stack } from "expo-router";
|
|||||||
export default function AssignmentLayout() {
|
export default function AssignmentLayout() {
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack>
|
||||||
<Stack.Screen name="createAssignment" options={{ title: "Create Assignment" }} />
|
<Stack.Screen name="upsertAssignment" options={{ title: 'Create/Edit 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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -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>
|
||||||
@@ -1,17 +1,23 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
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 { supabase } from '@/lib/supabase';
|
import { supabase } from '@/lib/supabase';
|
||||||
import type { Assignment, Task } from '@/lib/types';
|
import type { Assignment, Task } from '@/lib/types';
|
||||||
import { Session } from '@supabase/supabase-js';
|
import { Session } from '@supabase/supabase-js';
|
||||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
|
import { Alert, Pressable, SectionList, Text, View } from "react-native";
|
||||||
|
|
||||||
|
|
||||||
export default function ViewDetailsAssignment() {
|
export default function ViewDetailsAssignment() {
|
||||||
const { aId } = useLocalSearchParams<{ aId: string }>();
|
const { aId } = useLocalSearchParams<{ aId: string }>();
|
||||||
const [assignment, SetAssignment] = useState<Assignment | null>(null)
|
const [assignment, SetAssignment] = useState<Assignment | null>(null);
|
||||||
const [tasks, SetTasks] = useState<Task[]>([])
|
const [tasks, SetTasks] = useState<Task[]>([]);
|
||||||
const [session, SetSession] = useState<Session | null>(null)
|
const [session, SetSession] = useState<Session | null>(null);
|
||||||
|
const [subjectMeta, setSubjectMeta] = useState({
|
||||||
|
title: 'No Subject',
|
||||||
|
color: 'slate' as SubjectColor,
|
||||||
|
});
|
||||||
|
|
||||||
const taskSections = [
|
const taskSections = [
|
||||||
{ title: "Upcoming Tasks", data: tasks.filter((task) => !task.isCompleted), emptyMessage: "No upcoming tasks" },
|
{ title: "Upcoming Tasks", data: tasks.filter((task) => !task.isCompleted), emptyMessage: "No upcoming tasks" },
|
||||||
@@ -27,16 +33,43 @@ export default function ViewDetailsAssignment() {
|
|||||||
},
|
},
|
||||||
[])
|
[])
|
||||||
|
|
||||||
const GetAssignment = async (aId: string) => {
|
const GetAssignment = async (assignmentId: string) => {
|
||||||
const { data, error } = await supabase.from("assignments").select("*").eq("aId", aId).single();
|
const { data, error } = await supabase
|
||||||
|
.from('assignments')
|
||||||
|
.select('*')
|
||||||
|
.eq('aId', assignmentId)
|
||||||
|
.single();
|
||||||
|
|
||||||
if (error) {
|
if (error || !data) {
|
||||||
Alert.alert("Assignment could not be fetched, please try again");
|
console.log('GetAssignment error:', error);
|
||||||
|
Alert.alert('Assignment could not be fetched, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
SetAssignment(data ?? null);
|
SetAssignment(data);
|
||||||
}
|
|
||||||
|
if (data.sId) {
|
||||||
|
const { data: subjectData, error: subjectError } = await supabase
|
||||||
|
.from('subjects')
|
||||||
|
.select('title, color')
|
||||||
|
.eq('sId', data.sId)
|
||||||
|
.single();
|
||||||
|
|
||||||
|
if (subjectError || !subjectData) {
|
||||||
|
console.log('GetSubjectMeta error:', subjectError);
|
||||||
|
setSubjectMeta({
|
||||||
|
title: 'Unknown Subject',
|
||||||
|
color: 'slate'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubjectMeta({
|
||||||
|
title: subjectData.title ?? 'Unknown Subject',
|
||||||
|
color: (subjectData.color as SubjectColor | undefined) ?? 'slate'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const GetTasks = async (aId: string) => {
|
const GetTasks = async (aId: string) => {
|
||||||
const { data, error } = await supabase.from("tasks").select("*").eq("aId", aId);
|
const { data, error } = await supabase.from("tasks").select("*").eq("aId", aId);
|
||||||
@@ -134,115 +167,311 @@ export default function ViewDetailsAssignment() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const progress = tasks.length === 0 ? 0 : Math.round((tasks.filter(task => task.isCompleted).length / tasks.length) * 100);
|
const colorSet = getSubjectColorSet(subjectMeta.color);
|
||||||
|
|
||||||
|
const completedTasks = tasks.filter((task) => task.isCompleted).length;
|
||||||
|
const totalTasks = tasks.length;
|
||||||
|
const remainingTasks = totalTasks - completedTasks;
|
||||||
|
|
||||||
|
const progress =
|
||||||
|
totalTasks === 0
|
||||||
|
? 0
|
||||||
|
: Math.round((completedTasks / totalTasks) * 100);
|
||||||
|
|
||||||
|
if (!assignment) {
|
||||||
|
return (
|
||||||
|
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||||
|
<Stack.Screen
|
||||||
|
options={{
|
||||||
|
title: 'Details',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<View
|
||||||
|
className="rounded-3xl bg-app-surface p-5"
|
||||||
|
style={{
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colorSet.strong,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text className="text-2xl font-bold text-text-main">
|
||||||
|
Assignment not found
|
||||||
|
</Text>
|
||||||
|
<Text className="mt-2 text-base text-text-secondary">
|
||||||
|
The assignment 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={defaultStyles.container}>
|
<View className="flex-1 bg-app-bg">
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
title: "Details",
|
title: 'Assignment Details',
|
||||||
headerTitleStyle: defaultStyles.title,
|
headerRight: () => (
|
||||||
headerLeft: () => {
|
<Pressable
|
||||||
return (
|
className="rounded-full bg-app-subtle px-4 py-2"
|
||||||
<View style={defaultStyles.buttonContainer}>
|
onPress={async () => await supabase.auth.signOut()}
|
||||||
<Button title="Back" onPress={router.back} />
|
>
|
||||||
</View>
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
)
|
Logout
|
||||||
},
|
</Text>
|
||||||
headerRight: () => {
|
</Pressable>
|
||||||
return (
|
),
|
||||||
<View style={defaultStyles.buttonContainer}>
|
|
||||||
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{!assignment && (
|
<SectionList
|
||||||
<View style={defaultStyles.container}>
|
className="flex-1"
|
||||||
<Text style={defaultStyles.title}>Assignment not found</Text>
|
contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 20, paddingBottom: 32 }}
|
||||||
</View>
|
sections={taskSections}
|
||||||
)}
|
keyExtractor={(item) => item.tId}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
{assignment && (
|
stickySectionHeadersEnabled={false}
|
||||||
<View style={defaultStyles.container}>
|
ListHeaderComponent={
|
||||||
<View style={defaultStyles.container}>
|
<View>
|
||||||
<Text style={defaultStyles.title}>{assignment.title}</Text>
|
<View
|
||||||
<Text style={defaultStyles.body}>{assignment.description}</Text>
|
className="rounded-3xl bg-app-surface p-5"
|
||||||
<Text style={defaultStyles.body}>{assignment.deadline}</Text>
|
style={{
|
||||||
<View style={defaultStyles.checkbox}>
|
borderWidth: 1,
|
||||||
{assignment.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
borderColor: colorSet.strong,
|
||||||
</View>
|
}}
|
||||||
<Text style={defaultStyles.body}>{assignment.lastChanged}</Text>
|
>
|
||||||
<View style={{ marginTop: 10 }}>
|
<View className="flex-row items-start">
|
||||||
<Text style={{ marginBottom: 4 }}>{progress}%</Text>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
height: 12,
|
|
||||||
backgroundColor: "#D9D9D9",
|
|
||||||
borderRadius: 999,
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View
|
<View
|
||||||
|
className="mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2"
|
||||||
style={{
|
style={{
|
||||||
width: `${progress}%`,
|
borderColor: assignment.isCompleted ? colorSet.strong : '#DDD6C8',
|
||||||
height: "100%",
|
backgroundColor: assignment.isCompleted ? colorSet.strong : '#EFEBE3',
|
||||||
backgroundColor: "#4CAF50",
|
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{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}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{assignment.description ? (
|
||||||
|
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||||
|
{assignment.description}
|
||||||
|
</Text>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<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 }}
|
||||||
|
>
|
||||||
|
{subjectMeta.title}
|
||||||
|
</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">
|
||||||
|
Deadline: {formatDate(assignment.deadline) || 'No deadline'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="mt-5">
|
||||||
|
<View className="mb-2 flex-row items-center justify-between">
|
||||||
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
|
Task Progress
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Text className="text-sm font-bold text-text-main">
|
||||||
|
{completedTasks}/{totalTasks}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="h-3 overflow-hidden rounded-full bg-app-subtle">
|
||||||
|
<View
|
||||||
|
className="h-full rounded-full"
|
||||||
|
style={{
|
||||||
|
width: `${progress}%`,
|
||||||
|
backgroundColor: colorSet.strong,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text className="mt-2 text-xs font-medium text-text-secondary">
|
||||||
|
{remainingTasks === 0
|
||||||
|
? 'All tasks complete'
|
||||||
|
: `${remainingTasks} task${remainingTasks === 1 ? '' : 's'} remaining`}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text className="mt-4 text-sm text-text-muted">
|
||||||
|
Last changed: {formatDateTime(assignment.lastChanged)}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<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: '/assignment/upsertAssignment',
|
||||||
|
params: { aId: assignment.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(assignment.aId)}
|
||||||
|
>
|
||||||
|
<Text className="text-sm font-bold text-status-danger">
|
||||||
|
Delete
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: assignment.aId }})} />
|
<Pressable
|
||||||
<Button title="Delete" onPress={() => DeleteAssignment(assignment.aId)} />
|
className="mb-6 mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
|
||||||
|
onPress={() =>
|
||||||
|
router.push({
|
||||||
|
pathname: '/task/createTask',
|
||||||
|
params: { aId: assignment.aId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text className="text-base font-bold text-text-inverse">
|
||||||
|
Create Task
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
|
}
|
||||||
|
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 style={defaultStyles.buttonContainer}>
|
<View className="rounded-full bg-app-subtle px-3 py-1">
|
||||||
<Button title="Create Task" onPress={() => router.push({pathname: "/task/createTask", params: { aId: assignment.aId }})} />
|
<Text className="text-xs font-semibold text-text-muted">
|
||||||
|
{data.length}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
)}
|
||||||
|
renderItem={({ item }) => {
|
||||||
|
const isOwner = session?.user.id === item.uId;
|
||||||
|
|
||||||
<SectionList
|
return (
|
||||||
sections={taskSections}
|
<View
|
||||||
keyExtractor={(item) => item.tId}
|
className="mb-4 rounded-3xl bg-app-surface p-4"
|
||||||
renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
|
style={{
|
||||||
renderItem={({ item }) => {
|
borderWidth: 1,
|
||||||
const isOwner = session?.user.id === item.uId;
|
borderColor: colorSet.strong,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Pressable
|
||||||
|
onPress={() =>
|
||||||
|
router.push({
|
||||||
|
pathname: '/task/viewDetailsTask',
|
||||||
|
params: { tId: item.tId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
return (
|
<View className="flex-1">
|
||||||
<View style={defaultStyles.container}>
|
<Text
|
||||||
<Pressable style={defaultStyles.container} onPress={() => router.push({pathname: "/task/viewDetailsTask", params: { tId: item.tId }})}>
|
className={`text-base font-bold ${
|
||||||
<Text style={defaultStyles.boldBody}>{item.title}</Text>
|
item.isCompleted ? 'text-text-secondary' : 'text-text-main'
|
||||||
<View style={defaultStyles.checkbox}>
|
}`}
|
||||||
{item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
>
|
||||||
</View>
|
{item.title}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{item.description ? (
|
||||||
|
<Text
|
||||||
|
className="mt-1 text-sm leading-5 text-text-muted"
|
||||||
|
numberOfLines={2}
|
||||||
|
>
|
||||||
|
{item.description}
|
||||||
|
</Text>
|
||||||
|
) : null}
|
||||||
|
</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: '/task/editTask',
|
||||||
|
params: { tId: item.tId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text className="text-sm font-bold text-text-secondary">Edit</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
|
||||||
{isOwner && (
|
<Pressable
|
||||||
<View style={defaultStyles.buttonContainer}>
|
className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
|
||||||
<Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: item.tId }})} />
|
onPress={() => DeleteTask(item.tId, item.aId)}
|
||||||
<Button title="Delete" onPress={() => DeleteTask(item.tId, item.tId)} />
|
>
|
||||||
</View>
|
<Text className="text-sm font-bold text-status-danger">
|
||||||
)}
|
Delete
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
);
|
)}
|
||||||
}}
|
</View>
|
||||||
renderSectionFooter={({ section }) =>
|
);
|
||||||
section.data.length === 0 ? (
|
}}
|
||||||
<View style={defaultStyles.container}>
|
renderSectionFooter={({ section }) =>
|
||||||
<Text style={defaultStyles.body}>{section.emptyMessage}</Text>
|
section.data.length === 0 ? (
|
||||||
<View style={defaultStyles.separator} />
|
<View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5" style={{ borderColor: colorSet.strong }}>
|
||||||
</View>
|
<Text className="text-center text-base font-semibold text-text-secondary">
|
||||||
) : (
|
{section.emptyMessage}
|
||||||
<View style={defaultStyles.separator} />
|
</Text>
|
||||||
)
|
<Text className="mt-1 text-center text-sm text-text-muted">
|
||||||
}
|
Tasks for this assignment will show up here.
|
||||||
/>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
) : (
|
||||||
|
<View className="mb-2" />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,69 +1,146 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
|
||||||
import { supabase } from '@/lib/supabase';
|
import { supabase } from '@/lib/supabase';
|
||||||
import { router, Stack } from 'expo-router';
|
import { router } from 'expo-router';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
|
import {
|
||||||
|
Alert,
|
||||||
|
Keyboard,
|
||||||
|
KeyboardAvoidingView,
|
||||||
|
Platform,
|
||||||
|
Pressable,
|
||||||
|
ScrollView,
|
||||||
|
Text,
|
||||||
|
TextInput,
|
||||||
|
TouchableWithoutFeedback,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
export default function CreateUser() {
|
export default function CreateUser() {
|
||||||
const [email, SetEmail] = useState('');
|
const [email, SetEmail] = useState('');
|
||||||
const [password, SetPassword] = useState('');
|
const [password, SetPassword] = useState('');
|
||||||
|
const [isLoading, SetIsLoading] = useState(false);
|
||||||
|
|
||||||
const SignUp = async () => {
|
const SignUp = async () => {
|
||||||
if(email.trim() === '' || password.trim() === '') {
|
if (email.trim() === '' || password.trim() === '') {
|
||||||
Alert.alert("All fields are required!");
|
Alert.alert('All fields are required!');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {error} = await supabase.auth.signUp({
|
SetIsLoading(true);
|
||||||
email: email,
|
|
||||||
password: password,
|
const { data, error } = await supabase.auth.signUp({
|
||||||
|
email: email.trim(),
|
||||||
|
password,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
SetIsLoading(false);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
Alert.alert(error.message, "User could not be created, please try again");
|
Alert.alert(error.message, 'User could not be created, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
router.replace("/");
|
if (!data.session) {
|
||||||
}
|
Alert.alert(
|
||||||
|
'Check your email',
|
||||||
|
'Your account was created. Please confirm your email before signing in.'
|
||||||
|
);
|
||||||
|
router.replace('/login');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
router.replace('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
const inputClassName =
|
||||||
|
'rounded-2xl border border-app-border bg-app-subtle px-4 py-3 text-base text-text-main';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={defaultStyles.container}>
|
<KeyboardAvoidingView
|
||||||
<Stack.Screen
|
className="flex-1 bg-app-bg"
|
||||||
options={{
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||||
title: "Create User",
|
>
|
||||||
headerTitleStyle: defaultStyles.title,
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||||
}}
|
<ScrollView
|
||||||
/>
|
className="flex-1"
|
||||||
<View style={defaultStyles.container}>
|
keyboardShouldPersistTaps="handled"
|
||||||
<Text style={defaultStyles.title}>Create User</Text>
|
contentContainerStyle={{
|
||||||
<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
|
flexGrow: 1,
|
||||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
justifyContent: 'center',
|
||||||
<View style={defaultStyles.container}>
|
paddingHorizontal: 20,
|
||||||
|
paddingTop: 64,
|
||||||
|
paddingBottom: 32,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View className="mb-10">
|
||||||
|
<Text className="mt-5 text-4xl font-bold text-text-main">
|
||||||
|
Study Sprint
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Text className="mt-3 text-base leading-6 text-text-secondary">
|
||||||
|
Organize subjects, assignments, and tasks in one calm workflow.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||||
|
<Text className="text-2xl font-bold text-text-main">
|
||||||
|
Create account
|
||||||
|
</Text>
|
||||||
|
<Text className="mt-2 text-sm leading-5 text-text-secondary">
|
||||||
|
Start your next study sprint.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View className="mt-6 mb-5">
|
||||||
|
<Text className="mb-2 text-sm font-semibold text-text-secondary">
|
||||||
|
Email
|
||||||
|
</Text>
|
||||||
<TextInput
|
<TextInput
|
||||||
style={defaultStyles.inputText}
|
className={inputClassName}
|
||||||
placeholder="Enter Email"
|
placeholder="you@example.com"
|
||||||
|
placeholderTextColor="#9CA3AF"
|
||||||
|
keyboardType="email-address"
|
||||||
|
autoCapitalize="none"
|
||||||
|
autoCorrect={false}
|
||||||
value={email}
|
value={email}
|
||||||
onChangeText={SetEmail}
|
onChangeText={SetEmail}
|
||||||
autoCapitalize="none"
|
|
||||||
/>
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="mb-6">
|
||||||
|
<Text className="mb-2 text-sm font-semibold text-text-secondary">
|
||||||
|
Password
|
||||||
|
</Text>
|
||||||
<TextInput
|
<TextInput
|
||||||
style={defaultStyles.inputText}
|
className={inputClassName}
|
||||||
placeholder="Enter Password"
|
placeholder="Create a password"
|
||||||
|
placeholderTextColor="#9CA3AF"
|
||||||
|
secureTextEntry
|
||||||
value={password}
|
value={password}
|
||||||
onChangeText={SetPassword}
|
onChangeText={SetPassword}
|
||||||
secureTextEntry
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Button title="Save" onPress={SignUp} />
|
|
||||||
<Button title="Cancel" onPress={() => router.back()} />
|
|
||||||
<Pressable onPress={() => router.push("/login")} style={defaultStyles.buttonContainer}>
|
|
||||||
<Text style={defaultStyles.linkText}>Already have an Account? login here</Text>
|
|
||||||
</Pressable>
|
|
||||||
</View>
|
</View>
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
</KeyboardAvoidingView>
|
<Pressable
|
||||||
</View>
|
className={`h-14 items-center justify-center rounded-2xl ${
|
||||||
</View>
|
isLoading ? 'bg-accent-disabled' : 'bg-accent'
|
||||||
)
|
}`}
|
||||||
|
onPress={SignUp}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
<Text className="text-base font-bold text-text-inverse">
|
||||||
|
{isLoading ? 'Creating account...' : 'Create account'}
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
|
|
||||||
|
<Pressable
|
||||||
|
className="mt-4 h-12 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
|
||||||
|
onPress={() => router.push('/login')}
|
||||||
|
>
|
||||||
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
|
Already have an account? Log in
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
</KeyboardAvoidingView>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
142
app/login.tsx
142
app/login.tsx
@@ -1,12 +1,12 @@
|
|||||||
import { defaultStyles } from "@/constants/defaultStyles";
|
|
||||||
import { supabase } from "@/lib/supabase";
|
import { supabase } from "@/lib/supabase";
|
||||||
import { router, Stack } from "expo-router";
|
import { router } from "expo-router";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Text, TextInput, TouchableWithoutFeedback, View } from "react-native";
|
import { Alert, Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, TextInput, TouchableWithoutFeedback, View } from "react-native";
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const [email, setEmail] = useState('');
|
const [email, SetEmail] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, SetPassword] = useState('');
|
||||||
|
const [isLoading, SetIsLoading] = useState(false);
|
||||||
|
|
||||||
const login = async () => {
|
const login = async () => {
|
||||||
if(email.trim() === '' || password.trim() === '') {
|
if(email.trim() === '' || password.trim() === '') {
|
||||||
@@ -14,11 +14,15 @@ export default function Login() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
SetIsLoading(true);
|
||||||
|
|
||||||
const { error } = await supabase.auth.signInWithPassword({
|
const { error } = await supabase.auth.signInWithPassword({
|
||||||
email,
|
email,
|
||||||
password
|
password
|
||||||
});
|
});
|
||||||
|
|
||||||
|
SetIsLoading(false);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
Alert.alert("Login failed, please check your credentials and try again");
|
Alert.alert("Login failed, please check your credentials and try again");
|
||||||
return;
|
return;
|
||||||
@@ -27,40 +31,98 @@ export default function Login() {
|
|||||||
router.replace("/");
|
router.replace("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
const inputClassName =
|
||||||
<View style={defaultStyles.container}>
|
'rounded-2xl border border-app-border bg-app-subtle px-4 py-3 text-base text-text-main'
|
||||||
<Stack.Screen
|
|
||||||
options={{
|
|
||||||
title: "Login",
|
|
||||||
headerTitleStyle: defaultStyles.title
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<View style={defaultStyles.container}>
|
return (
|
||||||
<Text style={defaultStyles.title}>Login</Text>
|
<KeyboardAvoidingView
|
||||||
<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
|
className="flex-1 bg-app-bg"
|
||||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||||
<View style={defaultStyles.container}>
|
>
|
||||||
<TextInput
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||||
style={defaultStyles.inputText}
|
<ScrollView
|
||||||
placeholder="Enter Email"
|
className="flex-1"
|
||||||
value={email}
|
keyboardShouldPersistTaps="handled"
|
||||||
onChangeText={setEmail}
|
contentContainerStyle={{
|
||||||
autoCapitalize="none"
|
flexGrow: 1,
|
||||||
/>
|
justifyContent: 'center',
|
||||||
<TextInput
|
paddingHorizontal: 20,
|
||||||
style={defaultStyles.inputText}
|
paddingTop: 64,
|
||||||
placeholder="Enter Password"
|
paddingBottom: 32,
|
||||||
value={password}
|
}}
|
||||||
onChangeText={setPassword}
|
>
|
||||||
secureTextEntry
|
<View className="mb-10">
|
||||||
/>
|
<Text className="text-4xl font-bold text-text-main">
|
||||||
<Button title="Login" onPress={login} />
|
Study Sprint
|
||||||
<Button title="Cancel" onPress={() => router.push("/")} />
|
</Text>
|
||||||
</View>
|
|
||||||
</TouchableWithoutFeedback>
|
<Text className="mt-3 text-base leading-6 text-text-secondary">
|
||||||
</KeyboardAvoidingView>
|
Pick up where you left off.
|
||||||
</View>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
)
|
|
||||||
|
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||||
|
<Text className="text-2xl font-bold text-text-main">
|
||||||
|
Log in
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Text className="mt-2 text-sm leading-5 text-text-secondary">
|
||||||
|
Continue your study workflow.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View className="mb-5 mt-6">
|
||||||
|
<Text className="mb-2 text-sm font-semibold text-text-secondary">
|
||||||
|
Email
|
||||||
|
</Text>
|
||||||
|
<TextInput
|
||||||
|
className={inputClassName}
|
||||||
|
placeholder="you@example.com"
|
||||||
|
placeholderTextColor="#9CA3AF"
|
||||||
|
keyboardType="email-address"
|
||||||
|
autoCapitalize="none"
|
||||||
|
autoCorrect={false}
|
||||||
|
value={email}
|
||||||
|
onChangeText={SetEmail}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="mb-6">
|
||||||
|
<Text className="mb-2 text-sm font-semibold text-text-secondary">
|
||||||
|
Password
|
||||||
|
</Text>
|
||||||
|
<TextInput
|
||||||
|
className={inputClassName}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
placeholderTextColor="#9CA3AF"
|
||||||
|
secureTextEntry
|
||||||
|
value={password}
|
||||||
|
onChangeText={SetPassword}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Pressable
|
||||||
|
className={`h-14 items-center justify-center rounded-2xl ${
|
||||||
|
isLoading ? 'bg-accent-disabled' : 'bg-accent'
|
||||||
|
}`}
|
||||||
|
onPress={login}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
<Text className="text-base font-bold text-text-inverse">
|
||||||
|
{isLoading ? 'Logging in...' : 'Log in'}
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
|
|
||||||
|
<Pressable
|
||||||
|
className="mt-4 h-12 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
|
||||||
|
onPress={() => router.push('/createUser')}
|
||||||
|
>
|
||||||
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
|
Don't have an account? Sign up
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</TouchableWithoutFeedback>
|
||||||
|
</KeyboardAvoidingView>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@@ -3,8 +3,7 @@ import { Stack } from "expo-router";
|
|||||||
export default function SubjectLayout() {
|
export default function SubjectLayout() {
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack>
|
||||||
<Stack.Screen name="createSubject" options={{ title: "Create Subject" }} />
|
<Stack.Screen name="upsertSubject" />
|
||||||
<Stack.Screen name="editSubject" options={{ title: "Edit Subject" }} />
|
|
||||||
<Stack.Screen name="viewDetailsSubject" options={{ title: "Subject Details" }} />
|
<Stack.Screen name="viewDetailsSubject" options={{ title: "Subject Details" }} />
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,195 +0,0 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
|
||||||
import { supabase } from '@/lib/supabase';
|
|
||||||
import { router, Stack } from 'expo-router';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import {
|
|
||||||
ActivityIndicator,
|
|
||||||
Alert,
|
|
||||||
Keyboard,
|
|
||||||
KeyboardAvoidingView,
|
|
||||||
Platform,
|
|
||||||
Pressable,
|
|
||||||
ScrollView,
|
|
||||||
Text,
|
|
||||||
TextInput,
|
|
||||||
TouchableWithoutFeedback,
|
|
||||||
View,
|
|
||||||
} from 'react-native';
|
|
||||||
|
|
||||||
export default function CreateSubject() {
|
|
||||||
const [title, SetTitle] = useState('');
|
|
||||||
const [description, SetDescription] = useState('');
|
|
||||||
const [isActive, SetIsActive] = useState(true);
|
|
||||||
const [isSaving, SetIsSaving] = useState(false);
|
|
||||||
|
|
||||||
const CreateSubject = async () => {
|
|
||||||
if (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('subjects').insert({
|
|
||||||
title: title.trim(),
|
|
||||||
description: description.trim(),
|
|
||||||
isActive,
|
|
||||||
lastChanged: new Date().toISOString(),
|
|
||||||
uId: data.user.id,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (dbError) {
|
|
||||||
SetIsSaving(false);
|
|
||||||
Alert.alert('Subject could not be created, please try again');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Alert.alert('Subject successfully created!');
|
|
||||||
|
|
||||||
SetTitle('');
|
|
||||||
SetDescription('');
|
|
||||||
SetIsActive(true);
|
|
||||||
SetIsSaving(false);
|
|
||||||
|
|
||||||
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';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Stack.Screen
|
|
||||||
options={{
|
|
||||||
title: 'Create Subject',
|
|
||||||
headerTitleStyle: defaultStyles.title,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
Create Subject
|
|
||||||
</Text>
|
|
||||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
|
||||||
Add a subject to organize your assignments and study 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"
|
|
||||||
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"
|
|
||||||
value={description}
|
|
||||||
onChangeText={SetDescription}
|
|
||||||
multiline
|
|
||||||
textAlignVertical="top"
|
|
||||||
/>
|
|
||||||
</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={CreateSubject}
|
|
||||||
disabled={isSaving}
|
|
||||||
>
|
|
||||||
{isSaving ? (
|
|
||||||
<View className="flex-row items-center">
|
|
||||||
<ActivityIndicator size="small" />
|
|
||||||
<Text className="ml-3 text-base font-bold text-text-inverse">
|
|
||||||
Creating...
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<Text className="text-base font-bold text-text-inverse">
|
|
||||||
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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,125 +0,0 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
|
||||||
import { supabase } from '@/lib/supabase';
|
|
||||||
import type { Subject } 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 EditSubject() {
|
|
||||||
const { sId } = useLocalSearchParams<{ sId: string }>();
|
|
||||||
const [subject, SetSubject] = useState<Subject | null>(null)
|
|
||||||
const [isSaving, SetIsSaving] = useState(false);
|
|
||||||
|
|
||||||
const GetSubject = async (sId: string) => {
|
|
||||||
const { data, error } = await supabase.from("subjects").select("*").eq("sId", sId).single();
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
Alert.alert("Subject could not be fetched, please try again");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
SetSubject(data ?? null);
|
|
||||||
}
|
|
||||||
|
|
||||||
useFocusEffect(
|
|
||||||
useCallback(() => {
|
|
||||||
if (sId) {
|
|
||||||
GetSubject(sId);
|
|
||||||
}
|
|
||||||
}, [sId])
|
|
||||||
);
|
|
||||||
|
|
||||||
const EditSubject = async () => {
|
|
||||||
if (!subject) return;
|
|
||||||
|
|
||||||
if(subject.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("subjects").update({
|
|
||||||
title: subject.title,
|
|
||||||
description: subject.description,
|
|
||||||
isActive: subject.isActive,
|
|
||||||
lastChanged: new Date().toISOString(),
|
|
||||||
uId: data.user.id,
|
|
||||||
}).eq("sId", sId);
|
|
||||||
|
|
||||||
SetIsSaving(false);
|
|
||||||
|
|
||||||
if (dbError) {
|
|
||||||
Alert.alert("Subject could not be edited, please try again");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Alert.alert("Subject successfully edited!");
|
|
||||||
|
|
||||||
router.back();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={defaultStyles.container}>
|
|
||||||
<Stack.Screen
|
|
||||||
options={{
|
|
||||||
title: "Edit Subject",
|
|
||||||
headerTitleStyle: defaultStyles.title
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{!subject && (
|
|
||||||
<View style={defaultStyles.container}>
|
|
||||||
<Text style={defaultStyles.title}>Subject not found</Text>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{subject && (
|
|
||||||
<View style={defaultStyles.container}>
|
|
||||||
<Text style={defaultStyles.title}>Edit Subject</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={subject.title}
|
|
||||||
onChangeText={(text) => SetSubject(prev => prev ? { ...prev, title: text } : prev)}
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
style={defaultStyles.inputText}
|
|
||||||
placeholder="Text"
|
|
||||||
value={subject.description}
|
|
||||||
onChangeText={(text) => SetSubject(prev => prev ? { ...prev, description: text } : prev)}
|
|
||||||
/>
|
|
||||||
<Pressable
|
|
||||||
onPress={() => SetSubject(prev => prev ? { ...prev, isActive: !prev.isActive } : prev)}
|
|
||||||
style={defaultStyles.checkboxContainer}
|
|
||||||
>
|
|
||||||
<View style={defaultStyles.checkbox}>
|
|
||||||
{subject.isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
|
||||||
</View>
|
|
||||||
<Text style={defaultStyles.checkboxLabel}>{subject.isActive ? 'Active' : 'inactive'}</Text>
|
|
||||||
</Pressable>
|
|
||||||
|
|
||||||
<Button title={isSaving ? "Saving..." : "Save"} onPress={EditSubject} disabled={isSaving} />
|
|
||||||
{isSaving && (
|
|
||||||
<ActivityIndicator size="large" />
|
|
||||||
)}
|
|
||||||
<Button title="Cancel" onPress={() => router.back()} />
|
|
||||||
</View>
|
|
||||||
</TouchableWithoutFeedback>
|
|
||||||
</KeyboardAvoidingView>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
351
app/subject/upsertSubject.tsx
Normal file
351
app/subject/upsertSubject.tsx
Normal file
@@ -0,0 +1,351 @@
|
|||||||
|
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,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,53 +1,81 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
import { formatDate, formatDateTime } from '@/lib/date';
|
||||||
import { CheckSubjectCompletion } from '@/lib/progress';
|
import { CheckSubjectCompletion } from '@/lib/progress';
|
||||||
|
import { SUBJECT_COLORS, type SubjectColor } from '@/lib/subjectColors';
|
||||||
import { supabase } from '@/lib/supabase';
|
import { supabase } from '@/lib/supabase';
|
||||||
import type { Assignment, Subject } from '@/lib/types';
|
import type { Assignment } from '@/lib/types';
|
||||||
import { Session } from '@supabase/supabase-js';
|
import { Session } from '@supabase/supabase-js';
|
||||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
|
import { Alert, Pressable, SectionList, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
export type Subject = {
|
||||||
|
sId: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
isActive: boolean;
|
||||||
|
lastChanged: string;
|
||||||
|
uId: string;
|
||||||
|
color: SubjectColor;
|
||||||
|
};
|
||||||
|
|
||||||
export default function ViewDetailsSubject() {
|
export default function ViewDetailsSubject() {
|
||||||
const { sId } = useLocalSearchParams<{ sId: string }>();
|
const { sId } = useLocalSearchParams<{ sId: string }>();
|
||||||
const [subject, SetSubject] = useState<Subject | null>(null)
|
const [subject, SetSubject] = useState<Subject | null>(null);
|
||||||
const [assignments, SetAssignments] = useState<Assignment[]>([])
|
const [assignments, SetAssignments] = useState<Assignment[]>([]);
|
||||||
const [session, SetSession] = useState<Session | null>(null)
|
const [session, SetSession] = useState<Session | null>(null);
|
||||||
|
|
||||||
const assignmentSections = [
|
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" },
|
title: 'Active Assignments',
|
||||||
|
data: assignments.filter((assignment) => !assignment.isCompleted),
|
||||||
|
emptyMessage: 'No active assignments',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Completed Assignments',
|
||||||
|
data: assignments.filter((assignment) => assignment.isCompleted),
|
||||||
|
emptyMessage: 'No completed assignments',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
useEffect(() => {
|
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()
|
|
||||||
},
|
|
||||||
[])
|
|
||||||
|
|
||||||
const GetSubject = async (sId: string) => {
|
const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
|
||||||
const { data, error } = await supabase.from("subjects").select("*").eq("sId", sId).single();
|
SetSession(newSession);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => sub.subscription.unsubscribe();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const GetSubject = async (subjectId: string) => {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('subjects')
|
||||||
|
.select('*')
|
||||||
|
.eq('sId', subjectId)
|
||||||
|
.single();
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
Alert.alert("Subject could not be fetched, please try again");
|
Alert.alert('Subject could not be fetched, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
SetSubject(data ?? null);
|
SetSubject((data as Subject) ?? null);
|
||||||
}
|
};
|
||||||
|
|
||||||
const GetAssignments = async (sId: string) => {
|
const GetAssignments = async (subjectId: string) => {
|
||||||
const { data, error } = await supabase.from("assignments").select("*").eq("sId", sId).order("deadline", { ascending: true });
|
const { data, error } = await supabase
|
||||||
|
.from('assignments')
|
||||||
|
.select('*')
|
||||||
|
.eq('sId', subjectId)
|
||||||
|
.order('deadline', { ascending: true });
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
Alert.alert("Assignments could not be fetched, please try again");
|
Alert.alert('Assignments could not be fetched, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
SetAssignments(data ?? []);
|
SetAssignments(data ?? []);
|
||||||
}
|
};
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
@@ -58,180 +86,392 @@ export default function ViewDetailsSubject() {
|
|||||||
}, [session, sId])
|
}, [session, sId])
|
||||||
);
|
);
|
||||||
|
|
||||||
const DeleteSubject = async (sId: string) => {
|
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) => {
|
||||||
Alert.alert(
|
Alert.alert(
|
||||||
"Delete Subject",
|
'Delete Subject',
|
||||||
"Are you sure you want to delete this subject?",
|
'Are you sure you want to delete this subject?',
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
text: "Cancel",
|
text: 'Cancel',
|
||||||
style: "cancel"
|
style: 'cancel',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "Delete",
|
text: 'Delete',
|
||||||
style: "destructive",
|
style: 'destructive',
|
||||||
onPress: async () => {
|
onPress: async () => {
|
||||||
const { error } = await supabase.from("subjects").delete().eq("sId", sId);
|
const { error } = await supabase
|
||||||
|
.from('subjects')
|
||||||
|
.delete()
|
||||||
|
.eq('sId', subjectId);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
Alert.alert("Subject could not be deleted, please try again");
|
Alert.alert('Subject could not be deleted, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
Alert.alert("Subject deleted successfully!");
|
Alert.alert('Subject deleted successfully!');
|
||||||
router.back();
|
router.back();
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const DeleteAssignment = async (aId: string, sId: string) => {
|
const DeleteAssignment = async (assignmentId: string, subjectId: string) => {
|
||||||
Alert.alert(
|
Alert.alert(
|
||||||
"Delete Assignment",
|
'Delete Assignment',
|
||||||
"Are you sure you want to delete this assignment?",
|
'Are you sure you want to delete this assignment?',
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
text: "Cancel",
|
text: 'Cancel',
|
||||||
style: "cancel"
|
style: 'cancel',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "Delete",
|
text: 'Delete',
|
||||||
style: "destructive",
|
style: 'destructive',
|
||||||
onPress: async () => {
|
onPress: async () => {
|
||||||
const { error } = await supabase.from("assignments").delete().eq("aId", aId);
|
const { error } = await supabase
|
||||||
|
.from('assignments')
|
||||||
|
.delete()
|
||||||
|
.eq('aId', assignmentId);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
Alert.alert("Assignment could not be deleted, please try again");
|
Alert.alert('Assignment could not be deleted, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
Alert.alert("Assignment deleted successfully!");
|
if (subjectId) {
|
||||||
|
|
||||||
if (sId) {
|
|
||||||
try {
|
try {
|
||||||
await CheckSubjectCompletion(sId);
|
await CheckSubjectCompletion(subjectId);
|
||||||
} catch {
|
} catch {
|
||||||
Alert.alert("Failed to update subject status");
|
Alert.alert('Failed to update subject status');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
GetAssignments(sId);
|
await GetAssignments(subjectId);
|
||||||
}
|
await GetSubject(subjectId);
|
||||||
}
|
|
||||||
|
Alert.alert('Assignment deleted successfully!');
|
||||||
|
},
|
||||||
|
},
|
||||||
]
|
]
|
||||||
)
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const completedAssignments = assignments.filter((assignment) => assignment.isCompleted).length;
|
||||||
|
const totalAssignments = assignments.length;
|
||||||
|
const remainingAssignments = totalAssignments - completedAssignments;
|
||||||
|
|
||||||
|
const progress =
|
||||||
|
assignments.length === 0
|
||||||
|
? 0
|
||||||
|
: Math.round((completedAssignments / totalAssignments) * 100);
|
||||||
|
|
||||||
|
if (!subject) {
|
||||||
|
return (
|
||||||
|
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||||
|
<Stack.Screen
|
||||||
|
options={{
|
||||||
|
title: 'Subject Details',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||||
|
<Text className="text-2xl font-bold text-text-main">
|
||||||
|
Subject not found
|
||||||
|
</Text>
|
||||||
|
<Text className="mt-2 text-base text-text-secondary">
|
||||||
|
The subject 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 progress = assignments.length === 0 ? 0 : Math.round((assignments.filter(assignment => assignment.isCompleted).length / assignments.length) * 100);
|
const colorKey: SubjectColor = subject.color ?? 'slate';
|
||||||
|
const colorSet = SUBJECT_COLORS[colorKey];
|
||||||
|
|
||||||
|
const firstLetter = subject.title?.trim().charAt(0).toUpperCase() || 'S';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={defaultStyles.container}>
|
<View className="flex-1 bg-app-bg">
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
title: "Details",
|
title: 'Subject Details',
|
||||||
headerTitleStyle: defaultStyles.title,
|
headerRight: () => (
|
||||||
headerLeft: () => {
|
<Pressable
|
||||||
return (
|
className="rounded-full bg-app-subtle px-4 py-2"
|
||||||
<View style={defaultStyles.buttonContainer}>
|
onPress={async () => await supabase.auth.signOut()}
|
||||||
<Button title="Back" onPress={router.back} />
|
>
|
||||||
</View>
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
)
|
Logout
|
||||||
},
|
</Text>
|
||||||
headerRight: () => {
|
</Pressable>
|
||||||
return (
|
),
|
||||||
<View style={defaultStyles.buttonContainer}>
|
|
||||||
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{!subject && (
|
<SectionList
|
||||||
<View style={defaultStyles.container}>
|
className="flex-1"
|
||||||
<Text style={defaultStyles.title}>Subject not found</Text>
|
contentContainerStyle={{
|
||||||
</View>
|
paddingHorizontal: 20,
|
||||||
)}
|
paddingTop: 20,
|
||||||
|
paddingBottom: 32,
|
||||||
{subject && (
|
}}
|
||||||
<View style={defaultStyles.container}>
|
sections={assignmentSections}
|
||||||
<View style={defaultStyles.container}>
|
keyExtractor={(item) => item.aId}
|
||||||
<Text style={defaultStyles.title}>{subject.title}</Text>
|
showsVerticalScrollIndicator={false}
|
||||||
<Text style={defaultStyles.body}>{subject.description}</Text>
|
stickySectionHeadersEnabled={false}
|
||||||
<View style={defaultStyles.checkbox}>
|
ListHeaderComponent={
|
||||||
{subject.isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
<View>
|
||||||
</View>
|
<View
|
||||||
<Text style={defaultStyles.body}>{subject.lastChanged}</Text>
|
className="rounded-3xl bg-app-surface p-5"
|
||||||
<View style={{ marginTop: 10 }}>
|
style={{
|
||||||
<Text style={{ marginBottom: 4 }}>{progress}%</Text>
|
borderWidth: 1,
|
||||||
|
borderColor: colorSet.strong,
|
||||||
<View
|
}}
|
||||||
style={{
|
>
|
||||||
width: "100%",
|
<View className="flex-row items-center">
|
||||||
height: 12,
|
|
||||||
backgroundColor: "#D9D9D9",
|
|
||||||
borderRadius: 999,
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View
|
<View
|
||||||
style={{
|
className="mr-3 h-12 w-12 items-center justify-center rounded-2xl"
|
||||||
width: `${progress}%`,
|
style={{ backgroundColor: colorSet.soft }}
|
||||||
height: "100%",
|
>
|
||||||
backgroundColor: "#4CAF50",
|
<Text
|
||||||
}}
|
className="text-base font-bold"
|
||||||
/>
|
style={{ color: colorSet.strong }}
|
||||||
|
>
|
||||||
|
{firstLetter}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="flex-1">
|
||||||
|
<Text className="text-2xl font-bold text-text-main">
|
||||||
|
{subject.title}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{subject.description ? (
|
||||||
|
<Text className="mt-1 text-sm leading-5 text-text-secondary">
|
||||||
|
{subject.description}
|
||||||
|
</Text>
|
||||||
|
) : (
|
||||||
|
<Text className="mt-1 text-sm leading-5 text-text-muted">
|
||||||
|
No description added.
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="ml-3">
|
||||||
|
<View
|
||||||
|
className="rounded-full px-3 py-1"
|
||||||
|
style={{ backgroundColor: colorSet.soft }}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
className="text-xs font-semibold"
|
||||||
|
style={{ color: colorSet.strong }}
|
||||||
|
>
|
||||||
|
{subject.isActive ? 'Active' : 'Inactive'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="mt-5">
|
||||||
|
<View className="mb-2 flex-row items-center justify-between">
|
||||||
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
|
Assignment Progress
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Text className="text-sm font-bold text-text-main">
|
||||||
|
{completedAssignments}/{totalAssignments}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="h-3 overflow-hidden rounded-full bg-app-subtle">
|
||||||
|
<View
|
||||||
|
className="h-full rounded-full"
|
||||||
|
style={{
|
||||||
|
width: `${progress}%`,
|
||||||
|
backgroundColor: colorSet.strong,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text className="mt-2 text-xs font-medium text-text-secondary">
|
||||||
|
{remainingAssignments === 0
|
||||||
|
? 'All assignments complete'
|
||||||
|
: `${remainingAssignments} assignment${
|
||||||
|
remainingAssignments === 1 ? '' : 's'
|
||||||
|
} remaining`}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text className="mt-4 text-sm text-text-muted">
|
||||||
|
Last changed: {formatDateTime(subject.lastChanged)}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<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: '/subject/upsertSubject',
|
||||||
|
params: { sId: subject.sId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<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={() => DeleteSubject(subject.sId)}
|
||||||
|
>
|
||||||
|
<Text className="text-sm font-bold text-status-danger">
|
||||||
|
Delete
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<Button title="Edit" onPress={() => router.push({pathname: "/subject/editSubject", params: { sId: subject.sId }})} />
|
<Pressable
|
||||||
<Button title="Delete" onPress={() => DeleteSubject(subject.sId)} />
|
className="mb-6 mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
|
||||||
|
onPress={() =>
|
||||||
|
router.push({
|
||||||
|
pathname: '/assignment/upsertAssignment',
|
||||||
|
params: { sId: subject.sId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text className="text-base font-bold text-text-inverse">
|
||||||
|
Create Assignment
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
|
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 style={defaultStyles.buttonContainer}>
|
<View className="rounded-full bg-app-subtle px-3 py-1">
|
||||||
<Button title="Create Assignment" onPress={() => router.push({pathname: "/assignment/createAssignment", params: { sId: subject.sId }})} />
|
<Text className="text-xs font-semibold text-text-muted">
|
||||||
|
{data.length}
|
||||||
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
)}
|
||||||
|
renderItem={({ item }) => {
|
||||||
|
const isOwner = session?.user.id === item.uId;
|
||||||
|
|
||||||
<SectionList
|
return (
|
||||||
sections={assignmentSections}
|
<View
|
||||||
keyExtractor={(item) => item.aId}
|
className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4"
|
||||||
renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
|
style={{
|
||||||
renderItem={({ item }) => {
|
borderColor: colorSet.strong,
|
||||||
const isOwner = session?.user.id === item.uId;
|
}}
|
||||||
|
>
|
||||||
|
<Pressable
|
||||||
|
onPress={() =>
|
||||||
|
router.push({
|
||||||
|
pathname: '/assignment/viewDetailsAssignment',
|
||||||
|
params: { aId: item.aId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View className="flex-row items-center">
|
||||||
|
<View className="flex-1">
|
||||||
|
<Text
|
||||||
|
className={`text-base font-bold ${
|
||||||
|
item.isCompleted ? 'text-text-secondary' : 'text-text-main'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</Text>
|
||||||
|
|
||||||
return (
|
{item.description ? (
|
||||||
<View style={defaultStyles.container}>
|
<Text
|
||||||
<Pressable style={defaultStyles.container} onPress={() => router.push({pathname: "/assignment/viewDetailsAssignment", params: { aId: item.aId }})}>
|
className="mt-1 text-sm leading-5 text-text-muted"
|
||||||
<Text style={defaultStyles.boldBody}>{item.title}</Text>
|
numberOfLines={2}
|
||||||
<Text style={defaultStyles.body}>{item.deadline}</Text>
|
>
|
||||||
<View style={defaultStyles.checkbox}>
|
{item.description}
|
||||||
{item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
</Text>
|
||||||
</View>
|
) : null}
|
||||||
|
|
||||||
|
<Text className="mt-2 text-sm text-text-secondary">
|
||||||
|
Deadline: {formatDate(item.deadline)}
|
||||||
|
</Text>
|
||||||
|
</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/upsertAssignment',
|
||||||
|
params: { aId: item.aId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text className="text-sm font-bold text-text-secondary">
|
||||||
|
Edit
|
||||||
|
</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
|
||||||
{isOwner && (
|
<Pressable
|
||||||
<View style={defaultStyles.buttonContainer}>
|
className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
|
||||||
<Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: item.aId }})} />
|
onPress={() => DeleteAssignment(item.aId, item.sId)}
|
||||||
<Button title="Delete" onPress={() => DeleteAssignment(item.aId, item.sId)} />
|
>
|
||||||
</View>
|
<Text className="text-sm font-bold text-status-danger">
|
||||||
)}
|
Delete
|
||||||
|
</Text>
|
||||||
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
);
|
)}
|
||||||
}}
|
</View>
|
||||||
renderSectionFooter={({ section }) =>
|
);
|
||||||
section.data.length === 0 ? (
|
}}
|
||||||
<View style={defaultStyles.container}>
|
renderSectionFooter={({ section }) =>
|
||||||
<Text style={defaultStyles.body}>{section.emptyMessage}</Text>
|
section.data.length === 0 ? (
|
||||||
<View style={defaultStyles.separator} />
|
<View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
|
||||||
</View>
|
<Text className="text-center text-base font-semibold text-text-secondary">
|
||||||
) : (
|
{section.emptyMessage}
|
||||||
<View style={defaultStyles.separator} />
|
</Text>
|
||||||
)
|
<Text className="mt-1 text-center text-sm text-text-muted">
|
||||||
}
|
Assignments for this subject will show up here.
|
||||||
/>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
) : (
|
||||||
|
<View className="mb-2" />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -3,6 +3,7 @@ import { Stack } from "expo-router";
|
|||||||
export default function TaskLayout() {
|
export default function TaskLayout() {
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack>
|
||||||
|
<Stack.Screen name="tasks" options={{ title: 'Tasks' }} />
|
||||||
<Stack.Screen name="createTask" options={{ title: "Create Task" }} />
|
<Stack.Screen name="createTask" options={{ title: "Create Task" }} />
|
||||||
<Stack.Screen name="editTask" options={{ title: "Edit Task" }} />
|
<Stack.Screen name="editTask" options={{ title: "Edit Task" }} />
|
||||||
<Stack.Screen name="viewDetailsTask" options={{ title: "Task Details" }} />
|
<Stack.Screen name="viewDetailsTask" options={{ title: "Task Details" }} />
|
||||||
|
|||||||
@@ -1,16 +1,28 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
|
||||||
import { CheckAssignmentCompletion } from '@/lib/progress';
|
import { CheckAssignmentCompletion } from '@/lib/progress';
|
||||||
import { supabase } from '@/lib/supabase';
|
import { supabase } from '@/lib/supabase';
|
||||||
import type { Task } from '@/lib/types';
|
import type { Task } from '@/lib/types';
|
||||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||||
import { useCallback, useState } from 'react';
|
import { useCallback, 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 EditTask() {
|
export default function EditTask() {
|
||||||
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 [isSaving, SetIsSaving] = useState(false);
|
const [isSaving, SetIsSaving] = useState(false);
|
||||||
|
|
||||||
|
|
||||||
const GetTask = async (tId: string) => {
|
const GetTask = async (tId: string) => {
|
||||||
const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
|
const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
|
||||||
|
|
||||||
@@ -63,8 +75,6 @@ export default function EditTask() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
Alert.alert("Task successfully edited!");
|
|
||||||
|
|
||||||
if (task.aId) {
|
if (task.aId) {
|
||||||
try {
|
try {
|
||||||
await CheckAssignmentCompletion(task.aId);
|
await CheckAssignmentCompletion(task.aId);
|
||||||
@@ -73,63 +83,173 @@ export default function EditTask() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Alert.alert("Task successfully edited!");
|
||||||
router.back();
|
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';
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={defaultStyles.container}>
|
<>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
title: "Edit Task",
|
title: 'Edit Task',
|
||||||
headerTitleStyle: defaultStyles.title
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{!task && (
|
{!task ? (
|
||||||
<View style={defaultStyles.container}>
|
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||||
<Text style={defaultStyles.title}>Task not found</Text>
|
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||||
</View>
|
<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>
|
||||||
|
) : (
|
||||||
|
<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">
|
||||||
|
Edit Task
|
||||||
|
</Text>
|
||||||
|
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||||
|
Update the task details and completion state.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||||
|
<View className="mb-5">
|
||||||
|
<Text className={labelClassName}>Title</Text>
|
||||||
|
<TextInput
|
||||||
|
className={inputClassName}
|
||||||
|
placeholder="Enter task title"
|
||||||
|
placeholderTextColor="#9CA3AF"
|
||||||
|
value={task.title}
|
||||||
|
onChangeText={(text) =>
|
||||||
|
SetTask((prev) => (prev ? { ...prev, title: text } : prev))
|
||||||
|
}
|
||||||
|
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={task.description}
|
||||||
|
onChangeText={(text) =>
|
||||||
|
SetTask((prev) =>
|
||||||
|
prev ? { ...prev, description: text } : prev
|
||||||
|
)
|
||||||
|
}
|
||||||
|
multiline
|
||||||
|
textAlignVertical="top"
|
||||||
|
/>
|
||||||
|
</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
|
|
||||||
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
|
<Pressable
|
||||||
onPress={() => SetTask(prev => prev ? { ...prev, isCompleted: !prev.isCompleted } : prev)}
|
onPress={() =>
|
||||||
style={defaultStyles.checkboxContainer}
|
SetTask((prev) =>
|
||||||
|
prev ? { ...prev, isCompleted: !prev.isCompleted } : prev
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={isSaving}
|
||||||
|
className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
|
||||||
|
task.isCompleted
|
||||||
|
? 'border-accent bg-accent-soft'
|
||||||
|
: 'border-app-border bg-app-subtle'
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<View style={defaultStyles.checkbox}>
|
<View
|
||||||
{task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
|
||||||
|
task.isCompleted
|
||||||
|
? 'border-accent bg-accent'
|
||||||
|
: 'border-app-border bg-app-surface'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{task.isCompleted && (
|
||||||
|
<Text className="text-sm font-bold text-text-inverse">
|
||||||
|
✓
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="flex-1">
|
||||||
|
<Text className="text-base font-semibold text-text-main">
|
||||||
|
Mark as completed
|
||||||
|
</Text>
|
||||||
|
<Text className="mt-1 text-sm text-text-muted">
|
||||||
|
You can change this again later.
|
||||||
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<Text style={defaultStyles.checkboxLabel}>{task.isCompleted ? 'Completed' : 'Not Completed'}</Text>
|
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
|
||||||
<Button title={isSaving ? "Saving..." : "Save"} onPress={EditTask} disabled={isSaving} />
|
<Pressable
|
||||||
{isSaving && (
|
className={`h-14 items-center justify-center rounded-2xl ${
|
||||||
<ActivityIndicator size="large" />
|
isSaving ? 'bg-accent-disabled' : 'bg-accent'
|
||||||
)}
|
}`}
|
||||||
<Button title="Cancel" onPress={() => router.back()} />
|
onPress={EditTask}
|
||||||
</View>
|
disabled={isSaving}
|
||||||
</TouchableWithoutFeedback>
|
>
|
||||||
</KeyboardAvoidingView>
|
{isSaving ? (
|
||||||
</View>
|
<View className="flex-row items-center">
|
||||||
)}
|
<ActivityIndicator size="small" />
|
||||||
</View>
|
<Text className="ml-3 text-base font-bold text-text-inverse">
|
||||||
)
|
Saving...
|
||||||
}
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<Text className="text-base font-bold text-text-inverse">
|
||||||
|
Save Changes
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,36 +1,91 @@
|
|||||||
import { defaultStyles } from '@/constants/defaultStyles';
|
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';
|
||||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
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() {
|
export default function ViewDetailsTask() {
|
||||||
const { tId } = useLocalSearchParams<{ tId: string }>();
|
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(() => {
|
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) => {
|
const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
|
||||||
SetSession(newSession)
|
SetSession(newSession);
|
||||||
})
|
});
|
||||||
return () => sub.subscription.unsubscribe()
|
|
||||||
},
|
|
||||||
[])
|
|
||||||
|
|
||||||
const GetTask = async (tId: string) => {
|
return () => sub.subscription.unsubscribe();
|
||||||
const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
|
}, []);
|
||||||
|
|
||||||
if (error) {
|
const GetTask = async (taskId: string) => {
|
||||||
Alert.alert("Task could not be fetched, please try again");
|
const { data, error } = await supabase
|
||||||
|
.from('tasks')
|
||||||
|
.select('*')
|
||||||
|
.eq('tId', taskId)
|
||||||
|
.single();
|
||||||
|
|
||||||
|
if (error || !data) {
|
||||||
|
console.log('GetTask error:', error);
|
||||||
|
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(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
@@ -40,89 +95,207 @@ export default function ViewDetailsTask() {
|
|||||||
}, [session, tId])
|
}, [session, tId])
|
||||||
);
|
);
|
||||||
|
|
||||||
const DeleteTask = async (tId: string) => {
|
const DeleteTask = async (taskId: string) => {
|
||||||
Alert.alert(
|
Alert.alert(
|
||||||
"Delete Task",
|
'Delete Task',
|
||||||
"Are you sure you want to delete this task?",
|
'Are you sure you want to delete this task?',
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
text: "Cancel",
|
text: 'Cancel',
|
||||||
style: "cancel"
|
style: 'cancel',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "Delete",
|
text: 'Delete',
|
||||||
style: "destructive",
|
style: 'destructive',
|
||||||
onPress: async () => {
|
onPress: async () => {
|
||||||
const { error } = await supabase.from("tasks").delete().eq("tId", tId);
|
const { error } = await supabase
|
||||||
|
.from('tasks')
|
||||||
|
.delete()
|
||||||
|
.eq('tId', taskId);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
Alert.alert("Task could not be deleted, please try again");
|
Alert.alert('Task could not be deleted, please try again');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
Alert.alert("Task deleted successfully!");
|
|
||||||
|
|
||||||
const aId = task?.aId;
|
const aId = task?.aId;
|
||||||
|
|
||||||
if (aId) {
|
if (aId) {
|
||||||
try {
|
try {
|
||||||
await CheckAssignmentCompletion(aId);
|
await CheckAssignmentCompletion(aId);
|
||||||
} catch {
|
} catch {
|
||||||
Alert.alert("Failed to update assignment completion state");
|
Alert.alert('Failed to update assignment completion state');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Alert.alert('Task deleted successfully!');
|
||||||
router.back();
|
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 (
|
return (
|
||||||
<View style={defaultStyles.container}>
|
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
title: "Details",
|
title: 'Task Details',
|
||||||
headerTitleStyle: defaultStyles.title,
|
headerRight: () => (
|
||||||
headerLeft: () => {
|
<Pressable
|
||||||
return (
|
className="rounded-full bg-app-subtle px-4 py-2"
|
||||||
<View style={defaultStyles.buttonContainer}>
|
onPress={async () => await supabase.auth.signOut()}
|
||||||
<Button title="Back" onPress={router.back} />
|
>
|
||||||
</View>
|
<Text className="text-sm font-semibold text-text-secondary">
|
||||||
)
|
Logout
|
||||||
},
|
</Text>
|
||||||
headerRight: () => {
|
</Pressable>
|
||||||
return (
|
),
|
||||||
<View style={defaultStyles.buttonContainer}>
|
|
||||||
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{!task && (
|
<View
|
||||||
<View style={defaultStyles.container}>
|
className="rounded-3xl bg-app-surface p-5"
|
||||||
<Text style={defaultStyles.title}>Task not found</Text>
|
style={{
|
||||||
</View>
|
borderWidth: 1,
|
||||||
)}
|
borderColor: colorSet.strong,
|
||||||
|
}}
|
||||||
{task && (
|
>
|
||||||
<View style={defaultStyles.container}>
|
<View className="flex-row items-start">
|
||||||
<Text style={defaultStyles.title}>{task.title}</Text>
|
<View
|
||||||
<Text style={defaultStyles.body}>{task.description}</Text>
|
className="mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2"
|
||||||
<View style={defaultStyles.checkbox}>
|
style={{
|
||||||
{task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
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>
|
||||||
<Text style={defaultStyles.body}>{task.lastChanged}</Text>
|
|
||||||
|
|
||||||
<View style={defaultStyles.buttonContainer}>
|
<View className="flex-1">
|
||||||
<Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: task.tId }})} />
|
<Text
|
||||||
<Button title="Delete" onPress={() => DeleteTask(task.tId)} />
|
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>
|
||||||
</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/editTask',
|
||||||
|
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>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
29
lib/date.ts
Normal file
29
lib/date.ts
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
export const formatDate = (value?: string | null) => {
|
||||||
|
if (!value) return 'No date';
|
||||||
|
|
||||||
|
const date = new Date(value);
|
||||||
|
|
||||||
|
if (Number.isNaN(date.getTime())) return value;
|
||||||
|
|
||||||
|
return date.toLocaleDateString(undefined, {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const formatDateTime = (value?: string | null) => {
|
||||||
|
if (!value) return 'Unknown';
|
||||||
|
|
||||||
|
const date = new Date(value);
|
||||||
|
|
||||||
|
if (Number.isNaN(date.getTime())) return value;
|
||||||
|
|
||||||
|
return date.toLocaleString(undefined, {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: 'numeric',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
58
lib/subjectColors.ts
Normal file
58
lib/subjectColors.ts
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
export type SubjectColor =
|
||||||
|
| 'blue'
|
||||||
|
| 'emerald'
|
||||||
|
| 'amber'
|
||||||
|
| 'violet'
|
||||||
|
| 'cyan'
|
||||||
|
| 'rose'
|
||||||
|
| 'slate';
|
||||||
|
|
||||||
|
export const SUBJECT_COLORS: Record<
|
||||||
|
SubjectColor,
|
||||||
|
{ soft: string; strong: string; label: string }
|
||||||
|
> = {
|
||||||
|
blue: {
|
||||||
|
soft: '#DCEFF5',
|
||||||
|
strong: '#2F6F88',
|
||||||
|
label: 'Blue',
|
||||||
|
},
|
||||||
|
emerald: {
|
||||||
|
soft: '#DDEFE5',
|
||||||
|
strong: '#2F7D55',
|
||||||
|
label: 'Emerald',
|
||||||
|
},
|
||||||
|
amber: {
|
||||||
|
soft: '#F6E8C6',
|
||||||
|
strong: '#9A6A16',
|
||||||
|
label: 'Amber',
|
||||||
|
},
|
||||||
|
violet: {
|
||||||
|
soft: '#E9E2F5',
|
||||||
|
strong: '#6D4BA3',
|
||||||
|
label: 'Violet',
|
||||||
|
},
|
||||||
|
cyan: {
|
||||||
|
soft: '#DDF0EF',
|
||||||
|
strong: '#287C7A',
|
||||||
|
label: 'Cyan',
|
||||||
|
},
|
||||||
|
rose: {
|
||||||
|
soft: '#F4E1DF',
|
||||||
|
strong: '#9B4A43',
|
||||||
|
label: 'Rose',
|
||||||
|
},
|
||||||
|
slate: {
|
||||||
|
soft: '#E8E4DA',
|
||||||
|
strong: '#52616B',
|
||||||
|
label: 'Slate',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SUBJECT_COLOR_KEYS = Object.keys(
|
||||||
|
SUBJECT_COLORS
|
||||||
|
) as SubjectColor[];
|
||||||
|
|
||||||
|
export const getSubjectColorSet = (color?: SubjectColor) => {
|
||||||
|
const colorKey: SubjectColor = color ?? 'slate';
|
||||||
|
return SUBJECT_COLORS[colorKey];
|
||||||
|
};
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import type { SubjectColor } from '@/lib/subjectColors';
|
||||||
|
|
||||||
export type Task = {
|
export type Task = {
|
||||||
tId: string;
|
tId: string;
|
||||||
title: string;
|
title: string;
|
||||||
@@ -26,4 +28,5 @@ export type Subject = {
|
|||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
lastChanged: string;
|
lastChanged: string;
|
||||||
uId: string;
|
uId: string;
|
||||||
|
color?: SubjectColor;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user