openreplay/frontend/app/components/Spots/SpotPlayer/components/AccessModal.tsx

import { DownOutlined, CopyOutlined, StopOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu, Segmented, Modal } from 'antd';
import copy from 'copy-to-clipboard';
import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { formatExpirationTime, HOUR_SECS, DAY_SECS, WEEK_SECS } from 'App/utils/index'; 

enum Intervals {
  hour,
  threeHours,
  day,
  week,
}

function AccessModal() {
  const { spotStore } = useStore();
  const [isCopied, setIsCopied] = useState(false);
  const [isPublic, setIsPublic] = useState(!!spotStore.pubKey);
  const [generated, setGenerated] = useState(!!spotStore.pubKey);
  const [selectedInterval, setSelectedInterval] = useState<Intervals>(Intervals.hour);
  const [loadingKey, setLoadingKey] = useState(false);

  const expirationValues = {
    [Intervals.hour]: HOUR_SECS,
    [Intervals.threeHours]: 3 * HOUR_SECS,
    [Intervals.day]: DAY_SECS,
    [Intervals.week]: WEEK_SECS,
  };
  const spotId = spotStore.currentSpot!.spotId!;
  const spotLink = `${window.location.origin}/view-spot/${spotId}${
    spotStore.pubKey ? `?pub_key=${spotStore.pubKey.value}` : ''
  }`;

  const menuItems = [
    {
      key: Intervals.hour.toString(),
      label: <div>1 Hour</div>,
    },
    {
      key: Intervals.threeHours.toString(),
      label: <div>3 Hours</div>,
    },
    {
      key: Intervals.day.toString(),
      label: <div>1 Day</div>,
    },
    {
      key: Intervals.week.toString(),
      label: <div>1 Week</div>,
    },
  ];

  const onMenuClick = async (info: { key: string }) => {
    const val = expirationValues[Number(info.key) as Intervals];
    setSelectedInterval(Number(info.key) as Intervals);
    await spotStore.generateKey(spotId, val);
  };

  const changeAccess = async (toPublic: boolean) => {
    if (isPublic && !toPublic && spotStore.pubKey) {
      await spotStore.generateKey(spotId, 0);
      setIsPublic(toPublic);
    } else {
      setIsPublic(toPublic);
    }
  };

  const revokeKey = async () => {
    await spotStore.generateKey(spotId, 0);
    setGenerated(false);
    setIsPublic(false);
  };

  const generateInitial = async () => {
    setLoadingKey(true);
    const k = await spotStore.generateKey(
      spotId,
      expirationValues[Intervals.hour]
    );
    setGenerated(!!k);
    setLoadingKey(false);
  };

  const onCopy = () => {
    setIsCopied(true);
    copy(spotLink);
    setTimeout(() => setIsCopied(false), 2000);
  };

  return (
    <div className={'flex flex-col gap-4 align-start w-96 p-1'} >
      <div>
        <Segmented
          options={[
            {
              value: 'internal',
              label: 'Internal',
            },
            {
              value: 'public',
              label: 'Public',
            },
          ]}
          value={isPublic ? 'public' : 'internal'}
          onChange={(value) => changeAccess(value === 'public')}
        />
      </div>
      {!isPublic ? (
        <>
          <div>
            <div className={'text-black/50'}>
              Link for internal team members
            </div>
            <div className={'px-2 py-1 rounded-lg bg-indigo-50 whitespace-nowrap overflow-ellipsis overflow-hidden'}>
              {spotLink}
            </div>
          </div>
          <div className={'w-fit'}>
            <Button
              size={'small'}
              onClick={onCopy}
              type={'default'}
              icon={<CopyOutlined />}
            >
              {isCopied ? 'Copied!' : 'Copy Link'}
            </Button>
          </div>
        </>
      ) : !generated ? (
        <div className={'w-fit p-1'}>
          <Button
            loading={spotStore.isLoading}
            onClick={generateInitial}
            type={'primary'}
            ghost
            size='small'
            className='mt-1'
          >
            Enable Public Sharing
          </Button>
        </div>
      ) : (
        <>
          <div className='flex flex-col gap-4 px-1'>
            <div>
              <div className={'text-black/50'}>Anyone with the following link can access this Spot</div>
              <div className={'px-2 py-1 rounded-lg bg-indigo-50 whitespace-nowrap overflow-ellipsis overflow-hidden'}>
                {spotLink}
              </div>
            </div>

            <div className={'flex items-center gap-2'}>
              <div>Link expires in</div>
              <Dropdown overlay={<Menu items={menuItems} onClick={onMenuClick} />}>
                <div className='flex items-center cursor-pointer'>
                  {loadingKey ? 'Loading' : formatExpirationTime(expirationValues[selectedInterval])}
                  <DownOutlined />
                </div>
              </Dropdown>
            </div>
            <div className={'flex items-center gap-2'}>
              <div className={'w-fit'}>
                <Button
                  type={'default'}
                  size={'small'}
                  onClick={onCopy}
                  icon={<CopyOutlined />}
                >
                  {isCopied ? 'Copied!' : 'Copy Link'}
                </Button>
              </div>
              <Button type={'text'} size='small' icon={<StopOutlined />} onClick={revokeKey}>
                Disable Public Sharing
              </Button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export default observer(AccessModal);