Source

// Adding a subscription: the editor, plus one-tap picks for the most common ones. A link can fill it
// in (/add?name=Netflix&price=15.49&cycle=monthly), and nothing is saved until the person taps Add.
import { useMemo, useState } from "react";
import { useStore } from "./lib/store";
import { blank } from "./lib/subs";
import { isDayKey } from "./lib/dates";
import { navigate } from "./lib/router";
import { Editor, draftFromQuery } from "./Editor";
import { QuickPicks } from "./Start";

export function AddPage({ query }: { query: URLSearchParams }) {
  const { currency } = useStore();
  const [round, setRound] = useState(0);
  const [picked, setPicked] = useState<string | null>(null);
  const fromLink = useMemo(() => draftFromQuery(query, currency), [query, currency]);
  const initial = useMemo(() => {
    if (picked) return draftFromQuery(new URLSearchParams({ name: picked }), currency)!;
    return round === 0 && fromLink ? fromLink : blank();
  }, [round, picked, fromLink, currency]);
  return (
    <div className="page add">
      <header className="page-head">
        <div><p className="eyebrow">Subs</p><h1 className="h1">Add a subscription</h1></div>
      </header>
      {fromLink && round === 0 && !picked && <p className="notice">Filled in from a link. Check the price and date, then tap Add subscription.</p>}
      <div className="add-grid">
        <section className="card pad">
          <Editor key={`${round}-${picked}`} initial={initial} mode="add" fixedDate={round === 0 && Boolean(fromLink) && isDayKey(query.get("next") || "")} onDone={(_, again) => {
            if (again) { setPicked(null); setRound((r) => r + 1); window.scrollTo(0, 0); }
            else navigate("/home");
          }} />
        </section>
        <aside className="stack add-side">
          <h2 className="section-label">Common ones</h2>
          <QuickPicks onPick={(name) => { setPicked(name); setRound((r) => r + 1); window.scrollTo(0, 0); }} />
          <p className="hint">Not sure what you pay for? Look through your last two card statements, and the subscription list in your phone's app store settings.</p>
        </aside>
      </div>
    </div>
  );
}