Merge pull request #2806 from GreenAsJade/turn_off_rdh_on_mobile

Provide `isDesktop` hook, use it to turn of RDH on not-desktop

src/components/OgsHelpProvider/OgsHelpProvider.tsx

@@ -24,6 +24,7 @@ import * as data from "data";
 
 import { HelpProvider, HelpPopupDictionary } from "react-dynamic-help";
 import * as DynamicHelp from "react-dynamic-help";
+import { useIsDesktop, useUser } from "hooks";
 
 const helpPopupDictionary: HelpPopupDictionary = {
     "Skip this topic": pgettext("A button to dismiss a help popup topic", "Skip this topic"),
@@ -39,10 +40,13 @@ type OgsHelpProviderProps = {
  */
 
 export function OgsHelpProvider(props: OgsHelpProviderProps): JSX.Element {
+    // RDH needs work to support mobile layouts
+    const isDesktop = useIsDesktop();
+
     const [storageLoaded, setStorageLoaded] = React.useState(false);
 
     const debugDynamicHelp = data.get("debug-dynamic-help", false);
-    const user = data.get("config.user");
+    const user = useUser();
 
     // Make help system use our server-based storage, to achieve logged-in-user-specific help state.
 
@@ -82,7 +86,7 @@ export function OgsHelpProvider(props: OgsHelpProviderProps): JSX.Element {
         <HelpProvider
             dictionary={helpPopupDictionary}
             storageApi={dynamicHelpStorage}
-            storageReady={storageLoaded}
+            storageReady={storageLoaded && isDesktop} // hack to turn it off for mobile
             debug={debugDynamicHelp}
         >
             {props.children}

src/lib/hooks.ts

@@ -69,3 +69,19 @@ export function useRefresh(): () => void {
 export function useMainGoban(): Goban | null {
     return (window as any)["global_goban"];
 }
+
+export const useIsDesktop = () => {
+    const [isDesktop, setIsDesktop] = React.useState(true);
+
+    React.useEffect(() => {
+        const mediaQuery = window.matchMedia("(min-width: 850px)");
+        const handleResize = () => setIsDesktop(mediaQuery.matches);
+
+        handleResize(); // Check on mount
+        mediaQuery.addEventListener("change", handleResize); // Listen for changes
+
+        return () => mediaQuery.removeEventListener("change", handleResize);
+    }, []);
+
+    return isDesktop;
+};