Source

// The landing page's live part: "Your polls" for returning organizers.
import { useMemo, useState } from "react";
import { navigate, usePath } from "./lib/router";
import { myPolls } from "./lib/polls";

export function YourPolls() {
  const path = usePath();
  // Read again whenever the landing comes back, so a poll made a moment ago is listed.
  const polls = useMemo(myPolls, [path]);
  const [all, setAll] = useState(false);
  if (!polls.length) return null;
  const shown = all ? polls : polls.slice(0, 4);
  return (
    <section className="your-polls" aria-labelledby="your-polls-title">
      <h2 className="your-title" id="your-polls-title">Your polls</h2>
      <ul className="your-list">
        {shown.map((p) => (
          <li key={p.id}>
            <a href={`/p/${p.id}`} onClick={(e) => { e.preventDefault(); navigate(`/p/${p.id}`); }}>
              <strong>{p.title || "Untitled poll"}</strong>
              <span>Made {new Date(p.at).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })}</span>
            </a>
          </li>
        ))}
      </ul>
      {polls.length > shown.length && <button className="link-btn" type="button" onClick={() => setAll(true)}>Show all {polls.length}</button>}
      <p className="hint">Listed on this device only. Open an admin link to add a poll here.</p>
    </section>
  );
}