move common useQuery definitions into their own file

Psiphon-Inc · Sep 24, 2024 · 2d1d3a0 · 2d1d3a0
1 parent f661dba
commit 2d1d3a0
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 285 deletions.
diff --git a/src/components/ConduitOrbToggle.tsx b/src/components/ConduitOrbToggle.tsx
@@ -30,16 +30,17 @@ import {
 } from "react-native-reanimated";
 
 import { useInProxyContext } from "@/src/inproxy/context";
+import {
+    useInProxyCurrentConnectedClients,
+    useInProxyStatus,
+} from "@/src/inproxy/hooks";
 import { palette, sharedStyles as ss } from "@/src/styles";
 
 export function ConduitOrbToggle({ size }: { size: number }) {
     const { t } = useTranslation();
-    const {
-        toggleInProxy,
-        getInProxyStatus,
-        useInProxyCurrentConnectedClients,
-    } = useInProxyContext();
+    const { toggleInProxy } = useInProxyContext();
 
+    const { data: inProxyStatus } = useInProxyStatus();
     const { data: inProxyCurrentConnectedClients } =
         useInProxyCurrentConnectedClients();
 
@@ -142,7 +143,6 @@ export function ConduitOrbToggle({ size }: { size: number }) {
     // play in initial animation and video
     const [showVideo, setShowVideo] = React.useState(false);
     React.useEffect(() => {
-        const inProxyStatus = getInProxyStatus();
         if (inProxyStatus === "RUNNING") {
             // Already Running: play intro animation without delay
             setShowVideo(false);
@@ -153,11 +153,10 @@ export function ConduitOrbToggle({ size }: { size: number }) {
             animateIntro(2800);
         }
         // implicit do nothing if status is unknown
-    }, [getInProxyStatus]);
+    }, [inProxyStatus]);
 
     // set animation state based on InProxy state
     React.useEffect(() => {
-        const inProxyStatus = getInProxyStatus();
         if (inProxyStatus === "RUNNING") {
             if (inProxyCurrentConnectedClients === 0) {
                 if (animationState !== "announcing") {
@@ -179,7 +178,7 @@ export function ConduitOrbToggle({ size }: { size: number }) {
             }
         }
         // implicit do nothing if status is unknown
-    }, [getInProxyStatus, inProxyCurrentConnectedClients]);
+    }, [inProxyStatus, inProxyCurrentConnectedClients]);
 
     const buttonGradientColours = useDerivedValue(() => {
         return [

diff --git a/src/components/ConduitSettings.tsx b/src/components/ConduitSettings.tsx
@@ -33,6 +33,7 @@ import { EditableNumberSlider } from "@/src/components/EditableNumberSlider";
 import { NotificationsStatus } from "@/src/components/NotificationsStatus";
 import { ProxyID } from "@/src/components/ProxyID";
 import { useInProxyContext } from "@/src/inproxy/context";
+import { useInProxyStatus } from "@/src/inproxy/hooks";
 import { InProxyParametersSchema } from "@/src/inproxy/types";
 import { getProxyId } from "@/src/inproxy/utils";
 import { lineItemStyle, palette, sharedStyles as ss } from "@/src/styles";
@@ -46,12 +47,10 @@ export function ConduitSettings() {
     const { t } = useTranslation();
     const win = useWindowDimensions();
     const { conduitKeyPair } = useAccountContext();
-    const {
-        inProxyParameters,
-        selectInProxyParameters,
-        getInProxyStatus,
-        sendFeedback,
-    } = useInProxyContext();
+    const { inProxyParameters, selectInProxyParameters, sendFeedback } =
+        useInProxyContext();
+
+    const { data: inProxyStatus } = useInProxyStatus();
 
     const [modalOpen, setModalOpen] = React.useState(false);
     const [sendDiagnosticIcon, setSendDiagnosticIcon] = React.useState(
@@ -128,7 +127,7 @@ export function ConduitSettings() {
             settingsChanged = true;
         }
         if (settingsChanged) {
-            if (getInProxyStatus() === "RUNNING") {
+            if (inProxyStatus === "RUNNING") {
                 setDisplayRestartConfirmation(true);
             } else {
                 await commitChanges();
@@ -344,7 +343,6 @@ export function ConduitSettings() {
     // fadeIn on first load
     const fadeIn = useSharedValue(0);
     React.useEffect(() => {
-        const inProxyStatus = getInProxyStatus();
         if (inProxyStatus === "RUNNING") {
             // fade in right away
             fadeIn.value = withTiming(1, { duration: 2000 });
@@ -353,7 +351,7 @@ export function ConduitSettings() {
             fadeIn.value = withDelay(2800, withTiming(1, { duration: 2000 }));
         }
         // implicit do nothing on status unknown
-    }, [getInProxyStatus]);
+    }, [inProxyStatus]);
 
     const settingsIconSvg = useSVG(require("@/assets/images/settings.svg"));
     const settingsIconSize = win.width * 0.2;

diff --git a/src/components/ConduitStatus.tsx b/src/components/ConduitStatus.tsx
@@ -11,10 +11,15 @@ import {
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
-import { useSharedValue, withDelay, withTiming } from "react-native-reanimated";
+import { useSharedValue, withTiming } from "react-native-reanimated";
 
 import { niceBytes } from "@/src/common/utils";
-import { useInProxyContext } from "@/src/inproxy/context";
+import {
+    useInProxyCurrentConnectedClients,
+    useInProxyCurrentConnectingClients,
+    useInProxyStatus,
+    useInProxyTotalBytesTransferred,
+} from "@/src/inproxy/hooks";
 import { palette, sharedStyles as ss } from "@/src/styles";
 
 export function ConduitStatus({
@@ -25,13 +30,8 @@ export function ConduitStatus({
     height: number;
 }) {
     const { t } = useTranslation();
-    const {
-        useInProxyCurrentConnectedClients,
-        useInProxyCurrentConnectingClients,
-        useInProxyTotalBytesTransferred,
-        getInProxyStatus,
-    } = useInProxyContext();
 
+    const { data: inProxyStatus } = useInProxyStatus();
     const { data: connectedPeers } = useInProxyCurrentConnectedClients();
     const { data: connectingPeers } = useInProxyCurrentConnectingClients();
     const { data: totalBytesTransferred } = useInProxyTotalBytesTransferred();
@@ -48,27 +48,11 @@ export function ConduitStatus({
         niceBytes: niceBytes(totalBytesTransferred),
     });
 
-    // fade in gradient on initial render
-    const fadeInGradient = useSharedValue(0);
-    React.useEffect(() => {
-        const inProxyStatus = getInProxyStatus();
-        if (inProxyStatus === "RUNNING") {
-            fadeInGradient.value = withTiming(1, { duration: 2000 });
-        } else if (inProxyStatus === "STOPPED") {
-            fadeInGradient.value = withDelay(
-                2800,
-                withTiming(1, { duration: 2000 }),
-            );
-        }
-        // implicitly do nothing on status unknown
-    }, [getInProxyStatus]);
-
-    // will fade in text when conduit is running
+    // will fade in when conduit is running
     const fader = useSharedValue(0);
     const [shouldAnimateIn, setShouldAnimateIn] = React.useState(true);
     const [shouldAnimateOut, setShouldAnimateOut] = React.useState(true);
     React.useEffect(() => {
-        const inProxyStatus = getInProxyStatus();
         if (inProxyStatus === "RUNNING") {
             if (shouldAnimateIn) {
                 fader.value = withTiming(1, { duration: 1000 });
@@ -83,7 +67,7 @@ export function ConduitStatus({
             }
         }
         // implicit do nothing if inProxyStatus is "unknown"
-    }, [getInProxyStatus]);
+    }, [inProxyStatus]);
 
     const font = useFont(require("@/assets/fonts/SpaceMono-Regular.ttf"), 20);
     if (!font) {
@@ -115,13 +99,7 @@ export function ConduitStatus({
             ]}
         >
             <Canvas style={[ss.flex]}>
-                <Rect
-                    x={0}
-                    y={0}
-                    width={width}
-                    height={height}
-                    opacity={fadeInGradient}
-                >
+                <Rect x={0} y={0} width={width} height={height} opacity={fader}>
                     <LinearGradient
                         start={vec(width / 2, 0)}
                         end={vec(width / 2, height)}

diff --git a/src/components/LogoWordmark.tsx b/src/components/LogoWordmark.tsx
@@ -21,8 +21,7 @@ import {
 
 // @ts-ignore (this file is gitignored)
 import { GIT_HASH } from "@/src/git-hash";
-//import { useInProxyContext } from "@/src/inproxy/mockContext";
-import { useInProxyContext } from "@/src/inproxy/context";
+import { useInProxyStatus } from "@/src/inproxy/hooks";
 import { palette, sharedStyles as ss } from "@/src/styles";
 
 export function LogoWordmark({
@@ -32,7 +31,8 @@ export function LogoWordmark({
     width: number;
     height: number;
 }) {
-    const { getInProxyStatus } = useInProxyContext();
+    const { data: inProxyStatus } = useInProxyStatus();
+
     const conduitFlowerSvg = useSVG(
         require("@/assets/images/conduit-flower-icon.svg"),
     );
@@ -43,7 +43,6 @@ export function LogoWordmark({
     // fadeIn on first load
     const fadeIn = useSharedValue(0);
     React.useEffect(() => {
-        const inProxyStatus = getInProxyStatus();
         if (inProxyStatus === "RUNNING") {
             // fade in right away
             fadeIn.value = withTiming(1, { duration: 2000 });
@@ -52,7 +51,7 @@ export function LogoWordmark({
             fadeIn.value = withDelay(2800, withTiming(1, { duration: 2000 }));
         }
         // implicit do nothing on status unknown
-    }, [getInProxyStatus]);
+    }, [inProxyStatus]);
 
     const opacityMatrix = useDerivedValue(() => {
         // prettier-ignore

diff --git a/src/inproxy/hooks.tsx b/src/inproxy/hooks.tsx
@@ -0,0 +1,56 @@
+import { DefinedUseQueryResult, useQuery } from "@tanstack/react-query";
+
+import {
+    InProxyActivityByPeriod,
+    InProxyStatusEnum,
+} from "@/src/inproxy/types";
+import { getZeroedInProxyActivityStats } from "@/src/inproxy/utils";
+
+// These useQuery hooks are used to cache the data emitted by the ConduitModule.
+// Note that each queryFn is an empty function, this is because the data cached
+// is controlled by the InProxyContext. Anything the ConduitModule emits that we
+// want to track or share throughout the app should have an associated hook.
+
+export const useInProxyStatus = (): DefinedUseQueryResult<InProxyStatusEnum> =>
+    useQuery({
+        queryKey: ["inProxyStatus"],
+        queryFn: () => undefined,
+        initialData: "UNKNOWN",
+        enabled: false,
+    });
+
+export const useInProxyActivityBy1000ms =
+    (): DefinedUseQueryResult<InProxyActivityByPeriod> =>
+        useQuery({
+            queryKey: ["inProxyActivityBy1000ms"],
+            queryFn: () => undefined,
+            initialData: getZeroedInProxyActivityStats().dataByPeriod["1000ms"],
+            enabled: false,
+        });
+
+export const useInProxyCurrentConnectedClients =
+    (): DefinedUseQueryResult<number> =>
+        useQuery({
+            queryKey: ["inProxyCurrentConnectedClients"],
+            queryFn: () => undefined,
+            initialData: 0,
+            enabled: false,
+        });
+
+export const useInProxyCurrentConnectingClients =
+    (): DefinedUseQueryResult<number> =>
+        useQuery({
+            queryKey: ["inProxyCurrentConnectingClients"],
+            queryFn: () => undefined,
+            initialData: 0,
+            enabled: false,
+        });
+
+export const useInProxyTotalBytesTransferred =
+    (): DefinedUseQueryResult<number> =>
+        useQuery({
+            queryKey: ["inProxyTotalBytesTransferred"],
+            queryFn: () => undefined,
+            initialData: 0,
+            enabled: false,
+        });