Serviços gerais codigo

ServicosGerais.tsx

const ServicosGerais: React.FC = () => {
    const [started, setStarted] = useState('Iniciar Tarefa');
    const [habilit, setHabilit] = useState(false);


    const [tasks, setTasks] = useState<TaskData[]>([]);
    const [tasksFinish, setTasksFinish] = useState<TaskLocal[]>([]);

    const refNutton = useRef();
    const { signOut, user } = useAuth();

    useEffect(() => {
        api.get('/sistemas/tarefas').then((response) => {
            localStorage.setItem('@taskData:tarefas', JSON.stringify(response.data));

            const tasksLocal = JSON.parse(localStorage.getItem('@taskData:tarefas') || '{}');

            setTasks(tasksLocal);

        });

    }, []);





    const startedtask = useCallback(async (id, ref) => {
        setStarted('Tarefa inciada');
        setHabilit(true);
        var timestamp = moment2().format('DD/MM/YYYY H:mm:ss ');

        const task: TaskLocal = {
            codigo_tarefa: id,
            dataInicio: timestamp,
            datafim: ''
        }

        //console.log(task);
        var TasksArray = [];

        TasksArray.push(...tasksFinish, task)

console.log(TasksArray);

        setTasksFinish(TasksArray);


    }, []);



    const finishtask = useCallback(() => {

        console.log('task finish!')

    }, []);


    return (
        <>
            <GlobalContainer>
                <Header />
                <Container>
                    <Headermini>
                        <h1>Olá {user.FIRSTNAME} essas são suas tarefas para hoje: <Moment format={"D MMM YYYY HH:mm:ss"} interval={1000}></Moment>  </h1>
                        <img src={"data:image/jpeg;base64, " + user.AVATAR} alt="" />
                    </Headermini>
                    <ContainerTarefa>
                        {tasks.map(task => (
                            <div className="tarefa" key={task.CODIGO_TAREFA}>
                                <p>{task.DEPARTAMENTO + ' - ' + task.DATA + ' - ' + task.NOME_DO_DIA}</p>
                                <p>{task.DESCRI_TAREFA}</p>
                                <div className="botoes">
                                    <ButtonStarted
                                        onClick={() => { startedtask(task.CODIGO_TAREFA, refNutton) }}
                                        disabled={habilit}

                                    >
                                        {started}
                                    </ButtonStarted>

                                    <ButtonFinish onClick={finishtask}>Finalizar Tarefa</ButtonFinish>
                                </div>
                            </div>
                        ))}
                    </ContainerTarefa>
                </Container>
                <Footer>
                    <nav className="navFooter">
                        <Link className="links" to="/menu"><BsHouseDoorFill size={25} />Menu</Link>
                        <Link className="links" to="/aplicacoes"><BsChevronDoubleLeft size={25} />Voltar</Link>
                        <Link className="links" to="/perfil"><BsFillPersonFill size={25} />Perfil</Link>
                        <button className="button" onClick={signOut}><BsBoxArrowLeft size={25} /> Sair </button>
                    </nav>
                </Footer>
            </GlobalContainer>
        </>
    );
}