import { DeviceCard } from "./DeviceCard";
import "../../../resources/styles/home.scss"
import { observer } from "mobx-react";
import { useEffect } from "react";
import { LoadingComponent } from "../../../components/LoadingGirl";
import { homePageStore } from "../model/HomePageStore";
export const DeviceList = observer(() => {

    useEffect(() => {
        homePageStore.loadDevices();
    }, [])

    return (
        < main className="main" >
            {homePageStore.isLoading ? <LoadingComponent /> :
                homePageStore.devices.length > 0
                && homePageStore.devices.map(x => <DeviceCard key={x.id} data={x} />)
            }
        </main >);
});