learnhouse/apps/web/app/install/steps/get_started.tsx

import PageLoading from '@components/Objects/Loaders/PageLoading';
import { getAPIUrl } from '@services/config/config';
import { swrFetcher } from '@services/utils/ts/requests';
import { useRouter } from 'next/navigation';
import React, { use, useEffect } from 'react'
import useSWR, { mutate } from "swr";

function GetStarted() {
    const { data: install, error: error, isLoading } = useSWR(`${getAPIUrl()}install/latest`, swrFetcher);
    const router = useRouter()

    async function startInstallation() {
        let res = await fetch(`${getAPIUrl()}install/start`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        })

        if (res.status == 200) {
            mutate(`${getAPIUrl()}install/latest`)
            router.refresh();
            router.push(`/install?step=1`)
        }


    }

    function redirectToStep() {
        const step = install.step
        router.push(`/install?step=${step}`)
    }

    

    useEffect(() => {
        if (install) {
            redirectToStep()
        }
    }, [install])


    if (error) return <div className='flex py-10 justify-center items-center space-x-3'>
        <h1>Start a new installation</h1>
        <div onClick={startInstallation} className='p-3  font-bold bg-green-200 text-green-900 rounded-lg hover:cursor-pointer' >
            Start
        </div>
    </div>

    if (isLoading) return <PageLoading />
    if (install) {
        return (
            <div>
                <div className='flex py-10 justify-center items-center space-x-3'>
                    <h1>You already started an installation</h1>
                    <div onClick={redirectToStep} className='p-3  font-bold bg-orange-200 text-orange-900 rounded-lg hover:cursor-pointer' >
                        Continue
                    </div>
                    <div onClick={startInstallation} className='p-3  font-bold bg-green-200 text-green-900 rounded-lg hover:cursor-pointer' >
                        Start
                    </div>
                </div>
            </div>
        )
    }
}

export default GetStarted