Function FindChannelModal

apps/web/ui/FindChannelModal/index.tsx:27–171

({
  currentCommunity,
  show,
  close,
  api,
  channels: initialChannels,
  CustomRouterPush,
  onJoinChannel,
  onLeaveChannel,
}: Props)

}

export default function FindChannelModal({
  currentCommunity,
  show,
  close,
  api,
  channels: initialChannels,
  CustomRouterPush,
  onJoinChannel,
  onLeaveChannel,
}: Props) {
  const [loading, setLoading] = useState(true);
  const [query, setQuery] = useState('');
  const [channels, setChannels] = useState<SerializedChannel[]>([]);
  const visibleChannelIds = initialChannels.map(({ id }) => id);

  useEffect(() => {
    let mounted = true;

    setTimeout(() => {
      api
        .getChannels({
          accountId: currentCommunity.id,
        })
        .then((response: any) => {
          if (mounted) {
            setChannels(response.channels);
            setLoading(false);
          }
        })
        .catch(() => {
          if (mounted) {
            setLoading(false);
          }
        });
    }, 200);

    return () => {
      mounted = false;
    };
  }, []);

  return (
    <Modal open={show} close={close} position="top" size="lg">
      <div className={styles.title}>
        <H3>Find a channel</H3>

        <div className={styles.close} onClick={close}>
          <FiX />
        </div>
      </div>
      {loading ? (
        <Spinner className={styles.spinner} />
      ) : (
        <>
          <TextInput
            autoFocus
            id="channelName"
            required