react-router#Prompt TypeScript Examples

SourceEditorView: React.FC<SourceEditorViewProps> = ({
  state,
  controlsDisabled,
  tabsDisabled,
  editorMode,
  showDocumentationDrawer,
  initialSourceData,
  sourceDataFromCatalog,
  setSourceEditorState,
  handleSetControlsDisabled,
  handleSetTabsDisabled,
  setShowDocumentationDrawer,
  handleBringSourceData,
  handleSave,
  setInitialSourceData,
  handleLeaveEditor,
  handleValidateAndTestConnection,
  handleValidateStreams,
  handleReloadStreams,
}) => {
  const forms = [
    {
      key: "configuration",
      title: "Configuration",
      description: "Specify essential parameters",
      errorsCount: state.configuration.errorsCount,
      render: (
        <SourceEditorFormConfiguration
          editorMode={editorMode}
          initialSourceData={initialSourceData}
          sourceDataFromCatalog={sourceDataFromCatalog}
          setSourceEditorState={setSourceEditorState}
          handleSetControlsDisabled={handleSetControlsDisabled}
          handleSetTabsDisabled={handleSetTabsDisabled}
          handleReloadStreams={handleReloadStreams}
        />
      ),
      proceedAction: handleValidateAndTestConnection,
    },
    {
      key: "streams",
      title: "Streams",
      description: "Select data pipelines",
      errorsCount: state.streams.errorsCount,
      render: (
        <SourceEditorFormStreams
          editorMode={editorMode}
          initialSourceData={initialSourceData}
          sourceDataFromCatalog={sourceDataFromCatalog}
          setSourceEditorState={setSourceEditorState}
          handleSetControlsDisabled={handleSetControlsDisabled}
          handleBringSourceData={handleBringSourceData}
        />
      ),
      proceedAction: handleValidateStreams,
    },
    {
      key: "connections",
      title: "Connections",
      description: "Choose destinations to send data to",
      render: (
        <SourceEditorFormConnections
          initialSourceData={initialSourceData}
          setSourceEditorState={setSourceEditorState}
        />
      ),
      proceedButtonTitle: "Save",
      proceedAction: handleSave,
    },
  ]

  return (
    <>
      {editorMode === "add" ? (
        <SourceEditorViewSteps
          steps={forms}
          controlsDisabled={controlsDisabled}
          handleBringSourceData={handleBringSourceData}
          setInitialSourceData={setInitialSourceData}
          handleLeaveEditor={handleLeaveEditor}
        />
      ) : (
        <SourceEditorViewTabs
          sourceId={initialSourceData.sourceId}
          tabs={forms}
          tabsDisabled={tabsDisabled}
          sourceDataFromCatalog={sourceDataFromCatalog}
          controlsDisabled={controlsDisabled}
          handleSave={handleSave}
          handleValidateAndTestConnection={handleValidateAndTestConnection}
          handleLeaveEditor={handleLeaveEditor}
          setShowDocumentationDrawer={setShowDocumentationDrawer}
        />
      )}

      <Prompt
        message={"You have unsaved changes. Are you sure you want to leave without saving?"}
        when={state.stateChanged}
      />

      {sourceDataFromCatalog?.documentation && (
        <SourceEditorDocumentationDrawer
          visible={showDocumentationDrawer}
          sourceDataFromCatalog={sourceDataFromCatalog}
          setVisible={setShowDocumentationDrawer}
        />
      )}
    </>
  )
}

export default function Intermediate(props: Props) {
    const [screen, openScreen] = useState<Screen>({ id: "none" });
    const settings = useApplicationState().settings;
    const history = useHistory();

    const value = {
        screen,
        focusTaken: screen.id !== "none",
    };

    const actions = useMemo(() => {
        return {
            openLink: (href?: string, trusted?: boolean) => {
                const link = determineLink(href);

                switch (link.type) {
                    case "profile": {
                        openScreen({ id: "profile", user_id: link.id });
                        return true;
                    }
                    case "navigate": {
                        history.push(link.path);
                        return true;
                    }
                    case "external": {
                        if (
                            !trusted &&
                            !settings.security.isTrustedOrigin(
                                link.url.hostname,
                            )
                        ) {
                            openScreen({
                                id: "external_link_prompt",
                                link: link.href,
                            });
                        } else {
                            window.open(link.href, "_blank", "noreferrer");
                        }
                    }
                }

                return true;
            },
            openScreen: (screen: Screen) => openScreen(screen),
            writeClipboard: (text: string) => {
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(text);
                } else {
                    actions.openScreen({ id: "clipboard", text });
                }
            },
        };
        // eslint-disable-next-line
    }, []);

    useEffect(() => {
        const openProfile = (user_id: string) =>
            openScreen({ id: "profile", user_id });
        const navigate = (path: string) => history.push(path);

        const subs = [
            internalSubscribe(
                "Intermediate",
                "openProfile",
                openProfile as (...args: unknown[]) => void,
            ),
            internalSubscribe(
                "Intermediate",
                "navigate",
                navigate as (...args: unknown[]) => void,
            ),
        ];

        return () => subs.map((unsub) => unsub());
    }, [history]);

    return (
        <IntermediateContext.Provider value={value}>
            <IntermediateActionsContext.Provider value={actions}>
                {screen.id !== "onboarding" && props.children}
                <Modals
                    {...value}
                    {...actions}
                    key={
                        screen.id
                    } /** By specifying a key, we reset state whenever switching screen. */
                />
                <Prompt
                    when={[
                        "modify_account",
                        "special_prompt",
                        "special_input",
                        "image_viewer",
                        "profile",
                        "channel_info",
                        "pending_requests",
                        "user_picker",
                    ].includes(screen.id)}
                    message={(_, action) => {
                        if (action === "POP") {
                            openScreen({ id: "none" });
                            setTimeout(() => history.push(history.location), 0);

                            return false;
                        }

                        return true;
                    }}
                />
            </IntermediateActionsContext.Provider>
        </IntermediateContext.Provider>
    );
}