Hide Channel History For Newly Added Members

import React, { useMemo, useState } from "react";
import { useChannelStateContext } from "stream-chat-react";
import "./add-members-dialog.css";

type HistoryMode = "none" | "today" | "all" | "custom";

type AddMembersDialogProps = {
  memberIds: string[];
};

export function AddMembersDialog({ memberIds }: AddMembersDialogProps) {
  const { channel } = useChannelStateContext();
  const [open, setOpen] = useState<boolean>(true);
  const [mode, setMode] = useState<HistoryMode>("none");
  const [customInput, setCustomInput] = useState<string>("");

  const isCustomDateValid = useMemo(() => {
    if (mode !== "custom") return true;
    const parsed = new Date(customInput);
    return !Number.isNaN(parsed.getTime());
  }, [mode, customInput]);

  const handleAdd = async () => {
    if (!channel) return;

    const options: { hide_history_before?: string } = {};

    if (mode !== "all") {
      let cutoff = new Date(); // do not show any history

      if (mode === "today") {
        const startOfToday = new Date();
        startOfToday.setHours(0, 0, 0, 0);
        cutoff = startOfToday;
      } else if (mode === "custom") {
        const parsed = new Date(customInput);
        if (Number.isNaN(parsed.getTime())) return;
        cutoff = parsed;
      }

      options.hide_history_before = cutoff.toISOString();
    }

    await channel.addMembers(memberIds, undefined, options);
    setOpen(false);
  };

  if (!open) return null;

  return (
    <div className="sch-dialog-overlay">
      <div className="sch-dialog">
        <h3 className="sch-title">Include conversation history?</h3>

        <div className="sch-options">
          <label className="sch-option">
            <input
              type="radio"
              name="history"
              value="none"
              checked={mode === "none"}
              onChange={() => setMode("none")}
            />
            <span>don't include</span>
          </label>

          <label className="sch-option">
            <input
              type="radio"
              name="history"
              value="today"
              checked={mode === "today"}
              onChange={() => setMode("today")}
            />
            <span>from today</span>
          </label>

          <label className="sch-option">
            <input
              type="radio"
              name="history"
              value="all"
              checked={mode === "all"}
              onChange={() => setMode("all")}
            />
            <span>from the beginning</span>
          </label>

          <label className="sch-option">
            <input
              type="radio"
              name="history"
              value="custom"
              checked={mode === "custom"}
              onChange={() => setMode("custom")}
            />
            <span>custom</span>
          </label>
        </div>

        {mode === "custom" ? (
          <div className="sch-custom">
            <input
              className="sch-input"
              type="datetime-local"
              value={customInput}
              onChange={(e) => setCustomInput(e.target.value)}
              placeholder="YYYY-MM-DDTHH:mm"
            />
            {!isCustomDateValid && (
              <div className="sch-error">Enter a valid date/time</div>
            )}
          </div>
        ) : null}

        <div className="sch-actions">
          <button
            className="sch-btn sch-secondary"
            onClick={() => setOpen(false)}
          >
            Cancel
          </button>
          <button
            className="sch-btn sch-primary"
            onClick={handleAdd}
            disabled={mode === "custom" && !isCustomDateValid}
          >
            Add
          </button>
        </div>
      </div>
    </div>
  );
}