Added progress bar for assignments (UI fix needed)

This commit is contained in:
Teodor
2026-04-23 03:27:26 +02:00
parent e178ab0b4b
commit a35353f45b
17 changed files with 388 additions and 115 deletions

View File

@@ -1,5 +1,6 @@
import { defaultStyles } from '@/constants/defaultStyles';
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';
@@ -12,19 +13,9 @@ import {
View,
} from 'react-native';
type Assignment = {
aId: string;
title: string;
description: string;
deadline: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
sId: string;
};
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 = [
@@ -55,17 +46,47 @@ export default function Assignments() {
}, []);
const GetAssignments = async () => {
const { data, error } = await supabase
const { data: assignmentsData, error: assignmentsError } = await supabase
.from('assignments')
.select('*')
.order('deadline', { ascending: false });
if (error) {
if (assignmentsError) {
Alert.alert('Assignments could not be fetched, please try again');
return;
}
SetAssignments(data ?? []);
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(
@@ -178,6 +199,9 @@ export default function Assignments() {
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
@@ -228,6 +252,28 @@ export default function Assignments() {
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>

View File

@@ -1,5 +1,6 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { supabase } from '@/lib/supabase';
import type { Subject } from '@/lib/types';
import { Ionicons } from '@expo/vector-icons';
import { Session } from '@supabase/supabase-js';
import { router, Stack, useFocusEffect } from 'expo-router';
@@ -12,15 +13,6 @@ import {
View,
} from 'react-native';
type Subject = {
sId: string;
title: string;
description: string;
isActive: boolean;
lastChanged: string;
uId: string;
};
export default function Subjects() {
const [subjects, SetSubjects] = useState<Subject[]>([]);
const [session, SetSession] = useState<Session | null>(null);

View File

@@ -1,5 +1,6 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { supabase } from '@/lib/supabase';
import type { Task } from '@/lib/types';
import { Ionicons } from '@expo/vector-icons';
import { Session } from '@supabase/supabase-js';
import { router, Stack, useFocusEffect } from 'expo-router';
@@ -12,16 +13,6 @@ import {
View,
} from 'react-native';
type Task = {
tId: string;
title: string;
description: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
aId: string;
};
export default function Tasks() {
const [tasks, SetTasks] = useState<Task[]>([]);
const [session, SetSession] = useState<Session | null>(null);

View File

@@ -1,22 +1,12 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { GetAssignmentNotificationId, RemoveAssignmentNotificationId, SaveAssignmentNotificationId } from '@/lib/asyncStorage';
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';
type Assignment = {
aId: string;
title: string;
description: string;
deadline: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
sId: string;
}
export default function EditAssignment() {
const { aId } = useLocalSearchParams<{ aId: string }>();
const [assignment, SetAssignment] = useState<Assignment | null>(null)

View File

@@ -1,31 +1,11 @@
import { defaultStyles } from '@/constants/defaultStyles';
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";
type Assignment = {
aId: string;
title: string;
description: string;
deadline: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
sId: string;
}
type Task = {
tId: string;
title: string;
description: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
aId: string;
}
export default function ViewDetailsAssignment() {
const { aId } = useLocalSearchParams<{ aId: string }>();
const [assignment, SetAssignment] = useState<Assignment | null>(null)
@@ -133,6 +113,8 @@ export default function ViewDetailsAssignment() {
)
}
const progress = tasks.length === 0 ? 0 : Math.round((tasks.filter(task => task.isCompleted).length / tasks.length) * 100);
return (
<View style={defaultStyles.container}>
<Stack.Screen
@@ -171,6 +153,27 @@ export default function ViewDetailsAssignment() {
<View style={defaultStyles.checkbox}>
{assignment.isCompleted && <Text style={defaultStyles.checkboxMark}></Text>}
</View>
<View style={{ width: "100%", marginTop: 8 }}>
<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>
<Text style={defaultStyles.body}>{assignment.lastChanged}</Text>
<Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: assignment.aId }})} />

View File

@@ -1,18 +1,10 @@
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';
type Subject = {
sId: string;
title: string;
description: string;
isActive: boolean;
lastChanged: string;
uId: string;
}
export default function EditSubject() {
const { sId } = useLocalSearchParams<{ sId: string }>();
const [subject, SetSubject] = useState<Subject | null>(null)

View File

@@ -1,30 +1,11 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { supabase } from '@/lib/supabase';
import type { Assignment, Subject } 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";
type Subject = {
sId: string;
title: string;
description: string;
isActive: boolean;
lastChanged: string;
uId: string;
}
type Assignment = {
aId: string;
title: string;
description: string;
deadline: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
sId: string;
}
export default function ViewDetailsSubject() {
const { sId } = useLocalSearchParams<{ sId: string }>();
const [subject, SetSubject] = useState<Subject | null>(null)
@@ -132,6 +113,10 @@ export default function ViewDetailsSubject() {
)
}
const CalculateSubjectCompletion = async () => {
}
return (
<View style={defaultStyles.container}>
<Stack.Screen

View File

@@ -1,4 +1,5 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { CheckAssignmentCompletion } from '@/lib/progress';
import { supabase } from '@/lib/supabase';
import { router, Stack, useLocalSearchParams } from 'expo-router';
import { useState } from 'react';
@@ -56,6 +57,14 @@ export default function CreateTask() {
Alert.alert('Task successfully created!');
if (aId) {
try {
await CheckAssignmentCompletion(aId);
} catch {
Alert.alert("Failed to update assignment completion state");
}
}
SetTitle('');
SetDescription('');
SetIsCompleted(false);

View File

@@ -1,19 +1,11 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { CheckAssignmentCompletion } from '@/lib/progress';
import { supabase } from '@/lib/supabase';
import type { Task } from '@/lib/types';
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
import { useCallback, useState } from 'react';
import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
type Task = {
tId: string;
title: string;
description: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
aId: string;
}
export default function EditTask() {
const { tId } = useLocalSearchParams<{ tId: string }>();
const [task, SetTask] = useState<Task | null>(null)
@@ -73,6 +65,14 @@ export default function EditTask() {
Alert.alert("Task successfully edited!");
if (task.aId) {
try {
await CheckAssignmentCompletion(task.aId);
} catch {
Alert.alert("Failed to update assignment completion state");
}
}
router.back();
}

View File

@@ -1,20 +1,12 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { CheckAssignmentCompletion } from '@/lib/progress';
import { supabase } from '@/lib/supabase';
import type { Task } from '@/lib/types';
import { Session } from '@supabase/supabase-js';
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
import { useCallback, useEffect, useState } from 'react';
import { Alert, Button, Text, View } from "react-native";
type Task = {
tId: string;
title: string;
description: string;
isCompleted: boolean;
lastChanged: string;
uId: string;
aId: string;
}
export default function ViewDetailsTask() {
const { tId } = useLocalSearchParams<{ tId: string }>();
const [task, SetTask] = useState<Task | null>(null)
@@ -69,6 +61,17 @@ export default function ViewDetailsTask() {
}
Alert.alert("Task deleted successfully!");
const aId = task?.aId;
if (aId) {
try {
await CheckAssignmentCompletion(aId);
} catch {
Alert.alert("Failed to update assignment completion state");
}
}
router.back();
}
}