<script>
  import DeviceList from "../libs/DeviceList.svelte";
  import { onMount } from "svelte";
  import { writable } from "svelte/store";

  const apiURL = import.meta.env.VITE_API_URL;

  const devices = writable([]);

  const fetchData = async () => {
    try {
      const response = await fetch(apiURL);
      const data = await response.json();
      devices.set(data["result"]);
      devices.subscribe((value) => {});
    } catch (error) {
      console.log(error);
    }
  };

  onMount(fetchData);
</script>

<div class="body">
  <DeviceList {devices} />
</div>

<style>
  .body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
</style>
