wrongmove/crawler/frontend/src/components/ActiveQuery.tsx

import { getUser } from '@/auth/authService';
import type { User } from 'oidc-client-ts';
import React, { useEffect, useState } from 'react';
import AlertError from './AlertError';
import { Spinner } from './Spinner';
import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
import { Progress } from './ui/progress';

interface ModalProps {
    taskID: string | null;
}

const fetchTaskStatusData = async (user: User, taskID: string) => {
    const accessToken = user?.access_token;
    const response = await fetch(`/api/task_status?task_id=${taskID}`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${accessToken}`, // Pass the token
            'Content-Type': 'application/json',
        },
    });
    if (!response.ok) {
        throw new Error(`Failed to fetch task status: ${response.status}`);
    }

    const data =
        await response.json();
    return data;
};

type TaskStatus = string
// enum TaskStatus {
//     QUEUED = 'queued',
//     PROCESSING = 'processing',
//     COMPLETED = 'completed',
//     FAILED = 'failed',
// }

// const taskStatusToProgress = (taskStatus: TaskStatus): number => {
//     switch (taskStatus) {
//         case TaskStatus.QUEUED:
//             return 0.33; // Queued status
//         case TaskStatus.PROCESSING:
//             return 0.66; // Processing status
//         case TaskStatus.COMPLETED:
//             return 1.0; // Completed status
//         default:
//             throw new Error('Unknown task status: ' + status);
//     }
// }

// const getTaskStatus = (status: string): TaskStatus => {
//     switch (status.toLowerCase()) {
//         case 'queued':
//             return TaskStatus.QUEUED;
//         case 'processing':
//             return TaskStatus.PROCESSING;
//         case 'completed':
//             return TaskStatus.COMPLETED;
//         case 'failed':
//             return TaskStatus.FAILED;
//         default:
//             throw new Error('Unknown task status: ' + status);
//     }
// };

const ActiveQuery: React.FC<ModalProps> = ({
    taskID
}) => {
    const [user, setUser] = useState<User | null>(null);
    useEffect(() => {
        getUser().then(setUser);
    }, []);

    const [progressPercentage, setProgressPercentage] = useState<number>(0);
    const [taskStatus, setTaskStatus] = useState<TaskStatus | null>("PENDING");
    const [lastUpdateTime, setLastUpdateTime] = useState<Date>(new Date());
    const [fetchStatusError, setFetchStatusError] = useState<string | null>(null);
    const [alertDialogIsOpen, setAlertDialogIsOpen] = useState(false);

    const fetchTaskStatus = async (interval: NodeJS.Timeout) => {
        if (!user || !taskID) {
            return;
        }
        let data = null
        try {
            data = await fetchTaskStatusData(user, taskID);
        } catch (error: any) {
            clearInterval(interval);
            setTaskStatus("FAILURE")
            setAlertDialogIsOpen(true)
            if (error instanceof Error) {
                setFetchStatusError(error.message)
            } else {
                setFetchStatusError('Failed to update task status: ' + error.toString())
            }
        }
        if (!data) {
            clearInterval(interval);
            return;
        }
        setLastUpdateTime(new Date());
        // const taskStatus = getTaskStatus(data.status);
        const taskStatus = data.status;
        setTaskStatus(taskStatus);
        if (taskStatus === "FAILURE" || taskStatus === "REVOKED") {
            clearInterval(interval);
            throw new Error('Task failed. status: ' + taskStatus);
        }
        // const progress = taskStatusToProgress(taskStatus);
        const parsedResult = JSON.parse(data.result)
        setProgressPercentage(parsedResult.progress * 100);
        if (taskStatus === "SUCCESS") {
            clearInterval(interval);
            return;
        }
    };

    // fetch status periodically
    // maybe move to ws one day
    useEffect(() => {
        const interval = setInterval
            (() => fetchTaskStatus(interval), 5000); // every 5 seconds
        return () => clearInterval(interval);
    }, [taskID]);

    if (!taskID) {
        return null;
    }

    return (
        <>
            <div>
                <HoverCard>
                    <HoverCardTrigger>
                        {taskStatus && <>Task status: {taskStatus} </>}
                        <Progress value={progressPercentage} />
                        {taskStatus && taskStatus !== 'SUCCESS' && taskStatus !== 'FAILURE' && taskStatus !== 'REVOKED' && <Spinner />}
                    </HoverCardTrigger>
                    <HoverCardContent>
                        Task ID: {taskID}
                        <br />
                        Last updated: {lastUpdateTime.toLocaleString()}
                    </HoverCardContent>
                </HoverCard>
            </div>
            <AlertError message={fetchStatusError} open={alertDialogIsOpen} setIsOpen={setAlertDialogIsOpen} />
        </>
    )
};

export default ActiveQuery;