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>
  );
}