Fixed some UI issues and routing issues
This commit is contained in:
Teodor
@@ -1,9 +1,8 @@
|
||||
import { supabase } from "@/lib/supabase";
|
||||
import { Session } from "@supabase/supabase-js";
|
||||
import { Tabs } from "expo-router";
|
||||
import { Redirect, Tabs } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
|
||||
export default function TabLayout() {
|
||||
const [session, SetSession] = useState<Session | null>(null)
|
||||
const [loading, SetLoading] = useState(true);
|
||||
@@ -28,9 +27,9 @@ export default function TabLayout() {
|
||||
return null;
|
||||
}
|
||||
|
||||
// if (!session) {
|
||||
// return <Redirect href="/createUser" />;
|
||||
// }
|
||||
if (!session) {
|
||||
return <Redirect href="/createUser" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tabs>
|
||||
@@ -38,6 +37,19 @@ export default function TabLayout() {
|
||||
<Tabs.Screen name="tasks" options={{title: "Tasks"}} />
|
||||
<Tabs.Screen name="assignments" options={{title: "Assignments"}} />
|
||||
<Tabs.Screen name="subjects" options={{title: "Subjects"}} />
|
||||
<Tabs.Screen name="timer" options={{title: "Timer"}} />
|
||||
|
||||
<Tabs.Screen name="subject/createSubject" options={{ href: null }} />
|
||||
<Tabs.Screen name="subject/editSubject" options={{ href: null }} />
|
||||
<Tabs.Screen name="subject/viewDetailsSubject" options={{ href: null }} />
|
||||
|
||||
<Tabs.Screen name="assignment/createAssignment" options={{ href: null }} />
|
||||
<Tabs.Screen name="assignment/editAssignment" options={{ href: null }} />
|
||||
<Tabs.Screen name="assignment/viewDetailsAssignment" options={{ href: null }} />
|
||||
|
||||
<Tabs.Screen name="task/createTask" options={{ href: null }} />
|
||||
<Tabs.Screen name="task/editTask" options={{ href: null }} />
|
||||
<Tabs.Screen name="task/viewDetailsTask" options={{ href: null }} />
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
213
app/(tabs)/assignment/createAssignment.tsx
Normal file
213
app/(tabs)/assignment/createAssignment.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { router, Stack, useLocalSearchParams } 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 CreateAssignment() {
|
||||
const sId = (useLocalSearchParams().sId as string) ?? null;
|
||||
|
||||
const [title, SetTitle] = useState('');
|
||||
const [description, SetDescription] = useState('');
|
||||
const [deadline, SetDeadline] = useState('');
|
||||
const [isCompleted, SetIsCompleted] = useState(false);
|
||||
const [isSaving, SetIsSaving] = useState(false);
|
||||
|
||||
const CreateAssignment = 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('assignments').insert({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
deadline: deadline.trim(),
|
||||
isCompleted,
|
||||
lastChanged: new Date().toISOString(),
|
||||
uId: data.user.id,
|
||||
sId,
|
||||
});
|
||||
|
||||
if (dbError) {
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Assignment could not be created, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert('Assignment successfully created!');
|
||||
|
||||
SetTitle('');
|
||||
SetDescription('');
|
||||
SetDeadline('');
|
||||
SetIsCompleted(false);
|
||||
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 Assignment',
|
||||
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 Assignment
|
||||
</Text>
|
||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||
Add a new assignment to keep your subject organized.
|
||||
</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 assignment 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>
|
||||
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Deadline</Text>
|
||||
<TextInput
|
||||
className={inputClassName}
|
||||
placeholder="YYYY-MM-DD"
|
||||
value={deadline}
|
||||
onChangeText={SetDeadline}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
|
||||
isCompleted
|
||||
? 'border-accent bg-accent-soft'
|
||||
: 'border-app-border bg-app-subtle'
|
||||
}`}
|
||||
onPress={() => SetIsCompleted((current) => !current)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<View
|
||||
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
|
||||
isCompleted
|
||||
? 'border-accent bg-accent'
|
||||
: 'border-app-border bg-app-surface'
|
||||
}`}
|
||||
>
|
||||
{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 later.
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-accent-disabled' : 'bg-accent'
|
||||
}`}
|
||||
onPress={CreateAssignment}
|
||||
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 Assignment
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
143
app/(tabs)/assignment/editAssignment.tsx
Normal file
143
app/(tabs)/assignment/editAssignment.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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)
|
||||
const [isSaving, SetIsSaving] = useState(false);
|
||||
|
||||
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, error: userError } = await supabase.auth.getUser();
|
||||
|
||||
if(userError || !data.user) {
|
||||
router.replace("../createUser");
|
||||
return;
|
||||
}
|
||||
|
||||
SetIsSaving(true);
|
||||
|
||||
const { error: dbError } = await supabase.from("assignments").update({
|
||||
title: assignment.title,
|
||||
description: assignment.description,
|
||||
deadline: assignment.deadline,
|
||||
isCompleted: assignment.isCompleted,
|
||||
lastChanged: new Date().toISOString(),
|
||||
uId: data.user.id,
|
||||
sId: assignment.sId,
|
||||
}).eq("aId", aId);
|
||||
|
||||
SetIsSaving(false);
|
||||
|
||||
if (dbError) {
|
||||
Alert.alert("Assignment could not be edited, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Assignment successfully edited!");
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
224
app/(tabs)/assignment/viewDetailsAssignment.tsx
Normal file
224
app/(tabs)/assignment/viewDetailsAssignment.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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)
|
||||
const [tasks, SetTasks] = useState<Task[]>([])
|
||||
const [session, SetSession] = useState<Session | null>(null)
|
||||
|
||||
const taskSections = [
|
||||
{ title: "Upcoming Tasks", data: tasks.filter((task) => !task.isCompleted), emptyMessage: "No upcoming tasks" },
|
||||
{ title: "Completed Tasks", data: tasks.filter((task) => task.isCompleted), emptyMessage: "No completed tasks" },
|
||||
];
|
||||
|
||||
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 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);
|
||||
}
|
||||
|
||||
const GetTasks = async (aId: string) => {
|
||||
const { data, error } = await supabase.from("tasks").select("*").eq("aId", aId);
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Tasks could not be fetched, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
SetTasks(data ?? []);
|
||||
}
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (session && aId) {
|
||||
GetAssignment(aId);
|
||||
GetTasks(aId);
|
||||
}
|
||||
}, [session, aId])
|
||||
);
|
||||
|
||||
const DeleteAssignment = async (aId: 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!");
|
||||
router.back();
|
||||
}
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
const DeleteTask = async (tId: string, aId: string) => {
|
||||
Alert.alert(
|
||||
"Delete Task",
|
||||
"Are you sure you want to delete this task?",
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
style: "cancel"
|
||||
},
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
const { error } = await supabase.from("tasks").delete().eq("tId", tId);
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Task could not be deleted, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Task deleted successfully!");
|
||||
GetTasks(aId);
|
||||
}
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<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>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{!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>
|
||||
|
||||
<Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: assignment.aId }})} />
|
||||
<Button title="Delete" onPress={() => DeleteAssignment(assignment.aId)} />
|
||||
</View>
|
||||
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Create Task" onPress={() => router.push({pathname: "/task/createTask", params: { aId: assignment.aId }})} />
|
||||
</View>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
195
app/(tabs)/subject/createSubject.tsx
Normal file
195
app/(tabs)/subject/createSubject.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
133
app/(tabs)/subject/editSubject.tsx
Normal file
133
app/(tabs)/subject/editSubject.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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)
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
223
app/(tabs)/subject/viewDetailsSubject.tsx
Normal file
223
app/(tabs)/subject/viewDetailsSubject.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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)
|
||||
const [assignments, SetAssignments] = useState<Assignment[]>([])
|
||||
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 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);
|
||||
}
|
||||
|
||||
const GetAssignments = async (sId: string) => {
|
||||
const { data, error } = await supabase.from("assignments").select("*").eq("sId", sId).order("deadline", { ascending: true });
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Assignments could not be fetched, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
SetAssignments(data ?? []);
|
||||
}
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (session && sId) {
|
||||
GetSubject(sId);
|
||||
GetAssignments(sId);
|
||||
}
|
||||
}, [session, sId])
|
||||
);
|
||||
|
||||
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!");
|
||||
router.back();
|
||||
}
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
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!");
|
||||
GetAssignments(sId);
|
||||
}
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<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>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{!subject && (
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Subject not found</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{subject && (
|
||||
<View style={defaultStyles.container}>
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>{subject.title}</Text>
|
||||
<Text style={defaultStyles.body}>{subject.description}</Text>
|
||||
<View style={defaultStyles.checkbox}>
|
||||
{subject.isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
</View>
|
||||
<Text style={defaultStyles.body}>{subject.lastChanged}</Text>
|
||||
|
||||
<Button title="Edit" onPress={() => router.push({pathname: "/subject/editSubject", params: { sId: subject.sId }})} />
|
||||
<Button title="Delete" onPress={() => DeleteSubject(subject.sId)} />
|
||||
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Create Assignment" onPress={() => router.push({pathname: "/assignment/createAssignment", params: { sId: subject.sId }})} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<SectionList
|
||||
sections={assignmentSections}
|
||||
keyExtractor={(item) => item.aId}
|
||||
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: "/assignment/viewDetailsAssignment", params: { aId: item.aId }})}>
|
||||
<Text style={defaultStyles.boldBody}>{item.title}</Text>
|
||||
<Text style={defaultStyles.body}>{item.deadline}</Text>
|
||||
<View style={defaultStyles.checkbox}>
|
||||
{item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
{isOwner && (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: item.aId }})} />
|
||||
<Button title="Delete" onPress={() => DeleteAssignment(item.aId, item.sId)} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
198
app/(tabs)/task/createTask.tsx
Normal file
198
app/(tabs)/task/createTask.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { router, Stack, useLocalSearchParams } 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 CreateTask() {
|
||||
const aId = (useLocalSearchParams().aId as string) ?? null;
|
||||
|
||||
const [title, SetTitle] = useState('');
|
||||
const [description, SetDescription] = useState('');
|
||||
const [isCompleted, SetIsCompleted] = useState(false);
|
||||
const [isSaving, SetIsSaving] = useState(false);
|
||||
|
||||
const CreateTask = 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('tasks').insert({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
isCompleted,
|
||||
lastChanged: new Date().toISOString(),
|
||||
uId: data.user.id,
|
||||
aId,
|
||||
});
|
||||
|
||||
if (dbError) {
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Task could not be created, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert('Task successfully created!');
|
||||
|
||||
SetTitle('');
|
||||
SetDescription('');
|
||||
SetIsCompleted(false);
|
||||
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 Task',
|
||||
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 Task
|
||||
</Text>
|
||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||
Add a small step to move this assignment forward.
|
||||
</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 task 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={() => SetIsCompleted((state) => !state)}
|
||||
disabled={isSaving}
|
||||
className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
|
||||
isCompleted
|
||||
? '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 ${
|
||||
isCompleted
|
||||
? 'border-accent bg-accent'
|
||||
: 'border-app-border bg-app-surface'
|
||||
}`}
|
||||
>
|
||||
{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 later.
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-accent-disabled' : 'bg-accent'
|
||||
}`}
|
||||
onPress={CreateTask}
|
||||
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 Task
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
135
app/(tabs)/task/editTask.tsx
Normal file
135
app/(tabs)/task/editTask.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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)
|
||||
const [isSaving, SetIsSaving] = useState(false);
|
||||
|
||||
const GetTask = async (tId: string) => {
|
||||
const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Task could not be fetched, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
SetTask(data ?? null);
|
||||
}
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (tId) {
|
||||
GetTask(tId);
|
||||
}
|
||||
}, [tId])
|
||||
);
|
||||
|
||||
const EditTask = async () => {
|
||||
if (!task) return;
|
||||
|
||||
if(task.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("tasks").update({
|
||||
title: task.title,
|
||||
description: task.description,
|
||||
isCompleted: task.isCompleted,
|
||||
lastChanged: new Date().toISOString(),
|
||||
uId: data.user.id,
|
||||
aId: task.aId,
|
||||
}).eq("tId", tId);
|
||||
|
||||
SetIsSaving(false);
|
||||
|
||||
if (dbError) {
|
||||
Alert.alert("Task could not be edited, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Task successfully edited!");
|
||||
|
||||
router.back();
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Edit Task",
|
||||
headerTitleStyle: defaultStyles.title
|
||||
}}
|
||||
/>
|
||||
|
||||
{!task && (
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Task not found</Text>
|
||||
</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
|
||||
onPress={() => SetTask(prev => prev ? { ...prev, isCompleted: !prev.isCompleted } : prev)}
|
||||
style={defaultStyles.checkboxContainer}
|
||||
>
|
||||
<View style={defaultStyles.checkbox}>
|
||||
{task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
</View>
|
||||
<Text style={defaultStyles.checkboxLabel}>{task.isCompleted ? 'Completed' : 'Not Completed'}</Text>
|
||||
</Pressable>
|
||||
|
||||
<Button title={isSaving ? "Saving..." : "Save"} onPress={EditTask} disabled={isSaving} />
|
||||
{isSaving && (
|
||||
<ActivityIndicator size="large" />
|
||||
)}
|
||||
<Button title="Cancel" onPress={() => router.back()} />
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
125
app/(tabs)/task/viewDetailsTask.tsx
Normal file
125
app/(tabs)/task/viewDetailsTask.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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)
|
||||
const [session, SetSession] = useState<Session | null>(null)
|
||||
|
||||
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 GetTask = async (tId: string) => {
|
||||
const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Task could not be fetched, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
SetTask(data ?? null);
|
||||
}
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (session && tId) {
|
||||
GetTask(tId);
|
||||
}
|
||||
}, [session, tId])
|
||||
);
|
||||
|
||||
const DeleteTask = async (tId: string) => {
|
||||
Alert.alert(
|
||||
"Delete Task",
|
||||
"Are you sure you want to delete this task?",
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
style: "cancel"
|
||||
},
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
const { error } = await supabase.from("tasks").delete().eq("tId", tId);
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Task could not be deleted, please try again");
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Task deleted successfully!");
|
||||
router.back();
|
||||
}
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<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>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{!task && (
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Task not found</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{task && (
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>{task.title}</Text>
|
||||
<Text style={defaultStyles.body}>{task.description}</Text>
|
||||
<View style={defaultStyles.checkbox}>
|
||||
{task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
</View>
|
||||
<Text style={defaultStyles.body}>{task.lastChanged}</Text>
|
||||
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: task.tId }})} />
|
||||
<Button title="Delete" onPress={() => DeleteTask(task.tId)} />
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
180
app/(tabs)/timer.tsx
Normal file
180
app/(tabs)/timer.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Animated,
|
||||
Dimensions,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
const { width, height } = Dimensions.get('window');
|
||||
|
||||
const colors = {
|
||||
black: '#323F4E',
|
||||
red: '#F76A6A',
|
||||
text: '#ffffff',
|
||||
};
|
||||
|
||||
const timers = [...Array(13).keys()].map((i) => (i === 0 ? 1 : i * 5));
|
||||
const ITEM_SIZE = width * 0.38;
|
||||
const ITEM_SPACING = (width - ITEM_SIZE) / 2;
|
||||
|
||||
/*
|
||||
Har bare skrevet timeren som en egen tab til å begynne med.
|
||||
Planen er at når bruker starter en task så vil de få opp denne timeren
|
||||
som viser TaskName og Description der tallene står nå
|
||||
Kanskje en animert figur hvis vi får tid
|
||||
*/
|
||||
export default function App() {
|
||||
const scrollX = React.useRef(new Animated.Value(0)).current;
|
||||
const [duration, setDuration] = React.useState(timers[0])
|
||||
const timerAnimation = React.useRef(new Animated.Value(height)).current
|
||||
const buttonAnimation = React.useRef(new Animated.Value(0)).current
|
||||
const animation = React.useCallback(() => {
|
||||
Animated.sequence([
|
||||
Animated.timing(buttonAnimation, {
|
||||
toValue: 1,
|
||||
duration: 300,
|
||||
useNativeDriver: true
|
||||
}),
|
||||
Animated.timing(timerAnimation, {
|
||||
toValue: 0,
|
||||
duration: 300,
|
||||
useNativeDriver: true
|
||||
}),
|
||||
Animated.timing(timerAnimation, {
|
||||
toValue: height,
|
||||
duration: duration * 1000,
|
||||
useNativeDriver: true
|
||||
}),
|
||||
]) .start(() => {
|
||||
Animated.timing(buttonAnimation, {
|
||||
toValue: 0,
|
||||
duration: 300,
|
||||
useNativeDriver: true
|
||||
}).start()
|
||||
})
|
||||
}, [duration])
|
||||
|
||||
const opacity = buttonAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 0]
|
||||
})
|
||||
const translateY = buttonAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 200]
|
||||
})
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar hidden />
|
||||
<Animated.View
|
||||
style={[StyleSheet.absoluteFillObject, {
|
||||
height,
|
||||
width,
|
||||
backgroundColor: colors.red,
|
||||
transform: [{
|
||||
translateY: timerAnimation
|
||||
}]
|
||||
}]}
|
||||
/>
|
||||
<Animated.View
|
||||
style={[
|
||||
StyleSheet.absoluteFillObject,
|
||||
{
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
paddingBottom: 100,
|
||||
opacity,
|
||||
transform: [{
|
||||
translateY
|
||||
}]
|
||||
},
|
||||
]}>
|
||||
<TouchableOpacity
|
||||
onPress={animation}>
|
||||
<View
|
||||
style={styles.roundButton}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: height / 3,
|
||||
left: 0,
|
||||
right: 0,
|
||||
flex: 1,
|
||||
}}>
|
||||
<Animated.FlatList
|
||||
data={timers}
|
||||
keyExtractor={item => item.toString()}
|
||||
horizontal
|
||||
bounces={false}
|
||||
onScroll={Animated.event(
|
||||
[{nativeEvent: {contentOffset: {x: scrollX}}}],
|
||||
{ useNativeDriver: true}
|
||||
)}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
onMomentumScrollEnd={ev => {
|
||||
const index = Math.round(ev.nativeEvent.contentOffset.x / ITEM_SIZE)
|
||||
setDuration(timers[index]);
|
||||
}}
|
||||
snapToInterval={ITEM_SIZE}
|
||||
decelerationRate={"fast"}
|
||||
style={{flexGrow: 0}}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: ITEM_SPACING
|
||||
}}
|
||||
renderItem={({item, index}) => {
|
||||
const inputRange = [
|
||||
(index - 1) * ITEM_SIZE,
|
||||
index * ITEM_SIZE,
|
||||
(index + 1) * ITEM_SIZE,
|
||||
]
|
||||
|
||||
const opacity = scrollX.interpolate({
|
||||
inputRange,
|
||||
outputRange: [.4, 1, .4]
|
||||
})
|
||||
const scale = scrollX.interpolate({
|
||||
inputRange,
|
||||
outputRange: [.7, 1, .7]
|
||||
})
|
||||
return <View style={{width: ITEM_SIZE, justifyContent: 'center', alignItems: 'center'}}>
|
||||
<Animated.Text style={[styles.text, {
|
||||
opacity,
|
||||
transform: [{
|
||||
scale
|
||||
}]
|
||||
|
||||
}]}>
|
||||
{item}
|
||||
</Animated.Text>
|
||||
</View>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.black,
|
||||
},
|
||||
roundButton: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 80,
|
||||
backgroundColor: colors.red,
|
||||
},
|
||||
text: {
|
||||
fontSize: ITEM_SIZE * 0.8,
|
||||
fontFamily: 'Menlo',
|
||||
color: colors.text,
|
||||
fontWeight: '900',
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user