import { useMutation } from "@tanstack/react-query";
import { Imei } from "./components/home/imei";
import { StatusBox } from "./components/home/status-box";
import { getUsersInformation } from "./services/api/user";
import { TransitionPages } from "./transition";
import { useUserStore } from "./store/user";
import { handleError } from "./utility/error-handle";
import { useEffect } from "react";

function App() {
  const { updateUser } = useUserStore()
  const { mutate: userMutate } = useMutation({
    mutationFn: getUsersInformation,
    mutationKey: ["user"]
  })
  const handleGetUsersInformation = async () => {
    await userMutate({}, {
      onSuccess: (res: any) => {
        updateUser(res?.data)
      },
      onError: (err: any) => handleError(err)
    })
  }
  useEffect(() => {
    handleGetUsersInformation()
  }, [])
  return (
    <TransitionPages>
      <div className="flex flex-col gap-y-[30px] w-full">
        <StatusBox />
        <Imei />
      </div>
    </TransitionPages>
  );
}

export default App;
