Merge pull request 'ivan/add-dev-auth' (#81) from ivan/add-dev-auth into master

Reviewed-on: railbird/rn-playground#81

.editorconfig

@@ -1,9 +1,17 @@
 root = true
 
+[*.tsx]
+indent_style = tab
+indent_size = 2
+
+[*.ts]
+indent_style = tab
+indent_size = 2
+
 [*.json]
 end_of_line = lf
 charset = utf-8
-indent_style = space
+indent_style = tab
 indent_size =  2
 trim_trailing_whitespace = true
 insert_final_newline = true

App.tsx

@@ -1,10 +1,24 @@
 import React from "react";
 import AppNavigator from "./navigation/app-navigator";
-import ClientProvider from "./graphql/client";
+import { ClientProvider, useAuthHeader } from "./graphql/client";
+import { DEV_USER_ID } from "@env";
+
+const SetAuthHeaderBasedOnEnv = () => {
+	const { setAuthHeader } = useAuthHeader();
+
+	React.useEffect(() => {
+		if (DEV_USER_ID) {
+			setAuthHeader({ key: "user_id", value: DEV_USER_ID });
+		}
+	}, [setAuthHeader]);
+
+	return null;
+};
 
 const App: React.FC = () => {
 	return (
 		<ClientProvider>
+			<SetAuthHeaderBasedOnEnv />
 			<AppNavigator />
 		</ClientProvider>
 	);

env.d.tsx

@@ -1,3 +1,4 @@
 declare module "@env" {
 	export const API_URI: string;
+	export const DEV_USER_ID: string;
 }

graphql/client.tsx

@@ -1,6 +1,13 @@
-import React, { ReactNode } from "react";
+import React, {
+	ReactNode,
+	createContext,
+	useContext,
+	useState,
+	useMemo,
+} from "react";
 import {
 	ApolloClient,
+	ApolloLink,
 	InMemoryCache,
 	ApolloProvider,
 	HttpLink,
@@ -12,18 +19,60 @@ type Props = {
 	children: ReactNode;
 };
 
-const ClientProvider: React.FC<Props> = ({ children }) => {
+export const AuthHeaderContext = createContext<
+	| {
+			authHeader: { key: string; value: string };
+			setAuthHeader: React.Dispatch<
+				React.SetStateAction<{ key: string; value: string }>
+			>;
+	  }
+	| undefined
+>(undefined);
+
+// Hook to use the auth header context
+export const useAuthHeader = () => {
+	const context = useContext(AuthHeaderContext);
+	if (!context) {
+		throw new Error("useAuthHeader must be used within a ClientProvider");
+	}
+	return context;
+};
+
+export const ClientProvider: React.FC<Props> = ({ children }) => {
+	const [authHeader, setAuthHeader] = useState({ key: "", value: "" });
 	const httpLink = new HttpLink({
-		uri: API_URI,
+		uri: API_URI || "https://api-dev.railbird.ai/graphql",
 	});
 	const cache = new InMemoryCache({});
 
-	const client = new ApolloClient({
-		link: from([httpLink]),
-		cache: cache,
+	const authMiddleware = new ApolloLink((operation, forward) => {
+		const { key, value } = authHeader;
+
+		if (key && value) {
+			operation.setContext({
+				headers: {
+					[key]: value,
+				},
+			});
+		}
+
+		return forward(operation);
 	});
 
-	return <ApolloProvider client={client}>{children}</ApolloProvider>;
-};
+	// We use useMemo to avoid recreating the client on every render
+	const client = useMemo(
+		() =>
+			new ApolloClient({
+				// Chain the middleware with the httpLink
+				link: from([authMiddleware, httpLink]),
+				cache: new InMemoryCache(),
+			}),
+		[authHeader],
+	);
 
-export default ClientProvider;
+	return (
+		<AuthHeaderContext.Provider value={{ authHeader, setAuthHeader }}>
+			<ApolloProvider client={client}>{children}</ApolloProvider>
+		</AuthHeaderContext.Provider>
+	);
+};

package.json

@@ -59,7 +59,6 @@
 		"typescript": "^5.3.3"
 	},
 	"devDependencies": {
-    "typescript": "^5.3.3",
 		"@babel/core": "^7.20.0",
 		"@react-native/metro-config": "^0.72.9",
 		"@testing-library/jest-native": "^5.4.3",
@@ -68,7 +67,9 @@
 		"@types/jest": "^29.5.11",
 		"@types/react-native-svg-charts": "^5.0.16",
 		"eslint-config-prettier": "^9.1.0",
-    "metro-react-native-babel-preset": "^0.77.0"
+		"metro-react-native-babel-preset": "^0.77.0",
+		"prettier-plugin-organize-imports": "^3.2.4",
+		"typescript": "^5.3.3"
 	},
 	"private": true
 }

react-native-vision-camera

@@ -1 +1 @@
-Subproject commit fb425458904eb240466768be08352973fd2f78d8
+Subproject commit 0e05fc314fb759ec0944bf09c07aba9ad753fc2b