'some' changes
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
import {
|
||||
GetActiveSprint,
|
||||
RemoveActiveSprint,
|
||||
SaveActiveSprint,
|
||||
GetActiveSession,
|
||||
RemoveActiveSession,
|
||||
SaveActiveSession,
|
||||
} from '@/lib/asyncStorage';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import type { Task } from '@/lib/types';
|
||||
import type { SessionType, Task } from '@/lib/types';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { Stack, useLocalSearchParams } from 'expo-router';
|
||||
import { router, Stack, useLocalSearchParams } from 'expo-router';
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Alert,
|
||||
@@ -48,6 +48,12 @@ 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 SHORT_BREAK_DURATION_MINUTES = 5;
|
||||
|
||||
type PostSessionPrompt = {
|
||||
completedSessionType: SessionType;
|
||||
returnTaskId: string | null;
|
||||
};
|
||||
|
||||
function formatTime(totalSeconds: number) {
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
@@ -69,6 +75,23 @@ function getSessionId(sessionData: unknown) {
|
||||
return maybeSession.sessionId ?? maybeSession.sessionid ?? null;
|
||||
}
|
||||
|
||||
function getSessionLabel(sessionType: SessionType) {
|
||||
switch (sessionType) {
|
||||
case 'short_break':
|
||||
return 'Short Break';
|
||||
case 'long_break':
|
||||
return 'Long Break';
|
||||
default:
|
||||
return 'Sprint';
|
||||
}
|
||||
}
|
||||
|
||||
type StartSessionInput = {
|
||||
sessionType: SessionType;
|
||||
taskId: string | null;
|
||||
durationSeconds: number;
|
||||
};
|
||||
|
||||
export default function TimerScreen() {
|
||||
const [containerHeight, setContainerHeight] = React.useState(0);
|
||||
const [duration, setDuration] = React.useState(TIMER_OPTIONS[0]);
|
||||
@@ -76,6 +99,8 @@ export default function TimerScreen() {
|
||||
const [timerOverlayVisible, setTimerOverlayVisible] = React.useState(false);
|
||||
const [timeRemaining, setTimeRemaining] = React.useState(0);
|
||||
const [task, setTask] = React.useState<Task | null>(null);
|
||||
const [currentSessionType, setCurrentSessionType] = React.useState<SessionType>('focus');
|
||||
const [postSessionPrompt, setPostSessionPrompt] = React.useState<PostSessionPrompt | null>(null);
|
||||
|
||||
const scrollX = React.useRef(new Animated.Value(0)).current;
|
||||
const timerAnimation = React.useRef(new Animated.Value(0)).current;
|
||||
@@ -100,9 +125,44 @@ export default function TimerScreen() {
|
||||
const cancelHoldIdRef = React.useRef(0);
|
||||
const cancelHoldStartedAtRef = React.useRef(0);
|
||||
|
||||
const { tId } = useLocalSearchParams<{ tId?: string}>();
|
||||
const { tId, sessionType: sessionTypeParam, durationMinutes, durationSeconds, returnTaskId } = useLocalSearchParams<{
|
||||
tId?: string;
|
||||
sessionType?: SessionType;
|
||||
durationMinutes?: string;
|
||||
durationSeconds?: string;
|
||||
returnTaskId?: string;
|
||||
}>();
|
||||
const timerOverlayHeight = Math.max(containerHeight, 1);
|
||||
const timerOverlayOffscreenY = timerOverlayHeight + 1000;
|
||||
const selectedSessionType: SessionType = sessionTypeParam ?? 'focus';
|
||||
const showDurationPicker =
|
||||
selectedSessionType === 'focus' && durationMinutes == null && durationSeconds == null;
|
||||
const selectedDurationMinutes = React.useMemo(() => {
|
||||
if (!durationMinutes) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const parsedDuration = Number(durationMinutes);
|
||||
|
||||
if (!Number.isFinite(parsedDuration) || parsedDuration <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return parsedDuration;
|
||||
}, [durationMinutes]);
|
||||
const selectedDurationSeconds = React.useMemo(() => {
|
||||
if (!durationSeconds) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const parsedDuration = Number(durationSeconds);
|
||||
|
||||
if (!Number.isFinite(parsedDuration) || parsedDuration <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return parsedDuration;
|
||||
}, [durationSeconds]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (containerHeight > 0 && !timerIsRunning) {
|
||||
@@ -190,16 +250,16 @@ export default function TimerScreen() {
|
||||
});
|
||||
|
||||
const finalizeSprintSession = React.useCallback(async (finalStatus: 'completed' | 'cancelled' | 'expired') => {
|
||||
const activeSprint = await GetActiveSprint();
|
||||
const activeSession = await GetActiveSession();
|
||||
|
||||
if (!activeSprint) {
|
||||
if (!activeSession) {
|
||||
return;
|
||||
}
|
||||
|
||||
await RemoveActiveSprint();
|
||||
await RemoveActiveSession();
|
||||
|
||||
const { error } = await supabase.rpc('finalize_sprint_session', {
|
||||
p_session_id: activeSprint.sessionId,
|
||||
p_session_id: activeSession.sessionId,
|
||||
p_final_status: finalStatus,
|
||||
p_ended_at: new Date().toISOString(),
|
||||
});
|
||||
@@ -271,11 +331,16 @@ export default function TimerScreen() {
|
||||
cancelOverlayAnimation.setValue(0);
|
||||
setTimerOverlayVisible(false);
|
||||
setTimeRemaining(0);
|
||||
setCurrentSessionType(selectedSessionType);
|
||||
setIsRunning(false);
|
||||
}, [cancelOverlayAnimation, timerAnimation, timerOverlayOffscreenY]);
|
||||
}, [cancelOverlayAnimation, selectedSessionType, timerAnimation, timerOverlayOffscreenY]);
|
||||
|
||||
const finishTimer = React.useCallback(() => {
|
||||
clearCountdownInterval();
|
||||
const completedSessionType = currentSessionType;
|
||||
const completedReturnTaskId =
|
||||
completedSessionType === 'focus' ? (tId ?? null) : (returnTaskId ?? null);
|
||||
|
||||
void finalizeSprintSession('completed');
|
||||
|
||||
Animated.parallel([
|
||||
@@ -308,12 +373,11 @@ export default function TimerScreen() {
|
||||
}),
|
||||
]).start(() => {
|
||||
setIsRunning(false);
|
||||
/* TODO
|
||||
Implement store and send of ellapsed time value in seconds to DB
|
||||
for total time spent statistic
|
||||
*/
|
||||
|
||||
resetSessionValues();
|
||||
setPostSessionPrompt({
|
||||
completedSessionType,
|
||||
returnTaskId: completedReturnTaskId,
|
||||
});
|
||||
});
|
||||
});
|
||||
}, [
|
||||
@@ -321,10 +385,13 @@ export default function TimerScreen() {
|
||||
cancelButtonAnimation,
|
||||
clearCountdownInterval,
|
||||
countdownAnimation,
|
||||
currentSessionType,
|
||||
finalizeSprintSession,
|
||||
focusModeAnimation,
|
||||
resetSessionValues,
|
||||
taskDetailsAnimation,
|
||||
returnTaskId,
|
||||
tId,
|
||||
]);
|
||||
|
||||
// This picks up the timer overlay animation from the current Y position and
|
||||
@@ -416,31 +483,40 @@ export default function TimerScreen() {
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!tId || timerIsRunning || containerHeight === 0) {
|
||||
if (timerIsRunning || containerHeight === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const restoreSprint = async () => {
|
||||
const activeSprint = await GetActiveSprint();
|
||||
const activeSession = await GetActiveSession();
|
||||
|
||||
if (!activeSprint || activeSprint.taskId !== tId) {
|
||||
if (!activeSession) {
|
||||
return;
|
||||
}
|
||||
|
||||
const remainingMs = activeSprint.endTime - Date.now();
|
||||
if (activeSession.sessionType === 'focus' && activeSession.taskId !== tId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeSession.sessionType !== 'focus' && selectedSessionType !== activeSession.sessionType) {
|
||||
return;
|
||||
}
|
||||
|
||||
const remainingMs = activeSession.endTime - Date.now();
|
||||
|
||||
if (remainingMs <= 0) {
|
||||
await finalizeSprintSession('expired');
|
||||
return;
|
||||
}
|
||||
|
||||
const totalMs = activeSprint.durationSeconds * 1000;
|
||||
const totalMs = activeSession.durationSeconds * 1000;
|
||||
const elapsedMs = totalMs - remainingMs;
|
||||
const elapsedRatio = Math.max(0, Math.min(elapsedMs / totalMs, 1));
|
||||
const restoredY = timerOverlayHeight * elapsedRatio;
|
||||
|
||||
setIsRunning(true);
|
||||
setTimerOverlayVisible(true);
|
||||
setCurrentSessionType(activeSession.sessionType);
|
||||
sessionStartedAtRef.current = Date.now() - elapsedMs;
|
||||
sessionDurationMsRef.current = totalMs;
|
||||
|
||||
@@ -451,7 +527,7 @@ export default function TimerScreen() {
|
||||
taskDetailsAnimation.setValue(1);
|
||||
cancelOverlayAnimation.setValue(0);
|
||||
|
||||
startCountdown(activeSprint.endTime);
|
||||
startCountdown(activeSession.endTime);
|
||||
startProgressAnimation(restoredY);
|
||||
};
|
||||
|
||||
@@ -467,29 +543,39 @@ export default function TimerScreen() {
|
||||
startCountdown,
|
||||
startProgressAnimation,
|
||||
taskDetailsAnimation,
|
||||
selectedSessionType,
|
||||
tId,
|
||||
timerOverlayHeight,
|
||||
timerIsRunning,
|
||||
]);
|
||||
|
||||
const startTimerSession = React.useCallback(async () => {
|
||||
if (!tId || timerIsRunning || containerHeight === 0) {
|
||||
const startSession = React.useCallback(async ({
|
||||
sessionType,
|
||||
taskId,
|
||||
durationSeconds,
|
||||
}: StartSessionInput) => {
|
||||
if (timerIsRunning || containerHeight === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const totalSeconds = duration * TIMER_UNIT_IN_SECONDS;
|
||||
const endTime = Date.now() + totalSeconds * 1000;
|
||||
if (sessionType === 'focus' && !taskId) {
|
||||
Alert.alert('Could not start session', 'Focus sessions must be linked to a task.');
|
||||
return;
|
||||
}
|
||||
|
||||
const endTime = Date.now() + durationSeconds * 1000;
|
||||
const { data: userData, error: userError } = await supabase.auth.getUser();
|
||||
|
||||
if (userError || !userData.user?.id) {
|
||||
Alert.alert('Could not start sprint', 'Missing signed-in user for sprint session.');
|
||||
Alert.alert('Could not start session', 'Missing signed-in user.');
|
||||
return;
|
||||
}
|
||||
|
||||
const { data: sessionData, error: sessionError } = await supabase.rpc('start_sprint_session', {
|
||||
p_task_id: tId,
|
||||
p_task_id: taskId,
|
||||
p_user_id: userData.user.id,
|
||||
p_planned_duration: totalSeconds,
|
||||
p_session_type: sessionType,
|
||||
p_planned_duration: durationSeconds,
|
||||
p_started_at: new Date().toISOString(),
|
||||
});
|
||||
|
||||
@@ -497,8 +583,8 @@ export default function TimerScreen() {
|
||||
|
||||
if (sessionError || !sessionId) {
|
||||
Alert.alert(
|
||||
'Could not start sprint',
|
||||
sessionError?.message ?? 'Sprint session could not be created.'
|
||||
'Could not start session',
|
||||
sessionError?.message ?? 'Session could not be created.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -506,18 +592,20 @@ export default function TimerScreen() {
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
setIsRunning(true);
|
||||
setTimerOverlayVisible(true);
|
||||
setCurrentSessionType(sessionType);
|
||||
|
||||
taskDetailsAnimation.setValue(0);
|
||||
countdownAnimation.setValue(0);
|
||||
cancelOverlayAnimation.setValue(0);
|
||||
|
||||
sessionStartedAtRef.current = Date.now();
|
||||
sessionDurationMsRef.current = totalSeconds * 1000;
|
||||
sessionDurationMsRef.current = durationSeconds * 1000;
|
||||
|
||||
void SaveActiveSprint({
|
||||
void SaveActiveSession({
|
||||
sessionId,
|
||||
taskId: tId,
|
||||
durationSeconds: totalSeconds,
|
||||
sessionType,
|
||||
taskId,
|
||||
durationSeconds,
|
||||
endTime,
|
||||
});
|
||||
|
||||
@@ -531,10 +619,54 @@ export default function TimerScreen() {
|
||||
runStartSequence,
|
||||
startCountdown,
|
||||
taskDetailsAnimation,
|
||||
tId,
|
||||
timerIsRunning,
|
||||
]);
|
||||
|
||||
const startTimerSession = React.useCallback(async () => {
|
||||
if (selectedSessionType === 'focus' && !tId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const totalSeconds =
|
||||
selectedDurationSeconds ?? (selectedDurationMinutes ?? duration) * TIMER_UNIT_IN_SECONDS;
|
||||
|
||||
await startSession({
|
||||
sessionType: selectedSessionType,
|
||||
taskId: selectedSessionType === 'focus' ? (tId ?? null) : null,
|
||||
durationSeconds: totalSeconds,
|
||||
});
|
||||
}, [duration, selectedDurationMinutes, selectedDurationSeconds, selectedSessionType, startSession, tId]);
|
||||
|
||||
const handleStartShortBreak = React.useCallback(() => {
|
||||
setPostSessionPrompt(null);
|
||||
router.replace({
|
||||
pathname: '/task/timer',
|
||||
params: {
|
||||
sessionType: 'short_break',
|
||||
durationMinutes: String(SHORT_BREAK_DURATION_MINUTES),
|
||||
returnTaskId: tId ?? undefined,
|
||||
},
|
||||
});
|
||||
}, [tId]);
|
||||
|
||||
const handleContinueSameTask = React.useCallback(() => {
|
||||
if (!postSessionPrompt?.returnTaskId) {
|
||||
router.replace('/');
|
||||
return;
|
||||
}
|
||||
|
||||
setPostSessionPrompt(null);
|
||||
router.replace({
|
||||
pathname: '/task/timer',
|
||||
params: { tId: postSessionPrompt.returnTaskId },
|
||||
});
|
||||
}, [postSessionPrompt]);
|
||||
|
||||
const handleBackToDashboard = React.useCallback(() => {
|
||||
setPostSessionPrompt(null);
|
||||
router.replace('/');
|
||||
}, []);
|
||||
|
||||
const cancelTimer = React.useCallback(() => {
|
||||
if (!timerIsRunning) {
|
||||
return;
|
||||
@@ -745,7 +877,7 @@ export default function TimerScreen() {
|
||||
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: timerIsRunning ? '' : 'Sprint duration',
|
||||
title: timerIsRunning ? '' : `${getSessionLabel(selectedSessionType)} duration`,
|
||||
headerTransparent: true,
|
||||
headerTintColor: colors.text,
|
||||
headerTitleAlign: 'center',
|
||||
@@ -790,7 +922,9 @@ export default function TimerScreen() {
|
||||
]}
|
||||
>
|
||||
<Text className="text-text-main text-xl">Start</Text>
|
||||
<Text className="text-text-main text-xl">Sprint</Text>
|
||||
{selectedSessionType === 'focus' ? (
|
||||
<Text className="text-text-main text-xl">Sprint</Text>
|
||||
) : null}
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
@@ -814,7 +948,7 @@ export default function TimerScreen() {
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text className="text-text-main text-xl">Hold to end sprint</Text>
|
||||
<Text className="text-text-main text-xl">Hold to end session</Text>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
@@ -836,32 +970,45 @@ export default function TimerScreen() {
|
||||
<Text style={styles.countdownText}>{formatTime(timeRemaining)}</Text>
|
||||
</Animated.View>
|
||||
|
||||
<View
|
||||
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,
|
||||
})}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
onMomentumScrollEnd={handleTimerPickerMomentumEnd}
|
||||
snapToInterval={ITEM_SIZE}
|
||||
decelerationRate="fast"
|
||||
style={styles.timerPickerList}
|
||||
contentContainerStyle={styles.timerPickerContent}
|
||||
renderItem={renderTimerItem}
|
||||
/>
|
||||
</View>
|
||||
{!timerIsRunning && showDurationPicker ? (
|
||||
<View
|
||||
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,
|
||||
})}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
onMomentumScrollEnd={handleTimerPickerMomentumEnd}
|
||||
snapToInterval={ITEM_SIZE}
|
||||
decelerationRate="fast"
|
||||
style={styles.timerPickerList}
|
||||
contentContainerStyle={styles.timerPickerContent}
|
||||
renderItem={renderTimerItem}
|
||||
/>
|
||||
</View>
|
||||
) : !timerIsRunning ? (
|
||||
<View style={styles.fixedDurationBlock}>
|
||||
<Text style={styles.fixedDurationLabel}>
|
||||
{selectedDurationSeconds != null
|
||||
? `${selectedDurationSeconds} sec`
|
||||
: `${selectedDurationMinutes ?? SHORT_BREAK_DURATION_MINUTES} min`}
|
||||
</Text>
|
||||
<Text style={styles.fixedDurationDescription}>
|
||||
This session uses a fixed duration so you can move straight into the next step.
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<Animated.View
|
||||
pointerEvents="none"
|
||||
@@ -873,9 +1020,53 @@ export default function TimerScreen() {
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={styles.taskName}>{task?.title ?? 'Sprint'}</Text>
|
||||
<Text style={styles.taskDescription}>{task?.description || 'Focus on this task until the timer ends.'}</Text>
|
||||
<Text style={styles.taskName}>
|
||||
{currentSessionType === 'focus' ? task?.title ?? 'Sprint' : getSessionLabel(currentSessionType)}
|
||||
</Text>
|
||||
<Text style={styles.taskDescription}>
|
||||
{currentSessionType === 'focus'
|
||||
? task?.description || 'Focus on this task until the timer ends.'
|
||||
: 'Use this timer as a real break before starting the next focus session.'}
|
||||
</Text>
|
||||
</Animated.View>
|
||||
|
||||
{postSessionPrompt ? (
|
||||
<View style={styles.postSessionOverlay}>
|
||||
<View style={styles.postSessionCard}>
|
||||
<Text style={styles.postSessionEyebrow}>Session complete</Text>
|
||||
<Text style={styles.postSessionTitle}>
|
||||
{postSessionPrompt.completedSessionType === 'focus'
|
||||
? 'What do you want to do next?'
|
||||
: 'Break finished'}
|
||||
</Text>
|
||||
<Text style={styles.postSessionBody}>
|
||||
{postSessionPrompt.completedSessionType === 'focus'
|
||||
? 'Start a short break now or skip it and return to your dashboard.'
|
||||
: 'Jump back into the same task or head back to the dashboard.'}
|
||||
</Text>
|
||||
|
||||
{postSessionPrompt.completedSessionType === 'focus' ? (
|
||||
<>
|
||||
<TouchableOpacity onPress={handleStartShortBreak} style={styles.postSessionPrimaryButton}>
|
||||
<Text style={styles.postSessionPrimaryButtonText}>Start short break</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleBackToDashboard} style={styles.postSessionSecondaryButton}>
|
||||
<Text style={styles.postSessionSecondaryButtonText}>Skip break</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TouchableOpacity onPress={handleContinueSameTask} style={styles.postSessionPrimaryButton}>
|
||||
<Text style={styles.postSessionPrimaryButtonText}>Continue with same task</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleBackToDashboard} style={styles.postSessionSecondaryButton}>
|
||||
<Text style={styles.postSessionSecondaryButtonText}>Back to dashboard</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -915,6 +1106,27 @@ const styles = StyleSheet.create({
|
||||
timerPickerList: {
|
||||
flexGrow: 0,
|
||||
},
|
||||
fixedDurationBlock: {
|
||||
position: 'absolute',
|
||||
top: height * 0.28,
|
||||
left: 32,
|
||||
right: 32,
|
||||
alignItems: 'center',
|
||||
},
|
||||
fixedDurationLabel: {
|
||||
color: colors.text,
|
||||
fontSize: 56,
|
||||
fontFamily: 'Menlo',
|
||||
fontWeight: '900',
|
||||
textAlign: 'center',
|
||||
},
|
||||
fixedDurationDescription: {
|
||||
color: colors.text,
|
||||
fontSize: 18,
|
||||
lineHeight: 26,
|
||||
marginTop: 16,
|
||||
textAlign: 'center',
|
||||
},
|
||||
timerPickerContent: {
|
||||
paddingHorizontal: ITEM_SPACING,
|
||||
},
|
||||
@@ -984,4 +1196,66 @@ const styles = StyleSheet.create({
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
},
|
||||
postSessionOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(20, 26, 34, 0.94)',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 24,
|
||||
zIndex: 10,
|
||||
},
|
||||
postSessionCard: {
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#F7F4EA',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 28,
|
||||
},
|
||||
postSessionEyebrow: {
|
||||
color: '#7A6F5A',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.8,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
postSessionTitle: {
|
||||
color: '#323F4E',
|
||||
fontSize: 30,
|
||||
fontWeight: '800',
|
||||
marginTop: 10,
|
||||
},
|
||||
postSessionBody: {
|
||||
color: '#52606D',
|
||||
fontSize: 17,
|
||||
lineHeight: 25,
|
||||
marginTop: 12,
|
||||
marginBottom: 24,
|
||||
},
|
||||
postSessionPrimaryButton: {
|
||||
minHeight: 54,
|
||||
borderRadius: 18,
|
||||
backgroundColor: '#323F4E',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
postSessionPrimaryButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
},
|
||||
postSessionSecondaryButton: {
|
||||
minHeight: 54,
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: '#C2B8A3',
|
||||
backgroundColor: '#EFE7D8',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
marginTop: 12,
|
||||
},
|
||||
postSessionSecondaryButtonText: {
|
||||
color: '#323F4E',
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -19,12 +19,14 @@ import {
|
||||
} from 'react-native';
|
||||
|
||||
export default function UpsertTask() {
|
||||
const { tId, aId: routeAId } = useLocalSearchParams<{
|
||||
const { tId, aId: routeAId, flow } = useLocalSearchParams<{
|
||||
tId?: string;
|
||||
aId?: string;
|
||||
flow?: string;
|
||||
}>();
|
||||
|
||||
const isEditMode = Boolean(tId);
|
||||
const isSetupFlow = flow === 'setup';
|
||||
|
||||
const [title, SetTitle] = useState('');
|
||||
const [description, SetDescription] = useState('');
|
||||
@@ -100,7 +102,7 @@ export default function UpsertTask() {
|
||||
const result =
|
||||
isEditMode && tId
|
||||
? await supabase.from('tasks').update(payload).eq('tId', tId)
|
||||
: await supabase.from('tasks').insert(payload);
|
||||
: await supabase.from('tasks').insert(payload).select().single();
|
||||
|
||||
if (result.error) {
|
||||
SetIsSaving(false);
|
||||
@@ -122,6 +124,14 @@ export default function UpsertTask() {
|
||||
|
||||
SetIsSaving(false);
|
||||
|
||||
if (!isEditMode && isSetupFlow && result.data?.tId) {
|
||||
router.replace({
|
||||
pathname: '/task/timer',
|
||||
params: { tId: result.data.tId },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert(
|
||||
isEditMode ? 'Task successfully updated!' : 'Task successfully created!'
|
||||
);
|
||||
@@ -183,7 +193,7 @@ export default function UpsertTask() {
|
||||
<Text className={labelClassName}>Title</Text>
|
||||
<TextInput
|
||||
className={inputClassName}
|
||||
placeholder="Enter task title"
|
||||
placeholder={isSetupFlow ? 'e.g. Solve questions 1-3' : 'Enter task title'}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={title}
|
||||
onChangeText={SetTitle}
|
||||
@@ -195,7 +205,11 @@ export default function UpsertTask() {
|
||||
<Text className={labelClassName}>Description</Text>
|
||||
<TextInput
|
||||
className={`${inputClassName} min-h-28`}
|
||||
placeholder="Add a short description"
|
||||
placeholder={
|
||||
isSetupFlow
|
||||
? 'e.g. Work through the first three tasks without notes'
|
||||
: 'Add a short description'
|
||||
}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
value={description}
|
||||
onChangeText={SetDescription}
|
||||
@@ -273,4 +287,4 @@ export default function UpsertTask() {
|
||||
</KeyboardAvoidingView>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { GetActiveSprint, RemoveActiveSprint } from '@/lib/asyncStorage';
|
||||
import { GetActiveSession, RemoveActiveSession } from '@/lib/asyncStorage';
|
||||
import { formatDateTime } from '@/lib/date';
|
||||
import { CheckAssignmentCompletion } from '@/lib/progress';
|
||||
import { getSubjectColorSet, type SubjectColor } from '@/lib/subjectColors';
|
||||
@@ -33,6 +33,7 @@ const { tId } = useLocalSearchParams<{ tId: string }>();
|
||||
|
||||
const [task, SetTask] = useState<Task | null>(null);
|
||||
const [session, SetSession] = useState<Session | null>(null);
|
||||
const [completedFocusSessions, setCompletedFocusSessions] = useState(0);
|
||||
const [contextMeta, setContextMeta] = useState({
|
||||
subjectTitle: 'No Subject',
|
||||
assignmentTitle: 'No Assignment',
|
||||
@@ -49,7 +50,24 @@ useEffect(() => {
|
||||
return () => sub.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
const GetTask = async (taskId: string) => {
|
||||
const loadTaskStudyActivity = useCallback(async (taskId: string, userId: string) => {
|
||||
const { count, error } = await supabase
|
||||
.from('sprint_sessions')
|
||||
.select('sessionId', { count: 'exact', head: true })
|
||||
.eq('taskId', taskId)
|
||||
.eq('userId', userId)
|
||||
.eq('sessionType', 'focus')
|
||||
.eq('status', 'completed');
|
||||
|
||||
if (error) {
|
||||
setCompletedFocusSessions(0);
|
||||
return;
|
||||
}
|
||||
|
||||
setCompletedFocusSessions(count ?? 0);
|
||||
}, []);
|
||||
|
||||
const GetTask = useCallback(async (taskId: string) => {
|
||||
const { data, error } = await supabase
|
||||
.from('tasks')
|
||||
.select('*')
|
||||
@@ -62,6 +80,7 @@ const GetTask = async (taskId: string) => {
|
||||
}
|
||||
|
||||
SetTask(data);
|
||||
await loadTaskStudyActivity(taskId, data.uId);
|
||||
|
||||
if (data.aId) {
|
||||
const { data: assignmentData, error: assignmentError } = await supabase
|
||||
@@ -102,20 +121,20 @@ const GetTask = async (taskId: string) => {
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}, [loadTaskStudyActivity]);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
if (session && tId) {
|
||||
GetTask(tId);
|
||||
}
|
||||
}, [session, tId])
|
||||
}, [GetTask, session, tId])
|
||||
);
|
||||
|
||||
const handleSprintStart = async () => {
|
||||
const activeSprint = await GetActiveSprint();
|
||||
const activeSession = await GetActiveSession();
|
||||
|
||||
if (!activeSprint) {
|
||||
if (!activeSession) {
|
||||
router.push({
|
||||
pathname: '/task/timer',
|
||||
params: { tId: task?.tId},
|
||||
@@ -125,10 +144,10 @@ const handleSprintStart = async () => {
|
||||
|
||||
|
||||
|
||||
const secondsLeft = Math.ceil((activeSprint.endTime - Date.now()) / 1000)
|
||||
const secondsLeft = Math.ceil((activeSession.endTime - Date.now()) / 1000)
|
||||
|
||||
if (secondsLeft <= 0) {
|
||||
await RemoveActiveSprint();
|
||||
await RemoveActiveSession();
|
||||
router.push({
|
||||
pathname: '/task/timer',
|
||||
params: { tId: task?.tId}
|
||||
@@ -137,23 +156,23 @@ const handleSprintStart = async () => {
|
||||
}
|
||||
|
||||
|
||||
if (activeSprint!.taskId === task?.tId) {
|
||||
if (activeSession.taskId === task?.tId) {
|
||||
router.push({
|
||||
pathname: '/task/timer',
|
||||
params: { tId: activeSprint!.taskId}});
|
||||
params: { tId: activeSession.taskId ?? undefined }});
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert(
|
||||
'Active sprint in progress',
|
||||
'Starting a new sprint will end the current active sprint',
|
||||
'Active session in progress',
|
||||
'Starting a new sprint will end the current active session',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel', },
|
||||
{
|
||||
text: 'Start new sprint',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
await RemoveActiveSprint();
|
||||
await RemoveActiveSession();
|
||||
router.push({
|
||||
pathname: '/task/timer',
|
||||
params: { tId: task?.tId },
|
||||
@@ -332,14 +351,46 @@ return (
|
||||
{contextMeta.assignmentTitle}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1">
|
||||
<Text className="text-xs font-semibold text-text-secondary">
|
||||
Status: {task.isCompleted ? 'Completed' : 'Not completed'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="mt-5 rounded-2xl bg-app-subtle p-4">
|
||||
<Text className="text-sm font-semibold text-text-secondary">
|
||||
Study activity
|
||||
</Text>
|
||||
<Text className="mt-1 text-xs leading-5 text-text-muted">
|
||||
This tracks focused work on the task separately from whether the task is marked completed.
|
||||
</Text>
|
||||
|
||||
<View className="mt-4 flex-row gap-3">
|
||||
<View className="flex-1 rounded-2xl bg-app-surface px-4 py-3">
|
||||
<Text className="text-xs font-semibold uppercase tracking-[0.6px] text-text-muted">
|
||||
Focus time
|
||||
</Text>
|
||||
<Text className="mt-1 text-lg font-bold text-text-main">
|
||||
{formatTrackedTime(task.totalTimeInSeconds ?? 0)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex-1 rounded-2xl bg-app-surface px-4 py-3">
|
||||
<Text className="text-xs font-semibold uppercase tracking-[0.6px] text-text-muted">
|
||||
Completed sessions
|
||||
</Text>
|
||||
<Text className="mt-1 text-lg font-bold text-text-main">
|
||||
{completedFocusSessions}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text className="mt-2 text-sm text-text-muted">
|
||||
Last changed: {formatDateTime(task.lastChanged)}
|
||||
</Text>
|
||||
<Text className="mt-1 text-sm text-text-muted">
|
||||
Time spent: {formatTrackedTime(task.totalTimeInSeconds ?? 0)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user