cleanup

online-go · Oct 24, 2024 · cdf2655 · cdf2655
1 parent 58d1d87
commit cdf2655
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 80 deletions.
diff --git a/src/components/ChallengeModal/ChallengeModal.tsx b/src/components/ChallengeModal/ChallengeModal.tsx
@@ -18,7 +18,6 @@ import * as React from "react";
 
 import * as data from "@/lib/data";
 import * as player_cache from "@/lib/player_cache";
-import * as DynamicHelp from "react-dynamic-help";
 
 import { OgsResizeDetector } from "@/components/OgsResizeDetector";
 import { browserHistory } from "@/lib/ogsHistory";
@@ -62,6 +61,7 @@ import {
     saveTimeControlSettings,
     updateSystem,
 } from "@/components/TimeControl/TimeControlUpdates";
+import { ActivateTooltip } from "@/views/HelpFlows/ModalHelp";
 
 export type ChallengeDetails = rest_api.ChallengeDetails;
 
@@ -1780,20 +1780,9 @@ export class ChallengeModalBody extends React.Component<
                             </span>
                         )}
                         {mode === "computer" && (
-                            <DynamicHelp.Api.Consumer>
-                                {(value) => {
-                                    const { ref: modalHelpIntro } =
-                                        value.registerTargetItem("modal-help-intro");
-                                    return (
-                                        <span
-                                            ref={modalHelpIntro}
-                                            onClick={() => value.triggerFlow("modal-help")}
-                                        >
-                                            {_("Computer")}
-                                        </span>
-                                    );
-                                }}
-                            </DynamicHelp.Api.Consumer>
+                            <ActivateTooltip flow="modal-help" item="intro">
+                                <span>{_("Computer")}</span>
+                            </ActivateTooltip>
                         )}
                     </h2>
                 </div>

diff --git a/src/components/LanguagePicker/LanguagePicker.tsx b/src/components/LanguagePicker/LanguagePicker.tsx
@@ -36,19 +36,19 @@ function language_sorter(a: string, b: string) {
     return 0;
 }
 
-export const LanguagePicker = () => (
-    <ModalContext.Consumer>
-        {({ showModal }) => (
-            <span
-                className="LanguagePicker fakelink"
-                onClick={() => showModal(ModalTypes.LanguagePicker)}
-            >
-                <i className="fa fa-language" />
-                {languages[current_language]}
-            </span>
-        )}
-    </ModalContext.Consumer>
-);
+export const LanguagePicker = () => {
+    const { showModal } = React.useContext(ModalContext);
+
+    return (
+        <span
+            className="LanguagePicker fakelink"
+            onClick={() => showModal(ModalTypes.LanguagePicker)}
+        >
+            <i className="fa fa-language" />
+            {languages[current_language]}
+        </span>
+    );
+};
 
 export const LanguagePickerModal = () => {
     const { hideModal } = React.useContext(ModalContext);

diff --git a/src/views/Game/GameDock.tsx b/src/views/Game/GameDock.tsx
@@ -39,6 +39,22 @@ import { useUserIsParticipant } from "./GameHooks";
 import { useGoban } from "./goban_context";
 import { Tooltip } from "../../components/Tooltip";
 import { ModalContext, ModalTypes } from "@/components/Modal/ModalContext";
+import { GobanEngine, GobanRenderer } from "goban";
+
+const handleForkGameClick = (
+    showModal: (type: ModalTypes, props?: any) => void,
+    user: rest_api.UserConfig,
+    engine: GobanEngine,
+    goban: GobanRenderer,
+) => {
+    if (!user.anonymous && !engine.rengo && !goban.isAnalysisDisabled()) {
+        if (!goban) {
+            return;
+        }
+
+        showModal(ModalTypes.Fork, { goban });
+    }
+};
 
 interface DockProps {
     annulled: boolean;
@@ -92,6 +108,7 @@ export function GameDock({
     const phase = engine.phase;
 
     const user = useUser();
+    const { showModal } = React.useContext(ModalContext);
 
     const tooltipRequired = preferences.get("dock-delay") === MAX_DOCK_DELAY;
 
@@ -441,34 +458,16 @@ export function GameDock({
                 </a>
             </Tooltip>
             <Tooltip tooltipRequired={tooltipRequired} title={_("Fork game")}>
-                <ModalContext.Consumer>
-                    {({ showModal }) => (
-                        <a
-                            onClick={() => {
-                                if (
-                                    !user.anonymous &&
-                                    !engine.rengo &&
-                                    !goban.isAnalysisDisabled()
-                                ) {
-                                    if (!goban) {
-                                        return;
-                                    }
-
-                                    return showModal(ModalTypes.Fork, {
-                                        goban,
-                                    });
-                                }
-                            }}
-                            className={
-                                user.anonymous || engine.rengo || goban.isAnalysisDisabled()
-                                    ? "disabled"
-                                    : ""
-                            }
-                        >
-                            <i className="fa fa-code-fork"></i> {_("Fork game")}
-                        </a>
-                    )}
-                </ModalContext.Consumer>
+                <a
+                    onClick={() => handleForkGameClick(showModal, user, engine, goban)}
+                    className={
+                        user.anonymous || engine.rengo || goban.isAnalysisDisabled()
+                            ? "disabled"
+                            : ""
+                    }
+                >
+                    <i className="fa fa-code-fork"></i> {_("Fork game")}
+                </a>
             </Tooltip>
             <Tooltip tooltipRequired={tooltipRequired} title={_("Call moderator")}>
                 <a onClick={alertModerator} className={user.anonymous ? "disabled" : ""}>

diff --git a/src/views/HelpFlows/ModalHelp.tsx b/src/views/HelpFlows/ModalHelp.tsx
@@ -20,6 +20,7 @@
 import * as React from "react";
 
 import { HelpFlow, HelpItem } from "react-dynamic-help";
+import * as DynamicHelp from "react-dynamic-help";
 
 export function ModalHelp(): JSX.Element {
     return (
@@ -30,3 +31,19 @@ export function ModalHelp(): JSX.Element {
         </HelpFlow>
     );
 }
+
+interface ActivateTooltipProps {
+    children: React.ReactNode;
+    flow: string;
+    item: string;
+}
+
+export const ActivateTooltip = ({ children, flow, item }: ActivateTooltipProps) => (
+    <DynamicHelp.Api.Consumer>
+        {(value) => {
+            const { ref: modalHelpIntro } = value.registerTargetItem(`${flow}-${item}`);
+            value.triggerFlow(flow);
+            return <div ref={modalHelpIntro}>{children}</div>;
+        }}
+    </DynamicHelp.Api.Consumer>
+);
diff --git a/src/views/Play/Play.tsx b/src/views/Play/Play.tsx
@@ -61,6 +61,14 @@ import { ModalContext, ModalTypes } from "@/components/Modal/ModalContext";
 
 const CHALLENGE_LIST_FREEZE_PERIOD = 1000; // Freeze challenge list for this period while they move their mouse on it
 
+const handleComputerChallengeClick = (showModal: (type: ModalTypes, props?: any) => void) => {
+    if (bot_count() === 0) {
+        void alert.fire(_("Sorry, all bots seem to be offline, please try again later."));
+        return;
+    }
+    showModal(ModalTypes.Challenge);
+};
+
 interface PlayState {
     live_list: Array<Challenge>;
     correspondence_list: Array<Challenge>;
@@ -822,30 +830,18 @@ export class Play extends React.Component<{}, PlayState> {
                         </div>
                         <div className="automatch-row">
                             <ModalContext.Consumer>
-                                {({ showModal }) => {
-                                    return (
-                                        <button
-                                            className="primary"
-                                            onClick={() => {
-                                                if (bot_count() === 0) {
-                                                    void alert.fire(
-                                                        _(
-                                                            "Sorry, all bots seem to be offline, please try again later.",
-                                                        ),
-                                                    );
-                                                    return;
-                                                }
-                                                showModal(ModalTypes.Challenge);
-                                            }}
-                                            disabled={anon || warned}
-                                        >
-                                            <div className="play-button-text-root">
-                                                <i className="fa fa-desktop" /> {_("Computer")}
-                                                <span className="time-per-move"></span>
-                                            </div>
-                                        </button>
-                                    );
-                                }}
+                                {({ showModal }) => (
+                                    <button
+                                        className="primary"
+                                        onClick={() => handleComputerChallengeClick(showModal)}
+                                        disabled={anon || warned}
+                                    >
+                                        <div className="play-button-text-root">
+                                            <i className="fa fa-desktop" /> {_("Computer")}
+                                            <span className="time-per-move"></span>
+                                        </div>
+                                    </button>
+                                )}
                             </ModalContext.Consumer>
                             <button
                                 className="primary"