useHomeroomStyle

Location: src/hooks/useHomeroomStyle.js

Overview

Provides an interface for reading and writing Homeroom style tokens. Reads the current saved style from StyleContext (which fetches homeroom_style from the profiles table), and writes updates directly via Supabase, then triggers a context refresh so all style consumers update immediately.

This hook is the write-side counterpart to useStyle() (read-only). Use useHomeroomStyle in customization UIs where the user can change their Homeroom appearance.

Signature

function useHomeroomStyle(): {
  style: object | null,
  saveStyle: (tokens: object | null) => Promise<boolean>,
  clearStyle: () => Promise<boolean>,
  saving: boolean,
  loading: boolean,
  error: string | null,
  hasCustomStyle: boolean,
}

Return Value

Field	Type	Description
style	object | null	Current saved style tokens (raw JSONB from profiles.homeroom_style), or null if no custom style is set
saveStyle	(tokens) => Promise<boolean>	Saves tokens to the database. Pass null to clear. Returns true on success, false on failure.
clearStyle	() => Promise<boolean>	Convenience wrapper — calls saveStyle(null)
saving	boolean	true while a save operation is in progress
loading	boolean	true until the initial style fetch from the profile completes (from StyleContext.styleLoaded)
error	string | null	Error message from the last failed save or fetch, or null
hasCustomStyle	boolean	true if the user has a saved custom style

Usage

import { useHomeroomStyle } from '../hooks/useHomeroomStyle';

function StyleSaveButton({ tokens }) {
  const { saveStyle, saving, error } = useHomeroomStyle();

  const handleSave = async () => {
    const success = await saveStyle(tokens);
    if (success) {
      // All useStyle() consumers will see the new tokens
    }
  };

  return (
    <>
      <button onClick={handleSave} disabled={saving}>
        {saving ? 'Saving...' : 'Save Style'}
      </button>
      {error && <p className="error">{error}</p>}
    </>
  );
}

How It Works

1. Resolves the current user via supabase.auth.getUser() + onAuthStateChange (same pattern as other hooks)
2. Reads current style from StyleContext.profileStyle (no duplicate fetch)
3. On saveStyle(tokens):
   • Updates profiles.homeroom_style in the database
   • Calls StyleContext.refreshStyle() to trigger a re-fetch
   • All components using useStyle() see the new computed values immediately
4. Tracks saving and error state for UI feedback

Dependencies

• StyleContext — Must be rendered inside a <StyleProvider> (which wraps all authenticated routes in App.jsx)
• profiles.homeroom_style — JSONB column on the profiles table (requires database migration)

Related

• StyleContext (src/contexts/StyleContext.jsx) — Provides computed style values from tokens
• useStyle() — Read-only access to current user's computed style (exported from StyleContext)
• useStyleFor(tokens) — Compute style for another user's tokens (exported from StyleContext)
• Customizer — The UI that uses this hook to save customizations