createSubject and editSubject removed, upsertSubject added. Tasks and assignments removed from top-level tabs and now only accessible through Subjects -> Assignments -> Tasks. More styling in general.
This commit is contained in:
Fhj0607
@@ -3,6 +3,7 @@ import { Stack } from "expo-router";
|
||||
export default function AssignmentLayout() {
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="assignments" options={{ title: 'Assignments' }} />
|
||||
<Stack.Screen name="createAssignment" options={{ title: "Create Assignment" }} />
|
||||
<Stack.Screen name="editAssignment" options={{ title: "Edit Assignment" }} />
|
||||
<Stack.Screen name="viewDetailsAssignment" options={{ title: "Assignment Details" }} />
|
||||
|
||||
336
app/assignment/assignments.tsx
Normal file
336
app/assignment/assignments.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
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,11 +1,10 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { CheckAssignmentCompletion, CheckSubjectCompletion } from '@/lib/progress';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import type { Assignment, Task } from '@/lib/types';
|
||||
import { Session } from '@supabase/supabase-js';
|
||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
|
||||
import { Alert, Pressable, SectionList, Text, View } from "react-native";
|
||||
|
||||
export default function ViewDetailsAssignment() {
|
||||
const { aId } = useLocalSearchParams<{ aId: string }>();
|
||||
@@ -134,115 +133,270 @@ export default function ViewDetailsAssignment() {
|
||||
)
|
||||
}
|
||||
|
||||
const progress = tasks.length === 0 ? 0 : Math.round((tasks.filter(task => task.isCompleted).length / tasks.length) * 100);
|
||||
const progress =
|
||||
tasks.length === 0
|
||||
? 0
|
||||
: Math.round(
|
||||
(tasks.filter((task) => task.isCompleted).length / tasks.length) * 100
|
||||
);
|
||||
|
||||
if (!assignment) {
|
||||
return (
|
||||
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: 'Details',
|
||||
}}
|
||||
/>
|
||||
|
||||
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||
<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 (
|
||||
<View style={defaultStyles.container}>
|
||||
<View className="flex-1 bg-app-bg">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Details",
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
headerLeft: () => {
|
||||
return (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Back" onPress={router.back} />
|
||||
</View>
|
||||
)
|
||||
},
|
||||
headerRight: () => {
|
||||
return (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
|
||||
</View>
|
||||
)
|
||||
},
|
||||
title: 'Assignment 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>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{!assignment && (
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Assignment not found</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{assignment && (
|
||||
<View style={defaultStyles.container}>
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>{assignment.title}</Text>
|
||||
<Text style={defaultStyles.body}>{assignment.description}</Text>
|
||||
<Text style={defaultStyles.body}>{assignment.deadline}</Text>
|
||||
<View style={defaultStyles.checkbox}>
|
||||
{assignment.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
</View>
|
||||
<Text style={defaultStyles.body}>{assignment.lastChanged}</Text>
|
||||
<View style={{ marginTop: 10 }}>
|
||||
<Text style={{ marginBottom: 4 }}>{progress}%</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 12,
|
||||
backgroundColor: "#D9D9D9",
|
||||
borderRadius: 999,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<SectionList
|
||||
className="flex-1"
|
||||
contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 20, paddingBottom: 32 }}
|
||||
sections={taskSections}
|
||||
keyExtractor={(item) => item.tId}
|
||||
showsVerticalScrollIndicator={false}
|
||||
stickySectionHeadersEnabled={false}
|
||||
ListHeaderComponent={
|
||||
<View>
|
||||
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||
<View className="flex-row items-start">
|
||||
<View
|
||||
style={{
|
||||
width: `${progress}%`,
|
||||
height: "100%",
|
||||
backgroundColor: "#4CAF50",
|
||||
}}
|
||||
/>
|
||||
className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
|
||||
assignment.isCompleted
|
||||
? 'border-accent bg-accent'
|
||||
: 'border-app-border bg-app-subtle'
|
||||
}`}
|
||||
>
|
||||
{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 bg-app-subtle px-3 py-1">
|
||||
<Text className="text-xs font-semibold text-text-secondary">
|
||||
Deadline: {assignment.deadline || 'No deadline'}
|
||||
</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">
|
||||
{assignment.isCompleted ? 'Completed' : 'In progress'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="mt-2">
|
||||
<View className="mb-2 flex-row items-center justify-between">
|
||||
<Text className="text-sm font-semibold text-text-secondary">
|
||||
Progress
|
||||
</Text>
|
||||
<Text className="text-sm font-bold text-text-main">
|
||||
{progress}%
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="h-3 overflow-hidden rounded-full bg-app-subtle">
|
||||
<View
|
||||
className="h-full rounded-full bg-accent"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text className="mt-4 text-sm text-text-muted">
|
||||
Last changed: {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/editAssignment',
|
||||
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>
|
||||
|
||||
<Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: assignment.aId }})} />
|
||||
<Button title="Delete" onPress={() => DeleteAssignment(assignment.aId)} />
|
||||
<Pressable
|
||||
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>
|
||||
}
|
||||
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}>
|
||||
<Button title="Create Task" onPress={() => router.push({pathname: "/task/createTask", params: { aId: assignment.aId }})} />
|
||||
<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;
|
||||
|
||||
<SectionList
|
||||
sections={taskSections}
|
||||
keyExtractor={(item) => item.tId}
|
||||
renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
|
||||
renderItem={({ item }) => {
|
||||
const isOwner = session?.user.id === item.uId;
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<Pressable style={defaultStyles.container} onPress={() => router.push({pathname: "/task/viewDetailsTask", params: { tId: item.tId }})}>
|
||||
<Text style={defaultStyles.boldBody}>{item.title}</Text>
|
||||
<View style={defaultStyles.checkbox}>
|
||||
{item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
</View>
|
||||
return (
|
||||
<View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4">
|
||||
<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 ${
|
||||
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>
|
||||
</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
|
||||
className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
|
||||
onPress={() => DeleteTask(item.tId, item.aId)}
|
||||
>
|
||||
<Text className="text-sm font-bold text-status-danger">
|
||||
Delete
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
{isOwner && (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: item.tId }})} />
|
||||
<Button title="Delete" onPress={() => DeleteTask(item.tId, item.tId)} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
renderSectionFooter={({ section }) =>
|
||||
section.data.length === 0 ? (
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.body}>{section.emptyMessage}</Text>
|
||||
<View style={defaultStyles.separator} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={defaultStyles.separator} />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</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">
|
||||
Tasks for this assignment will show up here.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className="mb-2" />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user