Function EditChannelModal

apps/web/ui/EditChannelModal/index.tsx:30–155

({
  open,
  close,
  channel,
  currentCommunity,
  api,
}: Props)

}

export default function EditChannelModal({
  open,
  close,
  channel,
  currentCommunity,
  api,
}: Props) {
  const [loading, setLoading] = useState(false);
  const [viewType, setViewType] = useState<ChannelViewType>(channel.viewType);
  const [channelPrivate, setChannelPrivate] = useState(
    channel.type === 'PRIVATE'
  );

  function updateChannel({
    accountId,
    channelId,
    channelName,
    viewType,
  }: {
    accountId: string;
    channelId: string;
    channelName: string;
    viewType: ChannelViewType;
  }) {
    setLoading(true);
    return api
      .updateChannel({
        accountId,
        channelId,
        channelName,
        channelPrivate,
        viewType,
      })
      .then(() => {
        // changing channel name changes the path
        // we'd need to dynamically update it
        // we should most likely send this through websockets
        // to other users to update the channel name dynamically
        // otherwise they'll get a 404 on the previous channel name
        setLoading(false);
        window.location.href = window.location.href.replace(
          `/${channel.channelName}`,
          `/${channelName}`
        );
        close();
      })
      .catch(() => {
        setLoading(false);
        close();
      });
  }

  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.target as typeof event.target & {
      channelName: { value: string };
      slackDomain: { value: string };
    };