import { json, useLoaderData } from "remix";
import type { LoaderFunction } from "remix";
import { getAuthSession } from "~/util/magic-auth";

export let loader: LoaderFunction = async ({ request }) => {
  let [session, getRefreshAuthHeaders] = await getAuthSession(request);

  return json(
    { email: session.get("auth") },
    { headers: await getRefreshAuthHeaders() }
  );
};

export default function Dashboard() {
  let data = useLoaderData();
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome: {data.email}.</p>
    </div>
  );
}