Merge branch 'main' into tailwind
This commit is contained in:
Teodor Salvesen
@@ -69,4 +69,4 @@ export default function TabLayout() {
|
||||
<Tabs.Screen name="timer" options={{title: "Timer"}} />
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,14 +4,9 @@ import { Subject } from '@/lib/types';
|
||||
import { Session } from '@supabase/supabase-js';
|
||||
import { router, Stack, useFocusEffect } from 'expo-router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { ActivityIndicator, Alert, Pressable, ScrollView, Text, View } from 'react-native';
|
||||
|
||||
import type { SubjectColor } from '@/lib/subjectColors';
|
||||
|
||||
export default function Subjects() {
|
||||
const [subjects, SetSubjects] = useState<Subject[]>([]);
|
||||
@@ -43,12 +38,16 @@ export default function Subjects() {
|
||||
|
||||
SetIsLoading(true);
|
||||
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('subjects')
|
||||
.select('*')
|
||||
.eq('uId', session.user.id)
|
||||
.order('lastChanged', { ascending: false });
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (error) {
|
||||
Alert.alert('Subjects could not be fetched, please try again');
|
||||
SetIsLoading(false);
|
||||
@@ -133,6 +132,13 @@ export default function Subjects() {
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center bg-app-bg">
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-app-bg">
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Animated,
|
||||
Dimensions,
|
||||
Easing,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
|
||||
const colors = {
|
||||
@@ -15,147 +19,701 @@ const colors = {
|
||||
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])
|
||||
TODO
|
||||
Make timer count down even when app is un-focused or closed.
|
||||
Set const endTime = Date.now() + duration and save that to the task, maybe?
|
||||
Then trigger notif when endTime == Date.now()?
|
||||
Then fetch endTime from DB -> if null then timer is inactive
|
||||
if !null then set timer to endTime - Date.now() and start
|
||||
Might have to save duration as well in DB to preserve timer animation persistance
|
||||
*/
|
||||
|
||||
|
||||
const TIMER_OPTIONS = [...Array(13).keys()].map((index) => (index === 0 ? 1 : index * 5));
|
||||
const ITEM_SIZE = width * 0.38;
|
||||
const ITEM_SPACING = (width - ITEM_SIZE) / 2;
|
||||
const TIMER_UNIT_IN_SECONDS = 60;
|
||||
const HOLD_TO_CANCEL_MS = 2000;
|
||||
const CANCEL_ANIMATION_DELAY_MS = 250;
|
||||
const BUTTON_PRESS_IN_MS = 80;
|
||||
const BUTTON_PRESS_OUT_MS = 140;
|
||||
|
||||
const placeholderTask = {
|
||||
name: 'Read chapter 4',
|
||||
description: 'Focus on the summary questions and write down anything unclear.',
|
||||
};
|
||||
|
||||
function formatTime(totalSeconds: number) {
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export default function TimerScreen() {
|
||||
const [containerHeight, setContainerHeight] = React.useState(0);
|
||||
const [duration, setDuration] = React.useState(TIMER_OPTIONS[0]);
|
||||
const [timerIsRunning, setIsRunning] = React.useState(false);
|
||||
const [timeRemaining, setTimeRemaining] = React.useState(0);
|
||||
|
||||
const scrollX = React.useRef(new Animated.Value(0)).current;
|
||||
const timerAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
const buttonAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
const taskDetailsAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
const countdownAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
const cancelButtonAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
const pressedButtonAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
const focusModeAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
const cancelOverlayAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
|
||||
const countdownRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const cancelHoldTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const cancelHoldAnimationDelayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const runningAnimationRef = React.useRef<Animated.CompositeAnimation | null>(null);
|
||||
const progressAnimationRef = React.useRef<Animated.CompositeAnimation | null>(null);
|
||||
const sessionStartedAtRef = React.useRef<number | null>(null);
|
||||
const sessionDurationMsRef = React.useRef(0);
|
||||
const cancelAccelStartedRef = React.useRef(false);
|
||||
const cancelHoldActiveRef = React.useRef(false);
|
||||
const cancelHoldIdRef = React.useRef(0);
|
||||
const cancelHoldStartedAtRef = React.useRef(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (containerHeight > 0 && !timerIsRunning) {
|
||||
timerAnimation.setValue(containerHeight);
|
||||
}
|
||||
}, [containerHeight, timerIsRunning, timerAnimation]);
|
||||
|
||||
const pressedButtonScale = pressedButtonAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 0.9],
|
||||
});
|
||||
|
||||
const cancelButtonTranslateY = cancelButtonAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [16, 0],
|
||||
});
|
||||
|
||||
// Real timer progress comes from timerAnimation. The cancel hold adds a
|
||||
// temporary visual offset on top so release/cancel logic does not fight the
|
||||
// underlying progress animation.
|
||||
const timerOverlayTranslateY = Animated.add(
|
||||
timerAnimation,
|
||||
cancelOverlayAnimation
|
||||
).interpolate({
|
||||
inputRange: [0, Math.max(containerHeight, 1)],
|
||||
outputRange: [0, Math.max(containerHeight, 1)],
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
|
||||
const countdownTranslateX = focusModeAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, -width * 0.3],
|
||||
});
|
||||
|
||||
const countdownTranslateY = focusModeAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, -containerHeight * 0.35],
|
||||
});
|
||||
|
||||
const countdownScale = focusModeAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 0.55],
|
||||
});
|
||||
|
||||
const startButtonOpacity = buttonAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 0],
|
||||
});
|
||||
|
||||
const startButtonTranslateY = buttonAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 200],
|
||||
});
|
||||
|
||||
const pickerOpacity = buttonAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 0],
|
||||
});
|
||||
|
||||
const taskDetailsOpacity = taskDetailsAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 1],
|
||||
});
|
||||
|
||||
const taskDetailsTranslateY = taskDetailsAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [20, 0],
|
||||
});
|
||||
|
||||
const clearCountdownInterval = React.useCallback(() => {
|
||||
if (countdownRef.current) {
|
||||
clearInterval(countdownRef.current);
|
||||
countdownRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearCancelHoldTimeouts = React.useCallback(() => {
|
||||
if (cancelHoldTimeoutRef.current) {
|
||||
clearTimeout(cancelHoldTimeoutRef.current);
|
||||
cancelHoldTimeoutRef.current = null;
|
||||
}
|
||||
|
||||
if (cancelHoldAnimationDelayRef.current) {
|
||||
clearTimeout(cancelHoldAnimationDelayRef.current);
|
||||
cancelHoldAnimationDelayRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const stopRunningAnimations = React.useCallback(() => {
|
||||
runningAnimationRef.current?.stop();
|
||||
runningAnimationRef.current = null;
|
||||
|
||||
progressAnimationRef.current?.stop();
|
||||
progressAnimationRef.current = null;
|
||||
|
||||
cancelOverlayAnimation.stopAnimation();
|
||||
}, [cancelOverlayAnimation]);
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
clearCountdownInterval();
|
||||
clearCancelHoldTimeouts();
|
||||
stopRunningAnimations();
|
||||
};
|
||||
}, [clearCancelHoldTimeouts, clearCountdownInterval, stopRunningAnimations]);
|
||||
|
||||
const animateButtonPress = React.useCallback(
|
||||
(pressed: boolean) => {
|
||||
Animated.timing(pressedButtonAnimation, {
|
||||
toValue: pressed ? 1 : 0,
|
||||
duration: pressed ? BUTTON_PRESS_IN_MS : BUTTON_PRESS_OUT_MS,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
},
|
||||
[pressedButtonAnimation]
|
||||
);
|
||||
|
||||
const resetSessionValues = React.useCallback(() => {
|
||||
sessionStartedAtRef.current = null;
|
||||
sessionDurationMsRef.current = 0;
|
||||
cancelHoldActiveRef.current = false;
|
||||
cancelAccelStartedRef.current = false;
|
||||
|
||||
timerAnimation.setValue(containerHeight);
|
||||
cancelOverlayAnimation.setValue(0);
|
||||
setTimeRemaining(0);
|
||||
setIsRunning(false);
|
||||
}, [cancelOverlayAnimation, containerHeight, timerAnimation]);
|
||||
|
||||
const finishTimer = React.useCallback(() => {
|
||||
clearCountdownInterval();
|
||||
|
||||
Animated.parallel([
|
||||
Animated.timing(countdownAnimation, {
|
||||
toValue: 0,
|
||||
duration: 200,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(focusModeAnimation, {
|
||||
toValue: 0,
|
||||
duration: 250,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(taskDetailsAnimation, {
|
||||
toValue: 0,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start(() => {
|
||||
Animated.parallel([
|
||||
Animated.timing(buttonAnimation, {
|
||||
toValue: 0,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(cancelButtonAnimation, {
|
||||
toValue: 0,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start(() => {
|
||||
setIsRunning(false);
|
||||
/* TODO
|
||||
Implement store and send of ellapsed time value in seconds to DB
|
||||
for total time spent statistic
|
||||
*/
|
||||
|
||||
resetSessionValues();
|
||||
});
|
||||
});
|
||||
}, [
|
||||
buttonAnimation,
|
||||
cancelButtonAnimation,
|
||||
clearCountdownInterval,
|
||||
countdownAnimation,
|
||||
focusModeAnimation,
|
||||
resetSessionValues,
|
||||
taskDetailsAnimation,
|
||||
]);
|
||||
|
||||
// This picks up the timer overlay animation from the current Y position and
|
||||
// runs it to the bottom over the remaining session time.
|
||||
const startProgressAnimation = React.useCallback(
|
||||
(fromY: number) => {
|
||||
const elapsedRatio = fromY / containerHeight;
|
||||
const remainingMs = sessionDurationMsRef.current * (1 - elapsedRatio);
|
||||
|
||||
sessionStartedAtRef.current = Date.now() - sessionDurationMsRef.current * elapsedRatio;
|
||||
timerAnimation.setValue(fromY);
|
||||
|
||||
const progressAnimation = Animated.timing(timerAnimation, {
|
||||
toValue: containerHeight,
|
||||
duration: remainingMs,
|
||||
useNativeDriver: true,
|
||||
});
|
||||
|
||||
progressAnimationRef.current = progressAnimation;
|
||||
progressAnimation.start(({ finished }) => {
|
||||
progressAnimationRef.current = null;
|
||||
|
||||
if (!finished) {
|
||||
return;
|
||||
}
|
||||
|
||||
finishTimer();
|
||||
});
|
||||
},
|
||||
[containerHeight, finishTimer, timerAnimation]
|
||||
);
|
||||
|
||||
const runStartSequence = React.useCallback(() => {
|
||||
const runningAnimation = Animated.sequence([
|
||||
Animated.parallel([
|
||||
Animated.timing(buttonAnimation, {
|
||||
toValue: 1,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(cancelButtonAnimation, {
|
||||
toValue: 1,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(countdownAnimation, {
|
||||
toValue: 1,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(timerAnimation, {
|
||||
toValue: 0,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]),
|
||||
Animated.timing(focusModeAnimation, {
|
||||
toValue: 1,
|
||||
duration: 450,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(taskDetailsAnimation, {
|
||||
toValue: 1,
|
||||
duration: 500,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]);
|
||||
|
||||
runningAnimationRef.current = runningAnimation;
|
||||
runningAnimation.start(({ finished }) => {
|
||||
runningAnimationRef.current = null;
|
||||
|
||||
if (!finished) {
|
||||
return;
|
||||
}
|
||||
|
||||
startProgressAnimation(0);
|
||||
});
|
||||
}, [
|
||||
buttonAnimation,
|
||||
cancelButtonAnimation,
|
||||
countdownAnimation,
|
||||
focusModeAnimation,
|
||||
startProgressAnimation,
|
||||
taskDetailsAnimation,
|
||||
timerAnimation,
|
||||
]);
|
||||
|
||||
const startCountdown = React.useCallback(
|
||||
(totalSeconds: number) => {
|
||||
setTimeRemaining(totalSeconds);
|
||||
clearCountdownInterval();
|
||||
|
||||
countdownRef.current = setInterval(() => {
|
||||
setTimeRemaining((currentTime) => {
|
||||
if (currentTime <= 1) {
|
||||
clearCountdownInterval();
|
||||
return 0;
|
||||
}
|
||||
|
||||
return currentTime - 1;
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
[clearCountdownInterval]
|
||||
);
|
||||
|
||||
const startTimerSession = React.useCallback(() => {
|
||||
if (timerIsRunning || containerHeight === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
setIsRunning(true);
|
||||
|
||||
taskDetailsAnimation.setValue(0);
|
||||
countdownAnimation.setValue(0);
|
||||
cancelOverlayAnimation.setValue(0);
|
||||
|
||||
const totalSeconds = duration * TIMER_UNIT_IN_SECONDS;
|
||||
sessionStartedAtRef.current = Date.now();
|
||||
sessionDurationMsRef.current = totalSeconds * 1000;
|
||||
|
||||
startCountdown(totalSeconds);
|
||||
runStartSequence();
|
||||
}, [
|
||||
cancelOverlayAnimation,
|
||||
containerHeight,
|
||||
countdownAnimation,
|
||||
duration,
|
||||
runStartSequence,
|
||||
startCountdown,
|
||||
taskDetailsAnimation,
|
||||
timerIsRunning,
|
||||
]);
|
||||
|
||||
const cancelTimer = React.useCallback(() => {
|
||||
if (!timerIsRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearCountdownInterval();
|
||||
clearCancelHoldTimeouts();
|
||||
stopRunningAnimations();
|
||||
|
||||
Animated.parallel([
|
||||
Animated.timing(cancelButtonAnimation, {
|
||||
toValue: 0,
|
||||
duration: 180,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(taskDetailsAnimation, {
|
||||
toValue: 0,
|
||||
duration: 220,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(focusModeAnimation, {
|
||||
toValue: 0,
|
||||
duration: 250,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(countdownAnimation, {
|
||||
toValue: 0,
|
||||
duration: 180,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(timerAnimation, {
|
||||
toValue: containerHeight,
|
||||
duration: 300,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(cancelOverlayAnimation, {
|
||||
toValue: 0,
|
||||
duration: 120,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start(() => {
|
||||
Animated.timing(buttonAnimation, {
|
||||
toValue: 0,
|
||||
duration: 220,
|
||||
useNativeDriver: true,
|
||||
}).start(() => {
|
||||
resetSessionValues();
|
||||
});
|
||||
});
|
||||
}, [
|
||||
buttonAnimation,
|
||||
cancelButtonAnimation,
|
||||
cancelOverlayAnimation,
|
||||
clearCancelHoldTimeouts,
|
||||
clearCountdownInterval,
|
||||
containerHeight,
|
||||
countdownAnimation,
|
||||
focusModeAnimation,
|
||||
resetSessionValues,
|
||||
stopRunningAnimations,
|
||||
taskDetailsAnimation,
|
||||
timerAnimation,
|
||||
timerIsRunning,
|
||||
]);
|
||||
|
||||
const handleCancelHoldStart = React.useCallback(() => {
|
||||
animateButtonPress(true);
|
||||
cancelHoldIdRef.current += 1;
|
||||
|
||||
const cancelHoldId = cancelHoldIdRef.current;
|
||||
cancelHoldActiveRef.current = true;
|
||||
cancelHoldStartedAtRef.current = Date.now();
|
||||
cancelAccelStartedRef.current = false;
|
||||
|
||||
cancelHoldAnimationDelayRef.current = setTimeout(() => {
|
||||
cancelHoldAnimationDelayRef.current = null;
|
||||
|
||||
if (!cancelHoldActiveRef.current || cancelHoldIdRef.current !== cancelHoldId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The hold starts with normal button feedback. After a short delay, we
|
||||
// begin the accelerated red overlay preview so quick taps do not cause a
|
||||
// jolt, while long holds still clearly show that cancel is about to fire.
|
||||
cancelAccelStartedRef.current = true;
|
||||
cancelOverlayAnimation.setValue(0);
|
||||
|
||||
const elapsedHoldMs = Date.now() - cancelHoldStartedAtRef.current;
|
||||
const remainingHoldMs = Math.max(1, HOLD_TO_CANCEL_MS - elapsedHoldMs);
|
||||
const sessionStartedAt = sessionStartedAtRef.current ?? Date.now();
|
||||
const elapsedAtCancelMs = Date.now() + remainingHoldMs - sessionStartedAt;
|
||||
const expectedProgress = elapsedAtCancelMs / sessionDurationMsRef.current;
|
||||
const clampedProgress = Math.max(0, Math.min(expectedProgress, 1));
|
||||
const expectedYAtCancel = containerHeight * clampedProgress;
|
||||
const cancelOffset = Math.max(0, containerHeight - expectedYAtCancel);
|
||||
|
||||
Animated.timing(cancelOverlayAnimation, {
|
||||
toValue: cancelOffset,
|
||||
duration: remainingHoldMs,
|
||||
easing: Easing.in(Easing.quad),
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, CANCEL_ANIMATION_DELAY_MS);
|
||||
|
||||
cancelHoldTimeoutRef.current = setTimeout(() => {
|
||||
cancelHoldActiveRef.current = false;
|
||||
cancelHoldIdRef.current += 1;
|
||||
cancelAccelStartedRef.current = false;
|
||||
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
|
||||
cancelTimer();
|
||||
cancelHoldTimeoutRef.current = null;
|
||||
}, HOLD_TO_CANCEL_MS);
|
||||
}, [animateButtonPress, cancelOverlayAnimation, cancelTimer, containerHeight]);
|
||||
|
||||
const handleCancelHoldEnd = React.useCallback(() => {
|
||||
animateButtonPress(false);
|
||||
cancelHoldActiveRef.current = false;
|
||||
cancelHoldIdRef.current += 1;
|
||||
|
||||
clearCancelHoldTimeouts();
|
||||
|
||||
if (!cancelAccelStartedRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
cancelAccelStartedRef.current = false;
|
||||
cancelOverlayAnimation.stopAnimation((currentOffset) => {
|
||||
cancelOverlayAnimation.setValue(currentOffset);
|
||||
Animated.timing(cancelOverlayAnimation, {
|
||||
toValue: 0,
|
||||
duration: 750,
|
||||
easing: Easing.in(Easing.bounce),
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
});
|
||||
}, [animateButtonPress, cancelOverlayAnimation, clearCancelHoldTimeouts]);
|
||||
|
||||
const handleTimerPickerMomentumEnd = React.useCallback(
|
||||
(event: { nativeEvent: { contentOffset: { x: number } } }) => {
|
||||
if (timerIsRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
const index = Math.round(event.nativeEvent.contentOffset.x / ITEM_SIZE);
|
||||
const clampedIndex = Math.max(0, Math.min(index, TIMER_OPTIONS.length - 1));
|
||||
setDuration(TIMER_OPTIONS[clampedIndex]);
|
||||
},
|
||||
[timerIsRunning]
|
||||
);
|
||||
|
||||
const renderTimerItem = React.useCallback(
|
||||
({ item, index }: { item: number; index: number }) => {
|
||||
const inputRange = [
|
||||
(index - 1) * ITEM_SIZE,
|
||||
index * ITEM_SIZE,
|
||||
(index + 1) * ITEM_SIZE,
|
||||
];
|
||||
|
||||
const baseOpacity = scrollX.interpolate({
|
||||
inputRange,
|
||||
outputRange: [0.4, 1, 0.4],
|
||||
});
|
||||
|
||||
const opacity = Animated.multiply(baseOpacity, pickerOpacity);
|
||||
const scale = scrollX.interpolate({
|
||||
inputRange,
|
||||
outputRange: [0.7, 1, 0.7],
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.timerOptionItem}>
|
||||
<Animated.Text
|
||||
style={[
|
||||
styles.text,
|
||||
{
|
||||
opacity,
|
||||
transform: [{ scale }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
{item}
|
||||
</Animated.Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
[pickerOpacity, scrollX]
|
||||
);
|
||||
|
||||
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}>
|
||||
<View
|
||||
style={styles.container}
|
||||
onLayout={(event) => {
|
||||
setContainerHeight(event.nativeEvent.layout.height);
|
||||
}}
|
||||
>
|
||||
<StatusBar hidden />
|
||||
<Animated.View
|
||||
style={[StyleSheet.absoluteFillObject, {
|
||||
height,
|
||||
width,
|
||||
backgroundColor: colors.red,
|
||||
transform: [{
|
||||
translateY: timerAnimation
|
||||
}]
|
||||
}]}
|
||||
/>
|
||||
|
||||
<Animated.View
|
||||
style={[
|
||||
StyleSheet.absoluteFillObject,
|
||||
styles.timerOverlay,
|
||||
{
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
paddingBottom: 100,
|
||||
opacity,
|
||||
transform: [{
|
||||
translateY
|
||||
}]
|
||||
height: containerHeight,
|
||||
width,
|
||||
transform: [{ translateY: timerOverlayTranslateY }],
|
||||
},
|
||||
]}>
|
||||
]}
|
||||
/>
|
||||
|
||||
<Animated.View
|
||||
style={[
|
||||
StyleSheet.absoluteFillObject,
|
||||
styles.startButtonContainer,
|
||||
{
|
||||
opacity: startButtonOpacity,
|
||||
transform: [{ translateY: startButtonTranslateY }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={animation}>
|
||||
<View
|
||||
style={styles.roundButton}
|
||||
/>
|
||||
disabled={timerIsRunning}
|
||||
onPress={startTimerSession}
|
||||
onPressIn={() => animateButtonPress(true)}
|
||||
onPressOut={() => animateButtonPress(false)}
|
||||
>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.roundButton,
|
||||
{
|
||||
transform: [{ scale: pressedButtonScale }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text className="text-text-main text-xl">Start</Text>
|
||||
<Text className="text-text-main text-xl">Sprint</Text>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
|
||||
<Animated.View
|
||||
pointerEvents={timerIsRunning ? 'auto' : 'none'}
|
||||
style={[
|
||||
styles.cancelButtonContainer,
|
||||
{
|
||||
opacity: cancelButtonAnimation,
|
||||
transform: [{ translateY: cancelButtonTranslateY }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TouchableOpacity onPressIn={handleCancelHoldStart} onPressOut={handleCancelHoldEnd}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.cancelButton,
|
||||
{
|
||||
transform: [{ scale: pressedButtonScale }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text className="text-text-main text-xl">Hold to end sprint</Text>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
|
||||
<Animated.View
|
||||
pointerEvents="none"
|
||||
style={[
|
||||
styles.countdownOverlay,
|
||||
{
|
||||
opacity: countdownAnimation,
|
||||
transform: [
|
||||
{ translateX: countdownTranslateX },
|
||||
{ translateY: countdownTranslateY },
|
||||
{ scale: countdownScale },
|
||||
],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={styles.countdownText}>{formatTime(timeRemaining)}</Text>
|
||||
</Animated.View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: height / 3,
|
||||
left: 0,
|
||||
right: 0,
|
||||
flex: 1,
|
||||
}}>
|
||||
<Animated.FlatList
|
||||
data={timers}
|
||||
keyExtractor={item => item.toString()}
|
||||
style={[
|
||||
styles.timerPickerWrapper,
|
||||
{
|
||||
top: containerHeight / 3,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Animated.FlatList
|
||||
data={TIMER_OPTIONS}
|
||||
scrollEnabled={!timerIsRunning}
|
||||
keyExtractor={(item) => item.toString()}
|
||||
horizontal
|
||||
bounces={false}
|
||||
onScroll={Animated.event(
|
||||
[{nativeEvent: {contentOffset: {x: scrollX}}}],
|
||||
{ useNativeDriver: true}
|
||||
)}
|
||||
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]);
|
||||
}}
|
||||
onMomentumScrollEnd={handleTimerPickerMomentumEnd}
|
||||
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,
|
||||
]
|
||||
decelerationRate="fast"
|
||||
style={styles.timerPickerList}
|
||||
contentContainerStyle={styles.timerPickerContent}
|
||||
renderItem={renderTimerItem}
|
||||
/>
|
||||
</View>
|
||||
|
||||
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>
|
||||
<Animated.View
|
||||
pointerEvents="none"
|
||||
style={[
|
||||
styles.taskDetails,
|
||||
{
|
||||
opacity: taskDetailsOpacity,
|
||||
transform: [{ translateY: taskDetailsTranslateY }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={styles.taskName}>{placeholderTask.name}</Text>
|
||||
<Text style={styles.taskDescription}>{placeholderTask.description}</Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -165,16 +723,98 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
backgroundColor: colors.black,
|
||||
},
|
||||
timerOverlay: {
|
||||
backgroundColor: colors.red,
|
||||
},
|
||||
startButtonContainer: {
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
paddingBottom: 100,
|
||||
},
|
||||
roundButton: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 80,
|
||||
backgroundColor: colors.red,
|
||||
backgroundColor: '#beb9a7',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
timerPickerWrapper: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
flex: 1,
|
||||
},
|
||||
timerPickerList: {
|
||||
flexGrow: 0,
|
||||
},
|
||||
timerPickerContent: {
|
||||
paddingHorizontal: ITEM_SPACING,
|
||||
},
|
||||
timerOptionItem: {
|
||||
width: ITEM_SIZE,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
text: {
|
||||
fontSize: ITEM_SIZE * 0.8,
|
||||
fontFamily: 'Menlo',
|
||||
color: colors.text,
|
||||
fontWeight: '900',
|
||||
}
|
||||
});
|
||||
},
|
||||
taskDetails: {
|
||||
position: 'absolute',
|
||||
top: height * 0.34,
|
||||
left: 32,
|
||||
right: 32,
|
||||
alignItems: 'center',
|
||||
},
|
||||
taskName: {
|
||||
color: colors.text,
|
||||
fontSize: 32,
|
||||
fontWeight: '800',
|
||||
textAlign: 'center',
|
||||
},
|
||||
taskDescription: {
|
||||
color: colors.text,
|
||||
fontSize: 24,
|
||||
lineHeight: 32,
|
||||
marginTop: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
countdownText: {
|
||||
fontSize: ITEM_SIZE * 0.32,
|
||||
fontFamily: 'Menlo',
|
||||
color: colors.text,
|
||||
fontWeight: '900',
|
||||
textAlign: 'center',
|
||||
},
|
||||
cancelButtonContainer: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 44,
|
||||
alignItems: 'center',
|
||||
zIndex: 2,
|
||||
},
|
||||
cancelButton: {
|
||||
minWidth: 112,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(155, 155, 155, 0.35)',
|
||||
backgroundColor: '#beb9a7',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 22,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
countdownOverlay: {
|
||||
position: 'absolute',
|
||||
top: height / 3,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -256,6 +256,7 @@ export default function UpsertAssignment() {
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Title</Text>
|
||||
<TextInput
|
||||
testID = "assignment-title-input"
|
||||
className={inputClassName}
|
||||
placeholder="Enter assignment title"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
@@ -325,6 +326,7 @@ export default function UpsertAssignment() {
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
testID = "upsert-assignment-button"
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-accent-disabled' : 'bg-accent'
|
||||
}`}
|
||||
@@ -360,4 +362,4 @@ export default function UpsertAssignment() {
|
||||
</KeyboardAvoidingView>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import type { Assignment, Task } from '@/lib/types';
|
||||
import { Session } from '@supabase/supabase-js';
|
||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Alert, Pressable, SectionList, Text, View } from "react-native";
|
||||
import { ActivityIndicator, Alert, Pressable, SectionList, Text, View } from "react-native";
|
||||
|
||||
|
||||
export default function ViewDetailsAssignment() {
|
||||
@@ -14,6 +14,7 @@ export default function ViewDetailsAssignment() {
|
||||
const [assignment, SetAssignment] = useState<Assignment | null>(null);
|
||||
const [tasks, SetTasks] = useState<Task[]>([]);
|
||||
const [session, SetSession] = useState<Session | null>(null);
|
||||
const [isLoading, SetIsLoading] = useState(false);
|
||||
const [subjectMeta, setSubjectMeta] = useState({
|
||||
title: 'No Subject',
|
||||
color: 'slate' as SubjectColor,
|
||||
@@ -34,14 +35,17 @@ export default function ViewDetailsAssignment() {
|
||||
[])
|
||||
|
||||
const GetAssignment = async (assignmentId: string) => {
|
||||
const { data, error } = await supabase
|
||||
.from('assignments')
|
||||
.select('*')
|
||||
.eq('aId', assignmentId)
|
||||
.single();
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('assignments')
|
||||
.select('*')
|
||||
.eq('aId', assignmentId)
|
||||
.single();
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (error || !data) {
|
||||
console.log('GetAssignment error:', error);
|
||||
Alert.alert('Assignment could not be fetched, please try again');
|
||||
return;
|
||||
}
|
||||
@@ -49,14 +53,17 @@ export default function ViewDetailsAssignment() {
|
||||
SetAssignment(data);
|
||||
|
||||
if (data.sId) {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data: subjectData, error: subjectError } = await supabase
|
||||
.from('subjects')
|
||||
.select('title, color')
|
||||
.eq('sId', data.sId)
|
||||
.single();
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (subjectError || !subjectData) {
|
||||
console.log('GetSubjectMeta error:', subjectError);
|
||||
setSubjectMeta({
|
||||
title: 'Unknown Subject',
|
||||
color: 'slate'
|
||||
@@ -72,8 +79,12 @@ export default function ViewDetailsAssignment() {
|
||||
};
|
||||
|
||||
const GetTasks = async (aId: string) => {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data, error } = await supabase.from("tasks").select("*").eq("aId", aId);
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (error) {
|
||||
Alert.alert("Tasks could not be fetched, please try again");
|
||||
return;
|
||||
@@ -204,6 +215,14 @@ export default function ViewDetailsAssignment() {
|
||||
? 0
|
||||
: Math.round((completedTasks / totalTasks) * 100);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center bg-app-bg">
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!assignment) {
|
||||
return (
|
||||
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||
@@ -348,7 +367,7 @@ export default function ViewDetailsAssignment() {
|
||||
className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
|
||||
onPress={() =>
|
||||
router.push({
|
||||
pathname: '/assignment/upsertAssignment',
|
||||
pathname: '../assignment/upsertAssignment',
|
||||
params: { aId: assignment.aId },
|
||||
})
|
||||
}
|
||||
@@ -357,6 +376,7 @@ export default function ViewDetailsAssignment() {
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
testID="delete-assignment-button"
|
||||
className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
|
||||
onPress={() => DeleteAssignment(assignment.aId)}
|
||||
>
|
||||
@@ -371,7 +391,7 @@ export default function ViewDetailsAssignment() {
|
||||
className="mb-6 mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
|
||||
onPress={() =>
|
||||
router.push({
|
||||
pathname: '/task/createTask',
|
||||
pathname: '../task/upsertTask',
|
||||
params: { aId: assignment.aId },
|
||||
})
|
||||
}
|
||||
@@ -453,7 +473,7 @@ export default function ViewDetailsAssignment() {
|
||||
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',
|
||||
pathname: '../task/upsertTask',
|
||||
params: { tId: item.tId },
|
||||
})
|
||||
}
|
||||
|
||||
@@ -161,6 +161,7 @@ export default function UpsertSubject() {
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Title</Text>
|
||||
<TextInput className={inputClassName}
|
||||
testID = "subject-title-input"
|
||||
placeholder="Enter subject title"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={title}
|
||||
@@ -311,6 +312,7 @@ export default function UpsertSubject() {
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
testID = "upsert-subject-button"
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving
|
||||
? 'bg-accent-disabled'
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function ViewDetailsSubject() {
|
||||
const [subject, SetSubject] = useState<Subject | null>(null);
|
||||
const [assignments, SetAssignments] = useState<Assignment[]>([]);
|
||||
const [session, SetSession] = useState<Session | null>(null);
|
||||
const [isLoading, SetIsLoading] = useState(true);
|
||||
const [isLoading, SetIsLoading] = useState(false);
|
||||
|
||||
const assignmentSections = [
|
||||
{
|
||||
@@ -49,12 +49,16 @@ export default function ViewDetailsSubject() {
|
||||
}, []);
|
||||
|
||||
const GetSubject = async (subjectId: string) => {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('subjects')
|
||||
.select('*')
|
||||
.eq('sId', subjectId)
|
||||
.single();
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (error) {
|
||||
Alert.alert('Subject could not be fetched, please try again');
|
||||
return;
|
||||
@@ -64,12 +68,16 @@ export default function ViewDetailsSubject() {
|
||||
};
|
||||
|
||||
const GetAssignments = async (subjectId: string) => {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('assignments')
|
||||
.select('*')
|
||||
.eq('sId', subjectId)
|
||||
.order('deadline', { ascending: true });
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (error) {
|
||||
Alert.alert('Assignments could not be fetched, please try again');
|
||||
return;
|
||||
@@ -119,20 +127,6 @@ export default function ViewDetailsSubject() {
|
||||
}, [session, sId])
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const test = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase.from('subjects').select('*').limit(1);
|
||||
console.log('test data:', data);
|
||||
console.log('test error:', error);
|
||||
} catch (err) {
|
||||
console.log('test crashed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
test();
|
||||
}, []);
|
||||
|
||||
const DeleteSubject = async (subjectId: string) => {
|
||||
Alert.alert(
|
||||
'Delete Subject',
|
||||
@@ -391,7 +385,7 @@ export default function ViewDetailsSubject() {
|
||||
className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
|
||||
onPress={() =>
|
||||
router.push({
|
||||
pathname: '/subject/upsertSubject',
|
||||
pathname: '../subject/upsertSubject',
|
||||
params: { sId: subject.sId },
|
||||
})
|
||||
}
|
||||
@@ -402,6 +396,7 @@ export default function ViewDetailsSubject() {
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
testID="delete-subject-button"
|
||||
className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
|
||||
onPress={() => DeleteSubject(subject.sId)}
|
||||
>
|
||||
@@ -416,7 +411,7 @@ export default function ViewDetailsSubject() {
|
||||
className="mb-6 mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
|
||||
onPress={() =>
|
||||
router.push({
|
||||
pathname: '/assignment/upsertAssignment',
|
||||
pathname: '../assignment/upsertAssignment',
|
||||
params: { sId: subject.sId },
|
||||
})
|
||||
}
|
||||
@@ -502,7 +497,7 @@ export default function ViewDetailsSubject() {
|
||||
className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
|
||||
onPress={() =>
|
||||
router.push({
|
||||
pathname: '/assignment/upsertAssignment',
|
||||
pathname: '../assignment/upsertAssignment',
|
||||
params: { aId: item.aId },
|
||||
})
|
||||
}
|
||||
|
||||
@@ -3,9 +3,7 @@ import { Stack } from "expo-router";
|
||||
export default function TaskLayout() {
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="tasks" options={{ title: 'Tasks' }} />
|
||||
<Stack.Screen name="createTask" options={{ title: "Create Task" }} />
|
||||
<Stack.Screen name="editTask" options={{ title: "Edit Task" }} />
|
||||
<Stack.Screen name="upsertTask" options={{ title: "Create Task" }} />
|
||||
<Stack.Screen name="viewDetailsTask" options={{ title: "Task Details" }} />
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -1,255 +0,0 @@
|
||||
import { CheckAssignmentCompletion } from '@/lib/progress';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import type { Task } from '@/lib/types';
|
||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||
import { useCallback, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (task.aId) {
|
||||
try {
|
||||
await CheckAssignmentCompletion(task.aId);
|
||||
} catch {
|
||||
Alert.alert("Failed to update assignment completion state");
|
||||
}
|
||||
}
|
||||
|
||||
Alert.alert("Task successfully edited!");
|
||||
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: 'Edit Task',
|
||||
}}
|
||||
/>
|
||||
|
||||
{!task ? (
|
||||
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||
<Text className="text-2xl font-bold text-text-main">
|
||||
Task not found
|
||||
</Text>
|
||||
<Text className="mt-2 text-base text-text-secondary">
|
||||
The task could not be loaded.
|
||||
</Text>
|
||||
|
||||
<Pressable
|
||||
className="mt-5 h-12 items-center justify-center rounded-2xl bg-accent"
|
||||
onPress={() => router.back()}
|
||||
>
|
||||
<Text className="text-base font-bold text-text-inverse">
|
||||
Go back
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-app-bg"
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<ScrollView
|
||||
className="flex-1"
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 32,
|
||||
}}
|
||||
>
|
||||
<View className="mb-6">
|
||||
<Text className="text-3xl font-bold text-text-main">
|
||||
Edit Task
|
||||
</Text>
|
||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||
Update the task details and completion state.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Title</Text>
|
||||
<TextInput
|
||||
className={inputClassName}
|
||||
placeholder="Enter task title"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={task.title}
|
||||
onChangeText={(text) =>
|
||||
SetTask((prev) => (prev ? { ...prev, title: text } : prev))
|
||||
}
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Description</Text>
|
||||
<TextInput
|
||||
className={`${inputClassName} min-h-28`}
|
||||
placeholder="Add a short description"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={task.description}
|
||||
onChangeText={(text) =>
|
||||
SetTask((prev) =>
|
||||
prev ? { ...prev, description: text } : prev
|
||||
)
|
||||
}
|
||||
multiline
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
SetTask((prev) =>
|
||||
prev ? { ...prev, isCompleted: !prev.isCompleted } : prev
|
||||
)
|
||||
}
|
||||
disabled={isSaving}
|
||||
className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
|
||||
task.isCompleted
|
||||
? 'border-accent bg-accent-soft'
|
||||
: 'border-app-border bg-app-subtle'
|
||||
}`}
|
||||
>
|
||||
<View
|
||||
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
|
||||
task.isCompleted
|
||||
? 'border-accent bg-accent'
|
||||
: 'border-app-border bg-app-surface'
|
||||
}`}
|
||||
>
|
||||
{task.isCompleted && (
|
||||
<Text className="text-sm font-bold text-text-inverse">
|
||||
✓
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="flex-1">
|
||||
<Text className="text-base font-semibold text-text-main">
|
||||
Mark as completed
|
||||
</Text>
|
||||
<Text className="mt-1 text-sm text-text-muted">
|
||||
You can change this again later.
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-accent-disabled' : 'bg-accent'
|
||||
}`}
|
||||
onPress={EditTask}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<View className="flex-row items-center">
|
||||
<ActivityIndicator size="small" />
|
||||
<Text className="ml-3 text-base font-bold text-text-inverse">
|
||||
Saving...
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text className="text-base font-bold text-text-inverse">
|
||||
Save Changes
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className="mt-3 h-14 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
|
||||
onPress={() => router.back()}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<Text className="text-base font-semibold text-text-secondary">
|
||||
Cancel
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,277 +0,0 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { CheckAssignmentCompletion } from '@/lib/progress';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import type { Task } from '@/lib/types';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { Session } from '@supabase/supabase-js';
|
||||
import { router, Stack, useFocusEffect } from 'expo-router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Pressable,
|
||||
SectionList,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
export default function Tasks() {
|
||||
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 GetTasks = async () => {
|
||||
const { data, error } = await supabase.from('tasks').select('*');
|
||||
|
||||
if (error) {
|
||||
Alert.alert('Tasks could not be fetched, please try again');
|
||||
return;
|
||||
}
|
||||
|
||||
SetTasks(data ?? []);
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (session) {
|
||||
GetTasks();
|
||||
}
|
||||
}, [session])
|
||||
);
|
||||
|
||||
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!');
|
||||
|
||||
try {
|
||||
await CheckAssignmentCompletion(aId);
|
||||
} catch {
|
||||
Alert.alert("Failed to update assignment completion state");
|
||||
}
|
||||
|
||||
GetTasks();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-app-bg">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: 'Tasks',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
headerRight: () => (
|
||||
<View className="flex-row items-center">
|
||||
<Pressable
|
||||
className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
|
||||
onPress={GetTasks}
|
||||
>
|
||||
<Ionicons name="refresh" size={20} color="#333" />
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
className="rounded-full bg-app-subtle px-4 py-2"
|
||||
onPress={async () => await supabase.auth.signOut()}
|
||||
>
|
||||
<Text className="text-sm font-semibold text-text-secondary">
|
||||
Logout
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<View className="flex-1 px-5 pt-5">
|
||||
<View className="mb-6">
|
||||
<Text className="text-3xl font-bold text-text-main">
|
||||
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, 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">
|
||||
Tasks for this assignment will show up here.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className="mb-2" />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
import { defaultStyles } from '@/constants/defaultStyles';
|
||||
import { CheckAssignmentCompletion } from '@/lib/progress';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import type { Task } from '@/lib/types';
|
||||
import { router, Stack, useLocalSearchParams } from 'expo-router';
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
@@ -17,15 +18,57 @@ import {
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
export default function CreateTask() {
|
||||
const aId = (useLocalSearchParams().aId as string) ?? null;
|
||||
export default function UpsertTask() {
|
||||
const { tId, aId: routeAId } = useLocalSearchParams<{
|
||||
tId?: string;
|
||||
aId?: string;
|
||||
}>();
|
||||
|
||||
const isEditMode = Boolean(tId);
|
||||
|
||||
const [title, SetTitle] = useState('');
|
||||
const [description, SetDescription] = useState('');
|
||||
const [isCompleted, SetIsCompleted] = useState(false);
|
||||
const [assignmentId, SetAssignmentId] = useState<string | null>(routeAId ?? null);
|
||||
|
||||
const [isLoading, SetIsLoading] = useState(isEditMode);
|
||||
const [isSaving, SetIsSaving] = useState(false);
|
||||
|
||||
const CreateTask = async () => {
|
||||
useEffect(() => {
|
||||
if (!isEditMode || !tId) {
|
||||
SetIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadTask = async () => {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('tasks')
|
||||
.select('*')
|
||||
.eq('tId', tId)
|
||||
.single();
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (error || !data) {
|
||||
Alert.alert('Task could not be loaded, please try again');
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
const task = data as Task;
|
||||
|
||||
SetTitle(task.title ?? '');
|
||||
SetDescription(task.description ?? '');
|
||||
SetIsCompleted(task.isCompleted ?? false);
|
||||
SetAssignmentId(task.aId ?? routeAId ?? null);
|
||||
};
|
||||
|
||||
loadTask();
|
||||
}, [isEditMode, tId, routeAId]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (title.trim() === '') {
|
||||
Alert.alert('Title is required!');
|
||||
return;
|
||||
@@ -34,42 +77,55 @@ export default function CreateTask() {
|
||||
const { data, error: userError } = await supabase.auth.getUser();
|
||||
|
||||
if (userError || !data.user) {
|
||||
router.replace('../createUser');
|
||||
router.replace('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!assignmentId) {
|
||||
Alert.alert('Missing assignment', 'This task is not linked to an assignment.');
|
||||
return;
|
||||
}
|
||||
|
||||
SetIsSaving(true);
|
||||
|
||||
const { error: dbError } = await supabase.from('tasks').insert({
|
||||
const payload = {
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
isCompleted,
|
||||
lastChanged: new Date().toISOString(),
|
||||
uId: data.user.id,
|
||||
aId,
|
||||
});
|
||||
aId: assignmentId,
|
||||
};
|
||||
|
||||
if (dbError) {
|
||||
const result =
|
||||
isEditMode && tId
|
||||
? await supabase.from('tasks').update(payload).eq('tId', tId)
|
||||
: await supabase.from('tasks').insert(payload);
|
||||
|
||||
if (result.error) {
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Task could not be created, please try again');
|
||||
Alert.alert(
|
||||
isEditMode
|
||||
? 'Task could not be updated, please try again'
|
||||
: 'Task could not be created, please try again'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert('Task successfully created!');
|
||||
|
||||
if (aId) {
|
||||
try {
|
||||
await CheckAssignmentCompletion(aId);
|
||||
} catch {
|
||||
Alert.alert("Failed to update assignment completion state");
|
||||
}
|
||||
try {
|
||||
await CheckAssignmentCompletion(assignmentId);
|
||||
} catch {
|
||||
SetIsSaving(false);
|
||||
Alert.alert('Failed to update assignment completion state');
|
||||
return;
|
||||
}
|
||||
|
||||
SetTitle('');
|
||||
SetDescription('');
|
||||
SetIsCompleted(false);
|
||||
SetIsSaving(false);
|
||||
|
||||
Alert.alert(
|
||||
isEditMode ? 'Task successfully updated!' : 'Task successfully created!'
|
||||
);
|
||||
|
||||
router.back();
|
||||
};
|
||||
|
||||
@@ -78,11 +134,19 @@ export default function CreateTask() {
|
||||
|
||||
const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary';
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center bg-app-bg">
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: 'Create Task',
|
||||
title: isEditMode ? 'Edit Task' : 'Create Task',
|
||||
headerTitleStyle: defaultStyles.title,
|
||||
}}
|
||||
/>
|
||||
@@ -104,10 +168,12 @@ export default function CreateTask() {
|
||||
>
|
||||
<View className="mb-6">
|
||||
<Text className="text-3xl font-bold text-text-main">
|
||||
Create Task
|
||||
{isEditMode ? 'Edit Task' : 'Create Task'}
|
||||
</Text>
|
||||
<Text className="mt-2 text-base leading-6 text-text-secondary">
|
||||
Add a small step to move this assignment forward.
|
||||
{isEditMode
|
||||
? 'Update this task and keep your assignment moving forward.'
|
||||
: 'Add a small step to move this assignment forward.'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -115,8 +181,10 @@ export default function CreateTask() {
|
||||
<View className="mb-5">
|
||||
<Text className={labelClassName}>Title</Text>
|
||||
<TextInput
|
||||
testID="task-title-input"
|
||||
className={inputClassName}
|
||||
placeholder="Enter task title"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={title}
|
||||
onChangeText={SetTitle}
|
||||
returnKeyType="next"
|
||||
@@ -128,6 +196,7 @@ export default function CreateTask() {
|
||||
<TextInput
|
||||
className={`${inputClassName} min-h-28`}
|
||||
placeholder="Add a short description"
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={description}
|
||||
onChangeText={SetDescription}
|
||||
multiline
|
||||
@@ -169,22 +238,23 @@ export default function CreateTask() {
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
testID="upsert-task-button"
|
||||
className={`h-14 items-center justify-center rounded-2xl ${
|
||||
isSaving ? 'bg-accent-disabled' : 'bg-accent'
|
||||
}`}
|
||||
onPress={CreateTask}
|
||||
onPress={handleSubmit}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<View className="flex-row items-center">
|
||||
<ActivityIndicator size="small" />
|
||||
<Text className="ml-3 text-base font-bold text-text-inverse">
|
||||
Creating...
|
||||
{isEditMode ? 'Saving...' : 'Creating...'}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text className="text-base font-bold text-text-inverse">
|
||||
Create Task
|
||||
{isEditMode ? 'Save Changes' : 'Create Task'}
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
@@ -6,13 +6,14 @@ import type { Task } from '@/lib/types';
|
||||
import { Session } from '@supabase/supabase-js';
|
||||
import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Alert, Pressable, Text, View } from 'react-native';
|
||||
import { ActivityIndicator, Alert, Pressable, Text, View } from 'react-native';
|
||||
|
||||
export default function ViewDetailsTask() {
|
||||
const { tId } = useLocalSearchParams<{ tId: string }>();
|
||||
|
||||
const [task, SetTask] = useState<Task | null>(null);
|
||||
const [session, SetSession] = useState<Session | null>(null);
|
||||
const [isLoading, SetIsLoading] = useState(false);
|
||||
const [contextMeta, setContextMeta] = useState({
|
||||
subjectTitle: 'No Subject',
|
||||
assignmentTitle: 'No Assignment',
|
||||
@@ -30,14 +31,17 @@ export default function ViewDetailsTask() {
|
||||
}, []);
|
||||
|
||||
const GetTask = async (taskId: string) => {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('tasks')
|
||||
.select('*')
|
||||
.eq('tId', taskId)
|
||||
.single();
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (error || !data) {
|
||||
console.log('GetTask error:', error);
|
||||
Alert.alert('Task could not be fetched, please try again');
|
||||
return;
|
||||
}
|
||||
@@ -45,14 +49,17 @@ export default function ViewDetailsTask() {
|
||||
SetTask(data);
|
||||
|
||||
if (data.aId) {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data: assignmentData, error: assignmentError } = await supabase
|
||||
.from('assignments')
|
||||
.select('title, sId')
|
||||
.eq('aId', data.aId)
|
||||
.single();
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (assignmentError || !assignmentData) {
|
||||
console.log('GetTaskAssignment error:', assignmentError);
|
||||
setContextMeta({
|
||||
subjectTitle: 'Unknown Subject',
|
||||
assignmentTitle: 'Unknown Assignment',
|
||||
@@ -62,14 +69,17 @@ export default function ViewDetailsTask() {
|
||||
}
|
||||
|
||||
if (assignmentData.sId) {
|
||||
SetIsLoading(true);
|
||||
|
||||
const { data: subjectData, error: subjectError } = await supabase
|
||||
.from('subjects')
|
||||
.select('title, color')
|
||||
.eq('sId', assignmentData.sId)
|
||||
.single();
|
||||
|
||||
SetIsLoading(false);
|
||||
|
||||
if (subjectError || !subjectData) {
|
||||
console.log('GetTaskSubject error:', subjectError);
|
||||
setContextMeta({
|
||||
subjectTitle: 'Unknown Subject',
|
||||
assignmentTitle: assignmentData.title ?? 'Unknown Assignment',
|
||||
@@ -138,6 +148,14 @@ export default function ViewDetailsTask() {
|
||||
|
||||
const colorSet = getSubjectColorSet(contextMeta.subjectColor);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center bg-app-bg">
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!task) {
|
||||
return (
|
||||
<View className="flex-1 bg-app-bg px-5 pt-6">
|
||||
@@ -263,7 +281,7 @@ export default function ViewDetailsTask() {
|
||||
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',
|
||||
pathname: '../task/upsertTask',
|
||||
params: { tId: task.tId },
|
||||
})
|
||||
}
|
||||
@@ -274,6 +292,7 @@ export default function ViewDetailsTask() {
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
testID="delete-task-button"
|
||||
className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
|
||||
onPress={() => DeleteTask(task.tId)}
|
||||
>
|
||||
@@ -286,4 +305,4 @@ export default function ViewDetailsTask() {
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user