ViewedToggle

tcmts.share.ViewedToggle · #skcihyrp · term · runs in the browser

uses localStorage

"Viewed": folds a change's card away, and the browser remembers it (by contribution, name and hash).

import { useEffect, useRef, useState } from "react";
import { Checkbox } from "react-aria-components";

export function ViewedToggle({ k }: { k: string }) {
  const [viewed, setViewed] = useState(false);
  const ref = useRef<HTMLLabelElement>(null);
  useEffect(() => setViewed(localStorage.getItem(`tcm.viewed.${k}`) === "1"), [k]);
  useEffect(() => {
    ref.current?.closest(".box")?.classList.toggle("viewed", viewed);
  }, [viewed]);
  return (
    <Checkbox
      ref={ref}
      className="right check"
      isSelected={viewed}
      onChange={(v) => {
        localStorage.setItem(`tcm.viewed.${k}`, v ? "1" : "0");
        setViewed(v);
      }}
    >
      <span className="check-box" aria-hidden="true">
        <svg viewBox="0 0 12 12">
          <path d="M2.5 6.5l2.2 2.2L9.5 3.8" />
        </svg>
      </span>
      Viewed
    </Checkbox>
  );
}

used by