frontend client for gemstone. decentralised workplace app
feat: debug provider
+38
-4
+5
-1
src/components/primitives/Stack.tsx
+5
-1
src/components/primitives/Stack.tsx
···
1
+
import { isDevMode } from "@/lib/utils/env";
2
+
import { useDebugState } from "@/providers/DebugProvider";
1
3
import { Stack as ExpoStack } from "expo-router";
2
4
3
5
export const Stack = () => {
4
-
return <ExpoStack screenOptions={{ headerShown: false }} />;
6
+
const debugValue = useDebugState();
7
+
const { showStackHeader } = debugValue;
8
+
return <ExpoStack screenOptions={{ headerShown: showStackHeader }} />;
5
9
};
+29
src/providers/DebugProvider.tsx
+29
src/providers/DebugProvider.tsx
···
1
+
import { isDevMode } from "@/lib/utils/env";
2
+
import type { Dispatch, ReactNode, SetStateAction } from "react";
3
+
import { createContext, useContext, useState } from "react";
4
+
5
+
interface DebugContextValue {
6
+
showStackHeader: boolean;
7
+
setShowStackHeader: Dispatch<SetStateAction<boolean>>;
8
+
}
9
+
10
+
const DebugContext = createContext<DebugContextValue | null>(null);
11
+
12
+
export const useDebugState = () => {
13
+
const value = useContext(DebugContext);
14
+
if (value === null)
15
+
throw new Error(
16
+
"Debug provider failed to initialise. Did you access this out of tree somehow? Tried to access debug value before it was initialised.",
17
+
);
18
+
return value;
19
+
};
20
+
21
+
export const DebugProvider = ({ children }: { children: ReactNode }) => {
22
+
const [showStackHeader, setShowStackHeader] = useState(isDevMode);
23
+
24
+
const value: DebugContextValue = {
25
+
showStackHeader,
26
+
setShowStackHeader,
27
+
};
28
+
return <DebugContext value={value}>{children}</DebugContext>;
29
+
};
+4
-3
src/providers/index.tsx
+4
-3
src/providers/index.tsx
···
1
+
import { DebugProvider } from "@/providers/DebugProvider";
1
2
import { OAuthProvider } from "@/providers/OAuthProvider";
2
3
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
3
4
import type { ReactNode } from "react";
···
6
7
7
8
export const RootProviders = ({ children }: { children: ReactNode }) => {
8
9
return (
9
-
<OAuthProvider>
10
+
<DebugProvider>
10
11
<QueryClientProvider client={queryClient}>
11
-
{children}
12
+
<OAuthProvider>{children}</OAuthProvider>
12
13
</QueryClientProvider>
13
-
</OAuthProvider>
14
+
</DebugProvider>
14
15
);
15
16
};