import { useQueryClient } from "@tanstack/react-query";
import { useMe } from "../auth";
import { AuthBox } from "../components/AuthBox";
import { Feed } from "../components/Feed";
import { PostForm } from "../components/PostForm";

// Solange der Anmeldestatus noch lädt, weder Login noch Formular zeigen --
// sonst blitzt bei Angemeldeten kurz die Login-Box auf.
export function FeedPage() {
  const me = useMe();
  return (
    <>
      {me.isSuccess && (me.data ? <Compose /> : <AuthBox />)}
      <Feed queryKey={["feed"]} urlFor={(page) => `/entry/feed/${page}`} />
    </>
  );
}

// Nach einem neuen Beitrag springt der Feed zurück auf Seite 0, damit er oben
// steht.
function Compose() {
  const qc = useQueryClient();
  return (
    <section id="compose">
      <PostForm
        rows={4}
        placeholder="Was gibt's Neues?"
        submitLabel="Eintrag erstellen"
        fallback="Beitrag fehlgeschlagen."
        onDone={() => qc.resetQueries({ queryKey: ["feed"] })}
      />
    </section>
  );
}