Build your first Sublay app

import { createRoot } from "react-dom/client";
import { SublayProvider } from "@sublay/react-js";
import App from "./App";

const PROJECT_ID = import.meta.env.VITE_PUBLIC_SUBLAY_PROJECT_ID;

createRoot(document.getElementById("root")!).render(
  <SublayProvider projectId={PROJECT_ID}>
    <App />
  </SublayProvider>
);

import { useState } from "react";
import { useAuth } from "@sublay/react-js";

export function AuthForm() {
  const { signUpWithEmailAndPassword, signInWithEmailAndPassword } = useAuth();
  const [mode, setMode] = useState<"sign-up" | "sign-in">("sign-up");
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    setError(null);
    try {
      if (mode === "sign-up") {
        await signUpWithEmailAndPassword({
          email: form.email.value,
          password: form.password.value,
          username: form.username.value,
        });
      } else {
        await signInWithEmailAndPassword({
          email: form.email.value,
          password: form.password.value,
        });
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {mode === "sign-up" && <input name="username" placeholder="Username" required />}
      <input name="email" type="email" placeholder="Email" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit">{mode === "sign-up" ? "Sign up" : "Sign in"}</button>
      <button type="button" onClick={() => setMode(mode === "sign-up" ? "sign-in" : "sign-up")}>
        {mode === "sign-up" ? "I have an account" : "Create an account"}
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

import { useState } from "react";
import { useCreateEntity } from "@sublay/react-js";

export function NewEntityForm({ onCreated }: { onCreated: () => void }) {
  const createEntity = useCreateEntity();
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await createEntity({ title, content });
      setTitle("");
      setContent("");
      onCreated();
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" required />
      <textarea value={content} onChange={(e) => setContent(e.target.value)} placeholder="Write something" />
      <button type="submit">Publish</button>
    </form>
  );
}

import { useEffect } from "react";
import { useEntityList, useUser } from "@sublay/react-js";
import { NewEntityForm } from "./NewEntityForm";

export function Feed({ onOpen }: { onOpen: (entityId: string) => void }) {
  const { user } = useUser();
  const { entities, loading, hasMore, fetchEntities, loadMore } = useEntityList({
    listId: "home-feed",
  });

  const load = () =>
    fetchEntities(
      {},
      { sortBy: "createdAt", sortDir: "desc" },
      { limit: 20, include: ["user"] },
      { fetchImmediately: true }
    );

  useEffect(() => {
    load();
  }, []);

  return (
    <div>
      {user && <NewEntityForm onCreated={load} />}

      {entities.map((entity) => (
        <button key={entity.id} onClick={() => onOpen(entity.id)}>
          <strong>{entity.title}</strong>
          <span> by {entity.user?.username ?? "unknown"}</span>
          <span> · {entity.commentsCount} comments</span>
        </button>
      ))}

      {hasMore && (
        <button onClick={loadMore} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}

import { EntityProvider, useEntity } from "@sublay/react-js";
import { ThreadedCommentSection } from "./components/comments-threaded";
import { LikeButton } from "./LikeButton";

export function EntityPage({ entityId, onBack }: { entityId: string; onBack: () => void }) {
  return (
    <EntityProvider entityId={entityId}>
      <button onClick={onBack}>Back</button>
      <EntityDetail />
      <ThreadedCommentSection entityId={entityId} />
    </EntityProvider>
  );
}

function EntityDetail() {
  const { entity } = useEntity();
  if (!entity) return <p>Loading...</p>;

  return (
    <article>
      <h1>{entity.title}</h1>
      <p>{entity.content}</p>
      <LikeButton entity={entity} />
    </article>
  );
}

import { useReactionToggle, type Entity } from "@sublay/react-js";

export function LikeButton({ entity }: { entity: Entity }) {
  const { currentReaction, reactionCounts, toggleReaction, loading } = useReactionToggle({
    targetType: "entity",
    targetId: entity.id,
    initialReaction: entity.userReaction,
    initialReactionCounts: entity.reactionCounts,
  });

  return (
    <button onClick={() => toggleReaction({ reactionType: "like" })} disabled={loading}>
      {currentReaction === "like" ? "Liked" : "Like"} · {reactionCounts.like ?? 0}
    </button>
  );
}

import { useState } from "react";
import { useAuth, useUser } from "@sublay/react-js";
import { AuthForm } from "./AuthForm";
import { Feed } from "./Feed";
import { EntityPage } from "./EntityPage";

export default function App() {
  const { initialized, signOut } = useAuth();
  const { user } = useUser();
  const [openEntityId, setOpenEntityId] = useState<string | null>(null);

  if (!initialized) return <p>Loading...</p>;

  return (
    <main>
      {user ? (
        <p>
          Signed in as {user.username}{" "}
          <button onClick={() => signOut().catch(console.error)}>Sign out</button>
        </p>
      ) : (
        <AuthForm />
      )}

      {openEntityId ? (
        <EntityPage entityId={openEntityId} onBack={() => setOpenEntityId(null)} />
      ) : (
        <Feed onOpen={setOpenEntityId} />
      )}
    </main>
  );
}