export default function MainPage()

in space-slack-sync/client/src/app/components/mainPage.tsx [26:143]
115 lines of code
5 McCabe index (conditional complexity)

export default function MainPage(props: MainPageProps) {
    let [readyToSync, setReadyToSync] = useState<boolean>(syncChannels.readyToSync());
    let [channels, setChannels] = useState<SyncedChannelInfo[]>(syncedChannels.getSyncedChannels());
    let [selectedSlackChannel, setSelectedSlackChannel] = useState<ChannelSelectOption | null>(null);
    let [selectedSpaceChannel, setSelectedSpaceChannel] = useState<ChannelSelectOption | null>(null);

    return <>
        <div className="mainPage">
            <UnapprovedPermissionsWarning/>
            <table className="mainPageTable">
                <colgroup>
                    <col span={1} style={{width: '45%'}}></col>
                    <col span={1} style={{width: '45%'}}></col>
                    <col span={1} style={{width: '10%'}}></col>
                </colgroup>

                <tbody>
                <tr>
                    <td className="mainPageTd">
                        <LogoWithNameAndHost
                            renderLogo={() => (<Icon name="slack"/>)}
                            name={props.slackWorkspace.name}
                            host={`${props.slackWorkspace.domain}.slack.com`}
                        />
                    </td>
                    <td className="mainPageTd">
                        <LogoWithNameAndHost
                            renderLogo={() => (<Icon name="space"/>)}
                            name={spaceOrg.getOrgName()}
                            host={spaceAuth.getSpaceDomain()}
                        />
                    </td>
                    <td className="mainPageTd">
                    </td>
                </tr>
                <tr>
                    <td className="mainPageTd">
                        <div className="pickChannelSpan">{"Pick a Slack channel"}</div>
                    </td>
                    <td className="mainPageTd">
                        <div className="pickChannelSpan">{"Pick a Space channel"}</div>
                    </td>
                    <td className="mainPageTd">
                    </td>
                </tr>
                <tr>
                    <td className="mainPageTd selectRowTd">
                        <ChannelSelectField
                            defaultOptions={slackChannels.getDefaultChannelsAsSelectOptions()}
                            loadOptions={slackChannels.loadChannelsAsSelectOptions}
                            onChange={(selectedOption) => {
                                setSelectedSlackChannel(selectedOption);
                                if (selectedOption != null) {
                                    syncChannels.setSlackChannelToSync(selectedOption.value);
                                }
                                setReadyToSync(syncChannels.readyToSync());
                            }}
                            value={selectedSlackChannel}
                        />
                    </td>
                    <td className="mainPageTd selectRowTd">
                        <ChannelSelectField
                            defaultOptions={spaceChannels.getDefaultChannelsAsSelectOptions()}
                            loadOptions={spaceChannels.loadChannelsAsSelectOptions}
                            onChange={(selectedOption) => {
                                setSelectedSpaceChannel(selectedOption);
                                if (selectedOption != null) {
                                    syncChannels.setSpaceChannelToSync(selectedOption.value);
                                }
                                setReadyToSync(syncChannels.readyToSync());
                            }}
                            value={selectedSpaceChannel}
                        />
                    </td>
                    <td className="mainPageTd selectRowTd">
                        <Button
                            buttonText="Create tunnel"
                            isDisabled={!readyToSync}
                            actionHandler={() => {
                                if (selectedSpaceChannel !== null && selectedSlackChannel !== null) {
                                    const newChannel: SyncedChannelInfo = {
                                        // optimistic update
                                        channelNameInSpace: selectedSpaceChannel.label,
                                        channelNameInSlack: selectedSlackChannel.label,
                                        spaceChannelId: selectedSpaceChannel.value,
                                        spaceChannelIconUrl: selectedSpaceChannel.icon,
                                        slackTeamId: props.slackWorkspace.id,
                                        slackChannelId: selectedSlackChannel.value,
                                        isMemberInSlackChannel: true,
                                        isAuthorizedInSpaceChannel: true,
                                        userIsAdminInSpaceChannel: false,
                                        isNewChannelForOptimisticUpdate: true,
                                    };

                                    setChannels([...channels, newChannel]);
                                    syncChannels.startSync(setChannels);
                                    setSelectedSlackChannel(null);
                                    setSelectedSpaceChannel(null);
                                }
                            }}
                        />
                    </td>
                </tr>
                <SyncedChannels
                    channels={channels}
                    onRemoveChannel={(channelToRemove) => {
                        setChannels(channels.filter((channel) => channel.spaceChannelId !== channelToRemove.spaceChannelId));
                        syncChannels.removeChannelFromSync(channelToRemove, setChannels);
                    }}
                    reloadSyncedChannels={() => {
                        syncedChannels.refreshSyncedChannels(setChannels);
                    }}
                />
                </tbody>
            </table>
        </div>
    </>
}