restyle subject, assignment, and task screens with card layouts, consistent inputs, custom theme classes. replaced buttons with pressables and fixed some saving issues
This commit is contained in:
Fhj0607
@@ -28,9 +28,9 @@ export default function TabLayout() {
|
||||
return null;
|
||||
}
|
||||
|
||||
// if (!session) {
|
||||
// return <Redirect href="/createUser" />;
|
||||
// }
|
||||
// if (!session) {
|
||||
// return <Redirect href="/createUser" />;
|
||||
// }
|
||||
|
||||
return (
|
||||
<Tabs>
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
import { defaultStyles } from "@/constants/defaultStyles";
|
||||
import { supabase } from "@/lib/supabase";
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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, Button, Pressable, SectionList, Text, View } from "react-native";
|
||||
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';
|
||||
|
||||
type Assignment = {
|
||||
aId: string;
|
||||
@@ -15,36 +21,52 @@ type Assignment = {
|
||||
lastChanged: string;
|
||||
uId: string;
|
||||
sId: string;
|
||||
}
|
||||
};
|
||||
|
||||
export default function Assignments() {
|
||||
const [assignments, SetAssignments] = useState<Assignment[]>([])
|
||||
const [session, SetSession] = useState<Session | 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" },
|
||||
{
|
||||
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()
|
||||
},
|
||||
[])
|
||||
supabase.auth
|
||||
.getSession()
|
||||
.then(({ data }) => SetSession(data.session ?? null));
|
||||
|
||||
const GetAssignments = async () => {
|
||||
const { data, error } = await supabase.from("assignments").select("*").order("deadline", { ascending: false });
|
||||
const { data: sub } = supabase.auth.onAuthStateChange(
|
||||
(_event, newSession) => {
|
||||
SetSession(newSession);
|
||||
}
|
||||
);
|
||||
|
||||
return () => sub.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
const GetAssignments = async () => {
|
||||
const { data, error } = await supabase
|
||||
.from('assignments')
|
||||
.select('*')
|
||||
.order('deadline', { ascending: false });
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Assignments could not be fetched, please try again");
|
||||
Alert.alert('Assignments could not be fetched, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
SetAssignments(data ?? []);
|
||||
}
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -56,92 +78,205 @@ export default function Assignments() {
|
||||
|
||||
const DeleteAssignment = async (aId: string) => {
|
||||
Alert.alert(
|
||||
"Delete Assignment",
|
||||
"Are you sure you want to delete this assignment?",
|
||||
'Delete Assignment',
|
||||
'Are you sure you want to delete this assignment?',
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
style: "cancel"
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
const { error } = await supabase.from("assignments").delete().eq("aId", aId);
|
||||
const { error } = await supabase
|
||||
.from('assignments')
|
||||
.delete()
|
||||
.eq('aId', aId);
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Assignment could not be deleted, please try again");
|
||||
Alert.alert('Assignment could not be deleted, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Assignment deleted successfully!");
|
||||
Alert.alert('Assignment deleted successfully!');
|
||||
GetAssignments();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<View className="flex-1 bg-app-bg">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Assignments",
|
||||
title: 'Assignments',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
headerRight: () => {
|
||||
return (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Pressable style={defaultStyles.circularButton} onPress={GetAssignments}>
|
||||
<Ionicons name="refresh" size={22} color="#333" />
|
||||
</Pressable>
|
||||
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
|
||||
</View>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Create Assignment" onPress={() => router.push("/assignment/createAssignment")} />
|
||||
</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>
|
||||
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>
|
||||
|
||||
{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)} />
|
||||
</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 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;
|
||||
|
||||
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>
|
||||
</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)}
|
||||
>
|
||||
<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,10 +1,16 @@
|
||||
import { defaultStyles } from "@/constants/defaultStyles";
|
||||
import { supabase } from "@/lib/supabase";
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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, Button, Pressable, SectionList, Text, View } from "react-native";
|
||||
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';
|
||||
|
||||
type Subject = {
|
||||
sId: string;
|
||||
@@ -13,36 +19,52 @@ type Subject = {
|
||||
isActive: boolean;
|
||||
lastChanged: string;
|
||||
uId: string;
|
||||
}
|
||||
};
|
||||
|
||||
export default function Subjects() {
|
||||
const [subjects, SetSubject] = useState<Subject[]>([])
|
||||
const [session, SetSession] = useState<Session | null>(null)
|
||||
const [subjects, SetSubjects] = useState<Subject[]>([]);
|
||||
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" },
|
||||
{
|
||||
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(() => {
|
||||
supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
|
||||
const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
|
||||
SetSession(newSession)
|
||||
})
|
||||
return () => sub.subscription.unsubscribe()
|
||||
},
|
||||
[])
|
||||
supabase.auth
|
||||
.getSession()
|
||||
.then(({ data }) => SetSession(data.session ?? null));
|
||||
|
||||
const GetSubjects = async () => {
|
||||
const { data, error } = await supabase.from("subjects").select("*");
|
||||
const { data: sub } = supabase.auth.onAuthStateChange(
|
||||
(_event, newSession) => {
|
||||
SetSession(newSession);
|
||||
}
|
||||
);
|
||||
|
||||
return () => sub.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
const GetSubjects = async () => {
|
||||
const { data, error } = await supabase
|
||||
.from('subjects')
|
||||
.select('*')
|
||||
.order('lastChanged', { ascending: false });
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Subjects could not be fetched, please try again");
|
||||
Alert.alert('Subjects could not be fetched, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
SetSubject(data ?? []);
|
||||
}
|
||||
SetSubjects(data ?? []);
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -54,91 +76,206 @@ export default function Subjects() {
|
||||
|
||||
const DeleteSubject = async (sId: string) => {
|
||||
Alert.alert(
|
||||
"Delete Subject",
|
||||
"Are you sure you want to delete this subject?",
|
||||
'Delete Subject',
|
||||
'Are you sure you want to delete this subject?',
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
style: "cancel"
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
const { error } = await supabase.from("subjects").delete().eq("sId", sId);
|
||||
const { error } = await supabase
|
||||
.from('subjects')
|
||||
.delete()
|
||||
.eq('sId', sId);
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Subject could not be deleted, please try again");
|
||||
Alert.alert('Subject could not be deleted, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Subject deleted successfully!");
|
||||
Alert.alert('Subject deleted successfully!');
|
||||
GetSubjects();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<View className="flex-1 bg-app-bg">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Subjects",
|
||||
title: 'Subjects',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
headerRight: () => {
|
||||
return (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Pressable style={defaultStyles.circularButton} onPress={GetSubjects}>
|
||||
<Ionicons name="refresh" size={22} color="#333" />
|
||||
</Pressable>
|
||||
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
|
||||
</View>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Create Subject" onPress={() => router.push("/subject/createSubject")} />
|
||||
</View>
|
||||
|
||||
<SectionList
|
||||
sections={subjectSections}
|
||||
keyExtractor={(item) => item.sId}
|
||||
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.buttonContainer} onPress={() => router.push({pathname: "/subject/viewDetailsSubject", params: { sId: item.sId }})}>
|
||||
<Text style={defaultStyles.title}>{item.title}</Text>
|
||||
<View style={defaultStyles.checkbox}>
|
||||
{item.isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
</View>
|
||||
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={GetSubjects}
|
||||
>
|
||||
<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>
|
||||
|
||||
{isOwner && (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Edit" onPress={() => router.push({pathname: "/subject/editSubject", params: { sId: item.sId }})} />
|
||||
<Button title="Delete" onPress={() => DeleteSubject(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 className="flex-1 px-5 pt-5">
|
||||
<View className="mb-6">
|
||||
<Text className="text-3xl font-bold text-text-main">
|
||||
Subjects
|
||||
</Text>
|
||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||
Organize your study work by subject, then break it into assignments
|
||||
and tasks.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
|
||||
onPress={() => router.push('/subject/createSubject')}
|
||||
>
|
||||
<Text className="text-base font-bold text-text-inverse">
|
||||
Create Subject
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<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;
|
||||
|
||||
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>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,16 @@
|
||||
import { defaultStyles } from "@/constants/defaultStyles";
|
||||
import { supabase } from "@/lib/supabase";
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
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, Button, Pressable, SectionList, Text, View } from "react-native";
|
||||
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';
|
||||
|
||||
type Task = {
|
||||
tId: string;
|
||||
@@ -14,36 +20,49 @@ type Task = {
|
||||
lastChanged: string;
|
||||
uId: string;
|
||||
aId: string;
|
||||
}
|
||||
};
|
||||
|
||||
export default function Tasks() {
|
||||
const [tasks, SetTasks] = useState<Task[]>([])
|
||||
const [session, SetSession] = useState<Session | 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" },
|
||||
{
|
||||
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()
|
||||
},
|
||||
[])
|
||||
supabase.auth
|
||||
.getSession()
|
||||
.then(({ data }) => SetSession(data.session ?? null));
|
||||
|
||||
const GetTasks = async () => {
|
||||
const { data, error } = await supabase.from("tasks").select("*");
|
||||
const { data: sub } = supabase.auth.onAuthStateChange(
|
||||
(_event, newSession) => {
|
||||
SetSession(newSession);
|
||||
}
|
||||
);
|
||||
|
||||
return () => sub.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
const GetTasks = async () => {
|
||||
const { data, error } = await supabase.from('tasks').select('*');
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Tasks could not be fetched, please try again");
|
||||
Alert.alert('Tasks could not be fetched, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
SetTasks(data ?? []);
|
||||
}
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -55,91 +74,205 @@ export default function Tasks() {
|
||||
|
||||
const DeleteTask = async (tId: string) => {
|
||||
Alert.alert(
|
||||
"Delete Task",
|
||||
"Are you sure you want to delete this task?",
|
||||
'Delete Task',
|
||||
'Are you sure you want to delete this task?',
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
style: "cancel"
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
const { error } = await supabase.from("tasks").delete().eq("tId", tId);
|
||||
const { error } = await supabase
|
||||
.from('tasks')
|
||||
.delete()
|
||||
.eq('tId', tId);
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Task could not be deleted, please try again");
|
||||
Alert.alert('Task could not be deleted, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Task deleted successfully!");
|
||||
Alert.alert('Task deleted successfully!');
|
||||
GetTasks();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={defaultStyles.container}>
|
||||
<View className="flex-1 bg-app-bg">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Tasks",
|
||||
title: 'Tasks',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
headerRight: () => {
|
||||
return (
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Pressable style={defaultStyles.circularButton} onPress={GetTasks}>
|
||||
<Ionicons name="refresh" size={22} color="#333" />
|
||||
</Pressable>
|
||||
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
|
||||
</View>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={defaultStyles.buttonContainer}>
|
||||
<Button title="Create Task" onPress={() => router.push("/task/createTask")} />
|
||||
</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>
|
||||
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={GetTasks}
|
||||
>
|
||||
<Ionicons name="refresh" size={20} color="#333" />
|
||||
</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)} />
|
||||
</View>
|
||||
)}
|
||||
<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>
|
||||
);
|
||||
),
|
||||
}}
|
||||
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 className="flex-1 px-5 pt-5">
|
||||
<View className="mb-6">
|
||||
<Text className="text-3xl font-bold text-text-main">
|
||||
Tasks
|
||||
</Text>
|
||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||
Break assignments into small steps and keep your progress clear.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
|
||||
onPress={() => router.push('/task/createTask')}
|
||||
>
|
||||
<Text className="text-base font-bold text-text-inverse">
|
||||
Create Task
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<SectionList
|
||||
sections={taskSections}
|
||||
keyExtractor={(item) => item.tId}
|
||||
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;
|
||||
|
||||
return (
|
||||
<View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
|
||||
<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 className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
|
||||
<Text className="text-xs font-semibold text-text-secondary">
|
||||
{item.isCompleted ? 'Completed' : 'In progress'}
|
||||
</Text>
|
||||
</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: '/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)}
|
||||
>
|
||||
<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">
|
||||
Tasks for this assignment will show up here.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className="mb-2" />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -2,10 +2,23 @@ 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';
|
||||
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('');
|
||||
@@ -13,171 +26,188 @@ export default function CreateAssignment() {
|
||||
const [isSaving, SetIsSaving] = useState(false);
|
||||
|
||||
const CreateAssignment = async () => {
|
||||
if(title.trim() === '') {
|
||||
Alert.alert("Title is required!");
|
||||
if (title.trim() === '') {
|
||||
Alert.alert('Title is required!');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const { data, error: userError } = await supabase.auth.getUser();
|
||||
|
||||
if(userError || !data.user) {
|
||||
router.replace("../createUser");
|
||||
if (userError || !data.user) {
|
||||
router.replace('../createUser');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
SetIsSaving(true);
|
||||
|
||||
const { error: dbError } = await supabase.from("assignments").insert({
|
||||
title,
|
||||
description,
|
||||
deadline,
|
||||
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: sId,
|
||||
sId,
|
||||
});
|
||||
|
||||
if (dbError) {
|
||||
Alert.alert("Assignment could not be created, please try again");
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Assignment could not be created, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Assignment successfully created!");
|
||||
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
|
||||
title: 'Create Assignment',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Create New Assignment</Text>
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-gray-100"
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<ScrollView
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 32,
|
||||
}}
|
||||
>
|
||||
<View className="rounded-3xl bg-white p-6 shadow-lg">
|
||||
<View className="mb-4">
|
||||
<Text className="mb-2 text-sm font-semibold text-gray-700">
|
||||
Title
|
||||
</Text>
|
||||
<TextInput
|
||||
className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
|
||||
placeholder="Enter title"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={title}
|
||||
onChangeText={SetTitle}
|
||||
/>
|
||||
</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">
|
||||
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="mb-4">
|
||||
<Text className="mb-2 text-sm font-semibold text-gray-700">
|
||||
Description
|
||||
</Text>
|
||||
<TextInput
|
||||
className="min-h-28 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900" placeholder="Enter description"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={description}
|
||||
onChangeText={SetDescription}
|
||||
multiline
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="mb-4">
|
||||
<Text className="mb-2 text-sm font-semibold text-gray-700">
|
||||
Deadline
|
||||
</Text>
|
||||
<TextInput
|
||||
className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
|
||||
placeholder="YYYY-MM-DD"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={deadline}
|
||||
onChangeText={SetDeadline}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
className={`mb-6 flex-row items-center rounded-xl border p-4
|
||||
${isCompleted
|
||||
? 'border-blue-600 bg-blue-50'
|
||||
: 'border-gray-300 bg-gray-50'
|
||||
}`
|
||||
}
|
||||
onPress={() => SetIsCompleted((current) => !current)}
|
||||
>
|
||||
<View
|
||||
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2
|
||||
${isCompleted
|
||||
? 'border-blue-600 bg-blue-600'
|
||||
: 'border-gray-400 bg-white'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{isCompleted && (
|
||||
<Text className="text-base font-bold text-white">✓</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Text className="text-base font-semibold text-gray-900">
|
||||
{isCompleted ? 'Completed' : 'Not completed'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-blue-400' : 'bg-blue-600'
|
||||
}`}
|
||||
onPress={CreateAssignment}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<Text className="text-base font-bold text-white">
|
||||
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
{isSaving && (
|
||||
<View className="mt-4">
|
||||
<ActivityIndicator size="small" />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Pressable
|
||||
className="mt-3 h-14 items-center justify-center rounded-2xl bg-gray-200"
|
||||
onPress={() => router.back()}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<Text className="text-base font-bold text-gray-900">
|
||||
Cancel
|
||||
</Text>
|
||||
</Pressable>
|
||||
<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>
|
||||
</ScrollView>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -2,99 +2,194 @@ import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { router, Stack } from 'expo-router';
|
||||
import { 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 CreateTask() {
|
||||
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!");
|
||||
if (title.trim() === '') {
|
||||
Alert.alert('Title is required!');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const { data, error: userError } = await supabase.auth.getUser();
|
||||
|
||||
if(userError || !data.user) {
|
||||
router.replace("../createUser");
|
||||
if (userError || !data.user) {
|
||||
router.replace('../createUser');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
SetIsSaving(true);
|
||||
|
||||
const { error: dbError } = await supabase.from("subjects").insert({
|
||||
title,
|
||||
description,
|
||||
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) {
|
||||
Alert.alert("Subject could not be created, please try again");
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Subject could not be created, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Subject successfully created!");
|
||||
Alert.alert('Subject successfully created!');
|
||||
|
||||
SetTitle('');
|
||||
SetDescription('');
|
||||
SetIsActive(false);
|
||||
|
||||
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
|
||||
title: 'Create Subject',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Create New 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="Enter title"
|
||||
value={title}
|
||||
onChangeText={SetTitle}
|
||||
/>
|
||||
<TextInput
|
||||
style={defaultStyles.inputText}
|
||||
placeholder="Enter description"
|
||||
value={description}
|
||||
onChangeText={SetDescription}
|
||||
/>
|
||||
<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)}
|
||||
style={defaultStyles.checkboxContainer}
|
||||
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 style={defaultStyles.checkbox}>
|
||||
{isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
<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>
|
||||
<Text style={defaultStyles.checkboxLabel}>{isActive ? 'Active' : 'Inactive'}</Text>
|
||||
</Pressable>
|
||||
|
||||
<Button title={isSaving ? "Saving..." : "Save"} onPress={CreateSubject} disabled={isSaving} />
|
||||
{isSaving && (
|
||||
<ActivityIndicator size="large" />
|
||||
)}
|
||||
<Button title="Cancel" onPress={() => router.back()} />
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -2,102 +2,197 @@ import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { router, Stack, useLocalSearchParams } from 'expo-router';
|
||||
import { 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 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!");
|
||||
if (title.trim() === '') {
|
||||
Alert.alert('Title is required!');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const { data, error: userError } = await supabase.auth.getUser();
|
||||
|
||||
if(userError || !data.user) {
|
||||
router.replace("../createUser");
|
||||
if (userError || !data.user) {
|
||||
router.replace('../createUser');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
SetIsSaving(true);
|
||||
|
||||
const { error: dbError } = await supabase.from("tasks").insert({
|
||||
title,
|
||||
description,
|
||||
const { error: dbError } = await supabase.from('tasks').insert({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
isCompleted,
|
||||
lastChanged: new Date().toISOString(),
|
||||
uId: data.user.id,
|
||||
aId: aId,
|
||||
aId,
|
||||
});
|
||||
|
||||
if (dbError) {
|
||||
Alert.alert("Task could not be created, please try again");
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Task could not be created, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert("Task successfully created!");
|
||||
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
|
||||
title: 'Create Task',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={defaultStyles.container}>
|
||||
<Text style={defaultStyles.title}>Create New 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="Enter title"
|
||||
value={title}
|
||||
onChangeText={SetTitle}
|
||||
/>
|
||||
<TextInput
|
||||
style={defaultStyles.inputText}
|
||||
placeholder="Enter description"
|
||||
value={description}
|
||||
onChangeText={SetDescription}
|
||||
/>
|
||||
<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)}
|
||||
style={defaultStyles.checkboxContainer}
|
||||
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 style={defaultStyles.checkbox}>
|
||||
{isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
|
||||
<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>
|
||||
<Text style={defaultStyles.checkboxLabel}>{isCompleted ? 'Completed' : 'Not completed'}</Text>
|
||||
</Pressable>
|
||||
|
||||
<Button title={isSaving ? "Saving..." : "Save"} onPress={CreateTask} disabled={isSaving} />
|
||||
{isSaving && (
|
||||
<ActivityIndicator size="large" />
|
||||
)}
|
||||
<Button title="Cancel" onPress={() => router.back()} />
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
1
package-lock.json
generated
1
package-lock.json
generated
@@ -7,6 +7,7 @@
|
||||
"": {
|
||||
"name": "study-sprint",
|
||||
"version": "1.0.0",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^15.0.3",
|
||||
"@react-navigation/bottom-tabs": "^7.4.0",
|
||||
|
||||
@@ -10,59 +10,60 @@ module.exports = {
|
||||
extend: {
|
||||
colors: {
|
||||
app: {
|
||||
bg: "var(--color-bg)",
|
||||
surface: "var(--color-surface)",
|
||||
subtle: "var(--color-subtle)",
|
||||
border: "var(--color-border)",
|
||||
bg: '#F7F5EF',
|
||||
surface: '#FFFFFF',
|
||||
subtle: '#EFEBE3',
|
||||
border: '#DDD6C8',
|
||||
},
|
||||
|
||||
text: {
|
||||
main: "var(--color-text-main)",
|
||||
secondary: "var(--color-text-secondary)",
|
||||
muted: "var(--color-text-muted)",
|
||||
inverse: "var(--color-text-inverse)",
|
||||
main: '#1F2933',
|
||||
secondary: '#52616B',
|
||||
muted: '#9AA6B2',
|
||||
inverse: '#FFFFFF',
|
||||
},
|
||||
|
||||
accent: {
|
||||
DEFAULT: "var(--color-accent)",
|
||||
soft: "var(--color-accent-soft)",
|
||||
hover: "var(--color-accent-hover)",
|
||||
DEFAULT: '#3B82A0',
|
||||
soft: '#DCEFF5',
|
||||
hover: '#2F6F88',
|
||||
disabled: '#9CC7D6',
|
||||
},
|
||||
|
||||
status: {
|
||||
success: "var(--color-success)",
|
||||
warning: "var(--color-warning)",
|
||||
danger: "var(--color-danger)",
|
||||
success: '#15803D',
|
||||
warning: '#B7791F',
|
||||
danger: '#B91C1C',
|
||||
},
|
||||
|
||||
subject: {
|
||||
blue: {
|
||||
bg: "var(--subject-blue-bg)",
|
||||
text: "var(--subject-blue-text)",
|
||||
bg: '#DCEFF5',
|
||||
text: '#2F6F88',
|
||||
},
|
||||
emerald: {
|
||||
bg: "var(--subject-emerald-bg)",
|
||||
text: "var(--subject-emerald-text)",
|
||||
bg: '#DDEFE5',
|
||||
text: '#2F7D55',
|
||||
},
|
||||
amber: {
|
||||
bg: "var(--subject-amber-bg)",
|
||||
text: "var(--subject-amber-text)",
|
||||
bg: '#F6E8C6',
|
||||
text: '#9A6A16',
|
||||
},
|
||||
violet: {
|
||||
bg: "var(--subject-violet-bg)",
|
||||
text: "var(--subject-violet-text)",
|
||||
bg: '#E9E2F5',
|
||||
text: '#6D4BA3',
|
||||
},
|
||||
cyan: {
|
||||
bg: "var(--subject-cyan-bg)",
|
||||
text: "var(--subject-cyan-text)",
|
||||
bg: '#DDF0EF',
|
||||
text: '#287C7A',
|
||||
},
|
||||
rose: {
|
||||
bg: "var(--subject-rose-bg)",
|
||||
text: "var(--subject-rose-text)",
|
||||
bg: '#F4E1DF',
|
||||
text: '#9B4A43',
|
||||
},
|
||||
slate: {
|
||||
bg: "var(--subject-slate-bg)",
|
||||
text: "var(--subject-slate-text)",
|
||||
bg: '#E8E4DA',
|
||||
text: '#52616B',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user