move folders etc, need to solve app import issue

src/graphql/client.tsx

@@ -0,0 +1,81 @@
+import {
+	ApolloClient,
+	ApolloLink,
+	ApolloProvider,
+	HttpLink,
+	InMemoryCache,
+	from,
+} from "@apollo/client";
+
+import React, {
+	ReactNode,
+	createContext,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
+
+import { API_URI } from "@env";
+
+type Props = {
+	children: ReactNode;
+};
+
+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: "" });
+	console.log(`The api uri is ${API_URI}`);
+	const httpLink = new HttpLink({
+		uri: API_URI,
+	});
+	const cache = new InMemoryCache({});
+
+	const authMiddleware = new ApolloLink((operation, forward) => {
+		const { key, value } = authHeader;
+		console.log("Auth Key", key, "Value", value);
+		if (key && value) {
+			operation.setContext({
+				headers: {
+					[key]: value,
+				},
+			});
+		}
+
+		return forward(operation);
+	});
+
+	// 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],
+	);
+
+	return (
+		<AuthHeaderContext.Provider value={{ authHeader, setAuthHeader }}>
+			<ApolloProvider client={client}>{children}</ApolloProvider>
+		</AuthHeaderContext.Provider>
+	);
+};

src/graphql/filter.ts

@@ -0,0 +1,31 @@
+type BaseFilter = {
+	createVars: () => { [key: string]: any };
+};
+
+function createBaseFilter(key: string, content: any): BaseFilter {
+	return {
+		createVars: () => ({ [key]: content }),
+	};
+}
+
+export function createAndFilter(filters: Array<BaseFilter>): BaseFilter {
+	const filterVars = filters.map((filter) => filter.createVars());
+	return createBaseFilter("andFilters", { filters: filterVars });
+}
+
+export function createCategoryFilter(
+	feature: string,
+	value: string,
+): BaseFilter {
+	const content = { [feature]: { value } };
+	return createBaseFilter(feature, content);
+}
+
+export function createRangeFilter(
+	feature: string,
+	greaterThanEqualTo: number,
+	lessThan: number,
+): BaseFilter {
+	const content = { greaterThanEqualTo, lessThan };
+	return createBaseFilter(feature, content);
+}

src/graphql/query.ts

@@ -0,0 +1,34 @@
+import { gql } from "@apollo/client";
+
+export const GET_SHOTS = gql`
+	query GetShots(
+		$filterInput: FilterInput
+		$includeCueObjectDistance: Boolean! = false
+		$includeCueObjectAngle: Boolean! = false
+		$includeCueBallSpeed: Boolean! = false
+		$includeShotDirection: Boolean! = false
+		$includeTargetPocketDistance: Boolean! = false
+		$includeMake: Boolean! = false
+		$includeIntendedPocketType: Boolean! = false
+	) {
+		getShots(filterInput: $filterInput) {
+			id
+			videoId
+			startFrame
+			endFrame
+			createdAt
+			updatedAt
+			cueObjectFeatures {
+				cueObjectDistance @include(if: $includeCueObjectDistance)
+				cueObjectAngle @include(if: $includeCueObjectAngle)
+				cueBallSpeed @include(if: $includeCueBallSpeed)
+				shotDirection @include(if: $includeShotDirection)
+			}
+			pocketingIntentionFeatures {
+				targetPocketDistance @include(if: $includeTargetPocketDistance)
+				make @include(if: $includeMake)
+				intendedPocketType @include(if: $includeIntendedPocketType)
+			}
+		}
+	}
+`;